/* ── fonts, self-hosted ─────────────────────────────────────────────────────────
   Latin subsets vendored into netlify-site/fonts/ on 2026-07-31. The page used to pull
   these from fonts.googleapis.com, which sent every visitor's IP to a third party and
   made the only external request on an otherwise self-contained page. All three families
   are SIL Open Font License, so redistribution is permitted.
   One file per family, not per weight: Google serves these as variable fonts, and the
   400 and 500 downloads were byte-identical (same sha1), so a second copy bought
   nothing. 80KB total. */
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:200 500;
 font-display:swap;src:url(fonts/martian-mono.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;
 font-display:swap;src:url(fonts/jetbrains-mono.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 500;
 font-display:swap;src:url(fonts/space-grotesk.woff2) format('woff2')}

/* ── tokens ─────────────────────────────────────────────────────────────────── */
:root{
 --void:#000;--ink-950:#050706;--ink-900:#0A0D0B;--ink-850:#0E1210;--ink-750:#191F1C;
 --ink-700:#212824;--gray-500:#454F4A;--gray-400:#6B7671;--gray-300:#909B96;--white:#F4F7F5;
 --bone-050:#FBF9F4;--bone-100:#F0EDE4;--bone-200:#D7D2C6;--bone-300:#A9A59B;
 --phosphor-300:#DCFF7A;--phosphor-400:#D2FA57;--phosphor-500:#C2F53C;--phosphor-600:#A7D820;
 --signal-info:#57D9D0;--signal-warn:#E8B34A;--signal-danger:#F2604C;
 --dim:#79837E;--dimmer:#727D77;--sage:#96A08C;
 --text-display:var(--bone-100);--text-prose:var(--bone-200);--text-soft:var(--bone-300);
 --text-secondary:var(--gray-300);--text-accent:var(--phosphor-500);
 --hairline:rgba(240,237,228,.07);--hairline-2:rgba(240,237,228,.09);
 --border-subtle:rgba(240,237,228,.13);--border-strong:rgba(240,237,228,.24);
 --specular:inset 0 1px 0 rgba(251,249,244,.055);
 --shadow-panel:inset 0 1px 0 rgba(251,249,244,.055),0 40px 80px -48px rgba(0,0,0,.95);
 --veil:radial-gradient(120% 90% at 50% -12%,rgba(251,249,244,.045),transparent 62%);
 --font-display:"Martian Mono","JetBrains Mono",ui-monospace,monospace;
 --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --font-sans:"Space Grotesk","Helvetica Neue",Helvetica,sans-serif;
 --ease:cubic-bezier(.2,.6,.2,1);--fast:130ms;
 --shell:1160px;--pad:clamp(18px,4.5vw,40px);
}
.t-accent{color:var(--phosphor-500)}.t-info{color:var(--signal-info)}
.t-warn{color:var(--signal-warn)}.t-danger{color:var(--signal-danger)}
.t-muted{color:var(--gray-300)}

/* ── reset + baseline ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--text-display);
 font:400 15px/1.6 var(--font-mono)}
::selection{background:var(--phosphor-500);color:var(--void)}
h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.2;text-transform:uppercase;
 color:var(--text-display)}
p{margin:0;text-wrap:pretty}
a{color:var(--phosphor-500);text-decoration:none}
a:hover{color:var(--phosphor-400)}
a:focus-visible,button:focus-visible{outline:2px solid var(--phosphor-500);outline-offset:2px}
button{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-950)}
::-webkit-scrollbar-thumb{background:var(--ink-700);border:2px solid var(--ink-950)}
::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}
.ic{display:inline-block;flex:0 0 auto;vertical-align:-0.15em;line-height:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell{max-width:var(--shell);margin:0 auto}
section[id],#signals{scroll-margin-top:96px}
.skip-link{position:fixed;left:14px;top:10px;z-index:100;min-height:44px;padding:0 16px;
 display:inline-flex;align-items:center;background:var(--bone-050);color:var(--void);
 border:2px solid var(--phosphor-500);border-radius:2px;font-size:12px;font-weight:500;
 transform:translateY(-160%);transition:transform var(--fast) var(--ease)}
.skip-link:focus{transform:translateY(0);color:var(--void)}

/* ── header ─────────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:stretch;gap:0 20px;
 min-height:64px;padding:0 clamp(14px,3vw,28px);flex-wrap:wrap;background:rgba(0,0,0,.72);
 backdrop-filter:blur(24px) saturate(118%);-webkit-backdrop-filter:blur(24px) saturate(118%);
 border-bottom:1px solid var(--hairline-2);box-shadow:var(--specular)}
.hdr-brand{display:inline-flex;align-items:center;gap:14px;flex:1;min-width:180px;min-height:64px}
.mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
 min-height:44px;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--bone-100);flex:none}
.brand-symbol{display:block;width:24px;height:24px;flex:none}
.hdr-sub{display:inline-flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
.vr{width:1px;height:18px;background:var(--border-subtle);flex:none}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
 white-space:nowrap}
.hdr-nav{display:flex;align-items:stretch;flex:0 1 auto;max-width:100%;min-height:64px;
 border-left:1px solid rgba(240,237,228,.11);border-right:1px solid rgba(240,237,228,.11);
 background:rgba(10,13,11,.55);box-shadow:inset 0 1px 0 rgba(251,249,244,.05);overflow-x:auto}
.hdr-nav a{display:inline-flex;align-items:center;gap:9px;min-height:64px;padding:0 17px;
 font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
 color:var(--gray-300);border-left:1px solid rgba(240,237,228,.08);
 transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.hdr-nav a:first-child{border-left-color:transparent}
.hdr-nav a b{font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--dim);
 font-variant-numeric:tabular-nums}
.hdr-nav a:hover{color:var(--phosphor-400);background:rgba(240,237,228,.04)}
.hdr-nav a.on{color:var(--phosphor-500);background:rgba(194,245,60,.08);
 box-shadow:inset 0 2px 0 var(--phosphor-500)}
.hdr-nav a.on b{color:rgba(194,245,60,.65)}
/* No min-width:0 here on purpose: it let this box shrink under its own contents, and the
   chip inside is nowrap, so the chip spilled left across the nav. Keeping the automatic
   content floor makes the nav (which scrolls) give way instead. */
.hdr-end{display:inline-flex;align-items:center;justify-content:flex-end;flex:1;
 min-height:64px}
.chip-live{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 13px;
 border:1px solid rgba(240,237,228,.11);border-radius:2px;background:rgba(10,13,11,.55);
 box-shadow:inset 0 1px 0 rgba(251,249,244,.05);font-size:10px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gray-300);font-variant-numeric:tabular-nums;
 white-space:nowrap}
