/* ============================================================
   hi-fx — Hockey Insights research-desk chrome + effect layer

   Loaded by /standings/ and /stats/ only. Two halves:

   PART 1  the desk system  — tokens, masthead, research-desk
           chip strip, navy hero, gold stat rail, section
           furniture, panels, data tables, footer.
   PART 2  the effect layer — orbs, beam, metal, goo, reveals.
           Everything in Part 2 is decoration: strip it out and
           the pages still read. All of it is switched off under
           prefers-reduced-motion, and the looping pieces only
           run while their section is actually on screen.

   Display face is Newsreader UPRIGHT. No font-style:italic
   anywhere in this sheet — that is deliberate.
   ============================================================ */

/* ========================= PART 1 ========================= */

/* Local names, canonical values. Every colour below is an alias onto
   hi-tokens.css — this sheet has hundreds of var(--card) / var(--blue)
   call sites, so the names stay and only their source moves. Anything
   NOT listed here (--beam, --mast) is genuinely local to this sheet.
   --gold is kept only because ◷ receipts on this sheet already say it;
   it resolves to --hi-receipt and it is used at exactly two call sites
   (.asof::before and .statusline::before). Do not add a third. */
:root{
  --field:var(--hi-surface-0); --card:var(--hi-surface-1); --card2:var(--hi-surface-2);
  --border:var(--hi-line); --hairline:var(--hi-hair);
  --ink:var(--hi-ink); --muted:var(--hi-muted);
  --blue:var(--hi-blue); --blue-soft:var(--hi-blue-soft);
  --gold:var(--hi-receipt); --gold-ink:var(--hi-receipt); --gold-soft:var(--hi-blue-soft);
  --coral:var(--hi-coral); --coral-soft:var(--hi-coral-soft);
  --mint:var(--hi-mint); --mint-soft:var(--hi-mint-soft);
  --hero-a:var(--hi-hero-a); --hero-b:#155fae;
  --shadow:var(--hi-shadow);
  --track:var(--hi-surface-3);
  --beam:rgba(31,95,191,.09);
  --serif:var(--hi-serif);
  --sans:var(--hi-sans);
  --mono:var(--hi-mono);
  --maxw:var(--hi-maxw);
  --mast:58px;
}
:root[data-theme="dark"]{
  /* the aliases above already re-resolve; only the two genuinely local
     values need a dark restatement */
  --beam:rgba(157,184,221,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--field);-webkit-text-size-adjust:100%}
body{background:var(--field);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  transition:background .3s,color .3s;overflow-x:hidden}
:root:not([data-theme="dark"]) body{background-image:radial-gradient(#c7d7eb 1px, transparent 1px);background-size:23px 23px;background-attachment:fixed}
:root[data-theme="dark"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 1000px 540px at 50% -15%, rgba(31,95,191,.2), transparent 62%)}
a{color:inherit;text-decoration:none}
/* the display face is Newsreader UPRIGHT — <i> and <em> are used
   here as neutral hooks, never as a slant */
i,em,address,cite,dfn,var{font-style:normal}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--blue-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;font-weight:800;font-size:.8rem;border-radius:0 0 8px 0}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.eyebrow{font-size:var(--t-micro);font-weight:var(--hi-lbl-w);text-transform:uppercase;letter-spacing:var(--hi-lbl-track);color:var(--muted)}
.eyebrow b{color:var(--blue);font-weight:900}

/* NHL crest variants — _light.svg on parchment, _dark.svg on navy */
.logo-l{display:inline-block}
.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:inline-block}

/* ---------------------- MASTHEAD ---------------------- */
.masthead{background:#0d1f3c;color:#fff;position:sticky;top:0;z-index:60;border-bottom:3px solid #1f5fbf}
.masthead .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 var(--pad);height:var(--mast)}
.wordmark{display:flex;align-items:baseline;gap:10px;min-width:0}
.wordmark .hi{font-weight:900;letter-spacing:.14em;font-size:.82rem;text-transform:uppercase;white-space:nowrap}
.wordmark .section{font-family:var(--serif);font-style:normal;font-weight:500;font-size:1.02rem;color:#9db8dd;white-space:nowrap}
.mnav{display:flex;gap:22px;margin-left:auto;align-items:center}
.mnav a{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--hi-on-navy-dim);
  padding:20px 0;border-bottom:3px solid transparent;margin-bottom:-3px;transition:color var(--mo-fast) var(--mo-ease),border-color var(--mo-fast) var(--mo-ease);white-space:nowrap}
.mnav a.active{color:#fff;border-bottom-color:#4d8fe8}
.mnav a:hover{color:#fff}
.theme-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hi-navy-line);background:transparent;
  color:#c9d8ee;cursor:pointer;font-size:.9rem;display:grid;place-items:center;transition:background .2s;flex-shrink:0}
.theme-btn:hover{background:rgba(157,184,221,.15)}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}

/* ------------- RESEARCH DESK CROSS-NAV ------------- */
.rdesk{background:var(--card);border-bottom:1px solid var(--border);position:relative;z-index:20}
.rdesk .in{max-width:var(--maxw);margin:0 auto;padding:9px var(--pad);display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none}
.rdesk .in::-webkit-scrollbar{display:none}
.rdesk .rlbl{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap;padding-right:4px}
.rdesk a{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid var(--border);color:var(--muted);white-space:nowrap;transition:all .15s}
.rdesk a:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}
.rdesk a.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ------------------------ HERO ------------------------ */
.hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;position:relative;overflow:hidden;z-index:1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:
  radial-gradient(ellipse 620px 620px at 88% -20%, rgba(255,255,255,.10), transparent 60%),
  repeating-linear-gradient(115deg, transparent 0 180px, rgba(255,255,255,.035) 180px 181px)}
