/* nueralhook design system — encodes researched principles
   (1.25 type scale · 66ch measure · 8px grid · 60-30-10 · flat hairlines) */
:root{
  /* palette — 60 cream / 30 green / 10 rust */
  --cream:#F5F1E8; --cream-2:#EDE7D6; --paper:#FFFFFF;
  --ink:#0D3B2E; --ink-2:#14533E; --muted:#5A6B63;
  --accent:#B5371E; --accent-soft:#FBEDE9;
  --line:rgba(13,59,46,0.12); --line-2:rgba(13,59,46,0.07);
  --ok:#16744A; --warn:#B5371E;
  /* type scale — 1.25 (major third), base 16 */
  --fs-label:0.6875rem;  /* 11 */
  --fs-sm:0.875rem;      /* 14 */
  --fs-base:1.125rem;    /* 18 body */
  --fs-lg:1.25rem;       /* 20 */
  --fs-xl:1.5625rem;     /* 25 */
  --fs-2xl:1.953rem;     /* 31 */
  --fs-3xl:2.44rem;      /* 39 */
  --fs-4xl:3.05rem;      /* 49 */
  /* spacing — 8px grid */
  --s1:0.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem;
  --r-card:20px; --r-pill:999px; --r-field:12px;
  /* one float shadow (dropdown + sticky nav only) */
  --shadow-float:0 2px 4px rgba(13,59,46,.06), 0 16px 36px -12px rgba(13,59,46,.30);
}
*{box-sizing:border-box;font-feature-settings:"ss01" on,"cv11" on;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{background:var(--cream);}
body{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-base);line-height:1.6;color:var(--ink);overflow-x:hidden;}
@media (max-width:640px){ body{font-size:1rem;} }

/* type */
.display{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.02em;line-height:1.08;}
.display-i{font-family:'Fraunces',serif;font-style:italic;font-weight:600;letter-spacing:-0.02em;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.tnum{font-variant-numeric:tabular-nums;}
.measure{max-width:66ch;}            /* the readability lever */
.h1{font-size:clamp(2.3rem,6vw,var(--fs-4xl));}
.h2{font-size:clamp(1.8rem,4vw,var(--fs-3xl));}
.h3{font-size:var(--fs-xl);}
.lead{font-size:var(--fs-lg);color:#33403a;}
.dim{color:var(--muted);}
.accent{color:var(--accent);}
a{color:inherit;}

/* layout */
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem;}
.wrap-narrow{max-width:46rem;margin:0 auto;padding:0 1.5rem;}
.section{padding:var(--s7) 0;}        /* big section rhythm */
@media (max-width:640px){ .section{padding:var(--s6) 0;} }
.rule{border:0;border-top:1px solid var(--line);}
.bg-2{background:var(--cream-2);}
.bg-ink{background:var(--ink);color:var(--cream);}

/* buttons — rust reserved for THE action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--r-pill);
  font-weight:700;font-size:1rem;line-height:1;padding:.95rem 1.5rem;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:#9c2f19;transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(181,55,30,.6);}
.btn-primary{background:var(--ink);color:var(--cream);}
.btn-primary:hover{background:var(--ink-2);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{background:var(--cream-2);}
.btn-cream{background:var(--cream);color:var(--ink);}
.btn-cream:hover{background:#fff;transform:translateY(-1px);}

/* cards — flat hairline, no content shadow */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);}
.lift{transition:transform .2s ease,border-color .2s ease;}
.lift:hover{transform:translateY(-2px);border-color:rgba(13,59,46,.22);}
.tag{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);background:var(--paper);border-radius:var(--r-pill);padding:.45rem .85rem;text-decoration:none;}

/* browser frame */
.frame{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.frame-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);background:var(--cream);}
.frame-url{flex:1;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:.3rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* form field */
.field{font:inherit;font-size:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-field);
  padding:.9rem 1rem;color:var(--ink);width:100%;outline:none;transition:border-color .15s,box-shadow .15s;}
.field:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,59,46,.12);}
.field::placeholder{color:#939d97;}

/* callout (rust-bordered, for the one stat) */
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;
  padding:1rem 1.25rem;color:#5a2418;font-size:var(--fs-sm);}
.callout strong{color:var(--accent);}

/* score bars — grade + word + bar, never color alone */
.score-row{display:grid;grid-template-columns:7.5rem 1fr auto;align-items:center;gap:1rem;padding:.55rem 0;}
.score-track{height:8px;border-radius:999px;background:var(--cream-2);overflow:hidden;}
.score-fill{height:100%;border-radius:999px;}
.score-val{font-weight:800;font-variant-numeric:tabular-nums;width:5.5rem;text-align:right;font-size:var(--fs-sm);}
@media (max-width:640px){ .score-row{grid-template-columns:5rem 1fr auto;gap:.6rem;} .score-val{width:auto;} }

/* sticky table of contents */
.toc{position:sticky;top:5.5rem;font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);}
.toc a{display:block;padding:.35rem 0 .35rem .9rem;border-left:2px solid var(--line);color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s;}
.toc a:hover{color:var(--ink);}
.toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600;}

/* sticky mobile CTA bar */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(245,241,232,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);}
.mobilebar .btn{width:100%;min-height:52px;}
@media (max-width:768px){ .mobilebar{display:block;} body{padding-bottom:5rem;} }

/* SEARCH combobox */
.search{position:relative;}
.search-input-wrap{display:flex;align-items:center;gap:.5rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.2rem .3rem .2rem 1.1rem;transition:border-color .15s,box-shadow .15s;}
.search-input-wrap:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,59,46,.12);}
.search-input{flex:1;border:0;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:.7rem 0;}
.search-input::placeholder{color:#939d97;}
.search-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r-pill);
  background:var(--ink);color:var(--cream);cursor:pointer;transition:background .2s;}
.search-btn:hover{background:var(--ink-2);}
.search-pop{position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:30;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-float);overflow:hidden;display:none;}
.search-pop.open{display:block;}
.search-opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;text-decoration:none;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line-2);}
.search-opt:last-child{border-bottom:0;}
.search-opt[aria-selected="true"],.search-opt:hover{background:var(--cream);}
.search-opt .cat{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.search-foot{padding:.6rem 1rem;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--muted);background:var(--cream);border-top:1px solid var(--line);}
mark{background:transparent;color:var(--accent);font-weight:700;padding:0;}

/* reveal — visible by default, JS-gated */
.reveal{opacity:1;transform:none;}
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
html.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} html.js .reveal{opacity:1;transform:none;transition:none;}
  .btn,.lift{transition:none;}
}
.prose > * + *{margin-top:1.15em;}
.prose p{margin:0;}