.chip-live .pip{width:5px;height:5px;background:var(--phosphor-500);
 box-shadow:0 0 10px -2px rgba(194,245,60,.4);flex:none}
.chip-live .vr{height:14px}
.chip-live .upd{color:var(--dim)}
/* 44px, not 46: <button> is already border-box in the UA stylesheet, unlike the
   bordered spans elsewhere, so the border does not add to the declared height. */
.menu-btn{display:none;align-items:center;justify-content:center;gap:9px;height:44px;
 min-width:44px;padding:0 13px;border:1px solid rgba(240,237,228,.16);border-radius:2px;
 background:rgba(10,13,11,.55);box-shadow:inset 0 1px 0 rgba(251,249,244,.05);
 color:var(--bone-100);cursor:pointer;flex:none;font-family:var(--font-mono);font-size:10px;
 letter-spacing:.18em;text-transform:uppercase}
/* Opaque, and deliberately WITHOUT a backdrop-filter. The panel used to carry
   blur(22px) + a .95 alpha to match the header's frosted look, but it is a child of
   `.hdr`, which has its own backdrop-filter. A filtered ancestor becomes the backdrop
   root, so the child's filter has nothing left to sample and silently no-ops — leaving
   the h1 and lede showing through the nav as crisp, unblurred text at 5%. Proven by
   cloning the panel to <body> with identical computed styles: un-nested it frosts,
   nested it leaks. Solid ink is the honest fix; re-adding the filter here does nothing. */
.menu-panel{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
 background:var(--ink-950);border-bottom:1px solid var(--border-subtle);
 box-shadow:0 40px 80px -48px rgba(0,0,0,.95)}
.menu-panel.open{display:flex}
.menu-panel a{display:flex;align-items:center;gap:14px;min-height:50px;
 padding:0 clamp(16px,4vw,28px);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--gray-300);border-top:1px solid rgba(240,237,228,.07)}
.menu-panel a b{font-weight:400;font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.menu-panel a.on{color:var(--phosphor-500);background:rgba(194,245,60,.08);
 box-shadow:inset 2px 0 0 var(--phosphor-500)}
.menu-panel a.on b{color:rgba(194,245,60,.65)}
.menu-panel .pip{width:5px;height:5px;background:var(--phosphor-500);flex:none;
 margin-left:auto;display:none}
.menu-panel a.on .pip{display:block}

/* ── hero ───────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(22px,3.4vw,34px) var(--pad) clamp(56px,9vw,88px);
 background-color:var(--void);
 background-image:
  linear-gradient(rgba(240,237,228,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(240,237,228,.035) 1px,transparent 1px),
  linear-gradient(rgba(240,237,228,.016) 1px,transparent 1px),
  linear-gradient(90deg,rgba(240,237,228,.016) 1px,transparent 1px),
  radial-gradient(120% 90% at 50% -12%,rgba(251,249,244,.045),transparent 62%);
 background-size:64px 64px,64px 64px,8px 8px,8px 8px,100% 100%}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));
 gap:30px 44px;align-items:center}
.hero-copy{order:1;display:flex;flex-direction:column;gap:30px;min-width:0}
.tag-row{display:flex;align-items:center;gap:12px}
.num-chip{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--phosphor-500);
 border:1px solid rgba(251,249,244,.1);padding:3px 6px;flex:none}
.tag-row .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;
 color:var(--phosphor-500)}
.rule{flex:1;height:1px;background:var(--hairline)}
h1{font-weight:200;font-size:clamp(31px,3.8vw,54px);line-height:1.06;letter-spacing:-.012em}
h1 span{display:block}
.caret{display:inline-block;width:.42em;height:.14em;margin-left:.18em;
 background:var(--phosphor-500);animation:caret 1.1s step-end infinite}
.lede{font-family:var(--font-sans);font-size:16.5px;line-height:1.6;color:var(--text-prose);
 max-width:56ch}
.hero-stats{order:3;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:24px 32px;padding-top:18px;border-top:1px solid var(--hairline)}
.stat{display:flex;flex-direction:column;gap:7px;min-width:0}
.stat .k{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--gray-300)}
.stat .k .ic{color:var(--dim)}
.stat .v{font-family:var(--font-display);font-weight:200;font-size:clamp(23px,2.4vw,32px);
 line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .v u{font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:0;
 color:var(--dim);text-decoration:none}
.stat .s{font-size:11.5px;line-height:1.45;color:var(--dim)}
.stat .s.hi{color:var(--phosphor-500)}

/* ── radar plate ────────────────────────────────────────────────────────────── */
.plate{order:2;position:relative;justify-self:center;align-self:center;width:100%;
 max-width:440px;aspect-ratio:1/1}
.plate-face{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(240,237,228,.14);
 box-shadow:inset 0 1px 0 rgba(251,249,244,.06),inset 0 0 70px 14px rgba(0,0,0,.5);
 background-image:radial-gradient(circle at 50% 50%,rgba(194,245,60,.022),transparent 58%),
  radial-gradient(110% 80% at 50% -8%,rgba(251,249,244,.045),transparent 58%);overflow:hidden}
.sweep{position:absolute;inset:0;animation:sweep 11s linear infinite;
 background-image:conic-gradient(from 0deg,transparent 0deg,transparent 232deg,
  rgba(194,245,60,.004) 262deg,rgba(194,245,60,.014) 300deg,rgba(194,245,60,.034) 334deg,
  rgba(194,245,60,.07) 356deg,rgba(194,245,60,.05) 360deg)}
.sweep i{position:absolute;left:50%;top:0;bottom:50%;width:1px;
 background:linear-gradient(to top,rgba(194,245,60,0),rgba(194,245,60,.26) 82%,rgba(194,245,60,0))}
.ticks{position:absolute;inset:0;overflow:hidden;border-radius:50%;pointer-events:none}
.ticks i{position:absolute;inset:0}
.ticks i b{position:absolute;left:50%;top:0;width:1px;display:block}
.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
 border:1px dashed rgba(240,237,228,.085)}
