/* Self-hosted fonts (SIL Open Font License) */
@font-face{font-family:"Big Shoulders Stencil Display";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/big-shoulders-stencil-display-latin-900-normal.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/public-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/public-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/public-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/public-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
/* Man vs. Bear — night in the backcountry.
   Layout: a full-bleed stencil hero over a topographic map with drifting embers, a sticky chapter rail,
   then numbered chapters on a 1180px column, broken up by full-width "big number" bands. */
:root{
  --bg:#0A0E0C; --bg-2:#0E1311; --surface:#121916; --sunk:#0C110F; --raise:#18211D;
  --ink:#EDE6D6; --muted:#8F9A92; --faint:#5D6862; --line:#232E29; --topo:#17201B;
  --accent:#FF6B2C; --accent-2:#FF9A5C; --accent-ink:#160A03;
  --o0:#5FA8E0; --o1:#6E9A7E; --o2:#E4AA42; --o3:#E2473A;
  --s1:#E0DACB; --s2:#E4AA42; --s3:#4FC0A0; --s4:#FF6B2C;
  --bear:#C8936A; --human:#62A3D6; --outline:#9EAAA2;
  --f-stencil:"Big Shoulders Stencil Display","Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --f-display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:52px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:.95;letter-spacing:.005em}
p{margin:0}
a{color:var(--accent-2)}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* film grain over everything */
/* grain lives inside the hero only (a fixed full-page overlay forced a repaint on every scroll frame) */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.06;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 78% 30%,#16201B 0%,var(--bg) 62%)}
#topo,#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#embers{}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-block:34px 56px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand svg{width:26px;height:26px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.eyebrow{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:20px}
.eyebrow span{white-space:nowrap}
.eyebrow b{color:var(--accent);font-weight:500}
.title-wrap{position:relative;display:inline-block}
h1{font-family:var(--f-stencil);font-weight:900;font-size:clamp(84px,14.5vw,196px);line-height:.8;letter-spacing:-.005em;text-transform:uppercase}
h1 .l1{display:block;color:var(--ink)}
h1 .vs{display:inline-block;font-family:var(--f-mono);font-weight:500;font-size:.13em;letter-spacing:.2em;color:var(--muted);vertical-align:.9em;margin-left:.35em;border:1px solid var(--line);padding:.2em .45em;border-radius:3px}
h1 .l2{display:block;color:var(--accent);text-shadow:0 0 60px rgba(255,107,44,.25)}
.claws{position:absolute;right:-16%;bottom:-8%;width:56%;height:56%;pointer-events:none;overflow:visible}
.claws path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;opacity:.92;stroke-dasharray:400;stroke-dashoffset:400;animation:slash .5s cubic-bezier(.7,0,.2,1) forwards}
.claws path:nth-child(2){animation-delay:.08s}.claws path:nth-child(3){animation-delay:.16s}
@keyframes slash{to{stroke-dashoffset:0}}
.lede{max-width:54ch;margin-top:26px;font-size:18px;line-height:1.55;color:var(--ink)}
.lede em{font-style:normal;color:var(--accent-2)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--ink)}
.kpi{padding:14px 14px 4px 0;display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi + .kpi{padding-left:14px;border-left:1px solid var(--line)}
.kpi .v{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,4.8vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:.5em;font-weight:600;margin-left:1px}
.kpi .l{font-size:13px;color:var(--muted);line-height:1.3}
.kpi.k0 .v{color:var(--o0)} .kpi.k3 .v{color:var(--o3)}
.rng{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em}
#mode-line{margin-top:12px}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;align-items:center}
.share a,.share button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.share a:hover,.share button:hover{border-color:var(--accent);background:rgba(255,107,44,.08)}
.share svg{width:14px;height:14px;fill:currentColor}
.toast{font-family:var(--f-mono);font-size:11.5px;color:var(--accent-2)}

.field{position:relative;background:linear-gradient(180deg,var(--raise),var(--surface));border:1px solid var(--line);border-radius:6px;padding:16px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset}
.field-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.field-h h3{font-size:24px;font-weight:800}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;background:var(--sunk)}
.seg button{border:0;background:transparent;padding:4px 11px;border-radius:999px;cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);transition:color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg.wrap-ok{flex-wrap:wrap;border-radius:16px}
.dotwrap{position:relative;aspect-ratio:1;max-width:100%;width:100%;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
#dots{width:100%;height:100%;display:block;cursor:crosshair;image-rendering:pixelated}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px;margin-top:14px}
.legend div{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.legend i{width:11px;height:11px;border-radius:2px;flex:none}
.legend b{margin-left:auto;font-family:var(--f-mono);font-weight:500;font-size:12.5px}
.hint{margin-top:10px;font-size:12.5px;color:var(--muted)}
.scroll-cue{display:flex;align-items:center;gap:10px;margin-top:40px;color:var(--muted);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
#tip{position:fixed;z-index:60;pointer-events:none;background:var(--ink);color:var(--bg);padding:9px 11px;border-radius:4px;font-size:12.5px;line-height:1.4;max-width:280px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#tip b{font-weight:600}
#tip .o{display:inline-block;margin-top:4px;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;filter:brightness(.7)}
.o0{background:var(--o0)} .o1{background:var(--o1)} .o2{background:var(--o2)} .o3{background:var(--o3)}


/* ---------- photo cover ---------- */
.hero.cover{min-height:clamp(600px,88vh,940px);display:flex;flex-direction:column;background:#0A0E0C}
.hero.cover > .wrap{flex:1;display:flex;flex-direction:column;width:100%}
.cover-img{position:absolute;inset:0;overflow:hidden;z-index:0}
.cover-img img{position:absolute;inset:-4% 0 0 0;width:100%;height:104%;object-fit:cover;object-position:62% 62%;opacity:0;transition:opacity 1.2s ease;will-change:transform}
.cover-img img.ready{opacity:1}
.cover-img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,14,12,.94) 0%,rgba(10,14,12,.78) 30%,rgba(10,14,12,.18) 62%,rgba(10,14,12,0) 80%),
  linear-gradient(180deg,rgba(10,14,12,.55) 0%,rgba(10,14,12,0) 22%,rgba(10,14,12,0) 70%,rgba(10,14,12,1) 100%)}
.cover-copy{margin-top:auto;margin-bottom:auto;max-width:760px;padding-block:24px 10px}
.hero.cover .scroll-cue{margin-top:10px}
.results{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 78% 30%,#121B16 0%,var(--bg) 62%);border-bottom:1px solid var(--line)}
.results .wrap{position:relative;z-index:1;padding-block:56px 64px}
.results .kpis{margin-top:0}
.results .hero-grid{align-items:start}
.results-note{margin-top:22px;color:var(--muted);max-width:52ch;font-size:14.5px}
@media (max-width: 980px){
  .cover-img img{object-position:72% 60%}
  .cover-img::after{background:linear-gradient(180deg,rgba(10,14,12,.6) 0%,rgba(10,14,12,.15) 30%,rgba(10,14,12,.55) 60%,rgba(10,14,12,1) 100%)}
  .cover-copy{margin-top:auto;margin-bottom:0}
}

/* ---------- chapter rail ---------- */
.rail{position:sticky;top:0;z-index:50;background:rgba(10,14,12,.97);border-block:1px solid var(--line)}
.rail .wrap{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.rail .mark{font-family:var(--f-stencil);font-weight:900;font-size:22px;letter-spacing:.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.rail .mark span{color:var(--accent)}
.rail nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.rail nav::-webkit-scrollbar{display:none}
.rail ol{display:flex;gap:4px;list-style:none;margin:0;padding:0;white-space:nowrap}
.rail ol a{display:block;padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted);text-decoration:none;transition:color .15s,background .15s}
.rail ol a b{font-family:var(--f-mono);font-weight:500;font-size:10.5px;color:var(--faint);margin-right:5px}
.rail ol a:hover{color:var(--ink)}
.rail ol a.on{color:var(--ink);background:var(--raise)}
.rail ol a.on b{color:var(--accent)}
.rail .cta{white-space:nowrap;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;text-decoration:none}

/* ---------- chapters ---------- */
.chapter{padding-block:84px 12px}
.ch-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:end;margin-bottom:26px}
.ch-n{font-family:var(--f-stencil);font-weight:900;font-size:clamp(64px,8vw,112px);line-height:.78;color:transparent;-webkit-text-stroke:1.5px var(--accent);grid-row:span 2}
.ch-h .mono{align-self:end}
.ch-h h2{font-size:clamp(34px,4.8vw,58px);font-weight:800}
.ch-p{color:var(--muted);max-width:66ch;font-size:16px;margin:-6px 0 28px}
.sub-h{display:flex;align-items:baseline;gap:12px;margin:46px 0 8px;flex-wrap:wrap}
.sub-h h3{font-size:clamp(24px,2.8vw,32px);font-weight:800}
.sub-p{color:var(--muted);max-width:66ch;margin-bottom:18px;font-size:14.5px}

/* big-number bands */
.band{position:relative;margin-top:84px;border-block:1px solid var(--line);background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 14px,transparent 14px 28px),var(--bg-2);overflow:hidden}
.band .wrap{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:20px 48px;align-items:center;padding-block:46px}
.band .big{font-family:var(--f-stencil);font-weight:900;font-size:clamp(88px,15vw,210px);line-height:.8;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.band .big small{font-size:.38em;color:var(--ink);margin-left:.08em}
.band .txt{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3vw,38px);line-height:1.1;max-width:22ch;text-wrap:balance}
.band .txt + .mono{margin-top:12px;display:block}
.band.cold .big{color:var(--o0)} .band.red .big{color:var(--o3)}

/* contenders */
svg.lineup{display:block;width:100%;height:auto;overflow:visible}
svg.lineup text{font-family:var(--f-mono);font-size:10.5px;fill:var(--muted)}
svg.lineup .nm{font-family:var(--f-body);font-size:13px;font-weight:600;fill:var(--ink)}
svg.lineup .dr{fill:var(--o3);font-weight:500}
svg.lineup .shadow{fill:#000;opacity:.55}
svg.lineup .ol *{fill:var(--outline)!important;stroke:var(--outline);stroke-width:3.2}
svg.lineup .ol .mk{display:none}
svg.lineup .who{transition:opacity .2s ease,transform .25s ease}
svg.lineup:hover .beast{opacity:.4}
svg.lineup .beast{cursor:pointer;outline:none}
svg.lineup .beast:hover,svg.lineup .beast:focus-visible{opacity:1;transform:translateY(-6px)}
svg.lineup .picked .nm{fill:var(--accent)}
svg.lineup .picked .shadow{fill:var(--accent);opacity:.6}
.lineup-stage{position:relative;border-radius:6px;padding:10px 0 0;background:radial-gradient(70% 90% at 50% 100%,rgba(255,107,44,.09),transparent 70%)}

/* rig */
.rig{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px}
.rig-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:14px}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{border:1px solid var(--line);background:var(--sunk);padding:7px 13px;border-radius:999px;cursor:pointer;font-size:13px;transition:border-color .15s,transform .15s,background .15s}
.chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,107,44,.12);color:var(--ink)}
.modebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:6px}
.ctrl-l{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.modehelp{font-size:13.5px;color:var(--muted);max-width:80ch;margin-bottom:22px}
#modeSeg button{font-size:11.5px;padding:5px 12px}
.ctrls{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ctrl{display:flex;flex-direction:column;gap:6px;min-width:0}
.ctrl label{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ctrl select,.ctrl input{appearance:none;-webkit-appearance:none;background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:9px 30px 9px 11px;font-size:14px;width:100%;min-width:0;color:var(--ink);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.ctrl select option{background:var(--surface)}
.ctrl input{background-image:none;padding-right:11px;font-family:var(--f-mono)}
.ctrl select.locked{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.btn{border:0;cursor:pointer;border-radius:4px;padding:12px 20px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px rgba(255,107,44,.6)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.status{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* findings */
.insights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}
.ins{border-top:2px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ins .big{font-family:var(--f-display);font-weight:800;font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
.ins p{font-size:14.5px;color:var(--ink)}
.ins.t3{border-color:var(--o3)} .ins.t3 .big{color:var(--o3)}
.ins.t1{border-color:var(--o1)} .ins.t1 .big{color:var(--ink)}
.ins.t0{border-color:var(--o0)} .ins.t0 .big{color:var(--o0)}
.ins.t2{border-color:var(--o2)} .ins.t2 .big{color:var(--o2)}
#scenario-line{color:var(--muted);max-width:70ch;margin:-6px 0 28px;font-size:15px}
#scenario-line b{color:var(--ink);font-weight:600}

/* panels & charts */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px 18px 16px;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.panel-h h3{font-size:22px;font-weight:800}
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) 50px;gap:10px;align-items:center}
.rl{font-size:13.5px;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.rl small{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.bar{display:flex;height:16px;border-radius:2px;overflow:hidden;background:var(--sunk)}
.bar i{display:block;height:100%}
.bar i + i{box-shadow:inset 1px 0 0 var(--surface)}
.rv{font-family:var(--f-mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--o3);font-weight:500}
.row.fixed .rl::after{content:"fixed";margin-left:6px;font-family:var(--f-mono);font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.imp{display:flex;flex-direction:column;gap:9px}
.imp .row{grid-template-columns:minmax(0,180px) minmax(0,1fr) 90px}
.imp .rv{white-space:nowrap;color:var(--ink)}
.imp .bar{background:transparent;height:14px}
.imp .bar i{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:1px}
.imp .row.fixed .bar i{background:var(--line)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.heat{border-collapse:separate;border-spacing:2px;font-variant-numeric:tabular-nums;min-width:820px;width:100%}
.heat th{font-family:var(--f-mono);font-weight:500;font-size:11px;color:var(--muted);padding:4px 2px;text-align:center;white-space:nowrap}
.heat th.sp{text-align:left;font-family:var(--f-body);font-size:13px;color:var(--ink);font-weight:500;padding-right:8px}
.heat td{height:34px;text-align:center;font-family:var(--f-mono);font-size:11.5px;border-radius:2px;min-width:44px}
.heat td.dark{color:#fff}
.heat .grp th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line)}
svg.chart{width:100%;height:auto;display:block;overflow:visible}
svg text{font-family:var(--f-mono);font-size:11px;fill:var(--muted)}
svg .grid{stroke:var(--line);stroke-width:1}
.chart-wrap{min-width:0}
.keyline{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.keyline span{display:inline-flex;align-items:center;gap:6px}
.keyline i{width:14px;height:3px;border-radius:2px;display:inline-block}
.fig-foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-top:12px}
#galton{display:block;width:100%}
.mt-wrap{position:relative}
#mountain{display:block;width:100%;cursor:grab;touch-action:pan-y}
#mountain:active{cursor:grabbing}
#mtTip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--bg);padding:7px 10px;border-radius:4px;font-size:12.5px;line-height:1.4;white-space:nowrap}
svg.body .fig path,svg.body .fig rect,svg.body .fig circle{stroke:var(--surface);stroke-width:2}
svg.body .bl-n{font-family:var(--f-body);font-size:13.5px;font-weight:600;fill:var(--ink)}
svg.body .bl-v{font-size:11px;fill:var(--muted)}
svg.forest .fl{font-family:var(--f-body);font-size:13px;fill:var(--ink)}
svg.forest .fv{fill:var(--o3);font-weight:500}
svg.forest .fh{font-size:10px;letter-spacing:.08em}
.grid2.unc{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.thlist{display:flex;flex-direction:column;margin-bottom:12px}
.th{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.th b{font-family:var(--f-mono);font-weight:500;font-size:12px;white-space:nowrap}

/* replay */
.replay{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:28px}
.card-sheet{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:calc(var(--nav-h) + 16px)}
.verdict{font-family:var(--f-stencil);font-weight:900;font-size:42px;line-height:.9;text-transform:uppercase}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;font-size:13.5px;margin:0}
.facts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.facts dd{margin:0;min-width:0}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--accent);padding-left:10px}
.hp,.injmini{display:flex;flex-direction:column;gap:6px}
.hp .hb,.injmini .hb{display:grid;grid-template-columns:64px minmax(0,1fr) 40px;align-items:center;gap:8px;font-size:12.5px}
.hp .track,.injmini .track{height:7px;background:var(--sunk);border-radius:4px;overflow:hidden}
.hp .track i,.injmini .track i{display:block;height:100%;border-radius:4px}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:73px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl li{display:grid;grid-template-columns:62px 22px minmax(0,1fr);align-items:start;padding:6px 0;font-size:14.5px;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.tl .ts{font-family:var(--f-mono);font-size:11.5px;color:var(--faint);padding-top:3px;text-align:right;padding-right:10px}
.tl .dot{width:9px;height:9px;border-radius:50%;margin:7px 0 0 7px;background:var(--muted);position:relative;z-index:1;box-shadow:0 0 0 3px var(--bg)}
.tl .k-bear .dot{background:var(--bear)} .tl .k-human .dot{background:var(--human)}
.tl .k-contact .dot{background:var(--accent);width:12px;height:12px;margin-left:5px;box-shadow:0 0 0 3px var(--bg),0 0 14px var(--accent)}
.tl .k-post .dot{background:var(--o2)}
.tl .k-miss .tx{color:var(--muted)} .tl .k-tick .tx{color:var(--muted);font-size:13px}
.tl .k-start .tx,.tl .k-post .tx{font-weight:500}
.tl .k-end .tx{font-weight:600}
.re-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}


/* how many people */
.mob{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:26px}
.mob-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:center;margin-bottom:22px}
.mob-big{font-family:var(--f-stencil);font-weight:900;font-size:clamp(90px,13vw,170px);line-height:.8;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.mob-big small{font-size:.3em;color:var(--ink);margin-left:.1em}
.mob-line{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.12;max-width:30ch;text-wrap:balance}
.mob-sub{color:var(--muted);margin-top:10px;max-width:60ch}
.mob-ctrls{display:flex;flex-wrap:wrap;gap:14px 28px;margin-bottom:18px}
.mob-ctrls>div{display:flex;flex-direction:column;gap:8px}
.mob-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.mob .panel{background:var(--sunk)}
.mob-side{display:flex;flex-direction:column;gap:14px}
.mob-side label b{color:var(--accent);font-size:15px}
#mobRange{width:100%;accent-color:var(--accent)}
.crowd{display:flex;flex-wrap:wrap;gap:5px;min-height:60px;align-content:flex-start}
.crowd i,.crowd-key i{display:inline-block;width:14px;height:22px;border-radius:7px 7px 3px 3px;background:var(--o1);position:relative}
.crowd i::before,.crowd-key i::before{content:"";position:absolute;left:3px;top:-9px;width:8px;height:8px;border-radius:50%;background:inherit}
.crowd i{margin-top:9px}
.crowd i.hurt,.crowd-key i.hurt{background:var(--o2)} .crowd i.dead,.crowd-key i.dead{background:var(--o3)}
.crowd-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.crowd-key span{display:inline-flex;align-items:center;gap:7px}
.crowd-key i{width:9px;height:14px;margin-top:6px}.crowd-key i::before{left:2px;top:-6px;width:5px;height:5px}
.mob-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--line);padding-top:12px}
.mob-stats b{display:block;font-family:var(--f-display);font-size:30px;font-weight:800;line-height:1}
.mob-stats span{font-size:12px;color:var(--muted);line-height:1.3;display:block;margin-top:4px}
/* reality check */
svg.reality .rq{font-family:var(--f-body);font-size:13.5px;fill:var(--ink)}
svg.reality .rg{fill:var(--accent-2);font-weight:500}
.real-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.real-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.real-list li::marker{color:var(--accent);font-family:var(--f-mono)}
.real-list span{color:var(--muted)}
.real-list a{white-space:nowrap}
/* closest real case */
.case-card:empty{display:none}
.case-card{margin-top:22px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:16px 18px;background:linear-gradient(90deg,rgba(255,107,44,.06),transparent 60%)}
.case-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.case-o{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid currentColor}
.case-o.o-0{color:var(--o0)} .case-o.o-1{color:var(--o1)} .case-o.o-2{color:var(--o2)} .case-o.o-3{color:var(--o3)}
.case-card h4{font-family:var(--f-display);font-size:24px;font-weight:800;margin:4px 0 6px}
.case-card p{font-size:14.5px}
.case-card .case-m{color:var(--muted);font-size:13px;margin-top:8px}
.case-card a{display:inline-block;margin-top:8px;font-size:13.5px}
@media (max-width: 980px){ .mob-grid,.real-grid{grid-template-columns:minmax(0,1fr)} .mob-head{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 560px){ .mob{padding:16px} .mob-stats b{font-size:24px} }

/* method + footer */
.method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px}
.method h3{font-size:22px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.method li{font-size:14.5px;color:var(--ink)}
.method ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.method li::marker{color:var(--accent)}
.method .muted{color:var(--muted)}
.disclaimer{margin-top:36px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;color:var(--muted);font-size:14px;max-width:80ch}
.disclaimer b{color:var(--ink)}
footer{border-top:1px solid var(--line);margin-top:84px;background:var(--bg-2)}
footer .wrap{padding-block:30px 40px;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
footer .mark{font-family:var(--f-stencil);font-weight:900;font-size:30px;color:var(--ink)}
footer .mark span{color:var(--accent)}

/* reveal on scroll (content stays visible without JS) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .field{max-width:560px}
  .insights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid2.unc{grid-template-columns:minmax(0,1fr)}
  .replay{grid-template-columns:minmax(0,1fr)}
  .card-sheet{position:static}
  .method{grid-template-columns:minmax(0,1fr)}
  .band .wrap{grid-template-columns:minmax(0,1fr);gap:12px}
  .rail .cta{display:none}
}
@media (max-width: 560px){
  body{font-size:15px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){padding-left:0;border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .insights{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,110px) minmax(0,1fr) 44px}
  .imp .row{grid-template-columns:minmax(0,112px) minmax(0,1fr) 78px}
  .tl li{grid-template-columns:52px 22px minmax(0,1fr)}
  .tl::before{left:63px}
  .ch-h{grid-template-columns:minmax(0,1fr)}
  .ch-n{grid-row:auto;font-size:64px}
  .rig{padding:16px}
  .rail .mark{font-size:18px}
  .chapter{padding-top:64px}
  .lede{font-size:16.5px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .claws path{stroke-dashoffset:0}
  .js .reveal{opacity:1;transform:none}
}