:root{
  /* dark "radiograph / angiogram lightbox" theme */
  --paper:#141110;        /* warm near-black ground */
  --paper-soft:#1C1714;   /* recessed bands */
  --paper-bright:#241E1A;  /* raised surfaces / panels */
  --ink:#ECE4D6;          /* warm off-white body text */
  --ink-soft:#B4AA98;
  --ink-dim:#9C9180;
  --crimson:#E23E4E;      /* arterial, brightened to glow on black */
  --oxblood:#9C3347;      /* venous / depleted */
  --slate:#9691A2;        /* hypoxic */
  --oxygen:#4D9BD1;       /* oxygen / data, brightened */
  --oxygen-soft:#6FB4E0;
  --ochre:#D69A3A;        /* caution */
  --rule:rgba(236,228,214,.12);
  --rule-strong:rgba(236,228,214,.26);

  --serif:"Literata", Georgia, serif;
  --read:"Literata", Georgia, serif;
  --label:"Inter Tight", system-ui, sans-serif;

  --measure:64ch;
  --gutter:clamp(20px,5vw,80px);
  --paper-rgb:20,17,16;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* desktop fine-pointer: the left chapter rail replaces the native scrollbar; mobile and touch keep theirs */
@media (min-width:861px) and (pointer:fine){ html{ scrollbar-width:none; -ms-overflow-style:none; scrollbar-gutter:stable; } html::-webkit-scrollbar{ width:0; height:0; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--read); font-optical-sizing:auto;
  font-size:1.16rem; line-height:1.62; font-weight:440;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
p{ margin:0 0 1.05em; max-width:var(--measure); text-wrap:pretty; }
em{ font-style:italic; }
strong{ font-weight:600; }
a{ color:var(--crimson); text-decoration:none; border-bottom:1px solid rgba(192,24,43,.35); }
a:hover{ border-color:var(--crimson); }
h1,h2,h3{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; }

/* ---------- fixed overlays ---------- */
#grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* chapter rail: clickable section markers down the left edge */
#chapters{ position:fixed; right:max(10px,1.8vw); top:14vh; bottom:14vh; width:16px; z-index:40; pointer-events:none; }
#chapters::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:1px; background:var(--rule); transition:width .18s, background .18s; }
#chapters a{ position:absolute; left:50%; transform:translateX(-50%); width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--rule-strong); pointer-events:auto; cursor:pointer; transition:background .2s, transform .2s; z-index:2; }
#chapters a:hover{ background:var(--ink-soft); transform:translateX(-50%) scale(1.5); }
#chapters a.active{ background:var(--crimson); box-shadow:0 0 7px rgba(226,62,78,.6); transform:translateX(-50%) scale(1.45); }
#chapters a::after{ content:attr(data-label); position:absolute; right:15px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--label); font-size:.72rem; letter-spacing:.02em; color:var(--ink-soft); background:rgba(var(--paper-rgb),.92); padding:3px 8px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .18s; }
#chapters a:hover::after{ opacity:1; }
#chapters::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%) scaleY(var(--scroll,0)); transform-origin:top center; background:var(--fill,var(--crimson)); box-shadow:0 0 7px rgba(226,62,78,.55); transition:width .18s; will-change:transform; pointer-events:none; }
#chapters a.passed{ background:var(--crimson); opacity:.5; }
#chapters .scrub{ position:absolute; top:0; bottom:0; left:50%; width:20px; transform:translateX(-50%); pointer-events:auto; cursor:grab; touch-action:none; }
#chapters.scrubbing .scrub{ cursor:grabbing; }
#chapters.scrubbing::after{ box-shadow:0 0 12px rgba(226,62,78,.85); }
#chapters:hover::before{ width:2px; background:var(--rule-strong); }
#chapters:hover::after{ width:2px; }
@media(max-width:860px){ #chapters{ display:none; } }
/* mobile scroll-progress bar (the chapter rail is hidden under 860px) */
#scrollprog{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:66; background:var(--crimson); box-shadow:0 0 8px rgba(226,62,78,.55); display:none; }
@media(max-width:860px){ #scrollprog{ display:block; } }
/* table of contents */
.toc-btn{ position:fixed; top:max(14px,2vh); right:max(18px,2.2vw); z-index:67; font-family:var(--label); font-size:.92rem; font-weight:600;
  color:var(--ink); background:rgba(20,17,16,0.72); border:1px solid var(--rule-strong); border-radius:30px; padding:9px 15px; cursor:pointer; line-height:1;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:inline-flex; align-items:center; gap:7px; }
.toc-btn:hover,.toc-btn:focus-visible{ border-color:var(--crimson); color:#fff; outline:none; }
.toc-btn::after{ content:"\25BE"; font-size:.78em; color:var(--ink-dim); }
.toc-btn[aria-expanded="true"]::after{ color:var(--crimson); }
.toc-panel{ position:fixed; top:calc(max(14px,2vh) + 48px); right:max(18px,2.2vw); z-index:67; width:min(304px,86vw); max-height:76vh; overflow:auto;
  background:rgba(20,17,16,0.97); border:1px solid var(--rule-strong); border-radius:14px; padding:10px; box-shadow:0 18px 52px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.toc-panel[hidden]{ display:none; }
.toc-panel a{ display:block; font-family:var(--label); font-size:.95rem; color:var(--ink-soft); text-decoration:none; border:none; padding:11px 12px; border-radius:8px; line-height:1.25; }
.toc-panel a:hover,.toc-panel a:focus-visible{ background:rgba(236,228,214,.07); color:var(--ink); outline:none; }
.toc-panel a .tnum{ display:inline-block; width:1.8em; color:var(--ink-dim); font-variant-numeric:tabular-nums lining-nums; }
.toc-panel a.toc-shortcut{ color:var(--crimson); font-weight:600; }
.toc-panel .toc-sep{ height:1px; background:var(--rule); margin:7px 6px; }
@media(max-width:680px){ .toc-btn{ top:12px; right:12px; font-size:.86rem; padding:8px 13px; } .toc-panel{ top:54px; right:8px; left:8px; width:auto; } }
#ask-btn{ position:fixed; top:calc(max(14px,2vh) + 52px); right:max(18px,2.2vw); z-index:66; width:36px; height:36px; border-radius:50%; color:var(--ink); background:rgba(20,17,16,0.72); border:1px solid var(--rule-strong); cursor:pointer; line-height:1; font-family:var(--serif); font-size:1.2rem; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:inline-flex; align-items:center; justify-content:center; }
#ask-btn:hover,#ask-btn:focus-visible,#ask-btn[aria-expanded="true"]{ border-color:var(--crimson); color:#fff; outline:none; }
#ask-count{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--crimson); color:#fff; font-family:var(--label); font-size:.62rem; font-weight:600; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(20,17,16,0.92); }
#ask-count[hidden]{ display:none; }
#ask-panel{ position:fixed; top:calc(max(14px,2vh) + 96px); right:max(18px,2.2vw); z-index:66; width:min(366px,86vw); max-height:68vh; overflow:auto; background:rgba(20,17,16,0.97); border:1px solid var(--rule-strong); border-radius:14px; padding:12px 12px 4px; box-shadow:0 18px 52px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#ask-panel[hidden]{ display:none; }
#ask-panel .ask-h{ font-family:var(--label); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-dim); padding:2px 6px 9px; }
#ask-list details{ border-top:1px solid var(--rule); }
#ask-list details:first-child{ border-top:none; }
#ask-list summary{ list-style:none; cursor:pointer; padding:10px 8px; font-family:var(--read); font-size:.9rem; color:var(--ink); line-height:1.35; display:flex; gap:8px; align-items:flex-start; }
#ask-list summary::-webkit-details-marker{ display:none; }
#ask-list summary::before{ content:"\25B8"; color:var(--ink-dim); font-size:.8em; flex:none; margin-top:.2em; transition:transform .15s, color .15s; }
#ask-list details[open] summary::before{ transform:rotate(90deg); color:var(--crimson); }
#ask-list .ask-qt{ flex:1; }
#ask-list .ask-seclabel{ flex:none; font-family:var(--label); font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-dim); align-self:center; white-space:nowrap; }
#ask-list details.ask-far summary{ opacity:.66; }
#ask-list .ask-a{ padding:0 8px 12px 24px; font-family:var(--read); font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
#ask-list .ask-a a{ color:var(--crimson); text-decoration:none; }
.ask-foot{ font-family:var(--read); font-size:.78rem; color:var(--ink-dim); padding:10px 8px 8px; border-top:1px solid var(--rule); margin-top:4px; line-height:1.45; }
.ask-foot a{ color:var(--crimson); text-decoration:none; }
@media(max-width:680px){ #ask-btn{ top:58px; right:12px; } #ask-panel{ top:104px; right:8px; left:8px; width:auto; } }

/* brand wordmark: big in the hero, compact + persistent after you scroll past it */
.hero-brand{ grid-column:2/9; display:inline-flex; align-items:baseline; gap:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,3.8vw,2.5rem); letter-spacing:.04em; color:var(--ink); margin:0 0 clamp(20px,5vh,46px); }
.wordmark{ position:fixed; top:max(14px,2vh); left:max(40px,4.2vw); z-index:65; display:inline-flex; align-items:baseline; gap:0;
  font-family:var(--serif); font-weight:500; font-size:1.18rem; letter-spacing:.03em; color:var(--ink); text-decoration:none; line-height:1;
  padding:7px 15px 8px 13px; border-radius:30px; background:rgba(20,17,16,0.66); border:1px solid var(--rule); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .4s ease, transform .4s ease, color .25s ease; }
.wordmark.show{ opacity:1; transform:none; pointer-events:auto; }
.wordmark:hover{ color:#fff; }
@media(max-width:760px){ .hero-brand{ grid-column:1/13; } }
@media(max-width:680px){ .wordmark{ font-size:1.05rem; top:12px; left:14px; } }
.foot-brand{ grid-column:2/12; font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:.02em; color:var(--ink);
  display:flex; align-items:baseline; gap:0; margin:34px 0 8px; }
@media(max-width:980px){ .foot-brand{ grid-column:1/13; } }
/* the traced vessel-C mark, used as the versal capital in every wordmark */
.wm-mark{ height:0.8em; width:0.8em; display:block; flex:0 0 auto; color:var(--crimson); transform:translateY(0.04em); transform-origin:center; animation:wmPulse2 2.8s ease-in-out infinite; }
.wm-cap{ color:var(--crimson); }
@keyframes wmPulse2{ 0%,100%{ transform:translateY(0.04em) scale(1); } 50%{ transform:translateY(0.04em) scale(1.07); } }
@media(prefers-reduced-motion:reduce){ .wm-mark{ animation:none; } }

/* ---------- layout ---------- */
main{ position:relative; z-index:2; }
section{ position:relative; z-index:2; background:var(--paper); padding:clamp(64px,10vh,140px) 0; }
/* canvas-revealing sections + feathered edges so the world fades in/out (no hard cutoffs) */
section.figure{ background:transparent; }
section.figure::before, section.figure::after{ content:""; position:absolute; left:0; right:0; height:18vh; z-index:1; pointer-events:none; }
section.figure::before{ top:0; background:linear-gradient(var(--paper), rgba(var(--paper-rgb),0)); }
section.figure::after{ bottom:0; background:linear-gradient(rgba(var(--paper-rgb),0), var(--paper)); }

.col{ max-width:1280px; margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(16px,2.5vw,30px); }
.prose{ grid-column:2 / 8; min-width:0; }
.prose.wide{ grid-column:2 / 11; }
.margin-note{ grid-column:9 / 12; font-family:var(--label); font-size:.76rem; line-height:1.55;
  color:var(--ink-dim); border-left:1px solid var(--rule-strong); padding-left:14px; align-self:start; }
.full{ grid-column:2 / 12; min-width:0; }

@media(max-width:980px){
  .prose,.prose.wide,.full{ grid-column:1 / 13; }
  .margin-note{ grid-column:1 / 13; border-left:none; padding-left:0; border-top:1px solid var(--rule); padding-top:12px; margin-top:14px; }
}

.eyebrow{ font-family:var(--label); font-size:.95rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink); margin-bottom:18px; }
h2{ font-size:clamp(1.85rem,4.4vw,2.8rem); line-height:1.08; margin:0 0 .55em; max-width:20ch; }
.lead{ font-size:1.3rem; line-height:1.5; color:var(--ink); max-width:44ch; }
.num-fig{ font-variant-numeric:tabular-nums lining-nums; }
sup.c{ font-variant-position:super; font-size:.62em; line-height:0; }
sup.c a{ color:var(--oxygen-soft); border:none; font-family:var(--label); padding:3px 4px; margin:0 -1px; }
sup.c a:hover{ color:var(--crimson); }

/* ---------- shared figure contracts (one rule, applied everywhere) ---------- */
.fig-note{ font-family:var(--label); font-size:.84rem; line-height:1.55; color:var(--ink-soft);
  letter-spacing:.01em; margin:12px 0 0; max-width:54ch; }
.fig-legend{ display:flex; gap:20px; flex-wrap:wrap; font-family:var(--label); font-size:.76rem; color:var(--ink-soft); }
.fig-legend span{ display:inline-flex; align-items:center; gap:8px; }
/* stat band: a hairline-ruled ledger, not boxed cards (matches the page's .spike-caps / .steel idiom) */
.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule-strong); }
.benefit-grid .bcard{ position:relative; padding:24px 22px 22px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.benefit-grid .bcard:nth-child(4n){ border-right:none; }
.benefit-grid .bnum{ font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5vw,4rem); line-height:.86; letter-spacing:-.02em; color:var(--crimson); font-variant-numeric:tabular-nums lining-nums; }
.benefit-grid .bunit{ font-size:.4em; font-family:var(--label); font-weight:600; color:var(--ink-soft); margin-left:.18em; letter-spacing:.02em; }
.benefit-grid .blab{ font-family:var(--read); font-size:.95rem; line-height:1.46; color:var(--ink-soft); margin-top:13px; max-width:26ch; }
#memory .benefit-grid{ border-left:2px solid var(--crimson); }
#memory .benefit-grid .bcard:first-child{ padding-left:22px; }
#memory .benefit-grid .bcard:last-child .bnum{ color:var(--oxygen); }
.benefit-grid .bkick{ font-family:var(--label); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-dim); margin-bottom:11px; }
#beyond .benefit-grid{ border-left:2px solid var(--crimson); }
#beyond .benefit-grid .bcard:first-child{ padding-left:22px; }
#missed .benefit-grid{ grid-template-columns:repeat(3,1fr); border-left:2px solid var(--crimson); }
#missed .benefit-grid .bcard:first-child{ padding-left:22px; }
#missed .benefit-grid .bcard:last-child{ border-right:none; }
@media(max-width:820px){ #missed .benefit-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ #missed .benefit-grid{ grid-template-columns:1fr; } }
.prose-pull{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.22; color:var(--ink); max-width:26ch; margin:.8em 0 .15em; padding-left:18px; border-left:2px solid var(--crimson); }
.subhead{ font-family:var(--label); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.11em; color:var(--crimson); margin:1.9em 0 .55em; }
.prose .subhead:first-child{ margin-top:0; }
#memory h2{ font-size:clamp(2.2rem,5.6vw,3.6rem); line-height:1.03; letter-spacing:-.012em; max-width:16ch; }
.accord-body h4{ font-family:var(--label); font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; color:var(--crimson); margin:1.5em 0 .45em; font-weight:600; }
.accord-body h4:first-child{ margin-top:.2em; }
@media(max-width:820px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); } .benefit-grid .bcard:nth-child(2n){ border-right:none; } }
@media(max-width:480px){ .benefit-grid{ grid-template-columns:1fr; } .benefit-grid .bcard{ border-right:none; } .benefit-grid .bnum{ font-size:2.7rem; } }
#stair-svg{ width:100%; height:auto; display:block; max-width:820px; margin:0 auto; }
#stair-svg .s-step{ fill:none; stroke:var(--rule-strong); stroke-width:2.4; stroke-linecap:round; }
#stair-svg .s-step--die{ stroke:var(--crimson); stroke-width:2.8; }
#stair-svg .s-riser{ fill:none; stroke:var(--rule-strong); stroke-width:1.6; stroke-opacity:.5; stroke-linecap:round; }
#stair-svg .s-tick{ stroke:var(--ink-dim); stroke-width:1.4; stroke-opacity:.7; }
#stair-svg .s-lab{ font-family:var(--label); font-size:15px; fill:var(--ink); font-weight:600; }
#stair-svg .s-sub{ font-family:var(--read); font-size:13px; fill:var(--ink-soft); }
#stair-svg .s-win{ fill:rgba(226,62,78,.05); stroke:rgba(226,62,78,.28); stroke-width:1; }
#stair-svg .s-winedge{ stroke:var(--crimson); stroke-width:3; stroke-linecap:round; }
#stair-svg .s-wintext{ font-family:var(--label); font-size:14.5px; fill:var(--crimson); font-style:italic; }
#stair-svg .s-axis{ font-family:var(--label); font-size:11px; fill:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase; }
@media(min-width:1280px){ #stair-svg{ max-width:980px; } }
@media(max-width:620px){ #stair-svg .s-lab{ font-size:23px; } #stair-svg .s-sub{ font-size:18px; } #stair-svg .s-wintext{ font-size:21px; } #stair-svg .s-axis{ font-size:17px; } }
@media(max-width:400px){ #stair-svg .s-sub{ font-size:18px; } }
#horm-svg{ width:100%; height:auto; display:block; max-width:840px; margin:0 auto; }
#horm-svg .hx-axis{ stroke:var(--rule-strong); stroke-width:1; }
#horm-svg .hx-tick{ font-family:var(--label); font-size:12px; fill:var(--ink-dim); }
#horm-svg .h-estro{ fill:none; stroke:var(--crimson); stroke-width:3; stroke-linecap:round; }
#horm-svg .h-flow{ fill:none; stroke:var(--oxygen); stroke-width:2.6; stroke-linecap:round; }
#horm-svg .h-flow-dash{ fill:none; stroke:var(--oxygen); stroke-width:2.6; stroke-dasharray:5 5; opacity:.85; }
#horm-svg .h-men{ fill:none; stroke:var(--slate); stroke-width:1.8; opacity:.75; }
#horm-svg .h-band{ fill:rgba(226,62,78,.08); stroke:var(--crimson); stroke-dasharray:4 4; stroke-opacity:.5; stroke-width:1; }
#horm-svg .h-bandlab{ font-family:var(--label); font-size:12px; fill:var(--crimson); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
#horm-svg .h-leg{ font-family:var(--label); font-size:12.5px; fill:var(--ink-soft); }
#horm-svg .h-hit{ font-family:var(--label); font-size:12px; fill:var(--crimson); font-style:italic; }
#horm-svg .h-hitline{ stroke:var(--crimson); stroke-width:1; }
#horm-svg .h-hitdot{ fill:var(--crimson); }
@media(min-width:1280px){ #horm-svg{ max-width:980px; } }
@media(max-width:620px){ #horm-svg .hx-tick,#horm-svg .h-bandlab,#horm-svg .h-hit{ font-size:20px; } #horm-svg .h-leg{ font-size:17px; } }
/* ---------- spectrum dial (merged from page 2) ---------- */
#dist-svg{ width:100%; height:auto; display:block; max-width:760px; margin:0 auto; }
#dist-svg .curve{ fill:none; stroke:rgba(236,228,214,.55); stroke-width:2; }
#dist-svg .band{ opacity:0; transition:opacity .6s ease; }
#dist-svg .band.show{ opacity:1; }
#dist-svg .b1{ fill:var(--ochre); }
#dist-svg .b2{ fill:#C9603F; }
#dist-svg .b3{ fill:var(--crimson); }
#dist-svg .band-cope{ fill:var(--oxygen); opacity:.10; }
#dist-svg .axis-x{ stroke:rgba(236,228,214,.22); stroke-width:1; }
#dist-svg .ghost{ stroke:var(--ink-dim); stroke-width:1.2; stroke-dasharray:2 4; opacity:.65; }
#dist-svg .arrow{ stroke:var(--ink-soft); stroke-width:1.4; fill:none; }
#dist-svg .dthr{ stroke:var(--ochre); stroke-width:3.4; stroke-dasharray:7 5; filter:drop-shadow(0 0 6px rgba(214,154,58,.6)); }
#dist-svg .yah-line{ stroke:var(--oxygen); stroke-width:2.2; }
#dist-svg .yah-line.over{ stroke:var(--crimson); }
#dist-svg .yah-tri{ fill:var(--oxygen); }
#dist-svg .yah-tri.over{ fill:var(--crimson); }
#dist-svg .yah-lab{ font-family:var(--label); font-size:13px; font-weight:700; fill:var(--oxygen); }
#dist-svg .yah-lab.over{ fill:var(--crimson); }
#dist-svg .axis-lab{ font-family:var(--label); font-size:13px; fill:var(--ink-soft); }
#dist-svg .axis-lab.dim{ fill:var(--ink-dim); }
#dist-svg .axis-y{ font-family:var(--label); font-size:11.5px; fill:var(--ink-dim); letter-spacing:.04em; }
#dist-svg .thrlab{ font-family:var(--label); font-size:15px; fill:var(--ochre); font-weight:700; letter-spacing:.02em; }
#dist-svg .dx-bracket{ stroke:var(--crimson); stroke-width:2; opacity:.85; }
#dist-svg .dx-label{ font-family:var(--label); font-size:12px; fill:var(--crimson); }
.dist-ctrl{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:22px; margin-top:14px; padding-top:14px; border-top:1px solid var(--rule); }
.dist-read{ font-family:var(--read); font-size:1rem; color:var(--ink-soft); max-width:38ch; }
.dist-read b{ color:var(--crimson); font-style:normal; }
.dist-bar{ width:220px; max-width:60vw; height:10px; background:var(--rule-strong); margin:12px 0 2px; position:relative; }
.dist-bar .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--crimson); transition:width .6s ease; }
.dist-steps{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-family:var(--label); font-size:.8rem; color:var(--ink-dim); }
.dist-steps .dstep{ display:inline-flex; align-items:center; gap:8px; transition:color .45s ease; }
.dist-steps .dstep::before{ content:""; width:9px; height:9px; border-radius:50%; border:1px solid var(--ink-dim); transition:background-color .45s ease, border-color .45s ease; }
.dist-steps .dstep.on{ color:var(--ink); }
.dist-steps .dstep.on::before{ background:var(--crimson); border-color:var(--crimson); box-shadow:0 0 6px rgba(226,62,78,.5); }
.tag{ display:inline-block; font-family:var(--label); font-size:.62rem; text-transform:uppercase; letter-spacing:.09em; padding:4px 9px; border-radius:3px; vertical-align:middle; margin-left:10px; }
.tag.s3{ background:var(--crimson); color:var(--paper); }
.tag.s2{ background:var(--oxblood); color:var(--ink); }
.tag.s1{ color:var(--ink-soft); border:1px solid var(--rule-strong); }
@media(prefers-reduced-motion:reduce){ .dist-steps .dstep,.dist-steps .dstep::before{ transition:none; } .dist-bar .fill{ transition:none; } }
@media(max-width:760px){ #dist-svg .axis-lab,#dist-svg .thrlab{ font-size:16px; } #dist-svg .dx-label,#dist-svg .yah-lab{ font-size:15px; } #dist-svg .axis-y{ font-size:13px; } }
@media(max-width:560px){ .dist-ctrl{ flex-direction:column; align-items:stretch; gap:16px; } .dist-read{ max-width:none; } .dist-bar{ width:100%; max-width:none; } .dist-steps{ gap:10px 16px; } #dist-svg #dx-label{ text-anchor:end; } }
@media(max-width:430px){ #dist-svg .axis-lab,#dist-svg .thrlab{ font-size:19px; } #dist-svg .dx-label{ font-size:16px; } #dist-svg .yah-lab{ font-size:18px; } #dist-svg .axis-y{ font-size:17px; } }
.fig-legend i{ width:14px; height:14px; flex:0 0 auto; display:inline-block; }
.toggles-row{ display:flex; gap:12px; flex-wrap:wrap; }
.tgl{ font-family:var(--label); font-size:.8rem; min-height:44px; padding:11px 16px; background:transparent;
  color:var(--ink-soft); border:1px solid rgba(236,228,214,.45); cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s; }
.tgl:hover{ border-color:var(--ink-soft); color:var(--ink); }
.tgl[aria-pressed="true"]{ background:var(--oxblood); color:var(--ink); border-color:var(--oxblood); }
:where(button,a,input,[tabindex],summary):focus-visible{ outline:2px solid var(--oxygen); outline-offset:3px; border-radius:1px; }

/* ---------- hero ---------- */
#hero{ min-height:100dvh; display:flex; align-items:center; background:transparent; position:relative; z-index:2; overflow:hidden; }
#hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, var(--paper) 0%, var(--paper) 30%, rgba(var(--paper-rgb),.9) 40%, rgba(var(--paper-rgb),.4) 50%, rgba(var(--paper-rgb),0) 60%); }
#hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:16vh; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(var(--paper-rgb),0), var(--paper)); }
#hero .col{ width:100%; position:relative; z-index:2; }

/* ---------- optional generated-video layer (progressive enhancement; falls back to canvas/SVG) ---------- */
.sec-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0; transition:opacity .9s ease; pointer-events:none; background:var(--paper); }
.sec-video.ready{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .sec-video{ transition:none; } }
/* static hero still (the generated keyframe) with a slow drift; hidden once a hero video is ready */
/* hero: a hand-drawn cerebral angiogram (inline SVG), static, right-weighted */
.hero-art{ position:absolute; top:0; bottom:0; right:0; height:100%; width:clamp(340px,62%,920px); z-index:0; pointer-events:none;
  filter:drop-shadow(0 0 2px rgba(226,62,78,.18)); }
@media(max-width:760px){ .hero-art{ width:100%; opacity:.6; } }
.hero-art .vessel{ fill:none; stroke:var(--crimson); stroke-linecap:round; stroke-linejoin:round; }
.hero-art .cap{ fill:var(--crimson); }
#hero h1{ grid-column:2 / 9; font-size:clamp(2.5rem,6.2vw,5.2rem); line-height:1.02; font-weight:500;
  letter-spacing:-.018em; margin:0 0 .42em; max-width:17ch; }
#hero h1 .blood{ color:var(--crimson); }
#hero .stand{ grid-column:2 / 8; font-size:clamp(1.1rem,2.4vw,1.34rem); line-height:1.5; color:var(--ink); max-width:46ch; }
#hero .stand .src{ font-style:normal; font-family:var(--label); font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-dim); display:block; margin-top:18px; text-transform:uppercase; }
@media(max-width:760px){
  #hero h1, #hero .stand{ grid-column:1 / 13; }
  #hero::before{ background:linear-gradient(180deg, rgba(var(--paper-rgb),.3) 0%, rgba(var(--paper-rgb),.72) 28%, rgba(var(--paper-rgb),.95) 52%, var(--paper) 88%); }
}

/* ---------- crowd ---------- */
.crowd-grid2{ grid-column:2 / 12; display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,28vw,300px); gap:clamp(28px,4vw,60px); align-items:center; margin-top:6px; }
.crowd-text{ align-self:center; }
.crowd-stat .big{ font-family:var(--serif); font-size:clamp(3.6rem,8vw,6rem); line-height:.86; color:var(--crimson); font-variant-numeric:tabular-nums lining-nums; }
.crowd-stat .big .pct{ font-size:.5em; color:var(--ink-dim); }
.crowd-stat .cap{ font-family:var(--label); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-top:10px; max-width:18ch; }
#crowd{ display:grid; grid-template-columns:repeat(10,1fr); gap:clamp(4px,0.7vw,8px); width:100%; max-width:360px; }
#crowd .fig{ width:100%; aspect-ratio:1/1.4; fill:none; stroke:var(--ink-dim); stroke-width:1; opacity:.5;
  transition:opacity .5s ease, fill .5s ease, stroke .5s ease; }
#crowd .fig.has, .crowd-legend .sw.has{ fill:var(--crimson); stroke:none; opacity:.92; }
#crowd .fig.naive, .crowd-legend .sw.naive{ fill:var(--oxygen); stroke:none; opacity:.95; }
.crowd-legend{ display:flex; flex-direction:column; gap:11px; margin:24px 0 20px; }
.crowd-legend span{ align-items:center; }
.crowd-legend i{ width:14px; height:20px; }
.crowd-legend i svg{ width:100%; height:100%; display:block; }
.crowd-text .fig-note{ max-width:40ch; margin-top:0; }
@media(max-width:780px){ .crowd-grid2{ grid-template-columns:1fr; gap:26px; } .crowd-text{ order:2; } }

/* ---------- stop moment ---------- */
.stop{ padding:clamp(110px,24vh,240px) 0; }
.stop .col{ position:relative; z-index:1; }
.stop p{ grid-column:2 / 12; font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5.4vw,3.7rem);
  line-height:1.12; max-width:22ch; margin:0; color:var(--ink); }

/* ---------- IQ ---------- */
.iq .figwrap{ grid-column:2 / 7; align-self:center; }
.iq .big{ font-family:var(--serif); font-weight:500; color:var(--crimson); font-size:clamp(6rem,20vw,15rem);
  line-height:.78; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em; }
.iq .figcap{ font-family:var(--label); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-dim); margin-top:6px; max-width:22ch; }
.iq .body{ grid-column:7 / 12; align-self:center; }
.iq-tool{ margin-top:24px; padding-top:18px; border-top:1px solid var(--rule); max-width:44ch; }
.iq-ticks{ display:flex; gap:2px; align-items:flex-end; height:50px; margin:12px 0; }
.iq-ticks .t{ flex:1; background:var(--oxygen); height:100%; opacity:.85; transition:opacity .25s, background-color .25s; }
.iq-ticks .t.off{ opacity:.14; background:var(--slate); }
.iq-tool input[type=range]{ width:100%; box-sizing:border-box; margin:0; accent-color:var(--crimson); }
.iq-tool .read{ font-family:var(--label); font-size:.84rem; color:var(--ink-soft); font-variant-numeric:tabular-nums lining-nums; }
.iq-tool .read b{ color:var(--crimson); }
@media(max-width:860px){ .iq .figwrap,.iq .body{ grid-column:1/13; } .iq .body{ margin-top:18px; } }

/* ---------- mechanism ---------- */
#mechanism{ background:transparent; }
#mechanism::before{ content:""; position:absolute; left:0; right:0; top:0; height:16vh; z-index:0; pointer-events:none;
  background:linear-gradient(var(--paper), rgba(var(--paper-rgb),0)); }
#mechanism::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:16vh; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(var(--paper-rgb),0), var(--paper)); }
#mechanism .col{ position:relative; z-index:2; }
.panel{ background:rgba(var(--paper-rgb),.9); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  padding:clamp(22px,3vw,34px); }
.mech-intro{ grid-column:2 / 8; }
.diagrams{ grid-column:2 / 12; display:grid; gap:clamp(30px,4.5vh,54px); }
.diagram{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,420px); gap:clamp(28px,4vw,60px); align-items:center; }
.diagram .dia-text{ grid-column:1; grid-row:1; }
.diagram h3{ font-size:1.4rem; font-weight:500; margin:0 0 6px; }
.diagram p{ font-size:1rem; color:var(--ink-soft); margin:0; max-width:48ch; }
.diagram svg{ width:100%; max-width:420px; height:auto; margin:0; grid-column:2; grid-row:1; }
@media(max-width:820px){
  .diagram{ grid-template-columns:1fr; gap:16px; }
  .diagram .dia-text{ grid-row:1; }
  .diagram svg{ grid-column:1; grid-row:2; max-width:380px; }
}
.diagram .mechdia .wall{ fill:none; stroke:var(--crimson); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.diagram .mechdia .axis{ stroke:var(--rule-strong); stroke-width:1; stroke-dasharray:3 5; }
.diagram .mechdia .tissue{ fill:rgba(77,155,209,.06); stroke:rgba(77,155,209,.5); stroke-width:1; stroke-dasharray:5 5; }
.diagram .mechdia .lab{ font-family:var(--label); font-size:12px; fill:var(--ink-soft); paint-order:stroke; stroke:var(--paper); stroke-width:3.4px; stroke-linejoin:round; }
.diagram .mechdia .lab.dimlab{ fill:var(--ink-dim); }
.diagram .mechdia .lab.demand{ fill:var(--crimson); }
.diagram .mechdia .lab.flow{ fill:var(--oxygen); }
/* seal: inflammation leaks UP into protected tissue, neurons react */
.diagram .mechdia .leak{ fill:var(--ochre); }
.diagram .mechdia .neuron{ fill:var(--oxygen); }
.diagram .mechdia .neuron-arm{ fill:none; stroke:var(--oxygen); stroke-width:1.4; stroke-linecap:round; }
.diagram .mechdia .seal-lumen{ fill:var(--crimson); opacity:.12; }
@keyframes leakdrift{ 0%{ transform:translate(0,0); opacity:0; } 22%{ opacity:.95; } 100%{ transform:translate(var(--lx,0), var(--ly,-46px)); opacity:0; } }
.diagram .mechdia .leak{ animation:leakdrift 2.8s ease-in infinite; animation-delay:var(--ld,0s); }
/* channel: a vessel that narrows to a throat; cells crowd + slow there; downstream starves */
.diagram .mechdia .ch-lumen{ fill:var(--crimson); opacity:.09; }
.diagram .mechdia .cell{ fill:var(--crimson); }
.diagram .mechdia .pinchlab{ fill:var(--ink-dim); opacity:0; transition:opacity .3s; }
/* timing: the shortfall is shaded, misfire sparks */
.diagram .mechdia .wave-demand{ fill:none; stroke:var(--crimson); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.diagram .mechdia .wave-flow{ fill:none; stroke:var(--oxygen); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.diagram .mechdia .tm-deficit{ fill:var(--crimson); opacity:.24; }
.diagram .mechdia .spark{ fill:#ff7e6c; }
@media(prefers-reduced-motion:reduce){ .diagram .mechdia .leak{ animation:none; } }
@media(max-width:980px){
  .mech-intro,.diagrams{ grid-column:1/13; }
}

/* ---------- compounding (stacked-multiplier meter) ---------- */
.meter{ max-width:760px; margin:0 auto; }
.meter-track{ position:relative; height:46px; background:#1a1413; border-radius:7px; overflow:hidden; box-shadow:inset 0 1px 0 rgba(0,0,0,.4), inset 0 0 0 1px var(--rule); }
.meter-fill{ position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:6px; overflow:hidden;
  background:linear-gradient(90deg, var(--oxblood), var(--crimson) 60%, #ff7e6c); box-shadow:0 0 18px rgba(226,62,78,.45);
  transition:width .6s cubic-bezier(.4,0,.2,1), box-shadow .6s ease; }
.meter-fill::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 28%, rgba(255,210,200,.22) 48%, transparent 68%);
  transform:translateX(-110%); animation:meterFlow 2.8s linear infinite; }
@keyframes meterFlow{ to{ transform:translateX(220%); } }
@media(prefers-reduced-motion:reduce){ .meter-fill::after{ animation:none; opacity:0; } }
.meter-read{ display:flex; align-items:baseline; gap:16px; margin-top:18px; flex-wrap:wrap; }
.meter-read b{ font-family:var(--serif); font-size:clamp(2.4rem,6vw,3.4rem); color:var(--crimson); line-height:1; font-variant-numeric:tabular-nums lining-nums; }
.meter-read span{ font-family:var(--read); color:var(--ink-soft); max-width:34ch; }
.meter-factors{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:22px; }
.meter-factors .mf{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-dim); background:transparent; border:1px solid transparent;
  font-family:var(--label); font-size:.82rem; cursor:pointer; padding:8px 12px 8px 9px; border-radius:6px; min-height:40px; text-align:left;
  transition:color .3s ease, border-color .2s ease, background-color .2s ease; }
.meter-factors .mf:hover{ color:var(--ink-soft); border-color:var(--rule-strong); background:rgba(236,228,214,.03); }
.meter-factors .mf::before{ content:""; width:14px; height:14px; border-radius:3px; border:1px solid var(--ink-dim); flex:0 0 auto; transition:background-color .3s ease, border-color .3s ease; }
.meter-factors .mf.on{ color:var(--ink); }
.meter-factors .mf.on::before{ background:var(--crimson); border-color:var(--crimson); box-shadow:0 0 6px rgba(226,62,78,.5); }
.meter-hint{ font-family:var(--label); font-size:.84rem; color:var(--ink-soft); margin:14px 0 0; opacity:1; transition:opacity .5s ease; }
.meter-hint.show{ opacity:1; }
/* two-bar meter: blood flow + brain effect */
.meter-bars{ display:grid; gap:22px; }
.mbar-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:9px; flex-wrap:wrap; }
.mbar-head b{ font-family:var(--serif); font-size:clamp(2rem,5vw,2.9rem); color:var(--crimson); line-height:1; font-variant-numeric:tabular-nums lining-nums; }
.mbar-head span{ font-family:var(--read); color:var(--ink-soft); font-size:1rem; }
.mbar-head em{ font-style:normal; color:var(--ink-dim); font-family:var(--label); font-size:.8rem; letter-spacing:.02em; }
.meter-covid{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; }
.mc-label{ font-family:var(--label); font-size:.82rem; color:var(--ink-soft); }
.mc-boxes{ display:flex; gap:7px; }
.mc-box{ width:30px; height:30px; border:1px solid var(--ink-dim); border-radius:5px; background:transparent; cursor:pointer; transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.mc-box:hover{ border-color:var(--ink-soft); }
.mc-box.on{ background:var(--crimson); border-color:var(--crimson); box-shadow:0 0 7px rgba(226,62,78,.5); }
.brain-squeeze{ width:100%; height:66px; display:block; margin-top:2px; }
.brain-squeeze .bsq-lumen{ fill:rgba(226,62,78,.16); stroke:var(--crimson); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.brain-squeeze .bsq-cell{ fill:#ff6a5a; }
.mind-strip{ position:relative; display:flex; align-items:center; justify-content:space-between; height:48px; margin-top:2px; padding:0 5px; }
.mind-strip .mind-wire{ position:absolute; left:8px; right:8px; top:50%; height:2px; transform:translateY(-50%); background:linear-gradient(90deg,rgba(226,62,78,.5),rgba(124,120,134,.18)); }
.mind-strip .mind-node{ position:relative; z-index:1; width:13px; height:13px; border-radius:50%; background:var(--crimson); box-shadow:0 0 8px rgba(226,62,78,.7); animation:mindTwinkle 2.6s ease-in-out infinite; transition:background .45s ease, box-shadow .45s ease, transform .45s ease, opacity .45s ease; }
.mind-strip .mind-node.off{ background:var(--slate); box-shadow:none; transform:scale(.66); opacity:.4; animation:none; }
@keyframes mindTwinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }
@media(prefers-reduced-motion:reduce){ .mind-strip .mind-node{ animation:none; } }
@media(prefers-reduced-motion:reduce){ .meter-fill{ transition:none; } .meter-factors .mf,.meter-factors .mf::before{ transition:none; } .mc-box{ transition:none; } }

/* ---------- vaccine steelman ---------- */
.steel{ grid-column:2/12; display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:14px; border-top:1px solid var(--rule-strong); }
.steel .side{ padding:26px clamp(20px,3vw,38px); }
.steel .side:first-child{ border-right:1px solid var(--rule); }
.steel h3{ font-family:var(--serif); font-weight:500; font-size:1.35rem; margin:0 0 14px; }
.steel .who{ color:var(--oxygen); } .steel .who2{ color:var(--ochre); }
.steel p{ font-size:1rem; color:var(--ink-soft); max-width:46ch; }
.steel p:last-child{ margin-bottom:0; }
.steel-bottom{ grid-column:2/12; margin-top:26px; padding-top:22px; border-top:1px solid var(--rule-strong); }
.steel-bottom p{ font-size:1.2rem; max-width:62ch; margin:0; }
@media(max-width:760px){ .steel{ grid-template-columns:1fr; } .steel .side:first-child{ border-right:none; border-bottom:1px solid var(--rule); } }

/* ---------- spike triax ---------- */
.spike-compare{ grid-column:2/12; }
#spike-svg{ width:100%; height:auto; display:block; }
#spike-svg .origin{ stroke:var(--rule-strong); stroke-width:1; }
#spike-svg .lane-name{ font-family:var(--label); font-size:13px; text-transform:uppercase; letter-spacing:.08em; fill:var(--ink-dim); }
#spike-svg .scale-lab{ font-family:var(--label); font-size:12px; fill:var(--ink-dim); }
#spike-svg .bar-tag{ font-family:var(--label); font-size:12px; }
#spike-svg .bar-tag.vax{ fill:var(--oxygen); } #spike-svg .bar-tag.inf{ fill:var(--crimson); }
#spike-svg .leg{ font-family:var(--label); font-size:12px; }
#spike-svg .leg.inf{ fill:var(--crimson); } #spike-svg .leg.vax{ fill:var(--oxygen); }
#spike-svg .m-inf,#spike-svg .span-inf{ fill:var(--crimson); }
#spike-svg .m-vax,#spike-svg .span-vax{ fill:var(--oxygen); }
#spike-svg .span-tail{ fill:var(--oxygen); opacity:.32; }
.spike-caps{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; border-top:1px solid var(--rule-strong); }
.spike-caps > div{ padding:18px 20px; border-right:1px solid var(--rule); }
.spike-caps > div:last-child{ border-right:none; }
.spike-caps dt{ font-family:var(--label); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-dim); }
.spike-caps dd{ margin:8px 0 0; font-size:.95rem; color:var(--ink-soft); }
@media(max-width:980px){ .spike-compare{ grid-column:1/13; } }
@media(max-width:680px){ .spike-caps{ grid-template-columns:1fr; } .spike-caps > div{ border-right:none; border-bottom:1px solid var(--rule); }
  #spike-svg .lane-name,#spike-svg .scale-lab,#spike-svg .leg,#spike-svg .bar-tag{ font-size:21px; } }

/* ---------- everyday substances (ranked severity bars) ---------- */
.drug2{ grid-column:2/12; margin-top:16px; }
.drug2-head{ font-family:var(--label); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); padding-bottom:12px; border-bottom:1px solid var(--rule-strong); }
.drug2-rows{ list-style:none; margin:0; padding:0; }
.drug2 .row, .drug2-lever{ display:grid; grid-template-columns:26px minmax(150px,1fr) minmax(110px,250px) 110px 18px; align-items:center; gap:clamp(10px,2vw,20px); padding:15px 0; }
.drug2 .rk{ font-family:var(--serif); font-size:1.5rem; color:var(--ink-dim); font-variant-numeric:tabular-nums lining-nums; line-height:1; }
.drug2 .nm{ font-size:1.04rem; }
.drug2 .nm small{ display:block; font-family:var(--label); font-size:.72rem; color:var(--ink-dim); margin-top:2px; }
.drug2 .sev{ position:relative; height:11px; background:var(--rule-strong); border-radius:6px; overflow:hidden; }
.drug2 .sev-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--crimson); border-radius:6px; }
.drug2 .sev-fill.unc{ background:repeating-linear-gradient(90deg, var(--oxblood) 0 5px, rgba(156,51,71,.25) 5px 10px); }
.drug2 .sev.up .sev-fill{ background:var(--oxygen); }
.drug2 .chip{ font-family:var(--label); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding:5px 0; text-align:center; border-radius:3px; white-space:nowrap; }
.drug2 .chip.strong{ background:var(--crimson); color:var(--paper); }
.drug2 .chip.mod{ color:var(--ink-soft); border:1px solid var(--rule-strong); }
.drug2 .chip.up{ background:var(--oxygen); color:var(--paper); }
.drug2-lever{ margin-top:8px; border-top:1px solid var(--rule-strong); border-bottom:none; padding-top:18px; }
.drug2 .lever-eye{ font-family:var(--label); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oxygen); margin:14px 0 0; }
/* expandable substance rows: temporary vs lasting */
.drug2-item{ border-bottom:1px solid var(--rule); }
.drug2-item:last-child{ border-bottom:none; }
.drug2 summary.row{ cursor:pointer; list-style:none; }
.drug2 summary.row::-webkit-details-marker{ display:none; }
.drug2 summary.row:hover .nm{ color:var(--ink); }
.drug2 summary.row:focus-visible{ outline:2px solid var(--oxygen); outline-offset:-2px; }
.dd-caret{ font-size:.7rem; color:var(--ink-dim); text-align:center; transition:transform .2s ease; }
.drug2-item[open] .dd-caret{ transform:rotate(180deg); color:var(--crimson); }
.drug2-detail{ padding:0 0 16px 38px; }
.drug2-detail p{ font-size:.92rem; line-height:1.58; color:var(--ink-soft); margin:.85em 0 0; }
.drug2-detail .dd-lab{ position:relative; top:-1px; }
.dd-lab{ display:inline-block; font-family:var(--label); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:3px; margin-right:9px; white-space:nowrap; }
.dd-high{ background:var(--ochre); color:#1a1410; }
.dd-down{ background:var(--oxblood); color:var(--ink); }
.dd-long{ background:var(--crimson); color:var(--paper); }
@media(max-width:980px){ .drug2{ grid-column:1/13; } }
@media(max-width:620px){ .drug2 .row,.drug2-lever{ grid-template-columns:22px 1fr auto 18px; } .drug2 .sev{ grid-column:1/-1; order:3; } .drug2 .chip{ width:auto; padding:5px 9px; } .drug2-detail{ padding-left:30px; } }

/* ---------- expandable accordion (bad / good habits) ---------- */
.accord{ margin-top:18px; border:1px solid var(--rule); background:rgba(var(--paper-rgb),.45); }
.accord + .accord{ margin-top:10px; }
.accord > summary{ cursor:pointer; list-style:none; padding:15px 20px; font-family:var(--label); font-size:.84rem; letter-spacing:.02em; color:var(--ink-soft); display:flex; align-items:center; gap:12px; transition:color .2s; }
.accord > summary:hover{ color:var(--ink); }
.accord > summary::-webkit-details-marker{ display:none; }
.accord > summary::before{ content:"+"; font-family:var(--serif); font-size:1.4rem; line-height:.8; color:var(--crimson); transition:transform .25s ease; flex:0 0 auto; }
.accord[open] > summary{ color:var(--ink); border-bottom:1px solid var(--rule); }
.accord[open] > summary::before{ transform:rotate(45deg); }
.accord-body{ padding:16px 20px 6px; }
.accord-body p{ font-size:1rem; color:var(--ink-soft); }
.accord-body p:last-child{ margin-bottom:.4em; }
.accord-body .more-play{ counter-reset:step 7; margin:0; }
.accord-body .more-play .step:last-child{ border-bottom:none; }
:where(.accord) summary:focus-visible{ outline:2px solid var(--oxygen); outline-offset:-2px; }
/* condition library: filter + brighter, scannable names */
.lib-tools{ margin:0 0 18px; }
.lib-filter{ width:100%; max-width:440px; font-family:var(--label); font-size:.95rem; color:var(--ink); background:rgba(var(--paper-rgb),.5); border:1px solid var(--rule-strong); border-radius:8px; padding:11px 14px; }
.lib-filter:focus{ outline:none; border-color:var(--crimson); }
.lib-filter::placeholder{ color:var(--ink-dim); }
.lib-hint{ font-family:var(--label); font-size:.85rem; color:var(--ink-soft); margin:10px 0 0; }
#condition-lib .accord > summary{ color:var(--ink); font-size:.92rem; }
.tldr-line{ font-family:var(--label); font-size:.96rem; line-height:1.55; color:var(--ink-soft); border-left:2px solid var(--crimson); padding:2px 0 2px 15px; margin:14px 0 0; }
.tldr-line strong{ color:var(--ink); }
/* newsletter signup */
#subscribe{ border-top:1px solid var(--rule); }
.nl-form{ max-width:30rem; margin-top:18px; font-family:var(--label); }
.nl-label{ display:block; font-size:.95rem; color:var(--ink); margin:0 0 10px; }
.nl-row{ display:flex; gap:8px; flex-wrap:wrap; }
.nl-form input[type=email]{ flex:1 1 12rem; min-width:0; background:rgba(var(--paper-rgb),.5); color:var(--ink); border:1px solid var(--rule-strong); border-radius:8px; padding:11px 14px; font-size:1rem; font-family:var(--label); }
.nl-form input[type=email]:focus{ outline:none; border-color:var(--crimson); }
.nl-form button{ background:var(--crimson); color:#fff; border:none; border-radius:8px; padding:11px 20px; font-weight:600; font-size:.95rem; cursor:pointer; font-family:var(--label); }
.nl-form button:disabled{ opacity:.55; cursor:default; }
.nl-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.nl-note{ font-size:.82rem; color:var(--ink-soft); margin:10px 0 0; }
.nl-note.err{ color:var(--crimson); }

/* ---------- page-two call-to-action ---------- */
.p2cta{ grid-column:2/12; margin-top:6px; }
.big-button{ display:flex; align-items:center; gap:clamp(20px,4vw,48px); text-decoration:none; border:1px solid var(--rule-strong); border-left:3px solid var(--crimson);
  background:linear-gradient(100deg, var(--paper-bright), var(--paper-soft)); padding:clamp(26px,4vw,46px) clamp(24px,4vw,50px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.big-button:hover{ border-color:var(--crimson); transform:translateY(-2px); box-shadow:0 14px 44px rgba(0,0,0,.36); }
.big-button .bb-text{ flex:1 1 auto; min-width:0; }
.big-button .bb-eye{ display:block; font-family:var(--label); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); }
.big-button .bb-title{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.08; color:var(--ink); margin:12px 0 14px; max-width:24ch; }
.big-button .bb-sub{ display:block; font-family:var(--read); font-size:1.05rem; color:var(--ink-soft); max-width:60ch; }
.big-button .bb-go{ flex:0 0 auto; width:clamp(56px,8vw,78px); height:clamp(56px,8vw,78px); border-radius:50%; border:1.5px solid var(--crimson);
  display:flex; align-items:center; justify-content:center; color:var(--crimson); transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.big-button .bb-arrow{ font-size:clamp(1.7rem,3vw,2.3rem); line-height:1; transition:color .25s ease; }
.big-button:hover .bb-go{ background:var(--crimson); transform:translateX(7px); box-shadow:0 0 22px rgba(226,62,78,.5); }
.big-button:hover .bb-arrow{ color:var(--paper); }
@media(max-width:980px){ .p2cta{ grid-column:1/13; } }
@media(max-width:620px){ .big-button{ flex-direction:column; align-items:flex-start; gap:22px; } .big-button .bb-go{ align-self:flex-end; } }

/* ---------- symptom mirror ---------- */
.mirror{ grid-column:2 / 12; margin-top:6px; }
.mirror .items{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(26px,4vw,60px); }
.mirror .item{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--rule); cursor:pointer; user-select:none; transition:border-color .2s; }
.mirror .item:hover{ border-color:var(--rule-strong); }
.mirror .item:focus-visible{ outline:2px solid var(--oxygen); outline-offset:3px; border-radius:2px; }
.mirror .item .box{ width:15px; height:15px; border:1px solid var(--ink-dim); border-radius:2px; flex:0 0 auto; position:relative; top:3px; transition:background-color .2s, border-color .2s; }
.mirror .item.on .box{ background:var(--crimson); border-color:var(--crimson); }
.mirror .item b{ color:var(--ink); font-weight:600; }
.mirror .item span{ display:block; color:var(--ink-soft); font-size:.96rem; margin-top:3px; }
.mirror .tally{ margin-top:26px; font-size:1.2rem; color:var(--ink); min-height:2.6em; max-width:52ch; }
.mirror .tally b{ color:var(--crimson); font-style:normal; }
@media(max-width:760px){ .mirror{ grid-column:1/13; } .mirror .items{ grid-template-columns:1fr; } }

/* ---------- playbook ---------- */
.play{ grid-column:2 / 10; margin-top:8px; counter-reset:step; }
.play .step{ display:grid; grid-template-columns:46px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--rule); }
.play .step:last-child{ border-bottom:none; }
.play .step .n{ counter-increment:step; font-family:var(--serif); font-size:1.9rem; color:var(--crimson); font-variant-numeric:tabular-nums lining-nums; line-height:1; }
.play .step .n::before{ content:counter(step,decimal-leading-zero); }
.play .step h3{ font-size:1.45rem; font-weight:500; margin:0 0 6px; }
.play .step p{ margin:0; font-size:1.02rem; color:var(--ink-soft); }
@media(max-width:980px){ .play{ grid-column:1/13; } }

/* ---------- disclaimer + footer ---------- */
.disclaimer{ grid-column:2 / 11; margin-top:38px; padding:22px 26px; background:var(--paper-soft); border-left:2px solid var(--ochre); }
.disclaimer p{ font-family:var(--label); font-size:.86rem; line-height:1.55; color:var(--ink-soft); margin:0; max-width:none; }
footer{ background:var(--paper-soft); position:relative; z-index:2; padding:64px 0 92px; border-top:1px solid var(--rule-strong); }
footer h2{ font-size:1.6rem; }
.share{ grid-column:2/8; display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.share button{ font-family:var(--label); font-size:.86rem; background:transparent; border:1px solid var(--ink); color:var(--ink); padding:11px 18px; cursor:pointer; }
.share button:hover{ background:var(--ink); color:var(--paper); }
.biblio{ grid-column:2 / 12; margin-top:50px; }
.biblio-picks{ grid-column:2 / 12; margin-top:48px; }
.biblio-picks h4{ margin:6px 0 10px; }
.biblio-picks > p{ color:var(--ink-soft); max-width:62ch; margin:0 0 18px; }
.biblio-picks ul{ list-style:none; padding:0; margin:0; }
.biblio-picks li{ margin-bottom:13px; color:var(--ink-soft); line-height:1.5; max-width:72ch; }
.biblio-picks li strong{ color:var(--ink); }
.biblio-picks li a{ color:var(--crimson); font-variant-numeric:tabular-nums lining-nums; text-decoration:none; padding-left:2px; }
.biblio ol{ list-style:none; counter-reset:b; padding:0; columns:2; column-gap:46px; font-size:.88rem; }
.biblio li{ counter-increment:b; position:relative; padding-left:28px; margin-bottom:13px; break-inside:avoid; color:var(--ink-soft); }
.biblio li::before{ content:counter(b); position:absolute; left:0; font-variant-numeric:tabular-nums lining-nums; color:var(--ink-dim); font-family:var(--label); font-size:.78rem; }
.biblio a{ color:var(--ink); border-bottom-color:var(--rule-strong); }
.foot-meta{ grid-column:2/12; margin-top:34px; font-family:var(--label); font-size:.76rem; color:var(--ink-dim); }
@media(max-width:760px){ .biblio ol{ columns:1; } .share{ grid-column:1/13; } }

@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } #crowd .fig{ transition:none; } }

/* ---------- cohesion polish ---------- */
body{ font-feature-settings:'liga' 1,'calt' 1,'kern' 1; }
.prose p{ font-variant-numeric:oldstyle-nums proportional-nums; }
.num-fig,.iq .big,.crowd-stat .big,.eyebrow,.biblio li::before,.play .step .n{ font-variant-numeric:lining-nums tabular-nums; }
.eyebrow{ border-top:1px solid var(--ink); padding-top:17px; position:relative; }
.eyebrow::before{ content:""; position:absolute; top:-2px; left:0; width:52px; height:4px; background:var(--crimson); box-shadow:0 0 9px rgba(226,62,78,.55); }
#hero .stand::before{ content:""; display:block; width:54px; height:2px; background:var(--crimson); margin:2px 0 22px; }
.lead-cap::first-letter{ font-family:var(--serif); font-weight:600; float:left; font-size:3.7em; line-height:.7; padding:.05em .12em 0 0; color:var(--crimson); }
.panel{ box-shadow:inset 0 1px 0 rgba(236,228,214,.10), inset 0 -1px 0 rgba(0,0,0,.25); }
#grain{ opacity:.05; mix-blend-mode:screen; }

/* ==================== multi-page: top nav, page headers, topic cards ==================== */
:root{ --navh:54px; }
@media(max-width:680px){ :root{ --navh:50px; } }
html{ scroll-padding-top:calc(var(--navh) + 14px); }

.topnav{ position:fixed; top:0; left:0; right:0; height:var(--navh); z-index:80; display:flex; align-items:center; gap:14px;
  padding:0 max(14px,2.5vw); background:rgba(20,17,16,.74); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px); border-bottom:1px solid var(--rule); }
.topnav .tn-brand{ font-family:var(--serif); font-weight:500; font-size:1.18rem; letter-spacing:.03em; color:var(--ink); text-decoration:none; border:none; flex:none; line-height:1; }
.topnav .tn-brand:hover{ color:#fff; }
.topnav .tn-tabs{ display:flex; gap:2px; margin-left:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); }
.topnav .tn-tabs::-webkit-scrollbar{ display:none; }
.topnav .tn-tabs a{ font-family:var(--label); font-size:.86rem; font-weight:500; color:var(--ink-soft); text-decoration:none; border:none; padding:7px 13px; border-radius:20px; white-space:nowrap; line-height:1; transition:color .18s, background .18s; }
.topnav .tn-tabs a:hover,.topnav .tn-tabs a:focus-visible{ color:var(--ink); background:rgba(236,228,214,.07); outline:none; }
.topnav .tn-tabs a.active{ color:#fff; background:var(--crimson); }

/* push the floating tools below the bar */
.toc-btn{ top:calc(var(--navh) + 9px); }
#ask-btn{ top:calc(var(--navh) + 9px + 46px); }
.toc-panel{ top:calc(var(--navh) + 9px + 46px); }
#ask-panel{ top:calc(var(--navh) + 9px + 92px); }
#scrollprog{ top:var(--navh); }
@media(max-width:680px){
  .toc-btn{ top:calc(var(--navh) + 8px); right:12px; }
  #ask-btn{ top:calc(var(--navh) + 8px + 44px); right:12px; }
  .toc-panel{ top:calc(var(--navh) + 8px + 44px); right:8px; left:8px; width:auto; }
  #ask-panel{ top:calc(var(--navh) + 8px + 88px); right:8px; left:8px; width:auto; }
}

/* topic-page header (smaller than the landing hero) */
.page-hero{ padding-top:calc(var(--navh) + clamp(44px,10vh,104px)); padding-bottom:clamp(22px,5vh,52px); }
.page-hero + section{ padding-top:clamp(28px,5vh,60px); }
.page-hero h1{ font-family:var(--serif); font-weight:500; letter-spacing:-.018em; font-size:clamp(2rem,5.1vw,3.35rem); line-height:1.04; margin:.18em 0 .42em; color:var(--ink); }
.page-hero .stand{ font-family:var(--read); font-size:clamp(1.04rem,1.7vw,1.22rem); line-height:1.6; color:var(--ink-soft); max-width:46ch; }
.page-hero .stand::before{ content:none; }

/* landing hero: clear the fixed bar; the persistent nav carries the brand, so drop the redundant masthead wordmark */
#hero{ padding-top:var(--navh); }
.hero-brand{ display:none; }

/* landing topic cards */
.topic-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:980px){ .topic-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .topic-cards{ grid-template-columns:1fr; } }
.topic-card{ display:flex; flex-direction:column; gap:9px; padding:24px 24px 20px; border:1px solid var(--rule); border-radius:15px;
  background:rgba(236,228,214,.02); text-decoration:none; color:var(--ink); transition:border-color .18s, background .18s, transform .18s; }
.topic-card:hover{ border-color:var(--crimson); background:rgba(236,228,214,.05); transform:translateY(-2px); }
.topic-card h3{ font-family:var(--serif); font-size:1.34rem; font-weight:500; margin:0; color:var(--ink); letter-spacing:-.01em; }
.topic-card p{ font-family:var(--read); font-size:.96rem; color:var(--ink-soft); line-height:1.5; margin:0; flex:1; }

/* ==================== living perfusion hero ==================== */
.perfusion-hero{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.perf-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:auto; }
/* legibility scrim: darken the left where the hero text sits, fade out over the brain */
.perfusion-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(95deg,#141110 0%,rgba(20,17,16,.74) 26%,rgba(20,17,16,.18) 52%,rgba(20,17,16,0) 72%); }
#hero .col{ pointer-events:none; } #hero .col a,#hero .col button{ pointer-events:auto; }