.ring-lbl{position:absolute;top:50%;transform:translate(-50%,calc(-100% - 5px));padding:0 3px;
 background:rgba(0,0,0,.72);font-size:10.5px;letter-spacing:.1em;color:var(--dim);
 font-variant-numeric:tabular-nums;pointer-events:none}
.cross-v{position:absolute;left:50%;top:0;bottom:0;width:1px;
 background:linear-gradient(to bottom,transparent,rgba(240,237,228,.085) 14%,
  rgba(240,237,228,.085) 86%,transparent)}
.cross-h{position:absolute;top:50%;left:0;right:0;height:1px;
 background:linear-gradient(to right,transparent,rgba(240,237,228,.085) 14%,
  rgba(240,237,228,.085) 86%,transparent)}
.veil-v{position:absolute;left:50%;top:0;bottom:0;width:112px;transform:translateX(-50%);
 background:linear-gradient(to right,transparent,rgba(0,0,0,.5) 50%,transparent);
 pointer-events:none}
.veil-h{position:absolute;top:50%;left:0;right:0;height:56px;transform:translateY(-50%);
 background:linear-gradient(to bottom,transparent,rgba(0,0,0,.5) 50%,transparent);
 pointer-events:none}
.quad{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;
 gap:6px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
 white-space:nowrap;pointer-events:none}
.quad u{color:#727D77;font-variant-numeric:tabular-nums;text-decoration:none}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;
 background:var(--bone-100);box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.blip{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:none;
 width:44px;height:44px;min-width:44px;min-height:44px;cursor:pointer;display:grid;place-items:center}
.blip .echo,.blip .glint{grid-area:1/1;display:grid;place-items:center;pointer-events:none}
.blip .echo{opacity:0;animation:echo 11s linear infinite}
.blip .glint{animation:flare 11s linear infinite;transition:opacity var(--fast) var(--ease)}
.blip .corner{grid-area:1/1;border-top:1px solid var(--bone-100);
 border-left:1px solid var(--bone-100);
 clip-path:polygon(0 0,32% 0,32% 1.5px,1.5px 1.5px,1.5px 32%,0 32%);display:none}
.blip.on .corner{display:block}
.blip .c2{transform:rotate(90deg)}.blip .c3{transform:rotate(180deg)}
.blip .c4{transform:rotate(270deg)}
.blip.on{z-index:20}
.blip.on .glint{opacity:1}

/* ── readout ────────────────────────────────────────────────────────────────── */
.readout{order:4;align-self:center;width:100%;display:flex;flex-direction:column;
 border:1px solid var(--hairline-2);border-radius:2px;background:var(--ink-900);
 background-image:radial-gradient(120% 90% at 50% -20%,rgba(251,249,244,.035),transparent 60%);
 box-shadow:var(--specular)}
.readout-top{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 14px;
 border-bottom:1px solid var(--hairline)}
.readout-top .pip{width:5px;height:5px;flex:none;background:var(--gray-500)}
.readout-top .state{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--dim);flex:none}
.readout-top .gap{flex:1;min-width:10px;height:1px;background:rgba(240,237,228,.08)}
/* `flex:0 1 auto`, not `flex:none`. With flex-shrink 0 the ellipsis below could never
   engage: at 320px "Rank 01 · Technology / AI" pushed the document to 356px and the whole
   page scrolled sideways. It shrinks and truncates now. */
.readout-top .who{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.readout.live .readout-top .pip{background:var(--phosphor-500)}
.readout.live .readout-top .state{color:var(--phosphor-500)}
.readout-name{padding:13px 14px 12px;font-family:var(--font-display);font-weight:500;
 font-size:13.5px;line-height:1.3;text-transform:uppercase;letter-spacing:.02em;
 color:var(--bone-100)}
.readout-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 border-top:1px solid rgba(240,237,228,.06)}
/* Direct child only: a bare `span` here also matched the label and value inside each
   cell, padding them a second time and drawing a hairline under every label. */