.hero .inner{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad) 0;position:relative;z-index:3}
.hero .eyebrow{color:#9db8dd}
.hero .eyebrow b{color:#9dc0f0}
.hero h1{font-family:var(--serif);font-style:normal;font-weight:600;font-size:clamp(1.55rem,2.5vw,2.15rem);
  line-height:1.12;letter-spacing:-.008em;margin:7px 0 8px;max-width:34ch;position:relative}
/* The headline's second clause. The class name is legacy (this token wore
   gold before the accent was retired) — it now takes the same light blue the
   homepage uses on its navy hero, because #fff here made the emphasis
   invisible against the equally-white first clause. */
.hero h1 .gold{color:#8ab8f2}
.hero p.dek{max-width:78ch;font-size:.86rem;line-height:1.5;color:#c3d4ec;font-weight:500}
.heroacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.heroacts a{font-size:.62rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;
  border-radius:999px;border:1px solid rgba(157,184,221,.4);color:#c3d4ec;transition:all .18s}
.heroacts a:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.heroacts a.primary{background:#2f6fd0;border-color:#2f6fd0;color:#fff}
.heroacts a.primary:hover{filter:brightness(1.12);background:#2f6fd0;color:#fff}

/* gold stat rail */
.statrail{display:flex;margin-top:18px;border-top:1px solid rgba(255,255,255,.22);flex-wrap:wrap;position:relative;z-index:3}
.statrail .cell{padding:12px 26px 14px 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.15);min-width:0}
.statrail .cell:last-child{border-right:0;margin-right:0;padding-right:0}
.statrail .num{font-family:var(--serif);font-style:normal;font-weight:600;font-size:1.6rem;color:#fff;
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.statrail .num small{font-family:var(--mono);font-size:.86rem;font-weight:700;letter-spacing:.02em;color:#9dc0f0}
.statrail .lbl{font-size:.56rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase;color:#8fa5c4;
  margin-top:8px;max-width:170px;line-height:1.5}
.statrail .who{display:flex;align-items:center;gap:9px;margin-top:9px}
.statrail .who img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.1);flex-shrink:0}
.statrail .who .mono-fb{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.56rem;font-weight:700;color:#fff;background:rgba(255,255,255,.14)}
.statrail .who span{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c3d4ec;line-height:1.35}

/* ---------------- SECTION FURNITURE ---------------- */
.section-head{display:flex;align-items:baseline;gap:18px;margin:58px 0 6px;flex-wrap:wrap;position:relative;overflow:hidden;padding-top:12px}
.section-head .ghost{position:absolute;right:0;top:-14px;font-family:var(--serif);font-style:normal;font-weight:700;
  font-size:5.4rem;line-height:1;color:var(--ink);opacity:.045;pointer-events:none;user-select:none;white-space:nowrap;letter-spacing:.02em}
:root[data-theme="dark"] .section-head .ghost{opacity:.06}
.section-head .n{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.section-head h2{font-family:var(--serif);font-style:normal;font-weight:600;font-size:1.95rem;line-height:1.08}
.section-head .rule{flex:1;height:1px;background:var(--border);min-width:20px}
.section-head .more{font-size:.62rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.section-head .more:hover{text-decoration:underline;text-underline-offset:4px}
.subdek{color:var(--muted);font-size:.9rem;font-weight:500;line-height:1.6;max-width:680px;margin-top:8px}
.asof{font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.06em;margin-top:12px}
.asof::before{content:"◷ ";color:var(--gold)}

/* ----------------------- PANEL ----------------------- */
.panel{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow);margin-top:18px}
.panel .wm{position:absolute;right:-18px;bottom:-42px;font-family:var(--serif);font-style:normal;font-weight:700;
  font-size:7.5rem;line-height:1;color:var(--ink);opacity:.04;pointer-events:none;user-select:none;z-index:0}
:root[data-theme="dark"] .panel .wm{opacity:.07}
.panel > *{position:relative;z-index:1}

/* --------------------- CONTROL DESK --------------------- */
.deskbar{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;z-index:5}
.deskbar .in{max-width:var(--maxw);margin:0 auto;padding:16px 28px 15px;display:flex;gap:12px 16px;align-items:flex-end;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld > span{font-size:.53rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fld select,.fld input{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 11px;
  font-size:.8rem;font-weight:700;color:var(--ink);font-family:var(--sans);min-width:0;transition:border-color .18s}
.fld select:hover,.fld input:hover{border-color:var(--muted)}
.fld input{font-weight:600}
.fld select:disabled{opacity:.45;cursor:not-allowed}
.stepper{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.stepbtn{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer;
  font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:all .16s;
  white-space:nowrap}
.stepbtn:hover{border-color:var(--blue);color:var(--blue)}
.btn{background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:8px 16px;cursor:pointer;
  font-size:.62rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);transition:all .16s}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.gold{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.btn.gold:hover{filter:brightness(1.04)}
.statusline{width:100%;font-family:var(--mono);font-size:.63rem;color:var(--muted);letter-spacing:.04em;padding-top:2px}
.statusline::before{content:"◷ ";color:var(--gold)}

/* --------------------- DATA TABLE --------------------- */
.tablewrap{overflow-x:auto;position:relative;z-index:1}
table.dt{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
table.dt th,table.dt td{text-align:right;padding:9px 10px;white-space:nowrap}
table.dt th:first-child,table.dt td:first-child,
table.dt th.l,table.dt td.l{text-align:left}
/* Deliberately NOT position:sticky. The wrapper has to be a
   horizontal scroll container so wide tables stay reachable on
   narrow screens, and that container — not the viewport — is
   what a sticky header would stick to, which drops it on top of
   the first row. A tinted, ruled header does the same job. */
table.dt thead th{background:var(--card2);border-bottom:1px solid var(--border);padding:0}
table.dt thead th button{width:100%;background:transparent;border:0;cursor:pointer;padding:11px 10px;
  font-size:.55rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  text-align:right;transition:color .15s;font-family:var(--sans);white-space:nowrap}
table.dt thead th.l button{text-align:left}
table.dt thead th button:hover{color:var(--ink)}
table.dt thead th button.on{color:var(--blue)}
table.dt thead th button i{font-style:normal;font-family:var(--mono);font-size:.62rem;margin-left:2px}
table.dt tbody td{border-bottom:1px solid var(--hairline);font-size:.82rem;font-weight:600;color:var(--ink)}
table.dt tbody td.m{font-family:var(--mono);font-size:.76rem;font-weight:600}
table.dt tbody td.dim{color:var(--muted)}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody tr{transition:background-color .18s}
table.dt tbody tr:hover{background-color:var(--blue-soft)}
table.dt tbody tr.grouprow td{background:var(--card2);font-family:var(--mono);font-size:.57rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--border)}
table.dt tbody tr.grouprow:hover{background-color:var(--card2)}
table.dt tbody tr.cutline td{border-bottom:2px dashed var(--coral)}
.cutnote{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.6rem;color:var(--muted);letter-spacing:.04em}
.cutnote i{font-style:normal;width:22px;border-top:2px dashed var(--coral);display:inline-block}
.rk{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--muted)}
.rk.top{color:var(--blue)}
.pinbtn{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:transparent;cursor:pointer;
  color:var(--muted);font-size:.72rem;font-weight:800;display:grid;place-items:center;transition:all .16s;line-height:1}
.pinbtn:hover{border-color:var(--blue);color:var(--blue)}
.pinbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* team + player cells */
.tcell{display:flex;align-items:center;gap:9px;min-width:0}
.tcell .crest{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center}
.tcell .crest img{width:22px;height:22px;object-fit:contain}
.tcell b{font-weight:800;font-size:.83rem;overflow:hidden;text-overflow:ellipsis}
.tcell .abbr{font-family:var(--mono);font-size:.6rem;color:var(--muted);font-weight:700}
.pcell{display:flex;align-items:center;gap:9px;min-width:0}
.pcell b{font-weight:800;font-size:.83rem}
.pcell a:hover b{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* mug + monogram fallback (a 404 must never show a broken image) */
.mug{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--card2);flex-shrink:0;display:block}
.mono-fb{flex-shrink:0;display:grid;place-items:center;border-radius:50%;font-family:var(--mono);font-weight:700;
  letter-spacing:.02em;width:30px;height:30px;font-size:.6rem;
  background:color-mix(in srgb, var(--tc,#1f5fbf) 20%, var(--card));
  border:1px solid color-mix(in srgb, var(--tc,#1f5fbf) 55%, transparent);
  color:var(--ink)}
.crest-fb{display:inline-grid;place-items:center;border-radius:6px;font-family:var(--mono);font-weight:700;
  letter-spacing:.02em;line-height:1;
  background:color-mix(in srgb, var(--tc,#1f5fbf) 22%, var(--card));
  border:1px solid color-mix(in srgb, var(--tc,#1f5fbf) 55%, transparent);
  color:var(--ink)}
@supports not (background:color-mix(in srgb,red 20%,blue)){
  .mono-fb,.crest-fb{background:var(--card2);border:1px solid var(--border)}
}

/* status pills */
.pill{display:inline-grid;place-items:center;min-width:30px;padding:3px 8px;border-radius:999px;font-family:var(--mono);
  font-size:.6rem;font-weight:700;letter-spacing:.06em;border:1px solid var(--border);color:var(--muted)}
.pill.w{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}
.pill.l{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)}
.pill.o{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.meter{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.meter i{display:block;width:52px;height:5px;border-radius:3px;background:var(--track);overflow:hidden;flex-shrink:0}
.meter i::after{content:"";display:block;height:100%;width:var(--f,0%);border-radius:3px;
  background:linear-gradient(90deg,var(--blue),#6ba2e8);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.meter b{font-family:var(--mono);font-size:.72rem;font-weight:600}

/* ------------------ SOURCE RECEIPT ------------------ */
.receipt{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:20px 24px;margin-top:34px}
.receipt p{font-size:.79rem;color:var(--muted);line-height:1.62;font-weight:500}
.receipt b{color:var(--ink);font-weight:800}

/* ------------------- EXPLORE + FOOT ------------------- */
.explore{margin-top:48px}
.explore h2{font-family:var(--serif);font-style:normal;font-weight:600;font-size:1.35rem;margin-bottom:12px}
.explore .links{display:flex;flex-wrap:wrap;gap:8px}
.explore .links a{font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:7px 13px;
  border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--card);transition:all .15s}
.explore .links a:hover{color:var(--blue);border-color:var(--blue)}
.notes{font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:26px;padding-bottom:8px}
.notes a{color:var(--blue);border-bottom:1px dashed var(--blue)}

.footer{margin-top:var(--sec);background:var(--hi-navy);color:var(--hi-on-navy);border-top:3px solid #1f5fbf;position:relative;z-index:2}
.footer .in{max-width:var(--maxw);margin:0 auto;padding:38px var(--pad) 44px;display:grid;grid-template-columns:1.1fr 2fr;gap:34px}
.footer .brand b{display:block;font-family:var(--serif);font-style:normal;font-weight:600;font-size:1.3rem;color:#fff;margin-bottom:7px}
.footer .brand p{font-size:.78rem;line-height:1.65;color:var(--hi-on-navy-dim);max-width:340px}
.footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.footer .cols h3{font-size:.56rem;font-weight:var(--hi-lbl-w);letter-spacing:var(--hi-lbl-track);text-transform:uppercase;color:var(--hi-on-navy-hi);margin-bottom:10px}
.footer .cols a{display:block;font-size:.68rem;font-weight:700;color:var(--hi-on-navy-dim);padding:3px 0;transition:color var(--mo-fast) var(--mo-ease)}
.footer .cols a:hover{color:#fff}
.footer .stamp{grid-column:1/-1;border-top:1px solid var(--hi-navy-line);padding-top:16px;font-family:var(--mono);
  font-size:var(--t-mono);color:var(--hi-on-navy-dim);letter-spacing:.05em;line-height:1.7}
.footer .stamp::before{content:"◷ ";color:var(--hi-receipt-on-navy)}

/* ========================= PART 2 =========================
   THE EFFECT LAYER
   orbs · beam · metal · goo · staggered reveals
   Looping animations are gated behind .fx-live, which hi-fx.js
   only adds while the host section is intersecting the
   viewport. Scroll past the hero and the loops stop.
   ========================================================= */

/* ---- ORBS: slow-drifting radial gradients in the hero ---- */
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:layout paint}
.orbs i{position:absolute;display:block;border-radius:50%;will-change:transform;
  background:radial-gradient(circle at 38% 34%, var(--o,rgba(120,180,255,.5)), transparent 68%);
  filter:blur(6px)}
.orbs i:nth-child(1){width:520px;height:520px;left:-90px;top:-190px;opacity:.16;--o:rgba(120,180,255,.75)}
.orbs i:nth-child(2){width:420px;height:420px;right:6%;top:-120px;opacity:.13;--o:rgba(255,217,138,.7)}
.orbs i:nth-child(3){width:640px;height:640px;right:-160px;bottom:-360px;opacity:.12;--o:rgba(77,143,232,.85)}
.orbs i:nth-child(4){width:300px;height:300px;left:42%;bottom:-190px;opacity:.10;--o:rgba(255,255,255,.6)}
.fx-live .orbs i:nth-child(1){animation:hi-drift-a 34s ease-in-out infinite alternate}
.fx-live .orbs i:nth-child(2){animation:hi-drift-b 27s ease-in-out infinite alternate}
.fx-live .orbs i:nth-child(3){animation:hi-drift-c 41s ease-in-out infinite alternate}
.fx-live .orbs i:nth-child(4){animation:hi-drift-b 48s ease-in-out infinite alternate-reverse}
@keyframes hi-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(90px,60px,0) scale(1.12)}}
@keyframes hi-drift-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-70px,52px,0) scale(1.08)}}
@keyframes hi-drift-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-60px,-70px,0) scale(1.1)}}

/* ---- BEAM 1: a slow conic wash behind the hero headline ---- */
.hero .beam{position:absolute;left:-14%;top:-70%;width:78%;height:250%;pointer-events:none;z-index:1;
  background:conic-gradient(from 200deg at 34% 50%,
    transparent 0deg, rgba(255,217,138,.16) 22deg, transparent 54deg,
    transparent 250deg, rgba(140,195,255,.14) 300deg, transparent 344deg);
  filter:blur(26px);will-change:transform}
.fx-live .hero .beam{animation:hi-sweepconic 46s linear infinite}
@keyframes hi-sweepconic{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---- BEAM 2: a light sweep that crosses a card on hover ----
   Same pattern as .dcard .shot-glow on the homepage. Nothing
   moves until the pointer arrives. */
.sweep{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.30) 48%,transparent 66%);
  transform:translateX(-64%);transition:opacity .2s ease}
:root[data-theme="dark"] .sweep{background:linear-gradient(105deg,transparent 30%,rgba(157,199,255,.16) 48%,transparent 66%)}
.has-sweep:hover .sweep,.has-sweep:focus-visible .sweep{opacity:1;animation:hi-sweep .9s cubic-bezier(.3,.7,.3,1)}
@keyframes hi-sweep{from{transform:translateX(-64%)}to{transform:translateX(64%)}}

/* ---- BEAM 3: the same sweep across a table row on hover ----
   A <tr> cannot host an overlay reliably, so the row paints its
   own gradient and animates the background position instead. */
table.dt tbody tr:not(.grouprow){
  background-image:linear-gradient(100deg,transparent 40%,var(--beam) 50%,transparent 60%);
  background-repeat:no-repeat;background-size:250% 100%;background-position:210% 0}
table.dt tbody tr:not(.grouprow):hover{animation:hi-rowsweep .85s cubic-bezier(.3,.7,.3,1)}
@keyframes hi-rowsweep{from{background-position:210% 0}to{background-position:-110% 0}}

/* ---- METAL: brushed sheen on the big gold numerals ---- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .metal{
    background-image:linear-gradient(100deg,
      #33445e 0%, #6d829e 18%, #9fb3cb 30%, #5c7391 42%, #2f4460 58%,
      #6d829e 74%, #9fb3cb 84%, #3b4d68 100%);
    background-size:280% 100%;background-position:14% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
  :root[data-theme="dark"] .metal{
    background-image:linear-gradient(100deg,
      #93a9c6 0%, #d6e2f2 18%, #ffffff 30%, #c3d3e8 42%, #8fa6c4 58%,
      #d6e2f2 74%, #ffffff 84%, #a8bcd6 100%)}
  .hero .metal{
    background-image:linear-gradient(100deg,
      #b9cbe4 0%, #eaf2fd 16%, #ffffff 29%, #d8e5f6 42%, #aec3de 58%,
      #eaf2fd 74%, #ffffff 85%, #c6d6ec 100%)}
  .fx-live .metal,.metal.fx-live{animation:hi-metal 9s ease-in-out infinite alternate}
}
@keyframes hi-metal{from{background-position:14% 0}to{background-position:86% 0}}

/* ---- GOO: one gooey cluster per page, on the primary
   segmented control. The filter only ever touches the blob
   layer — labels sit above it and stay perfectly crisp. ---- */
.segbar{position:relative;display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--border);
  background:var(--card2);flex-shrink:0}
.seg-goo{position:absolute;left:4px;top:4px;right:4px;bottom:4px;pointer-events:none;z-index:0;filter:url(#hi-goo)}
.seg-goo i{position:absolute;top:0;height:100%;border-radius:999px;background:var(--blue);
  left:var(--x,0px);width:var(--w,0px);
  transition:left .42s cubic-bezier(.45,1.5,.4,1),width .42s cubic-bezier(.45,1.5,.4,1)}
.seg-goo i.trail{transition-duration:.66s;transform:scale(.82)}
.segbar button{position:relative;z-index:1;background:transparent;border:0;cursor:pointer;padding:7px 15px;
  border-radius:999px;font-family:var(--sans);font-size:.61rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);transition:color .22s .16s;white-space:nowrap}
.segbar button:hover{color:var(--ink)}
.segbar button.on,.segbar button.on:hover{color:#fff}
.goo-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- TRANSITIONS: staggered reveals ---- */
:root.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
:root.js .reveal.in{opacity:1;transform:none}
.lift{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.lift:hover{transform:translateY(-4px);border-color:var(--blue)}

/* ---- TRANSITIONS: View Transitions API ----
   Standings rows carry a view-transition-name so a re-sort
   slides rows to their new slot instead of snapping. */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(*){animation-duration:.34s}
}

/* ---------------------- RESPONSIVE ---------------------- */
@media(max-width:1180px){
  .mnav{gap:13px}
  .mnav a{font-size:.6rem;letter-spacing:.08em}
}
@media(max-width:1000px){
  .mnav a{display:none}
  .mnav .theme-btn{display:grid}
  .footer .in{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  .wrap,.hero .inner,.masthead .inner,.rdesk .in,.deskbar .in,.footer .in{padding-left:18px;padding-right:18px}
  .hero .inner{padding-top:20px}
  .hero h1{font-size:clamp(2.05rem,9vw,2.7rem);max-width:none}
  .hero p.dek{font-size:.92rem}
  .statrail{margin-top:28px}
  .statrail .cell{padding:15px 16px 18px 0;margin-right:16px}
  .statrail .num{font-size:1.7rem}
  .statrail .lbl{font-size:.5rem;letter-spacing:.14em;max-width:112px}
  .section-head{margin-top:42px}
  .section-head h2{font-size:1.45rem}
  .section-head .ghost{font-size:3rem;top:-4px}
  .footer .cols{grid-template-columns:1fr 1fr}
  .deskbar .in{gap:10px 12px}
  .fld{flex:1 1 132px}
  /* a control that will not survive being squeezed into a column
     (the three-way grouping switch) claims its own row */
  .fld.wide{flex:1 1 100%}
  .fld select,.fld input{width:100%}
  .segbar{width:100%;justify-content:space-between}
  .segbar button{flex:1;padding:7px 8px;font-size:.56rem;letter-spacing:.08em}
  .receipt{padding:16px 18px}
  .panel .wm{font-size:5rem}
}

/* ---------------- REDUCED MOTION: all of it off ---------------- */
@media (prefers-reduced-motion: reduce){
  .fx-live .orbs i,
  .fx-live .hero .beam,
  .fx-live .metal,
  table.dt tbody tr:not(.grouprow):hover,
  .has-sweep:hover .sweep,
  .has-sweep:focus-visible .sweep{animation:none !important}
  .sweep{display:none}
  table.dt tbody tr:not(.grouprow){background-image:none}
  .seg-goo i{transition:none}
  .segbar button{transition:none}
  :root.js .reveal,:root.js .reveal.in{opacity:1;transform:none;transition:none}
  .lift{transition:none}
  .lift:hover{transform:none}
  .meter i::after{transition:none}
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}


/* ===== hero: a working right-hand column ===================================
   A data page should show data in its hero, not empty gradient. The left keeps
   the title and routes; the right carries the season's actual shape. */
.herogrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:34px;align-items:start}
.heromain{min-width:0}
.heroside{background:rgba(4,14,34,.42);border:1px solid rgba(157,184,221,.22);border-radius:16px;
  padding:15px 16px 13px;backdrop-filter:blur(5px);min-width:0}
.hs-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
.hs-k{font-size:.5rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase;color:#9db8dd}
.hs-season{font-family:var(--mono);font-size:.6rem;font-weight:700;color:#c3d4ec}
.hs-podium{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hs-podium li{display:grid;grid-template-columns:16px 26px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.045)}
.hs-podium li:first-child{background:rgba(120,170,255,.16);border:1px solid rgba(157,184,221,.3)}
.hs-rk{font-family:var(--mono);font-size:.62rem;font-weight:700;color:#8fa5c4;text-align:center}
.hs-crest{width:26px;height:26px;display:grid;place-items:center}
.hs-crest img{width:100%;height:100%;object-fit:contain}
.hs-name{min-width:0}
.hs-name b{display:block;font-size:.78rem;font-weight:800;color:#fff;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-name span{font-family:var(--mono);font-size:.54rem;color:#9db8dd}
.hs-pts{font-family:var(--serif);font-size:1.12rem;font-weight:700;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.hs-pts small{display:block;font-family:var(--mono);font-size:.44rem;font-weight:700;letter-spacing:.14em;
  color:#8fa5c4;text-align:right;margin-top:2px}
.hs-splits{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.hs-split{background:rgba(255,255,255,.045);border-radius:9px;padding:7px 9px;min-width:0}
.hs-split i{display:block;font-style:normal;font-size:.46rem;font-weight:900;letter-spacing:.15em;
  text-transform:uppercase;color:#8fa5c4}
.hs-split b{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;color:#fff;margin-top:3px}
.hs-split b img{width:17px;height:17px;object-fit:contain;flex:none}
.hs-note{margin:9px 0 0;font-family:var(--mono);font-size:.53rem;line-height:1.5;color:#9db8dd}
@media (max-width:960px){.herogrid{grid-template-columns:1fr;gap:20px}.heroside{order:2}}


/* The hero band is navy in BOTH themes, so the light-theme crest (dark ink)
   disappears against it. Force the dark-background variant inside the hero
   regardless of page theme — hero crest variant fix. */
.hero .logo-l{display:none!important}
.hero .logo-d{display:inline-block!important}


/* ============================================================
   TABLE CRAFT — /standings/ and /stats/ only.

   Everything below is scoped to body.hi-table-page so the two
   most-visited table surfaces can be tuned without moving any
   other page in the system. Ordered: the L10 strip, the ghost
   watermark clamp, the sticky pin rail, cross-highlighting,
   keyboard focus, the sliding sort mark, and the mobile
   column contract.
   ============================================================ */

/* ---- 1. the last-ten strip -------------------------------
   Ten cells, fixed width, one per game the record accounts
   for: mint = win, coral = regulation loss, hollow blue ring
   = overtime/shootout loss (a point earned, not a win). The
   archive stores the record as GROUPED COUNTS (w/l/otl) and
   never the game sequence, so the cells are grouped in the
   printed order of the record — they are not a chronology and
   nothing here invents one. Seasons that predate the overtime
   loss carry ties inside a shorter record; the unaccounted
   cells stay as inert track so the column width never moves. */
body.hi-table-page .l10{display:inline-flex;align-items:center;gap:9px;justify-content:flex-end}
body.hi-table-page .l10 .strip{display:inline-grid;grid-template-columns:repeat(10,6px);gap:2px;align-items:center;flex:none}
body.hi-table-page .l10 .strip i{display:block;width:6px;height:13px;border-radius:2px;box-sizing:border-box}
body.hi-table-page .l10 .strip i.w{background:var(--mint)}
body.hi-table-page .l10 .strip i.l{background:var(--coral)}
body.hi-table-page .l10 .strip i.o{background:transparent;border:1.5px solid var(--blue)}
body.hi-table-page .l10 .strip i.na{background:var(--track)}
body.hi-table-page .l10 b{font-family:var(--mono);font-size:.72rem;font-weight:600}
body.hi-table-page .l10key{display:inline-flex;align-items:center;gap:5px}
body.hi-table-page .l10key i{display:block;width:6px;height:12px;border-radius:2px;box-sizing:border-box}
body.hi-table-page .l10key i.w{background:var(--mint)}
body.hi-table-page .l10key i.l{background:var(--coral)}
body.hi-table-page .l10key i.o{background:transparent;border:1.5px solid var(--blue)}

/* ---- 1b. the hero reserves the space its data will need ----
   The podium, the split pair and the note are all empty in the HTML and
   filled from the archive, so the whole page below them used to drop by
   about 190px when the fetch landed — measured at 0.19 CLS on both
   pages, which is a failing score earned entirely in the first second.
   Each block now holds the height of the content it is going to get:
   three podium rows, one split pair, two lines of note, one headshot
   line in the KPI band. Nothing moves when the figures arrive. */
body.hi-table-page .hs-podium{min-height:165px}
body.hi-table-page .hs-splits{min-height:46px}
body.hi-table-page .hs-note{min-height:26px}
body.hi-table-page .statrail .who{min-height:30px}
body.hi-standings-page .statrail .cell{min-height:106px}
body.hi-stats-page .statrail .cell{min-height:125px}
/* the chip rail and the era chart are both empty until the archive
   lands, and both sit above content */
body.hi-stats-page .viewchips{min-height:26px}
body.hi-stats-page .eralegend{min-height:16px}
body.hi-stats-page .erapeak{min-height:84px}

/* ---- 2. ghost watermarks stay behind their own section ----
   The section ghost is clamped to its own box and to a share
   of the width that cannot reach the heading, and both ghosts
   drop to roughly half their old opacity so nothing that sits
   over them loses contrast. */
body.hi-table-page .section-head{overflow:hidden}
body.hi-table-page .section-head .ghost{max-width:38%;overflow:hidden;opacity:.024}
:root[data-theme="dark"] body.hi-table-page .section-head .ghost{opacity:.032}
body.hi-table-page .panel{overflow:hidden}
body.hi-table-page .panel .wm{opacity:.022;bottom:-46px}
:root[data-theme="dark"] body.hi-table-page .panel .wm{opacity:.034}

/* ---- 3. the sticky pin rail ------------------------------
   Pinned clubs and players survive a 32-row scroll: the rail
   parks itself directly under the masthead and lifts when it
   is actually stuck. */
body.hi-table-page .pinrail{position:sticky;top:var(--mast);z-index:12;margin-top:14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);transition:box-shadow .2s ease,border-color .2s ease}
body.hi-table-page .pinrail[hidden]{display:none}
body.hi-table-page .pinrail.is-stuck{box-shadow:var(--hi-lift);border-color:var(--blue)}
body.hi-table-page .pinrail .plbl{font-size:.5rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
body.hi-table-page .pinrail .pchip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 7px;border-radius:999px;
  background:var(--card2);border:1px solid var(--border);font-family:var(--mono);font-size:.62rem;font-weight:700;
  color:var(--ink);cursor:pointer;transition:border-color .16s,color .16s}
body.hi-table-page .pinrail .pchip:hover{border-color:var(--coral);color:var(--coral)}
body.hi-table-page .pinrail .pchip img{width:17px;height:17px;object-fit:contain}
body.hi-table-page .pinrail .pchip .x{font-weight:900}
body.hi-table-page .pinrail .pgo{margin-left:auto;font-size:.55rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);white-space:nowrap}

/* ---- 4. cross-highlight -----------------------------------
   Hovering one club lights every other appearance of that club
   on the page — the table row, the pinned card, the pin chip
   and the franchise trace. */
body.hi-table-page .club-lit{background-color:var(--blue-soft)}
body.hi-table-page article.club-lit,body.hi-table-page .pinrail .pchip.club-lit{border-color:var(--blue)}
body.hi-table-page tr.club-lit td{background-color:var(--blue-soft)}

/* ---- 5. keyboard row focus --------------------------------
   Roving tabindex: exactly one row is tabbable at a time and
   the arrow keys walk the table. */
body.hi-table-page table.dt tbody tr[tabindex]{outline:none}
body.hi-table-page table.dt tbody tr:focus-visible td{background-color:var(--blue-soft);
  box-shadow:inset 0 2px 0 var(--blue),inset 0 -2px 0 var(--blue)}
body.hi-table-page table.dt tbody tr:focus-visible td:first-child{box-shadow:inset 2px 2px 0 var(--blue),inset 0 -2px 0 var(--blue)}
body.hi-table-page table.dt tbody tr:focus-visible td:last-child{box-shadow:inset -2px 2px 0 var(--blue),inset 0 -2px 0 var(--blue)}
body.hi-table-page .kbdhint{font-family:var(--mono);font-size:.58rem;color:var(--muted);letter-spacing:.04em;margin-top:10px}
body.hi-table-page .kbdhint kbd{font-family:var(--mono);font-size:.56rem;font-weight:700;color:var(--ink);
  border:1px solid var(--border);border-radius:5px;padding:1px 5px;background:var(--card2)}

/* ---- 6. the sliding sort mark -----------------------------
   One element, named for the view transition, so a re-sort
   slides the blue underline from the old column to the new
   instead of blinking it off and on. */
body.hi-table-page table.dt thead th{position:relative}
body.hi-table-page .sortmark{position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px;
  background:var(--blue);view-transition-name:hi-sortmark}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(hi-sortmark){animation-duration:var(--mo-base,240ms)}
}
@media (prefers-reduced-motion: reduce){
  body.hi-table-page .sortmark{view-transition-name:none}
  body.hi-table-page .pinrail{transition:none}
}

/* ---- 7. the research-desk rail fades at its right edge ----
   It already scrolls; now it says so. */
.rdesk .in{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
/* The 16-link strip fits only on wide desktops; below that the right-edge
   fade signals the hidden tail (Fantasy .. Redraft) is scrollable. */
@media(min-width:1480px){.rdesk .in{-webkit-mask-image:none;mask-image:none}}

/* ---- 8. mobile: the right columns survive -----------------
   Under 768px the table keeps TEAM, GP, PTS, DIFF and L10.
   Conference and division stop being columns and become the
   filter chips above the table, which is what they are for on
   a phone. The KPI band pairs up so nothing orphans. */
body.hi-table-page .colfilter{display:none}
@media(max-width:767px){
  /* the rail reserves its own height before the chips arrive, so the
     table below it never moves when the archive lands */
  body.hi-table-page .colfilter{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:7px;margin-top:14px;padding-bottom:2px;min-height:31px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
  body.hi-table-page .colfilter::-webkit-scrollbar{display:none}
  body.hi-table-page .colfilter button{flex:none;background:var(--card);border:1px solid var(--border);border-radius:999px;
    padding:6px 12px;cursor:pointer;font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--muted);
    letter-spacing:.05em;white-space:nowrap}
  body.hi-table-page .colfilter button.on{background:var(--blue);border-color:var(--blue);color:#fff}
  /* the standings contract at phone width: TEAM, GP, PTS, DIFF, L10 */
  body.hi-table-page table.dt.standings-table [data-col="conference"],
  body.hi-table-page table.dt.standings-table [data-col="division"],
  body.hi-table-page table.dt.standings-table [data-col="pct"],
  body.hi-table-page table.dt.standings-table [data-col="gf"],
  body.hi-table-page table.dt.standings-table [data-col="ga"],
  body.hi-table-page table.dt.standings-table [data-col="streak"],
  body.hi-table-page table.dt.standings-table [data-col="w"],
  body.hi-table-page table.dt.standings-table [data-col="l"],
  body.hi-table-page table.dt.standings-table [data-col="otl"],
  /* the stats contract at phone width: PLAYER, TEAM, GP and the
     contract's headline columns; the long tail of rate and detail
     columns steps aside */
  body.hi-table-page table.dt [data-col="position"],
  body.hi-table-page table.dt [data-col="ppp"],
  body.hi-table-page table.dt [data-col="pim"],
  body.hi-table-page table.dt [data-col="shots"],
  body.hi-table-page table.dt [data-col="shootingPct"],
  body.hi-table-page table.dt [data-col="toi"],
  body.hi-table-page table.dt [data-col="plusMinus"],
  body.hi-table-page table.dt [data-col="gs"],
  body.hi-table-page table.dt [data-col="sa"],
  body.hi-table-page table.dt [data-col="so"]{display:none}
  body.hi-table-page .statrail{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
  body.hi-table-page .statrail .cell{border-right:0;margin-right:0;padding-right:12px;
    border-bottom:1px solid rgba(255,255,255,.14)}
  /* an odd count would leave the last figure alone in a half-width
     column; it takes the whole row instead */
  body.hi-table-page .statrail .cell:last-child:nth-child(odd){grid-column:1/-1;border-bottom:0}
  /* the five surviving columns have to FIT, not merely survive: the club
     cell gives back the width it was holding for a desktop table and the
     strip tightens by a pixel per cell */
  body.hi-table-page table.dt td.team{min-width:0}
  /* "Colorado Avalanche" is 150px of a 500px screen and the crest plus
     COL says the same thing in 60. The full name is not deleted — it is
     taken off screen and left in the accessibility tree, so a screen
     reader still reads the club by name. */
  body.hi-table-page table.dt td.team .tcell b{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.hi-table-page table.dt td.team .tcell .abbr{font-size:.8rem;font-weight:800;color:var(--ink)}
  body.hi-table-page table.dt th,body.hi-table-page table.dt td{padding:9px 7px}
  body.hi-table-page .l10{gap:6px}
  body.hi-table-page .l10 .strip{grid-template-columns:repeat(10,5px);gap:1px}
  body.hi-table-page .l10 .strip i{width:5px;height:12px}
  body.hi-table-page .heroacts{flex-wrap:wrap}
  body.hi-table-page .heroacts a{white-space:nowrap}
  body.hi-table-page .pinrail{border-radius:16px}
}

/* ==================================================================
   /standings/ HERO VARIANTS — dev exploration block (?hero=1..5)
   Every selector below is scoped to body[data-hero="1..5"], so the
   other pages that load this stylesheet (/stats/, /compare/) and the
   shipped hero (data-hero="0") are untouched. Remove this block and
   the switcher markup together.
   ================================================================== */

/* the dev switcher itself */
.herodev{position:fixed;left:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:2px;
  padding:5px 7px;border-radius:9px;background:rgba(8,20,42,.9);border:1px solid rgba(157,184,221,.3);
  backdrop-filter:blur(6px);font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;opacity:.55;
  transition:opacity var(--mo-base,220ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1))}
.herodev[hidden]{display:none}
/* review only: standings/index.html shows it for an explicit ?hero= and nothing else */
.herodev:hover{opacity:1}
.herodev span{color:#8fa5c4;font-weight:700;margin-right:5px}
.herodev a{color:#c3d4ec;text-decoration:none;padding:3px 6px;border-radius:5px;font-weight:700;line-height:1}
.herodev a:hover{background:rgba(255,255,255,.14);color:#fff}
.herodev a.on{background:#2f6fd0;color:#fff}

/* shared variant shell: full-bleed, no herogrid, reserved height */
body.hi-hero-variant .hero .inner{padding-bottom:0}
body.hi-hero-variant .hv{position:relative;z-index:3}

/* ---------- 1 · THE BROADCAST BOARD ---------- */
body[data-hero="1"] .hero{--hero-a:#071429;--hero-b:#0e2c58}
body[data-hero="1"] .hero .inner{padding-top:22px;padding-bottom:0}
body[data-hero="1"] .hv1{min-height:520px}
body[data-hero="1"] .hv1-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-bottom:14px}
body[data-hero="1"] .hv1-head .eyebrow{flex-basis:100%;margin:0 0 4px}
body[data-hero="1"] .hv1-head h1{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.35rem);line-height:1.02;letter-spacing:-.015em;color:#fff;margin:0}
body[data-hero="1"] .hv1-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:#a9c3e6;margin:0;font-weight:600}
body[data-hero="1"] .hv1-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:84px;grid-auto-flow:dense;gap:5px;min-height:346px}
body[data-hero="1"] .hv1-wall .tile{position:relative;display:grid;align-content:center;justify-items:center;
  gap:2px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.055);
  border:1px solid rgba(157,184,221,.16);
  box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--tc,#1f5fbf) 12%,transparent);
  transition:background-color var(--mo-base,220ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1)),
    border-color var(--mo-base,220ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1))}
body[data-hero="1"] .hv1-wall .tile:hover{background:rgba(255,255,255,.13);border-color:rgba(157,184,221,.5)}
body[data-hero="1"] .hv1-wall .tile.big{grid-column:span 3;grid-row:span 2;gap:4px;
  background:rgba(255,255,255,.09);border-color:rgba(157,184,221,.34)}
body[data-hero="1"] .hv1-wall .rk{position:absolute;top:5px;left:7px;font-family:var(--mono);font-size:.5rem;
  font-weight:700;letter-spacing:.06em;color:#8fa5c4}
body[data-hero="1"] .hv1-wall .tile.big .rk{font-size:.66rem;color:#8ab8f2;top:8px;left:11px}
body[data-hero="1"] .hv1-wall .cr{display:grid;place-items:center;line-height:0}
body[data-hero="1"] .hv1-wall .cr img{object-fit:contain}
body[data-hero="1"] .hv1-wall b{font-family:var(--mono);font-size:.78rem;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
body[data-hero="1"] .hv1-wall .tile.big b{font-size:1.7rem;letter-spacing:-.02em}
body[data-hero="1"] .hv1-wall i{font-style:normal;font-family:var(--mono);font-size:.48rem;font-weight:700;
  letter-spacing:.13em;color:#9db8dd}
body[data-hero="1"] .hv1-wall .tile.big i{font-size:.6rem;color:#8ab8f2}
body[data-hero="1"] .hv1-wall u{text-decoration:none;font-family:var(--mono);font-size:.55rem;
  font-weight:600;color:#c3d4ec;letter-spacing:.05em}
body[data-hero="1"] .hv1-ticker{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.22);padding:11px 0 15px;min-height:46px}
body[data-hero="1"] .hvk{display:flex;align-items:baseline;gap:7px}
body[data-hero="1"] .hvk i{font-style:normal;font-family:var(--mono);font-size:.86rem;font-weight:700;
  color:#fff;font-variant-numeric:tabular-nums}
body[data-hero="1"] .hvk i small{font-family:var(--mono);font-size:.62rem;font-weight:700;color:#8ab8f2}
body[data-hero="1"] .hvk em{font-style:normal;font-size:.52rem;font-weight:900;letter-spacing:.17em;
  text-transform:uppercase;color:#8fa5c4}
@media (max-width:1100px){
  body[data-hero="1"] .hv1-wall{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:76px;min-height:470px}
  body[data-hero="1"] .hv1-wall .tile.big{grid-column:span 2}
  body[data-hero="1"] .hv1{min-height:640px}
}
@media (max-width:640px){
  body[data-hero="1"] .hv1-wall{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:64px;min-height:452px}
  body[data-hero="1"] .hv1-wall .tile.big{grid-column:span 2;grid-row:span 2}
  body[data-hero="1"] .hv1-wall .tile.big b{font-size:1.25rem}
  body[data-hero="1"] .hv1{min-height:660px}
  body[data-hero="1"] .hv1-ticker{gap:0 18px}
}
@media (prefers-reduced-motion:reduce){
  body.hi-hero-variant .hv *{transition:none!important;animation:none!important}
}

/* ---------- 2 · THE LEDGER ---------- */
/* Parchment in light, deep surface in dark — both painted from the
   shared surface tokens, so this hero is a document in either theme. */
body[data-hero="2"] .hero{background:var(--field);color:var(--ink)}
body[data-hero="2"] .hero::after{display:none}
body[data-hero="2"] .hero .orbs{display:none}
body[data-hero="2"] .hero .inner{padding-top:26px;padding-bottom:0}
/* a document wants the crest that suits its own ground, not the navy one */
body[data-hero="2"] .hero .logo-l{display:inline-block!important}
body[data-hero="2"] .hero .logo-d{display:none!important}
:root[data-theme="dark"] body[data-hero="2"] .hero .logo-l{display:none!important}
:root[data-theme="dark"] body[data-hero="2"] .hero .logo-d{display:inline-block!important}
body[data-hero="2"] .hv2{min-height:492px;padding-bottom:30px}
body[data-hero="2"] .hv2-run{display:flex;flex-wrap:wrap;gap:0 20px;margin:0 0 16px;padding-bottom:9px;
  border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}
body[data-hero="2"] .hv2-run span:not(:first-child){color:var(--muted)}
body[data-hero="2"] .hv2 h1{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.03;letter-spacing:-.02em;color:var(--ink);
  max-width:19ch;margin:0 0 26px}
body[data-hero="2"] .hv2-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(268px,.75fr);
  gap:36px;align-items:start;border-top:1px solid var(--hairline);padding-top:22px}
body[data-hero="2"] .hv2-figure{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 26px;align-items:center}
body[data-hero="2"] .hv2-num{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(6.5rem,13vw,12rem);line-height:.78;letter-spacing:-.05em;color:var(--ink);
  font-variant-numeric:tabular-nums}
body[data-hero="2"] .hv2-who{display:grid;gap:5px;min-width:0}
body[data-hero="2"] .hv2-who .cr{line-height:0;margin-bottom:3px}
body[data-hero="2"] .hv2-who .cr img{width:56px;height:56px;object-fit:contain}
body[data-hero="2"] .hv2-who b{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:1.22rem;line-height:1.1;color:var(--ink)}
body[data-hero="2"] .hv2-who span{font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
body[data-hero="2"] .hv2-who em{font-style:normal;font-size:.78rem;line-height:1.5;color:var(--muted);
  max-width:34ch;border-left:2px solid var(--blue);padding-left:11px;margin-top:5px}
body[data-hero="2"] .hv2-col{margin:0;border-top:2px solid var(--ink);padding-top:8px}
body[data-hero="2"] .hv2-colhead{font-family:var(--mono);font-size:.52rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
body[data-hero="2"] .hv2-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--hairline)}
body[data-hero="2"] .hv2-row:last-child{border-bottom:0}
body[data-hero="2"] .hv2-row dt{font-size:.72rem;font-weight:700;color:var(--ink);line-height:1.25}
body[data-hero="2"] .hv2-row dt em{display:block;font-style:normal;font-family:var(--mono);
  font-size:.5rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:2px}
body[data-hero="2"] .hv2-row dd{margin:0;font-family:var(--mono);font-size:.95rem;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-hero="2"] .hv2-row dd small{font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--muted)}
@media (max-width:900px){
  body[data-hero="2"] .hv2-body{grid-template-columns:1fr;gap:26px}
  body[data-hero="2"] .hv2{min-height:640px}
}
@media (max-width:560px){
  body[data-hero="2"] .hv2-figure{grid-template-columns:1fr;gap:10px}
  body[data-hero="2"] .hv2-num{font-size:clamp(5rem,26vw,8rem)}
  body[data-hero="2"] .hv2{min-height:700px}
}

/* ---------- 3 · THE RACE ---------- */
body[data-hero="3"] .hero{--hero-a:#08182f;--hero-b:#12335f}
body[data-hero="3"] .hero .inner{padding-top:22px;padding-bottom:0}
body[data-hero="3"] .hv3{min-height:614px;padding-bottom:22px}
body[data-hero="3"] .hv3-head h1{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.3rem);line-height:1.02;letter-spacing:-.015em;color:#fff;margin:0}
body[data-hero="3"] .hv3-head .eyebrow{margin:0 0 4px}
body[data-hero="3"] .hv3-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:#a9c3e6;margin:5px 0 14px;font-weight:600}
body[data-hero="3"] .hv3-field{position:relative;padding-top:16px}
body[data-hero="3"] .hv3-bars{display:grid;grid-auto-rows:15px;gap:2px;min-height:542px}
body[data-hero="3"] .bar{display:grid;grid-template-columns:20px 34px minmax(0,1fr) 40px;
  align-items:center;gap:8px}
body[data-hero="3"] .bar .rk{font-family:var(--mono);font-size:.5rem;font-weight:700;color:#7f96b7;
  text-align:right;font-variant-numeric:tabular-nums}
body[data-hero="3"] .bar .ab{font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.1em;color:#c3d4ec}
body[data-hero="3"] .bar .track{display:block;height:11px;border-radius:3px;
  background:rgba(255,255,255,.07);overflow:hidden}
body[data-hero="3"] .bar .track i{display:block;height:100%;width:var(--w,0%);border-radius:3px;
  transform-origin:left center;
  /* the chroma cap: every franchise tint is lifted toward white so no
     near-black club disappears into the navy and no light one blows out */
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--tc,#1f5fbf) 58%,#0a1c38 42%),
    color-mix(in srgb,var(--tc,#1f5fbf) 76%,#ffffff 24%));
  opacity:.5;transform:scaleX(0);
  animation:hv3-draw var(--mo-slow,620ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay:calc(var(--i,0) * 14ms)}
body[data-hero="3"] .bar.in .track i{opacity:1}
body[data-hero="3"] .bar.near .track i{box-shadow:0 0 0 1px rgba(240,138,120,.85)}
body[data-hero="3"] .bar.near .ab{color:#f5a99a}
body[data-hero="3"] .bar .v{font-family:var(--mono);font-size:.66rem;font-weight:700;color:#e6eefb;
  text-align:right;font-variant-numeric:tabular-nums}
body[data-hero="3"] .bar.in .v{color:#fff}
@keyframes hv3-draw{to{transform:scaleX(1)}}
body[data-hero="3"] .hv3-cut{position:absolute;top:4px;bottom:-4px;pointer-events:none;z-index:2;
  left:calc(70px + (100% - 118px) * var(--xf))}
body[data-hero="3"] .hv3-cut::before{content:"";position:absolute;top:0;bottom:0;left:0;
  border-left:1px dashed rgba(240,138,120,.8)}
body[data-hero="3"] .hv3-cut span{position:absolute;top:-13px;left:7px;font-family:var(--mono);
  font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#f5a99a;
  white-space:nowrap;background:rgba(8,24,47,.86);padding:2px 6px;border-radius:4px}
body[data-hero="3"] .hv3-axis{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  margin:13px 0 0;padding:11px 0 4px;border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;color:#9db8dd;min-height:38px}
body[data-hero="3"] .hv3-axis .key{display:inline-flex;align-items:center;gap:7px;color:#8fa5c4}
body[data-hero="3"] .hv3-axis i{width:16px;height:8px;border-radius:2px;display:inline-block}
body[data-hero="3"] .hv3-axis i.k-in{background:linear-gradient(90deg,#2c5aa0,#6f9ee0)}
body[data-hero="3"] .hv3-axis i.k-near{background:transparent;box-shadow:inset 0 0 0 1px rgba(240,138,120,.85)}
@media (max-width:640px){
  body[data-hero="3"] .bar{grid-template-columns:16px 30px minmax(0,1fr) 34px;gap:6px}
  body[data-hero="3"] .hv3-cut{left:calc(58px + (100% - 98px) * var(--xf))}
}
@media (prefers-reduced-motion:reduce){
  body[data-hero="3"] .bar .track i{animation:none;transform:scaleX(1)}
}

/* ---------- 4 · THE SPLIT SCREEN ---------- */
body[data-hero="4"] .hero{--hero-a:#071429;--hero-b:#10305c}
body[data-hero="4"] .hero .inner{padding-top:26px;padding-bottom:0}
body[data-hero="4"] .hv4{min-height:540px;padding-bottom:22px}
body[data-hero="4"] .hv4-split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:38px;align-items:stretch}
body[data-hero="4"] .hv4-left{display:flex;flex-direction:column;justify-content:center;min-width:0}
body[data-hero="4"] .hv4-left h1{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:.99;letter-spacing:-.025em;color:#fff;margin:6px 0 14px;
  max-width:15ch}
body[data-hero="4"] .hv4-left .dek{max-width:46ch;font-size:.88rem;line-height:1.55;color:#c3d4ec;font-weight:500}
body[data-hero="4"] .hv4-panel{position:relative;overflow:hidden;border-radius:18px;padding:20px 22px 18px;
  min-height:378px;display:flex;flex-direction:column;
  border:1px solid color-mix(in srgb,var(--tc,#1f5fbf) 42%,rgba(157,184,221,.4));
  /* the tint is capped against a deep navy floor so white text clears
     4.5:1 on every club, including the pale ones */
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--tc,#1f5fbf) 34%,#08182f 66%),
    color-mix(in srgb,var(--tc,#1f5fbf) 14%,#061224 86%))}
body[data-hero="4"] .hv4-ghost{position:absolute;right:-58px;bottom:-64px;opacity:.13;
  pointer-events:none;line-height:0}
body[data-hero="4"] .hv4-ghost img{width:260px;height:260px;object-fit:contain}
body[data-hero="4"] .hv4-rank{position:relative;z-index:1;margin:0 0 12px;font-family:var(--mono);
  font-size:1.5rem;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
body[data-hero="4"] .hv4-rank span{display:block;font-size:.5rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#a9c3e6;margin-top:4px}
body[data-hero="4"] .hv4-id{position:relative;z-index:1;display:grid;gap:3px}
body[data-hero="4"] .hv4-id .cr{line-height:0;margin-bottom:5px}
body[data-hero="4"] .hv4-id .cr img{width:46px;height:46px;object-fit:contain}
body[data-hero="4"] .hv4-id b{font-family:var(--serif);font-style:normal;font-weight:600;font-size:1.5rem;
  line-height:1.05;color:#fff}
body[data-hero="4"] .hv4-id span{font-family:var(--mono);font-size:.54rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#a9c3e6}
body[data-hero="4"] .hv4-pts{position:relative;z-index:1;display:flex;align-items:baseline;gap:9px;
  margin:14px 0 0;font-family:var(--serif);font-style:normal;font-weight:600;font-size:3.1rem;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
body[data-hero="4"] .hv4-pts small{font-family:var(--mono);font-size:.7rem;font-weight:700;color:#a9c3e6}
body[data-hero="4"] .hv4-pts em{font-style:normal;margin-left:auto;font-family:var(--mono);
  font-size:.8rem;font-weight:700;color:#e6eefb}
body[data-hero="4"] .hv4-figs{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:9px 16px;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.24)}
body[data-hero="4"] .hv4-figs dt{font-size:.5rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:#a9c3e6}
body[data-hero="4"] .hv4-figs dd{margin:2px 0 0;font-family:var(--mono);font-size:.86rem;font-weight:700;
  color:#fff;font-variant-numeric:tabular-nums}
body[data-hero="4"] .hv4-l10{position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:14px}
body[data-hero="4"] .hv4-l10 > span{font-size:.5rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:#a9c3e6}
body[data-hero="4"] .hv4-l10 .strip{display:flex;gap:2px}
body[data-hero="4"] .hv4-l10 .strip i{width:9px;height:15px;border-radius:2px;display:block}
body[data-hero="4"] .hv4-l10 .strip i.w{background:var(--hi-mint,#5cc4a0)}
body[data-hero="4"] .hv4-l10 .strip i.o{background:#8ab8f2}
body[data-hero="4"] .hv4-l10 .strip i.l{background:var(--hi-coral,#e8806f)}
body[data-hero="4"] .hv4-l10 .strip i.n{background:rgba(255,255,255,.16)}
body[data-hero="4"] .hv4-l10 b{margin-left:auto;font-family:var(--mono);font-size:.72rem;font-weight:700;color:#e6eefb}
body[data-hero="4"] .hv4-rail{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px;padding:13px 0 4px;
  border-top:1px solid rgba(255,255,255,.22);min-height:62px}
body[data-hero="4"] .hv4-rail .chip{width:38px;height:38px;display:grid;place-items:center;padding:0;
  border-radius:9px;cursor:pointer;background:rgba(255,255,255,.05);
  border:1px solid rgba(157,184,221,.2);line-height:0;
  transition:background-color var(--mo-base,200ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1)),
    border-color var(--mo-base,200ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1))}
body[data-hero="4"] .hv4-rail .chip img{width:26px;height:26px;object-fit:contain}
body[data-hero="4"] .hv4-rail .chip:hover,body[data-hero="4"] .hv4-rail .chip:focus-visible{
  background:rgba(255,255,255,.15);border-color:rgba(157,184,221,.6);outline:none}
body[data-hero="4"] .hv4-rail .chip.on{background:color-mix(in srgb,var(--tc,#1f5fbf) 34%,#0a1c38 66%);
  border-color:#8ab8f2}
@media (max-width:960px){
  body[data-hero="4"] .hv4-split{grid-template-columns:1fr;gap:22px}
  body[data-hero="4"] .hv4{min-height:760px}
}
@media (max-width:560px){
  body[data-hero="4"] .hv4-rail .chip{width:32px;height:32px}
  body[data-hero="4"] .hv4-rail .chip img{width:22px;height:22px}
}

/* ---------- 5 · THE ARCHIVE ---------- */
body[data-hero="5"] .hero{--hero-a:#06121f;--hero-b:#0f2f57}
body[data-hero="5"] .hero .inner{padding-top:26px;padding-bottom:0}
body[data-hero="5"] .hv5{min-height:492px;padding-bottom:20px}
body[data-hero="5"] .hv5-head h1{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(1.75rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.022em;color:#fff;margin:5px 0 10px;
  max-width:20ch}
body[data-hero="5"] .hv5-head .dek{max-width:56ch;font-size:.86rem;line-height:1.55;color:#c3d4ec;font-weight:500}
body[data-hero="5"] .hv5-read{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin:20px 0 10px;min-height:64px}
body[data-hero="5"] .hv5-read b,body[data-hero="5"] .hv5-read em{flex:0 0 auto}
body[data-hero="5"] .hv5-read .cr{line-height:0;width:30px;flex:0 0 auto}
body[data-hero="5"] .hv5-read .cr img{width:30px;height:30px;object-fit:contain}
body[data-hero="5"] .hv5-read b{font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;color:#8ab8f2}
body[data-hero="5"] .hv5-read > span:not(.cr){font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:1.22rem;color:#fff;line-height:1.15}
body[data-hero="5"] .hv5-read em{font-style:normal;font-family:var(--mono);font-size:.58rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9db8dd}
body[data-hero="5"] .hv5-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:4px;align-items:end;height:196px;border-bottom:1px solid rgba(255,255,255,.28)}
body[data-hero="5"] .hv5-strip .col{display:flex;flex-direction:column;justify-content:flex-end;
  align-items:stretch;gap:0;height:100%;padding:0;background:none;border:0;cursor:pointer}
body[data-hero="5"] .hv5-strip .col i{display:block;height:var(--h,40%);border-radius:3px 3px 0 0;
  background:rgba(157,184,221,.26);
  transition:background-color var(--mo-base,200ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1)),
    height var(--mo-slow,560ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1))}
body[data-hero="5"] .hv5-strip .col span{font-family:var(--mono);font-size:.46rem;font-weight:700;
  letter-spacing:.04em;color:#7f96b7;padding-top:6px}
body[data-hero="5"] .hv5-strip .col:hover i,body[data-hero="5"] .hv5-strip .col:focus-visible i{
  background:rgba(157,184,221,.62);outline:none}
body[data-hero="5"] .hv5-strip .col:focus-visible{outline:1px solid #8ab8f2;outline-offset:2px}
body[data-hero="5"] .hv5-strip .col.on i{background:linear-gradient(180deg,#8ab8f2,#2f6fd0)}
body[data-hero="5"] .hv5-strip .col.on span{color:#fff}
body[data-hero="5"] .hv5-axis{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:11px 0 4px;
  font-family:var(--mono);font-size:.53rem;letter-spacing:.06em;color:#8fa5c4;min-height:34px}
@media (max-width:640px){
  body[data-hero="5"] .hv5-strip{height:158px;gap:2px}
  body[data-hero="5"] .hv5-strip .col span{font-size:.4rem;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){
  body[data-hero="5"] .hv5-strip .col i{transition:none}
}

/* ---------- 3b · THE RACE, IN-PAGE ----------
   The same chart as hero variant 3, mounted under the league table for
   the selected season (owner's call, 2026-08-17: hero 4 ships as the
   hero, the race rides below as an additional visual). Same geometry;
   the on-navy inks are swapped for the page's own tokens so it reads on
   the parchment panel in both themes. Derived mechanically from the
   hero-3 block above -- keep the two in step. */
.hv3-inpage{padding:6px 18px 4px}
.hv3-inpage .hv3-bars{min-height:0}
.hv3-inpage .bar .track{background:var(--hi-data-track,#ece4d3)}
.hv3-inpage .bar .track i{opacity:.55}
.hv3-inpage .bar.in .track i{opacity:1}
.hv3-inpage .hv3-cut span{border:1px solid var(--hairline)}
.racepanel{margin-top:18px;padding-bottom:6px}
.hv3-inpage .hv3-field{position:relative;padding-top:16px}
.hv3-inpage .hv3-bars{display:grid;grid-auto-rows:15px;gap:2px;min-height:542px}
.hv3-inpage .bar{display:grid;grid-template-columns:20px 34px minmax(0,1fr) 40px;
  align-items:center;gap:8px}
.hv3-inpage .bar .rk{font-family:var(--mono);font-size:.5rem;font-weight:700;color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums}
.hv3-inpage .bar .ab{font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.1em;color:var(--ink)}
.hv3-inpage .bar .track{display:block;height:11px;border-radius:3px;
  background:var(--hi-data-track,#ece4d3);overflow:hidden}
.hv3-inpage .bar .track i{display:block;height:100%;width:var(--w,0%);border-radius:3px;
  transform-origin:left center;
  /* the chroma cap: every franchise tint is lifted toward white so no
     near-black club disappears into the navy and no light one blows out */
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--tc,#1f5fbf) 58%,var(--ink) 30%),
    color-mix(in srgb,var(--tc,#1f5fbf) 76%,var(--card) 18%));
  opacity:.5;transform:scaleX(0);
  animation:hv3-draw var(--mo-slow,620ms) var(--mo-ease,cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay:calc(var(--i,0) * 14ms)}
.hv3-inpage .bar.in .track i{opacity:1}
.hv3-inpage .bar.near .track i{box-shadow:0 0 0 1px var(--coral)}
.hv3-inpage .bar.near .ab{color:var(--coral)}
.hv3-inpage .bar .v{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}
.hv3-inpage .bar.in .v{color:var(--ink);font-weight:800}
@keyframes hv3-draw{to{transform:scaleX(1)}}
.hv3-inpage .hv3-cut{position:absolute;top:4px;bottom:-4px;pointer-events:none;z-index:2;
  left:calc(70px + (100% - 118px) * var(--xf))}
.hv3-inpage .hv3-cut::before{content:"";position:absolute;top:0;bottom:0;left:0;
  border-left:1px dashed var(--coral)}
.hv3-inpage .hv3-cut span{position:absolute;top:-13px;left:7px;font-family:var(--mono);
  font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--coral);
  white-space:nowrap;background:var(--card);padding:2px 6px;border-radius:4px}
.hv3-inpage .hv3-axis{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  margin:13px 0 0;padding:11px 0 4px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;color:var(--muted);min-height:38px}
.hv3-inpage .hv3-axis .key{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.hv3-inpage .hv3-axis i{width:16px;height:8px;border-radius:2px;display:inline-block}
.hv3-inpage .hv3-axis i.k-in{background:linear-gradient(90deg,#2c5aa0,#6f9ee0)}
.hv3-inpage .hv3-axis i.k-near{background:transparent;box-shadow:inset 0 0 0 1px var(--coral)}
@media (max-width:640px){
  .hv3-inpage .bar{grid-template-columns:16px 30px minmax(0,1fr) 34px;gap:6px}
  .hv3-inpage .hv3-cut{left:calc(58px + (100% - 98px) * var(--xf))}
}
@media (prefers-reduced-motion:reduce){
  .hv3-inpage .bar .track i{animation:none;transform:scaleX(1)}
}


/* ============================================================
   SECTION 03 — THE SEASON, AS IT HAPPENED   (/standings/ only)

   A rank trace over the snapshot dates the league published, a
   scrubber that drives it, and the table for the scrubbed date.

   TWO RULES THIS BLOCK IS BUILT AROUND
   1. Zero CLS. .mv-chart reserves its full height before the
      fetch lands, the skeleton fills exactly that box, and the
      table body is skeletoned at the real row height. Scrubbing
      moves a marker and rewrites cell TEXT; it never re-lays out.
   2. No colour on direction. Franchise tints identify a club and
      nothing else — a line that climbs is not drawn "good". The
      only semantic marks are the sixteenth-place rule (coral, the
      same mark the table above uses for its cut) and the weight
      given to the clubs inside it on the FINAL day. Both are
      spelled out in the panel foot.
   ============================================================ */
.moviepanel{padding:18px 18px 0}
.moviepanel .mv-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.mv-play,.mv-final{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);background:var(--card2);border:1px solid var(--border);
  border-radius:999px;padding:8px 15px;cursor:pointer;transition:background .18s,border-color .18s}
.mv-play:hover,.mv-final:hover{background:var(--blue-soft);border-color:var(--blue)}
.mv-play:disabled{opacity:.45;cursor:default}
.mv-play[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue)}
.mv-final{margin-left:auto}
.moviepanel .mv-scrub{flex:1 1 240px;min-width:180px;display:block}
.moviepanel .mv-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.moviepanel .mv-scrub input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;
  height:22px;cursor:pointer}
.moviepanel .mv-scrub input[type=range]:disabled{cursor:default;opacity:.5}
.moviepanel .mv-scrub input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:var(--track)}
.moviepanel .mv-scrub input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:var(--track)}
.moviepanel .mv-scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--card);margin-top:-6px;
  box-shadow:0 0 0 1px var(--ink)}
.moviepanel .mv-scrub input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--ink);border:2px solid var(--card);box-shadow:0 0 0 1px var(--ink)}
.moviepanel .mv-scrub input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.mv-date{font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.05em;
  display:flex;flex-direction:column;gap:2px;min-width:150px}
.mv-date b{font-size:.72rem;font-weight:700;color:var(--ink);letter-spacing:.03em}
.moviepanel .kbdhint{margin:9px 0 0}

/* ---- the stage: trace at left, readout at right ---- */
.mv-stage{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:16px;margin-top:14px;
  align-items:start;position:relative;z-index:1}
.mv-chart{position:relative;height:342px;min-height:342px}   /* reserved, never negotiated */
.mv-chart .hi-sk.is-block{--hi-sk-h:342px}
.mv-chart .hi-empty{height:342px;display:grid;align-content:center}
.mv-plot{position:absolute;left:26px;right:2px;top:0;bottom:26px}
.mv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mv-svg .mv-line{fill:none;stroke:color-mix(in srgb,var(--tc,#1f5fbf) 62%,var(--card) 38%);
  stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  opacity:.42;transition:opacity .18s,stroke-width .18s;pointer-events:none}
.mv-svg .mv-line.in{opacity:.9;stroke-width:2.1px;
  stroke:color-mix(in srgb,var(--tc,#1f5fbf) 74%,var(--ink) 16%)}
.mv-svg .mv-hit{fill:none;stroke:transparent;stroke-width:11px;vector-effect:non-scaling-stroke;cursor:pointer}
.mv-chart.mv-focus .mv-line{opacity:.12}
.mv-chart.mv-focus .mv-line.on{opacity:1;stroke-width:3.2px}
.mv-svg .mv-cut{stroke:var(--coral);stroke-width:1.5px;stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke;opacity:.85}
.mv-svg .mv-marker{stroke:var(--ink);stroke-width:1.5px;vector-effect:non-scaling-stroke;opacity:.55}
.mv-svg .mv-dot{fill:color-mix(in srgb,var(--tc,#1f5fbf) 70%,var(--card) 30%);
  stroke:var(--card);stroke-width:1.2px;vector-effect:non-scaling-stroke;opacity:.5;pointer-events:none}
.mv-svg .mv-dot.in{opacity:1;fill:color-mix(in srgb,var(--tc,#1f5fbf) 78%,var(--ink) 14%)}
.mv-chart.mv-focus .mv-dot{opacity:.14}
.mv-chart.mv-focus .mv-dot.on{opacity:1;r:6}
/* the invisible date columns: the hover target and the click target */
.mv-cols{position:absolute;inset:0}
.mv-col{position:absolute;top:0;bottom:0;transform:translateX(-50%);background:transparent;
  border:0;padding:0;cursor:pointer;appearance:none}
.mv-col:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mv-col.on{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.mv-col:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.mv-ranks{position:absolute;left:-26px;top:0;bottom:0;width:24px;pointer-events:none}
.mv-rt{position:absolute;right:2px;transform:translateY(-50%);font-family:var(--mono);font-size:.5rem;
  font-weight:700;color:var(--muted);letter-spacing:.04em}
.mv-dates{position:absolute;left:26px;right:2px;bottom:0;height:24px}
.mv-tick{position:absolute;top:5px;transform:translateX(-50%);font-family:var(--mono);font-size:.5rem;
  color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.mv-tick:first-child{transform:none}
.mv-tick:last-child{transform:translateX(-100%)}

/* ---- the readout beside the trace ---- */
.mv-read{border:1px solid var(--hairline);border-radius:13px;background:var(--card2);
  padding:13px 14px;min-height:342px}
.mv-readhead{font-family:var(--serif);font-style:normal;font-weight:600;font-size:.98rem;
  color:var(--ink);line-height:1.15}
.mv-readsub{font-family:var(--mono);font-size:.53rem;letter-spacing:.06em;color:var(--muted);
  margin-top:4px;line-height:1.4}
.mv-mini{list-style:none;margin:11px 0 0;padding:9px 0 0;border-top:1px solid var(--hairline)}
.mv-mini li{display:grid;grid-template-columns:20px 34px 1fr auto;gap:6px;align-items:center;
  font-family:var(--mono);font-size:.6rem;padding:3px 0;color:var(--ink);font-variant-numeric:tabular-nums}
.mv-mini li.cut{border-top:1px dashed var(--coral);margin-top:4px;padding-top:6px}
.mv-mini .rk{color:var(--muted);text-align:right}
.mv-mini .ab{font-weight:700;color:color-mix(in srgb,var(--tc,#1f5fbf) 52%,var(--ink) 48%)}
.mv-mini .pt{font-weight:700;text-align:right}
.mv-mini .pc{color:var(--muted);text-align:right}
.mv-facts{margin-top:11px;padding-top:9px;border-top:1px solid var(--hairline);display:grid;gap:8px}
.mv-facts dt{font-size:.48rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.mv-facts dd{font-family:var(--mono);font-size:.72rem;font-weight:600;margin-top:2px;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ---- the table for the scrubbed date ---- */
.mv-tablewrap{margin:16px -18px 0;overflow-x:auto;border-top:1px solid var(--hairline);position:relative;z-index:1}
table.mv-table{width:100%;border-collapse:collapse}
table.mv-table th{font-family:var(--mono);font-size:.5rem;font-weight:900;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--border);
  background:var(--card2)}
table.mv-table td{font-family:var(--mono);font-size:.68rem;padding:5px 10px;color:var(--ink);
  border-bottom:1px solid var(--hairline);font-variant-numeric:tabular-nums;height:29px}
table.mv-table th.l,table.mv-table td.l{text-align:left}
table.mv-table th.r,table.mv-table td.r{text-align:right}
table.mv-table th:first-child,table.mv-table td:first-child{width:54px;padding-left:18px;padding-right:16px}
table.mv-table th:nth-child(2),table.mv-table td:nth-child(2){padding-left:14px}
table.mv-table td.mv-rk{color:var(--muted);font-weight:700}
table.mv-table td.mv-team{min-width:190px}
table.mv-table td.mv-team .cr{width:20px;height:20px;display:inline-grid;place-items:center;
  vertical-align:middle;margin-right:8px}
table.mv-table td.mv-team .cr img{width:20px;height:20px;object-fit:contain}
table.mv-table td.mv-team b{font-family:var(--sans);font-size:.76rem;font-weight:700;
  color:var(--ink);white-space:nowrap;vertical-align:middle}
table.mv-table tr:hover td{background:var(--hi-ink-soft)}
table.mv-table tr.mv-atcut td{border-bottom:2px dashed var(--coral)}
.mv-cl{font-weight:800;color:var(--ink);border:1px solid var(--border);border-radius:4px;
  padding:1px 5px;background:var(--card2)}
.mv-legend{margin:0 -18px}
.mv-legend b{font-family:var(--mono);font-weight:800;color:var(--ink);border:1px solid var(--border);
  border-radius:4px;padding:0 4px;background:var(--card2)}
.moviepanel .asof{padding:0 0 16px}

@media (max-width:900px){
  .mv-stage{grid-template-columns:minmax(0,1fr)}
  .mv-read{min-height:0}
}
@media (max-width:640px){
  .moviepanel{padding:15px 13px 0}
  .mv-chart{height:274px;min-height:274px}
  .mv-chart .hi-sk.is-block{--hi-sk-h:274px}
  .mv-chart .hi-empty{height:274px}
  .mv-final{margin-left:0}
  .mv-tablewrap,.mv-legend{margin-left:-13px;margin-right:-13px}
}
@media (prefers-reduced-motion:reduce){
  .mv-svg .mv-line,.mv-svg .mv-dot{transition:none}
}