.readout-facts > span{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 14px;
 border-bottom:1px solid rgba(240,237,228,.05);box-shadow:inset 1px 0 0 rgba(240,237,228,.05)}
.readout-facts .k{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.readout-facts .v{font-size:12.5px;line-height:1.25;color:var(--text-prose);
 font-variant-numeric:tabular-nums}
.readout-note{display:block;padding:10px 14px 11px;font-size:10.5px;letter-spacing:.02em;
 line-height:1.5;color:var(--dim)}

/* ── key bar ────────────────────────────────────────────────────────────────── */
.keybar{margin:26px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
 padding:9px 14px;border:1px solid rgba(240,237,228,.06);border-radius:2px}
.keybar .h{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);flex:none}
.keybar span.k{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
/* inline-flex, or the wrapper takes a full 24px line box and the row grows 10px */
.keybar .ico{display:inline-flex;flex:none;opacity:.8}
.keybar .term{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;flex:none}
.keybar .short{font-size:10px;line-height:1.4;color:var(--dim)}
.keybar .hint{margin-left:auto;font-size:10px;color:var(--dimmer);flex:none}

/* ── section scaffold ───────────────────────────────────────────────────────── */
.sec{max-width:var(--shell);margin:0 auto;padding:clamp(64px,10vw,104px) var(--pad) 0}
.sec.tight{padding-top:8px}
.sec.last{padding-bottom:clamp(72px,12vw,120px)}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head h2{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.2em;
 color:var(--phosphor-500)}
.sec-head .count{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sec-lede{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--gray-300);
 margin-bottom:24px}
.sec-lede.close{margin-bottom:18px}   /* the ranking lede sits tighter to its table */

/* ── measures ───────────────────────────────────────────────────────────────── */
.measures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.measure{position:relative;display:flex;flex-direction:column;background:var(--ink-900);
 border:1px solid var(--hairline);border-radius:2px;box-shadow:var(--shadow-panel);
 padding:20px 22px 19px;transition:border-color var(--fast) var(--ease)}
.measure:hover{border-color:rgba(194,245,60,.35)}
.measure .top{display:flex;align-items:baseline;gap:11px}
.measure .n{font-family:var(--font-display);font-weight:200;font-size:24px;line-height:1;
 letter-spacing:-.01em;color:rgba(240,237,228,.40);flex:none}
.measure h3{font-weight:500;font-size:13px;line-height:1.25;letter-spacing:.02em;flex:1;
 min-width:0}
.measure .top .ic{color:var(--dim);align-self:center}
.measure .shown{margin-top:9px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--dim)}
.measure .shown u{color:var(--sage);text-decoration:none}
.measure .body{margin-top:13px;font-family:var(--font-sans);font-size:14px;line-height:1.62;
 color:var(--text-prose)}
.measure .impact{margin-top:auto;padding-top:13px;font-family:var(--font-sans);font-size:13.5px;
 line-height:1.6;color:var(--text-soft)}
.measure .impact b{font-family:var(--font-mono);font-weight:400;font-size:9.5px;
 letter-spacing:.2em;text-transform:uppercase;color:var(--phosphor-500)}

/* ── ledger: reading key ────────────────────────────────────────────────────── */
.tablekey{display:grid;gap:1px;background:rgba(240,237,228,.08);border:1px solid var(--hairline-2);
 border-radius:2px;overflow:hidden;margin-bottom:12px}
.tablekey-top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;
 flex-wrap:wrap;padding:10px 18px;background:var(--ink-900);box-shadow:var(--specular)}
.tablekey-top .t{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--dim)}
.tablekey-top .t i{width:5px;height:5px;background:var(--phosphor-500)}
.tablekey-top .hint{display:inline-flex;align-items:center;gap:7px;font-size:11px;
 letter-spacing:.02em;color:var(--dim)}
.tablekey-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
 background:var(--ink-900)}
.tablekey-cols div{display:flex;flex-direction:column;gap:6px;padding:12px 18px;
 background:var(--ink-900);box-shadow:-1px -1px 0 0 rgba(240,237,228,.08)}
.tablekey-cols .k{display:inline-flex;align-items:center;gap:7px;font-size:10px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--bone-100)}
.tablekey-cols .k .ic{color:var(--gray-300)}
.tablekey-cols .d{font-size:11px;line-height:1.5;color:var(--dim)}
.tablekey-foot{display:flex;align-items:flex-start;gap:9px;padding:10px 18px;background:var(--ink-900)}
.tablekey-foot .ic{color:var(--phosphor-500);flex:none;margin-top:3px}
.tablekey-foot.conc-amber .ic{color:var(--signal-warn)}
.tablekey-foot.conc-red .ic{color:var(--signal-danger)}
.tablekey-foot p{font-size:11.5px;line-height:1.5;color:var(--gray-300)}
.tablekey-foot b{font-weight:400;color:var(--text-prose)}

/* ── ledger: table ──────────────────────────────────────────────────────────── */
.rank-tbl{background:var(--ink-900);background-image:var(--veil);border:1px solid var(--hairline);
 border-radius:2px;box-shadow:var(--shadow-panel);overflow-x:auto}
.rank-tbl .grid{min-width:860px}
.rank-row{display:grid;grid-template-columns:30px 132px minmax(0,1fr) 66px 124px 112px;gap:16px;
 align-items:center;padding:14px 22px;border-bottom:1px solid rgba(240,237,228,.06)}
.rank-head{align-items:end;padding:12px 22px;border-bottom:1px solid rgba(240,237,228,.1)}
.rank-head span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.rank-head .r{text-align:right}
.rank-row .idx{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.wcell{display:flex;flex-direction:column;gap:5px}
.wcell .top{display:flex;align-items:baseline;gap:8px}
.wcell .w{font-family:var(--font-display);font-weight:200;font-size:22px;line-height:1;
 letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.of{font-size:11px;color:var(--dim)}
.trim{font-size:11px;letter-spacing:.02em;line-height:1.45;color:var(--dim)}
.trim.cut{color:var(--signal-warn)}
.namecell{display:flex;align-items:center;gap:14px;min-width:0}
.icobox{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
 flex:none;border:1px solid var(--border-subtle);color:var(--gray-300)}
.namecell .inner{display:flex;flex-direction:column;gap:6px;min-width:0}
.namecell .top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.betname{font-family:var(--font-display);font-weight:500;font-size:12px;line-height:1.4;
 text-transform:uppercase;letter-spacing:.03em;color:var(--bone-100)}
.hedge-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--signal-info);border:1px solid rgba(87,217,208,.28);
 padding:1px 6px}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--dim)}
.facts span{display:inline-flex;align-items:center;gap:5px}
.rank-row .p{font-size:14px;color:var(--text-prose);font-variant-numeric:tabular-nums;
 text-align:right}
.srccell{display:flex;align-items:center;gap:8px}
.srccell .inner{display:flex;flex-direction:column;gap:3px;min-width:0}
.srccell .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.srccell .o{font-size:11px;color:var(--dim);white-space:nowrap}
.stcell{display:inline-flex;align-items:center;gap:7px}
.stcell span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-300)}
.arch-banner{display:flex;align-items:center;gap:10px;padding:12px 22px;
 background:rgba(232,179,74,.04);border-bottom:1px solid rgba(240,237,228,.06)}
.arch-banner .in{display:flex;align-items:center;gap:10px}
/* bare span, so it keeps a full line box and the banner keeps the design's height */
.arch-banner .lead{color:var(--signal-warn);flex:none}
.arch-banner p{font-size:11.5px;letter-spacing:.02em;color:var(--signal-warn)}
.arch-banner b{font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.rank-row.archived{opacity:.88;border-bottom:0}

/* ── ledger: mobile cards ───────────────────────────────────────────────────── */
.rank-cards{display:none;flex-direction:column;background:var(--ink-900);
 background-image:var(--veil);border:1px solid var(--hairline);border-radius:2px;
 box-shadow:var(--shadow-panel)}
.rcard{display:flex;flex-direction:column;gap:12px;padding:16px;
 border-bottom:1px solid rgba(240,237,228,.06)}
.rcard:last-child{border-bottom:0}
.rcard .head{display:flex;align-items:flex-start;gap:11px}
.rcard .idx{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:9px}
.rcard .who{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding-top:2px}
.rcard .who .hedge-tag{align-self:flex-start}
.rcard .pwrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.rcard .p{font-family:var(--font-display);font-weight:200;font-size:24px;line-height:1;
 letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rcard .p u{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:0;
 color:var(--dim);text-decoration:none}
.rcard .plbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.rcard .wrow{display:flex;align-items:center;gap:10px}
.rcard .wrow .pair{display:inline-flex;align-items:baseline;gap:6px;flex:none}
.rcard .wrow .w{font-family:var(--font-display);font-weight:200;font-size:19px;line-height:1;
 letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rcard .wrow .meter{flex:1;min-width:0}
.rcard .foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:10px;
 border-top:1px solid rgba(240,237,228,.06)}
.rcard.archived{opacity:.88}

/* ── self-checks ────────────────────────────────────────────────────────────── */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;
 margin-top:16px}
.check{border:1px solid var(--hairline);border-radius:2px;padding:16px 20px;display:flex;
 flex-direction:column;gap:10px}
.check .t{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--dim)}
.check p{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-soft)}

/* ── meter ──────────────────────────────────────────────────────────────────── */
.meter{display:flex;gap:2px}
.meter i{flex:1;height:8px;background:var(--ink-750)}
.meter i.on{background:var(--phosphor-500)}
.meter i.tip{box-shadow:0 0 10px -2px rgba(194,245,60,.22)}

/* ── bet cards ──────────────────────────────────────────────────────────────── */
.bets{display:flex;flex-direction:column;gap:12px}
.bet{background:var(--ink-900);background-image:var(--veil);border:1px solid var(--hairline);
 border-radius:2px;box-shadow:var(--shadow-panel)}
.bet-in{padding:20px clamp(16px,3.5vw,24px);display:flex;flex-direction:column;gap:15px}
.bet-head{display:flex;align-items:flex-start;gap:18px;justify-content:space-between;
 flex-wrap:wrap}
.bet-id{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:min(100%,260px)}
.bet-id .box{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
 flex:none;border:1px solid var(--border-subtle);background:rgba(251,249,244,.02);
 color:var(--phosphor-500)}
.bet-id .txt{display:flex;flex-direction:column;gap:9px;min-width:0}
/* h1 on the bet's own page, h3 in the radar page's list. Same card, same type. */
.bet h3,.bet h1{font-weight:500;font-size:15px;line-height:1.25;letter-spacing:.005em}
/* The card title links to the bet's own page. It must not read as a link at rest --
   fifteen phosphor headings would turn the list into a wall of green -- so it inherits
   the heading colour and only declares itself on hover/focus. */
.bet-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;
 text-decoration:none;transition:color var(--fast) var(--ease)}
.bet-link:hover,.bet-link:focus-visible{color:var(--phosphor-500)}
.bet .plain{font-family:var(--font-sans);font-size:14.5px;line-height:1.55;
 color:var(--text-prose);max-width:66ch}
.bet-p{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;
 margin-left:auto}
.bet-p .v{font-family:var(--font-display);font-weight:200;font-size:32px;line-height:1;
 letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bet-p .v u{font-family:var(--font-mono);font-weight:400;font-size:13px;letter-spacing:0;
 color:var(--dim);text-decoration:none}
.bet-p .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.bet-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:2px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;border:1px solid rgba(251,249,244,.1);padding:3px 8px}
.chip-plain{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--gray-300)}
.chip-plain.dim{color:var(--dim)}
.chip-plain .cap{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.chip-plain .orig{font-size:11px;letter-spacing:normal;text-transform:none;color:var(--dim)}
.chip-plain .ic.hi{color:var(--phosphor-500)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
 padding:0 18px;border-radius:2px;border:1px solid var(--border-subtle);background:none;
 font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.15em;
 text-transform:uppercase;white-space:nowrap;cursor:pointer;color:var(--white);
 margin-left:auto;transition:background-color var(--fast) var(--ease),
 border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn:hover{background:rgba(240,237,228,.04);border-color:var(--border-strong)}
.bet-more{display:none;flex-direction:column;gap:18px;margin-top:4px;padding-top:18px;
 border-top:1px solid var(--hairline)}
.bet.open .bet-more{display:flex}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
 gap:18px 28px}
.block{display:flex;flex-direction:column;gap:8px}
.block .t{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;
 text-transform:uppercase}
.block p{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-prose)}
.scores{border:1px solid var(--hairline);border-radius:2px;padding:16px 20px;display:flex;
 flex-direction:column;gap:12px}
.scores .t{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--dim)}
.scores .rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
 gap:10px 28px}
.scores .row{display:grid;grid-template-columns:1fr 74px 32px;gap:12px;align-items:center}
.scores .row .l{font-size:11px;color:var(--gray-300)}
.scores .row .o{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.claim{border-left:2px solid rgba(194,245,60,.3);padding:2px 0 2px 14px}
.claim .t{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--dim)}
.claim p{margin-top:7px;font-size:13px;line-height:1.6;color:var(--gray-300)}

/* ── calendar ───────────────────────────────────────────────────────────────── */
.cal{background:var(--ink-900);background-image:var(--veil);border:1px solid var(--hairline);
 border-radius:2px;box-shadow:var(--shadow-panel)}
.cal-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 18px;
 padding:15px clamp(16px,3vw,22px);border-bottom:1px solid rgba(240,237,228,.06)}
.cal-when{display:inline-flex;align-items:center;gap:12px;flex:none;width:172px;max-width:100%}
.cal-when .inner{display:flex;flex-direction:column;gap:4px}
.cal-when .d{font-size:12.5px;letter-spacing:.04em;color:var(--phosphor-500);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-when .a{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cal-what{display:flex;flex-direction:column;gap:7px;flex:1;min-width:min(100%,300px)}
.cal-what .test{font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--gray-300)}
.cal-what .why{display:flex;gap:8px;align-items:flex-start;font-family:var(--font-sans);
 font-size:13.5px;line-height:1.55;color:var(--text-soft)}
/* padding, not margin: the wrapper keeps a full line box so the row height matches */
.cal-what .why .lead{color:var(--phosphor-500);flex:none;padding-top:3px}

/* ── glossary ───────────────────────────────────────────────────────────────── */
.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.word{background:var(--ink-900);
 background-image:radial-gradient(110% 120% at 50% -20%,rgba(251,249,244,.028),transparent 60%);
 border:1px solid var(--hairline);border-radius:2px;box-shadow:var(--specular);
 padding:16px 18px 17px;display:flex;flex-direction:column;gap:12px;
 transition:border-color var(--fast) var(--ease)}
.word:hover{border-color:rgba(240,237,228,.16)}
.word .t{display:flex;align-items:center;gap:11px;padding-bottom:11px;
 border-bottom:1px solid var(--hairline)}
.word .box{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
 flex:none;border:1px solid rgba(240,237,228,.11);border-radius:2px}
.word .term{font-family:var(--font-display);font-weight:500;font-size:11.5px;
 text-transform:uppercase;letter-spacing:.06em;color:var(--bone-100)}
.word p{font-family:var(--font-sans);font-size:13.5px;line-height:1.6;color:var(--text-soft)}

/* ── footer ─────────────────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--hairline)}
.ftr .in{max-width:var(--shell);margin:0 auto;padding:26px var(--pad);display:flex;
 align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ftr .l{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;
 text-transform:uppercase;color:var(--dim)}
.ftr .r{font-size:11.5px;letter-spacing:.02em;color:var(--gray-300)}
.ftr .policy{max-width:var(--shell);margin:0 auto;padding:0 var(--pad) 10px;
 font-family:var(--font-sans);font-size:12px;line-height:1.6;color:var(--dim)}
.ftr .policy a{display:inline-flex;align-items:center;min-height:44px;margin-left:10px;
 color:var(--text-soft);text-decoration:underline;text-decoration-color:var(--border-strong);
 text-underline-offset:3px}
.ftr .policy a:hover{color:var(--phosphor-500)}
.ftr .gen{max-width:var(--shell);margin:0 auto;padding:0 var(--pad) 26px;font-size:11px;
 line-height:1.6;color:var(--dimmer)}

/* ── standards and record ───────────────────────────────────────────────────── */
.standards-page{padding-top:clamp(30px,6vw,44px);padding-bottom:clamp(72px,12vw,120px)}
.standards-page h1{max-width:18ch;margin-top:24px}
.standards-intro{max-width:72ch;margin-top:22px;font-family:var(--font-sans);font-size:16px;
 line-height:1.65;color:var(--text-prose)}
.record-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
 margin-top:34px;border:1px solid var(--hairline);background:var(--hairline)}
.record-strip div{display:flex;flex-direction:column;gap:7px;padding:18px;background:var(--ink-900)}
.record-strip b{font-family:var(--font-display);font-size:26px;font-weight:200;
 line-height:1;color:var(--bone-100)}
.record-strip span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.standards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.standards-grid article{padding:20px 22px;background:var(--ink-900);border:1px solid var(--hairline);
 box-shadow:var(--specular)}
.standards-grid h2{margin-top:16px;font-size:15px;line-height:1.35;letter-spacing:.01em}
.standards-grid p{margin-top:12px;font-family:var(--font-sans);font-size:14px;line-height:1.65;
 color:var(--text-soft)}

/* ── bet pages ──────────────────────────────────────────────────────────────────
   The per-forecast pages reuse the card, the header and the footer wholesale. This is
   the only markup that exists nowhere on the radar page: a breadcrumb above the card and
   a list of siblings below it, so a reader landing from search has somewhere to go. */
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;
 font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.crumbs a{display:inline-flex;align-items:center;gap:7px;color:var(--dim);
 min-height:44px;transition:color var(--fast) var(--ease)}
.crumbs a:hover{color:var(--phosphor-500)}
.crumbs .sep{color:var(--gray-500)}
.crumbs .here{color:var(--text-soft)}
.dossier{margin-top:34px;padding-top:28px;border-top:1px solid var(--hairline)}
.dossier-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.dossier-head h2{font-size:clamp(18px,2.1vw,25px);font-weight:300;letter-spacing:-.01em}
.dossier-head p{max-width:72ch;margin-top:8px;font-family:var(--font-sans);font-size:13.5px;
 line-height:1.6;color:var(--text-soft)}
.dossier-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
 gap:16px;align-items:start}
.evidence-panel,.probe,.history{background:var(--ink-900);border:1px solid var(--hairline);
 border-radius:2px;box-shadow:var(--specular)}
.panel-title{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--phosphor-500)}
.evidence-panel>.panel-title{padding:15px 16px;border-bottom:1px solid var(--hairline)}
.source-list{list-style:none;margin:0;padding:0}
.source-list li+li{border-top:1px solid var(--hairline)}
.source-list a{display:flex;flex-direction:column;gap:7px;padding:14px 16px;color:inherit;
 transition:background var(--fast) var(--ease)}
.source-list a:hover,.source-list a:focus-visible{background:rgba(240,237,228,.035)}
.source-name{display:flex;align-items:flex-start;gap:8px;font-family:var(--font-sans);
 font-size:14px;line-height:1.45;color:var(--bone-100)}
.source-name .ic{margin-top:3px;color:var(--phosphor-500)}
.source-note{font-family:var(--font-sans);font-size:12.5px;line-height:1.55;color:var(--dim)}
.evidence-side{display:flex;flex-direction:column;gap:16px}
.probe{padding:15px 16px}
.probe p{margin-top:11px;font-family:var(--font-sans);font-size:12.5px;line-height:1.6;
 color:var(--text-soft)}
.history{padding:0}
.history summary{display:flex;min-height:48px;align-items:center;justify-content:space-between;
 gap:14px;padding:0 16px;cursor:pointer;list-style:none}
.history summary::-webkit-details-marker{display:none}
.history summary>span:last-child{font-size:10px;color:var(--dim);white-space:nowrap}
.history-intro{padding:0 16px 14px;font-family:var(--font-sans);font-size:12.5px;
 line-height:1.55;color:var(--dim)}
.history ol{list-style:none;margin:0;padding:0 16px 16px}
.history li{padding:13px 0;border-top:1px solid var(--hairline)}
.history time{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--phosphor-500)}
.history li p{margin-top:6px;font-family:var(--font-sans);font-size:12.5px;line-height:1.6;
 color:var(--text-soft)}
.review-panel{margin-top:16px;padding:18px;background:var(--ink-900);
 border:1px solid var(--hairline);border-radius:2px;box-shadow:var(--specular)}
.review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.review-head h3{margin-top:8px;font-size:clamp(17px,2vw,22px);font-weight:350}
.review-decision{padding:7px 9px;border:1px solid rgba(190,255,0,.28);font-size:9.5px;
 letter-spacing:.12em;text-transform:uppercase;color:var(--phosphor-500);white-space:nowrap}
.review-disclosure{max-width:86ch;margin-top:13px;font-family:var(--font-sans);
 font-size:12.5px;line-height:1.6;color:var(--text-soft)}
.review-disclosure b{font-weight:500;color:var(--signal-warn)}
.review-roles{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.review-roles li{padding:5px 7px;background:rgba(240,237,228,.035);border:1px solid var(--hairline);
 font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
 margin-top:16px;background:var(--hairline);border:1px solid var(--hairline)}
.review-grid article{padding:14px;background:var(--ink-900)}
.review-grid article:last-child:nth-child(odd){grid-column:1/-1}
.review-grid article>span{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--phosphor-500)}
.review-grid p,.review-condition p{margin-top:8px;font-family:var(--font-sans);
 font-size:12.5px;line-height:1.62;color:var(--text-soft)}
.review-condition{margin-top:14px;padding:13px 14px;border-left:2px solid var(--signal-warn);
 background:rgba(255,190,77,.045)}
.review-condition b{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--signal-warn)}
.review-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.review-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;
 font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.review-links a:hover{color:var(--phosphor-500)}
.more-bets{margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline)}
.more-bets .t{display:inline-flex;align-items:center;gap:8px;font-size:10px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.more-bets .links{display:grid;gap:2px 26px;margin-top:14px;
 grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.crumb-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 0;
 font-size:13px;color:var(--text-soft);border-bottom:1px solid var(--hairline);
 transition:color var(--fast) var(--ease)}
.crumb-link .ic{color:var(--gray-500);flex:none}
.crumb-link:hover{color:var(--phosphor-500)}
.crumb-link:hover .ic{color:var(--phosphor-500)}

/* ── motion ─────────────────────────────────────────────────────────────────── */
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes echo{0%{opacity:.7;transform:scale(1)}15%{opacity:0;transform:scale(2.2)}
 100%{opacity:0;transform:scale(2.2)}}
@keyframes flare{0%{filter:brightness(2.1)}10%{filter:brightness(1)}100%{filter:brightness(1)}}
@keyframes caret{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .sweep,.blip .echo,.blip .glint,.caret{animation:none!important}
 .skip-link{transition:none}
}

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media (max-width:1360px){.hdr-sub{display:none}}
/* The status chip needs 1560px before it clears the nav with the header's own 20px gap:
   brand floor + nav + chip + gaps + page padding. Revealing it at 1240 (as the source
   design did) left it overlapping the last nav items across a ~280px band. */
@media (max-width:1559px){.chip-live{display:none}}
@media (max-width:1240px){.hdr-nav{border-top:1px solid var(--hairline-2)}}
@media (max-width:900px){.measures{grid-template-columns:1fr}}
/* 1063px, NOT the 760px nav breakpoint. The hero `order` values encode a TWO-COLUMN
   reading order: copy|plate on row 1, stats|readout on row 2, which puts the plate
   directly above its own readout. Collapsed to one column that order wedges the 2x2 stat
   block between the radar and the panel the radar drives — 288px apart at 390px wide, so
   they could never share an 844px screen and tapping a blip repainted something a full
   screen below.
   The breakpoint has to be where the grid actually collapses, which is NOT where the nav
   collapses: `repeat(auto-fit,minmax(min(100%,470px),1fr))` with a 44px gap needs
   470+44+470 = 984px of content, and content is the viewport less 2x the 40px max --pad,
   so it goes two-column at a 1064px CONTENT width. Scoping this to 760px left 761-1063 —
   iPad portrait, half-screen desktop windows — still split.
   1073, not 1064, because the two sides measure different things: a media query matches
   innerWidth (scrollbar included) while the grid lays out against clientWidth (scrollbar
   excluded). With a 10px classic scrollbar the grid is still one column at innerWidth
   1073, so 1064 would leave a 10px band unswapped. Measured, not assumed. The residual is
   the mirror case: with overlay scrollbars the two agree, so 1064-1073 gets the narrow
   order while already two-column — readout under the copy instead of under the plate,
   cosmetic and both still on screen. That is the safe direction to err in.
   If --pad, the gap or the 470px min change, re-derive both numbers. */
@media (max-width:1099px){
 .hdr-nav{display:none}
 .menu-btn{display:inline-flex}
 .readout{order:3}
 .hero-stats{order:4}
}
/* Doubled class, not a bare `.hint-narrow`: `.tablekey-top .hint` and `.keybar .hint` are
   both (0,2,0), so a single class would lose the cascade and the narrow copy would show at
   every width. (0,2,0) here plus a later source position wins both ties. */
.hint.hint-narrow{display:none}
@media (max-width:760px){
 .hdr-nav{display:none}
 .menu-btn{display:inline-flex}
 .rank-tbl{display:none}
 .rank-cards{display:flex}
 .bet .btn{min-height:44px}
 .hero-stats{gap:20px 24px}
 /* Instructions are per-viewport: the wide copy says "scroll sideways" / "hover", neither
    of which exists here (the table is display:none above, and there is no hover). */
 .hint.hint-wide{display:none}
 .hint.hint-narrow{display:inline-flex}
 /* The 10px floor on the decorative rule cost more than it was worth once `.who` could
    shrink: the readout header needs 351px at 390px wide and has 342, and that 9px deficit
    came out of the label ("Technology / A…"). The rule is pure filler, so let it collapse
    first and the label survives whole. Narrower phones still ellipsize, correctly. */
 .readout-top .gap{min-width:0}
 /* 5 terms in 2 columns orphans the last one and the gap-as-border trick renders the
    empty cell as a missing tile. Let an odd last term span the row. */
 .tablekey-cols div:last-child:nth-child(odd){grid-column:1/-1}
 /* Mixed-width items wrapped raggedly (two short ones pairing up, the rest alone).
    One term per row reads as deliberate. */
 .keybar{flex-direction:column;align-items:flex-start;gap:9px}
 .keybar .hint{margin-left:0}
 .dossier-grid{grid-template-columns:1fr}
 .dossier-head{flex-direction:column}
 .review-grid{grid-template-columns:1fr}
 .review-grid article:last-child:nth-child(odd){grid-column:auto}
 .review-head{flex-direction:column}
 .review-decision{white-space:normal}
 .record-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
 .standards-grid{grid-template-columns:1fr}
}
@media (max-width:360px){
 .hdr{gap:0 8px;padding:0 12px}
 .hdr-brand{min-width:140px}
}