/* ============================================================ THE SYSTEM
   Before this block existed the stylesheet held 49 distinct font sizes, 22
   letter-spacing values and 95 hand-tuned spacing clamps. Every one was
   defensible alone; together they read as a site that had been decided
   locally rather than designed. What follows is the whole vocabulary.

   TYPE. Archivo and Chivo Mono are siblings - both Omnibus-Type, drawn to
   sit together, and neither is the mono that ships with every AI product.
   Archivo carries a width axis, which is why the mastheads can be Expanded
   without loading a second family.

   SCALE. Seven steps, fluid between a phone and 1400px. Ratio near 1.28 in
   the text sizes and wider at the display end, where the jumps need to read
   as decisions rather than accidents.

   LEADING. Tight display, generous body. The one rule that never bends:
   long-form text is 1.6 or looser, figures are 1 or tighter.

   TRACKING. Negative on display, zero on body, open on uppercase mono
   labels. Uppercase without added tracking is the single most common
   amateur tell in an otherwise decent design. */
:root{
  --barh:46px;
  /* type scale */
  --t-display:clamp(40px,7.2vw,92px);
  --t-xl:clamp(30px,4.4vw,54px);
  --t-lg:clamp(23px,2.6vw,32px);
  --t-md:clamp(17px,1.5vw,20px);
  --t-body:17px;
  --t-sm:15px;
  --t-xs:13px;
  --t-label:11px;
  --t-micro:9.5px;

  /* leading */
  --lh-display:.94;
  --lh-head:1.12;
  --lh-snug:1.35;
  --lh-body:1.6;
  --lh-loose:1.72;
  --lh-flat:1;

  /* tracking */
  --tr-display:-.032em;
  --tr-head:-.022em;
  --tr-tight:-.012em;
  --tr-body:0;
  --tr-label:.13em;
  --tr-micro:.16em;

  /* spacing — a 4px grid, doubling through the middle */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px;  --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;
  /* one section rhythm, used everywhere a section meets a section */
  --sec:clamp(64px,7.4vw,112px);
  --sec-tight:clamp(40px,4.4vw,64px);
}

:root{
  --ink:#0A0A0B; --surface:#141416; --paper:#EDEAE4;
  --muted:#8A8A93; --rule:#26262B;
  --signal:#FF2E2E; --signal-dim:#B31D1D;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'Chivo Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(100% - 2 * var(--gut),1240px);margin-inline:auto;padding:0}

/* ---------- persistent bar ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.bar-in{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:9px 0;
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}
.bar strong{color:var(--paper);font-weight:500}
/* the phase light. Every phase pulses; the colour carries the meaning. */
.live{display:inline-flex;align-items:center;gap:7px;color:var(--ph,var(--signal))}
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--ph,var(--signal));
  box-shadow:0 0 10px var(--ph,var(--signal));
  animation:pulse 2.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.bar-sep{color:var(--rule)}

/* ---------- masthead ---------- */
.mast{padding:var(--sec) 0 0}
.mast h1{
  overflow-wrap:break-word;hyphens:auto;
  font-family:var(--sans);font-stretch:125%;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  font-weight:600;text-transform:uppercase;
}
.mast .sub{
  margin-top:18px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}

/* ---------- the ledger (signature) ---------- */
.ledger{border-top:1px solid var(--rule);margin-top:8px}
.row{
  display:grid;
  grid-template-columns:42px 1fr minmax(90px,auto);
  gap:var(--s4);align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule);
  transition:background .25s ease;
}
.row:hover{background:var(--surface)}
.rn{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);color:var(--muted);
}
.champ{
  font-size:var(--t-md);font-weight:500;letter-spacing:var(--tr-tight);
}
.yr{
  font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  letter-spacing:var(--tr-body);text-align:right;
}
.row.repeat .champname::after{
  content:'\2605 back-to-back';margin-left:12px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:#2A1E05;vertical-align:middle;
  padding:3px 7px;border-radius:2px;white-space:nowrap;
  background:linear-gradient(152deg,#FFF6D0 0%,#F0CE63 22%,#C89A24 46%,
    #8A6410 60%,#E4BE55 80%,#FFF9DC 100%);
  box-shadow:0 0 12px rgba(201,162,39,.32);
}

/* the open row — the whole point */
.row.open{
  grid-template-columns:52px 1fr;
  padding:clamp(26px,4vw,44px) 0 clamp(28px,4vw,46px);
  border-bottom:1px solid var(--signal-dim);
  align-items:center;
}
.row.open .rn{color:var(--signal)}
.open-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(14px,3vw,30px)}
.count{
  font-family:var(--mono);font-weight:500;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  color:var(--signal);text-shadow:0 0 28px rgba(255,46,46,.42);
}
.count-unit{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  max-width:210px;line-height:var(--lh-snug);
}
.count-unit b{display:block;color:var(--paper);font-weight:500}

/* ---------- sections ---------- */
section{padding:var(--sec) 0}
.eyebrow{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  margin-bottom:22px;
}
h2{
  font-size:var(--t-xl);line-height:var(--lh-flat);letter-spacing:var(--tr-head);
  font-weight:600;
}
.lede{margin-top:14px;max-width:56ch;color:var(--muted);font-size:var(--t-sm)}

/* offset grid — deliberate empty column */
.split{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,56px)}
@media(min-width:860px){.split{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}.split>.gap{display:block}}
.gap{display:none}

/* defending champion */
.defend{border-top:1px solid var(--rule);padding-top:26px}
.defend .name{
  font-stretch:125%;font-weight:600;text-transform:uppercase;
  font-size:var(--t-xl);line-height:var(--lh-display);letter-spacing:var(--tr-display);
}
.defend .club{margin-top:10px;color:var(--muted);font-size:var(--t-sm)}
.scoreline{
  margin-top:24px;display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-sm);
}
.scoreline span{color:var(--muted)}
.scoreline b{font-weight:500;color:var(--paper)}

/* record watch */
.watch{border-top:1px solid var(--rule);padding-top:26px}
.watch-n{
  font-family:var(--mono);font-weight:500;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
}
.watch-l{margin-top:14px;font-size:var(--t-sm);color:var(--muted);max-width:44ch}
.watch-l b{color:var(--paper);font-weight:500}
.tied{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}
.tied b{color:var(--signal);font-weight:500}

/* the field */
.field{border-top:1px solid var(--rule)}
.club-row{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule);
  transition:background .25s ease;
}
.club-row:hover{background:var(--surface)}
.club-row .cn{font-size:var(--t-body);font-weight:500;letter-spacing:var(--tr-tight)}
.club-row .meta{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)}
.club-row.new .cn::after{
  content:'new';margin-left:11px;padding:2px 7px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--signal);
  border:1px solid var(--signal-dim);
}

/* archive strip */
.strip{border-top:1px solid var(--rule);display:grid;gap:0}
@media(min-width:700px){.strip{grid-template-columns:repeat(4,1fr)}}
.stat{padding:24px 0;border-bottom:1px solid var(--rule)}
@media(min-width:700px){
  .stat{padding:26px clamp(14px,2vw,26px);border-bottom:none;border-left:1px solid var(--rule)}
  .stat:first-child{border-left:none;padding-left:0}
}
.stat .n{font-family:var(--mono);font-size:var(--t-xl);line-height:var(--lh-flat);font-weight:500;letter-spacing:var(--tr-head)}
.stat .k{
  margin-top:9px;font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}

/* colophon */
footer{border-top:1px solid var(--rule);padding:34px 0 60px}
.colo{
  display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .dot{animation:none}
}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* --- generator additions --- */
.navrow{display:flex;gap:26px;padding:14px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:var(--tr-label);
  text-transform:uppercase}
.navrow a{color:var(--muted);text-decoration:none;transition:color .2s}
.navrow a:hover{color:var(--paper)}
a.champ{color:var(--paper);text-decoration:none;transition:color .2s}
a.champ:hover{color:var(--signal)}
a.club-row{text-decoration:none;color:inherit;
  grid-template-columns:auto 1fr auto;align-items:center}
.crest{width:26px;height:26px;object-fit:contain;flex:none}

/* ---------- manager page ---------- */
.mgr-head{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center;
  padding:var(--sec) 0 0}
@media(min-width:820px){.mgr-head{grid-template-columns:1fr auto}}
.mgr-head h1{font-stretch:125%;font-weight:600;text-transform:uppercase;
  font-size:var(--t-xl);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.teamrule{height:3px;width:82px;margin:20px 0 14px;
  background:linear-gradient(90deg,var(--team1) 0 50%,var(--team2) 50% 100%)}
.mgr-meta{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.crest-lg{width:clamp(150px,21vw,248px);height:auto;justify-self:start}
@media(min-width:820px){.crest-lg{justify-self:end}}

.statline{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(min-width:700px){.statline{grid-template-columns:repeat(7,1fr)}}
.st{padding:24px 0;overflow:visible;display:grid;
  grid-template-rows:auto 2.9em auto auto;align-content:start;row-gap:0}
@media(min-width:700px){.st{padding:26px clamp(10px,1.5vw,18px);
  border-left:1px solid var(--rule)}.st:first-child{border-left:none;padding-left:0}}
.stn{font-family:var(--mono);font-size:var(--t-lg);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-display);white-space:nowrap}
.stk{margin-top:11px;font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  line-height:var(--lh-head);letter-spacing:var(--tr-tight);text-transform:none;color:var(--paper);
  align-self:start}
.stsub{margin-top:2px;white-space:nowrap;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);opacity:.62}
.stc{margin-top:10px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  color:var(--team2);opacity:.85}
.ranknote{padding:12px 0 0;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}

.tables{padding-top:var(--sec)}
.tabhead{font-size:var(--t-lg);line-height:var(--lh-flat);letter-spacing:var(--tr-head);
  font-weight:600}
.tabnote{margin-top:9px;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.seasons,.h2h,.fnames{border-top:1px solid var(--rule);margin-top:22px}
.tabhead{margin-bottom:0}
.split{gap:clamp(44px,6vw,84px)}
.srow{display:grid;grid-template-columns:56px 1fr auto 52px;gap:14px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
.srow.hi{background:linear-gradient(90deg,rgba(255,255,255,.035),transparent)}
.syr,.srec{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)}
.srec{color:var(--paper)}
.sclub{font-size:var(--t-sm);font-weight:500;color:var(--paper);text-decoration:none;letter-spacing:var(--tr-tight)}
.sclub:hover{color:var(--signal)}
.spos{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);text-align:right}
.srow.hi .spos{color:var(--team2)}
.hrow{display:grid;grid-template-columns:48px 1fr auto 56px;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--rule);align-items:center;
  text-decoration:none;color:inherit;transition:background .2s}
.hrow:hover{background:var(--surface)}
.hico{width:46px;height:46px;object-fit:contain}
.hico.ph{display:block;border:1px solid var(--rule);border-radius:50%}
.hrow.hhead{border-bottom:1px solid var(--rule);padding:0 0 8px}
.hrow.hhead:hover{background:none}
.hrow.hhead div{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.hrow.hhead .hopp{font-size:var(--t-micro);color:var(--muted)}
.hpct{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);opacity:.7}
.hopp{font-size:var(--t-sm);font-weight:500;letter-spacing:var(--tr-tight)}
.hrec{font-family:var(--mono);font-size:var(--t-xs);color:var(--paper);text-align:right}
.fname{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--rule);font-size:var(--t-sm)}
.fyr{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)}
.ast{color:var(--muted);text-transform:none;letter-spacing:var(--tr-body);font-size:var(--t-label)}
.picks{display:grid;grid-template-columns:1fr;gap:0;margin-top:26px;
  border-top:1px solid var(--rule)}
@media(min-width:760px){.picks{grid-template-columns:1fr 1fr}}
.pick{padding:22px 0;border-bottom:1px solid var(--rule)}
@media(min-width:760px){.pick+.pick{border-left:1px solid var(--rule);
  padding-left:clamp(18px,3vw,38px)}}
.pk{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--team2)}
.pick.bad .pk{color:var(--signal)}
.pv{margin-top:10px;font-size:var(--t-lg);font-weight:600;letter-spacing:var(--tr-tight)}
.pm{margin-top:8px;font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
/* identity band — helmet as ground, kit slots */
.identity{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--t1) 0%,#07131f 62%,var(--ink) 100%);
  border-top:1px solid var(--rule);isolation:isolate}
.ghost-helm{position:absolute;right:-9%;top:50%;transform:translateY(-50%);
  width:min(760px,86vw);opacity:.13;filter:saturate(.5) contrast(1.05);
  pointer-events:none;z-index:0;mix-blend-mode:screen}
.id-in{position:relative;z-index:1;padding:var(--sec) var(--gut)}
.id-plate{width:min(340px,62vw);height:auto;display:block}
.id-name{font-stretch:125%;font-weight:600;text-transform:uppercase;
  font-size:var(--t-xl);letter-spacing:var(--tr-head)}
.id-in{max-width:1520px;margin:0 auto}
.id-kits{margin-top:clamp(30px,4vw,52px);display:grid;gap:clamp(16px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:none}
@media(max-width:620px){.id-kits{grid-template-columns:1fr 1fr}}
.kit{margin:0;display:flex;flex-direction:column;align-items:center}
.kit>img,.kit .kitph{aspect-ratio:2/3;width:100%;display:flex;
  align-items:center;justify-content:center;object-fit:contain}
.kit.empty .kitph{border:1px solid rgba(237,234,228,.14);
  background:rgba(10,10,11,.28);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:rgba(237,234,228,.28)}
.kit figcaption{margin-top:12px;font-family:var(--mono);font-size:var(--t-micro);
  font-weight:500;letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:rgba(237,234,228,.5)}

/* ---------- info tooltips on stat boxes ---------- */
.stk{position:relative}
.info{appearance:none;background:none;padding:0;display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;margin-left:7px;border-radius:50%;
  border:1px solid var(--muted);color:var(--muted);
  font-family:var(--sans);font-size:var(--t-micro);font-style:italic;font-weight:600;
  letter-spacing:var(--tr-body);text-transform:none;cursor:help;vertical-align:middle;
  transition:border-color .2s,color .2s}
.info:hover,.info:focus{border-color:var(--signal);color:var(--signal);outline:none}
.tip{position:absolute;left:0;bottom:calc(100% + 10px);z-index:40;
  width:min(280px,74vw);padding:12px 14px;
  background:var(--surface);border:1px solid var(--rule);
  font-family:var(--sans);font-size:var(--t-label);line-height:var(--lh-snug);
  letter-spacing:var(--tr-body);text-transform:none;color:var(--paper);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.info:hover .tip,.info:focus .tip{opacity:1;visibility:visible;transform:none}

/* breathing room under the stat line */
.glance{padding:var(--sec) var(--gut) 0}
.ranknote{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---------- draft section ---------- */
.draft-sec{padding-top:var(--sec)}
.bighead{font-stretch:112%;font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--tr-display);font-weight:700;text-transform:uppercase}
.draft-hero{margin-top:26px;display:flex;gap:clamp(18px,3vw,30px);
  align-items:center;flex-wrap:wrap;padding-bottom:6px}
.dnum{font-family:var(--mono);font-weight:500;
  font-size:var(--t-xl);line-height:var(--lh-flat);letter-spacing:var(--tr-display);
  color:var(--team2)}
.dlab{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);line-height:var(--lh-loose);
  display:flex;flex-direction:column;justify-content:center}
.dlab em{font-style:normal;color:var(--team2)}

/* ---------- identity band: script + larger figures ---------- */
.id-script{width:min(420px,72vw);height:auto;display:block}

.kit>img,.kit .kitph{aspect-ratio:5/8}


/* ---------- season rows: regular season vs postseason, separated ---------- */
.srow{display:grid;grid-template-columns:46px minmax(0,1fr) 80px 34px 90px 14px;gap:10px;padding:11px 0;align-items:baseline}
/* Club names wrap rather than run. They were nowrap in a column that cannot
   hold "Predestined Polish Warbirds" at any width - at 1024 the name ran 119px
   straight through the record beside it. Two lines costs nothing here and
   truncation would hide the one thing the column exists to show. */
.sclub{white-space:normal;line-height:1.28;overflow-wrap:break-word}
.srow{align-items:center}
.srow.shead{align-items:end}
@media(max-width:640px){.srow{grid-template-columns:38px minmax(0,1fr) 58px 28px 72px;gap:7px}
  .sclub{font-size:var(--t-xs)}
  /* "In season" and "Champion" are wider than 72px of mono at this size */
  .sres{font-size:var(--t-micro);white-space:normal;line-height:1.3}}
.srow.shead{border-bottom:1px solid var(--rule);padding-bottom:8px}
.srow.shead div{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.srow.shead .sclub{color:var(--muted);font-size:var(--t-micro)}
.sseed{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);text-align:right}
/* Not nowrap: at phone width "IN SEASON" and "★ CHAMPION" are both wider
   than this column, and a finish that runs off the edge is worse than one
   that takes two lines. */
.sres{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);text-align:right;
  white-space:normal;line-height:1.3}
.srow.champ{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
.srow.champ .sres{color:var(--team2)}
.srow.runner .sres,.srow.third .sres{color:var(--paper);opacity:.8}
.srow.post .sres{color:var(--paper);opacity:.72}
.srow.missed .sres{color:var(--muted);opacity:.5}
/* The season in progress. It used to borrow the signal red, which on this
   site means a record or a result, and read as an alarm on a row that is
   simply not finished yet. It now speaks the same "In season" green as the
   phase pill in the masthead and the wire, with the same dot. */
.srow.live{background:linear-gradient(90deg,rgba(59,255,110,.055),transparent)}
.srow.live .syr,.srow.live .sres{color:var(--phase,#3BFF6E)}
.srow.live .sclub{color:var(--paper)}
.sres .sdot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:middle;
  box-shadow:0 0 0 0 currentColor;animation:sdotpulse 2.4s ease-out infinite}
@keyframes sdotpulse{
  0%{box-shadow:0 0 0 0 rgba(59,255,110,.45)}
  70%{box-shadow:0 0 0 6px rgba(59,255,110,0)}
  100%{box-shadow:0 0 0 0 rgba(59,255,110,0)}
}
@media(prefers-reduced-motion:reduce){.sres .sdot{animation:none}}
/* the seed is not knowable until the year ends, so it says so */
.sspend{opacity:.45;font-size:var(--t-micro)}
.trophy{color:var(--team2)}

.picknote{margin-top:18px;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);opacity:.7}

/* ---------- expandable head-to-head ---------- */
.h2h-item{border-bottom:1px solid var(--rule)}
.h2h-item .hrow{border-bottom:none;cursor:pointer;list-style:none;
  grid-template-columns:48px 1fr auto 56px 14px}
.h2h-item .hrow::-webkit-details-marker{display:none}
.h2h-item[open]>.hrow{background:transparent}
.h2h-item[open]{background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 140px)}
.hcar{width:8px;height:8px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);
  transition:transform .22s ease,border-color .22s ease;justify-self:end}
.h2h-item[open] .hcar{transform:rotate(-135deg) translateY(-2px);
  border-color:var(--team2)}
.h2h-item .hrow:hover .hcar{border-color:var(--paper)}
.h2h-detail{padding:6px 0 26px}
.pdgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:640px){.pdgrid{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(20px,2.6vw,34px)}}
.pd{padding:15px 0;border-top:1px solid var(--rule);min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;
  align-items:baseline}
.pdk{grid-column:1;font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted)}
.pdv{grid-column:2;grid-row:1;font-family:var(--mono);font-size:var(--t-md);
  font-weight:500;letter-spacing:var(--tr-head);color:var(--paper);white-space:nowrap}
.pdt{grid-column:1 / -1;margin-top:7px;font-size:var(--t-xs);line-height:var(--lh-snug);
  color:var(--paper);overflow-wrap:anywhere}
.pdt b{font-weight:600;color:var(--team2)}
.pdm{grid-column:1 / -1;margin-top:3px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.pdspan{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.pdspan a{color:var(--team2);text-decoration:none}
.pdspan a:hover{text-decoration:underline}
.hrow.hhead{grid-template-columns:48px 1fr auto 56px 14px}

/* ---------- season page ---------- */
.strow{display:grid;grid-template-columns:26px 48px 1fr 76px 68px 96px;gap:var(--s3);
  align-items:center;padding:11px 0;border-bottom:1px solid var(--rule);
  transition:background .2s}
@media(max-width:720px){.strow{grid-template-columns:24px 46px 1fr 62px 88px;gap:8px}
  .strow .spf{display:none}}
.strow:hover{background:var(--surface)}
.strow.shead{padding-bottom:8px}
.strow.shead div{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.strow .sseed{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)}
.sclubn{display:flex;flex-direction:column;gap:2px;min-width:0}
.sclubn a{color:var(--paper);text-decoration:none;font-size:var(--t-sm);font-weight:500;
  letter-spacing:var(--tr-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sclubn a:hover{color:var(--signal)}
.smgr{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.strow .spf{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);text-align:right}
.strow.champ{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
.strow.champ .sres{color:var(--team2)}
.strow.missed .sres{color:var(--muted);opacity:.5}
.seasonnav{display:flex;gap:var(--s5);padding:var(--sec) var(--gut) var(--sec);
  border-top:1px solid var(--rule);margin-top:0}
.seasonnav a{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);text-decoration:none}
.seasonnav a:hover{color:var(--signal)}

/* ---------- season recap ---------- */
.recap{padding:var(--sec) var(--gut) 0;max-width:1240px}
.recap p{max-width:64ch;font-size:var(--t-md);line-height:var(--lh-body);
  color:var(--paper)}
.honours{padding-top:var(--sec)}
.honours .pdgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- bracket ---------- */
.bracket{display:grid;gap:clamp(18px,3vw,34px);margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bround{border-top:1px solid var(--rule);padding-top:14px}
.brname{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.bgame{margin-bottom:14px}
.bteam{display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:baseline;
  padding:7px 0;font-size:var(--t-xs);color:var(--muted);border-bottom:1px solid var(--rule)}
.bteam.win{color:var(--paper);font-weight:500}
.bsd{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted);opacity:.7}
.bsc{font-family:var(--mono);font-size:var(--t-xs)}
.bteam.win .bsc{color:var(--team2)}

/* ---------- managers index ---------- */
.mgrid{display:grid;gap:clamp(10px,1.4vw,20px);margin-top:8px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mcard{display:block;padding:clamp(16px,1.8vw,24px) clamp(13px,1.5vw,20px);border:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
.mcard:hover{background:var(--surface);border-color:var(--muted)}
.mcard img{width:clamp(54px,6.6vw,86px);height:clamp(54px,6.6vw,86px);object-fit:contain;display:block;margin-bottom:16px}
.mcn{font-size:var(--t-body);font-weight:600;letter-spacing:var(--tr-tight)}
.mcm{margin-top:5px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.mcl{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.alumni{border-top:1px solid var(--rule);margin-top:20px}
.arow{display:grid;grid-template-columns:1fr 108px 84px 70px;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--rule);align-items:baseline}
@media(max-width:640px){.arow{grid-template-columns:1fr 84px 66px}
  .arow .at{display:none}}
.an{font-size:var(--t-sm);font-weight:500}
.ay,.ar{font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.at{color:var(--team2);font-size:var(--t-label);letter-spacing:var(--tr-label)}

/* ---------- The Front: rotating record watch ---------- */
.wcard{display:none}
.wcard.on{display:block;animation:fadein .5s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.watch{min-height:190px}
.watch-l b{color:var(--paper);font-weight:500}

/* ---------- The Front: spacing and countdown ---------- */
.mast{padding:var(--sec) 0 0}
.row.open{padding:clamp(34px,5vw,58px) 0 clamp(36px,5vw,62px)}
.open-body{align-items:center}
.count{line-height:var(--lh-flat)}
.count-unit{max-width:250px;line-height:var(--lh-body);display:flex;flex-direction:column;
  justify-content:center}
.count-unit b{margin-bottom:5px}
section{padding:var(--sec) 0}
.field .club-row{padding:15px 0}
.field .crest{width:42px;height:42px}

/* ---------- The Front: field grid ---------- */
.fgrid{display:grid;gap:clamp(10px,1.4vw,18px);margin-top:26px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.fgrid{grid-template-columns:repeat(4,1fr)}}
.fcard{display:block;text-align:center;padding:clamp(16px,1.8vw,26px) clamp(13px,1.5vw,22px) clamp(16px,1.8vw,24px);border:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .2s,border-color .2s;
  position:relative}
.fcard:hover{background:var(--surface);border-color:var(--muted)}
.fcard .crest{width:clamp(64px,7.6vw,99px);height:clamp(64px,7.6vw,99px);object-fit:contain;display:block;margin:0 auto clamp(13px,1.6vw,20px)}
.fcard .cn{font-size:var(--t-sm);font-weight:600;letter-spacing:var(--tr-tight);line-height:var(--lh-head)}
.fcard .meta{margin-top:6px;font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.fsub{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);color:var(--muted);
  white-space:nowrap}
.fcard.new::after{content:'new';position:absolute;top:14px;right:14px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--signal);border:1px solid var(--signal-dim);padding:2px 6px}
.tabnote b{color:var(--paper)}

/* ---------- record index: larger club icons ---------- */
#record-list .hico,.h2h .hico{width:46px;height:46px}
.hrow{grid-template-columns:50px 1fr auto 62px}
.h2h-item .hrow,.hrow.hhead{grid-template-columns:50px 1fr auto 62px 14px}

/* ---------- alumni: silver A, sortable head ---------- */
.arow{grid-template-columns:38px 1fr 104px 84px 62px 66px}
@media(max-width:760px){.arow{grid-template-columns:32px 1fr 84px 58px}
  .arow .ap,.arow .at{display:none}}
.aav{width:34px;height:34px;object-fit:contain;display:block}
.arow.ahead{padding-bottom:9px}
.arow.ahead button{appearance:none;background:none;border:0;padding:0;
  text-align:left;cursor:pointer;font-family:var(--mono);font-size:var(--t-micro);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  transition:color .2s}
.arow.ahead button:hover{color:var(--paper)}
.arow.ahead button.on{color:var(--team2)}
.arow.ahead .ar,.arow.ahead .ap,.arow.ahead .at{text-align:right}
.ap{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);text-align:right}
.ar{text-align:right}
.at{text-align:right;white-space:nowrap}

/* titles picked out in the club accent */
.fsep{margin:0 5px;color:var(--rule)}
.ftit{color:var(--team2);font-weight:500}
.ftit.zero{color:var(--muted);opacity:.65}
.mcl .ftit{color:var(--team2)}

/* ---------- broadcast ---------- */
.epsec{padding-top:var(--sec)}
.epgrid{display:grid;gap:clamp(12px,1.6vw,22px);margin-top:22px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.epgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.epgrid{grid-template-columns:repeat(4,1fr)}}
.ep{display:block;text-decoration:none;color:inherit}
.epthumb{position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--rule);background:var(--surface)}
.epthumb img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) contrast(1.04) brightness(.86);
  transition:filter .3s ease,transform .5s ease}
.ep:hover .epthumb img{filter:none;transform:scale(1.03)}
.epplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.epplay::before{content:'';width:0;height:0;
  border-left:16px solid rgba(237,234,228,.92);
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));transition:border-left-color .3s}
.ep:hover .epplay::before{border-left-color:var(--signal)}
.epn{margin-top:12px;font-size:var(--t-sm);font-weight:500;letter-spacing:var(--tr-tight)}
.epm{margin-top:4px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.epdur{position:absolute;right:7px;bottom:7px;padding:2px 6px;
  background:rgba(10,10,11,.86);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);color:var(--paper)}
.epn{line-height:var(--lh-snug)}

/* ---------- league mark ---------- */
.barmark{display:inline-flex;align-items:center;margin-right:10px;flex:none}
.barmark img{height:38px;width:auto;display:block;opacity:.92;
  transition:opacity .2s ease}
.barmark:hover img{opacity:1}
@media(max-width:560px){.barmark img{height:30px}}
.epfallback{object-fit:contain !important;padding:16%;
  background:var(--surface);filter:none !important}
.ep:hover .epfallback{transform:none !important}

/* alumni champions on the record index */
.hico.isalum{opacity:.9}

/* ================================================== the record book */
.bkcat{padding-top:var(--sec)}
.bktable{border-top:1px solid var(--rule);margin-top:22px}
.bkgrp{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);
  padding:26px 0 8px;border-bottom:1px solid var(--rule);
}
.bkgrp:first-child{padding-top:14px}
.bkrow{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 128px 226px;
  gap:clamp(10px,2vw,24px);align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .2s ease;
}
.bkrow:hover{background:var(--surface)}
.bkn{font-size:var(--t-sm);font-weight:500;letter-spacing:var(--tr-tight)}
.bkrow:hover .bkn{color:var(--paper)}
.bkh{font-size:var(--t-sm);color:var(--muted)}
.bkv{font-family:var(--mono);font-size:var(--t-xs);text-align:right;color:var(--paper)}
.bka{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);text-align:right}
.tiedmark{font-style:normal;color:var(--signal)}
@media(max-width:820px){
  .bkrow{grid-template-columns:minmax(0,1fr) 84px;gap:6px 14px;padding:14px 0}
  .bkh{grid-column:1;font-size:var(--t-xs)}
  .bkv{grid-row:1;grid-column:2}
  .bka{grid-column:2;text-align:right;font-size:var(--t-micro)}
}
.bkrule{padding-top:var(--sec)}

/* record detail */

.bkback{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.bkback:hover{color:var(--paper)}
.rbfig{margin-top:clamp(28px,4vw,46px);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:clamp(16px,3vw,34px);
  border-top:1px solid var(--rule);padding-top:clamp(22px,3vw,34px)}
.rbnum{font-family:var(--mono);font-weight:500;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.rbwho{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);line-height:var(--lh-body)}
.rbwho b{display:block;color:var(--paper);font-weight:500;font-size:var(--t-xs)}
.rbnote{margin-top:18px;padding-left:14px;border-left:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);line-height:var(--lh-loose);color:var(--muted);
  max-width:74ch}

/* leaderboard */
.lbtable{border-top:1px solid var(--rule);margin-top:20px}
.lbrow{display:grid;grid-template-columns:34px minmax(0,1.1fr) minmax(0,1.2fr) 118px;
  gap:clamp(10px,2vw,22px);align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule)}
.lbrow:hover{background:var(--surface)}
.lbr{font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.lbtop .lbr{color:var(--paper)}
.lbm{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper);min-width:0}
.lbm span{font-size:var(--t-sm);font-weight:500;letter-spacing:var(--tr-tight);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.lbm:hover span{color:var(--signal)}
.lbi{width:30px;height:30px;object-fit:contain;flex:none}
.lbi.isalum{opacity:.55}
.lbd{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbv{font-family:var(--mono);font-size:var(--t-sm);text-align:right}
.lbtop .lbv{font-size:var(--t-md)}
@media(max-width:760px){
  .lbrow{grid-template-columns:26px minmax(0,1fr) 96px;gap:5px 10px;padding:11px 0}
  .lbd{grid-column:2 / -1;font-size:var(--t-micro)}
  .lbv{grid-row:1;grid-column:3}
}

/* custody trail */
.cust{border-top:1px solid var(--rule);margin-top:20px}
.crow2{display:grid;
  grid-template-columns:minmax(0,1fr) 190px 96px 88px minmax(0,1.1fr);
  gap:clamp(8px,1.6vw,18px);align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.c2w{font-size:var(--t-sm);font-weight:500}
.c2s,.c2l,.c2e{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);color:var(--muted)}
.c2s,.c2l{white-space:nowrap}
.c2e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c2v{font-family:var(--mono);font-size:var(--t-xs);text-align:right;color:var(--paper)}
.c2l{text-align:right}
@media(max-width:860px){
  .crow2{grid-template-columns:minmax(0,1fr) 90px;gap:4px 12px;padding:13px 0}
  .c2s{grid-column:1;white-space:normal}.c2v{grid-row:1;grid-column:2}
  .c2l{grid-column:2;text-align:right}.c2e{grid-column:1 / -1}
}

/* milestones */
.mgridx{display:grid;gap:clamp(18px,2.4vw,32px);margin-top:22px;
  grid-template-columns:1fr}
@media(min-width:720px){.mgridx{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.mtier{border-top:1px solid var(--rule);padding-top:12px}
.mth{font-family:var(--mono);font-size:var(--t-md);letter-spacing:var(--tr-head);padding-bottom:10px}
.mth span{display:block;font-size:var(--t-micro);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.mrow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;
  align-items:center;padding:6px 0;border-top:1px solid var(--rule)}
.mrk{font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.mrn .lbm span{font-size:var(--t-xs)}
.mrn .lbi{width:24px;height:24px}
.mrd{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted);text-align:right}

/* .wrap sets padding:0 var(--gut) and outranks the bare `section` selector,
   so book sections carry their own vertical rhythm. */
.rbsec{padding-top:var(--sec)}


/* Five nav items no longer fit a 390px viewport in one line. */
.navrow{flex-wrap:wrap;row-gap:6px}
@media(max-width:560px){.navrow{gap:18px;row-gap:6px}}

/* ============================================ manager page, narrow viewports
   Three separate causes, all pre-existing.

   1. .statline went to seven columns at min-width:700px. Seven stat blocks
      need ~1100px. At 768 the columns were floored by their own min-content
      (.stn is nowrap) and pushed the document to 1101px.
   2. .tip is 280px, absolutely positioned and left-anchored. In any column
      right of centre it hangs off the page. visibility:hidden still counts
      toward scrollWidth, so it overflowed even when nobody hovered.
   3. .ghost-helm looks like it overflows but .identity clips it. Left alone. */

@media(min-width:700px) and (max-width:1099px){
  .statline{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st{border-left:1px solid var(--rule)}
  .st:nth-child(4n+1){border-left:none;padding-left:0}
}
@media(min-width:1100px){
  .statline{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* Tooltips were anchored to the inline .info button, so left:0 meant
   "wherever the label text happens to end" rather than the column edge.
   Anchor them to the stat column instead, then flip to the right edge once
   the column sits past centre. */
.st{position:relative}
/* 100vw includes the scrollbar, so a tooltip sized against it overhangs by
   the scrollbar's width on any page long enough to have one. */
.tip{width:min(280px,calc(100vw - 2 * var(--gut) - 20px));max-width:none}
@media(max-width:699px){
  .st:nth-child(2n) .tip{left:auto;right:0}
}
@media(min-width:700px) and (max-width:1099px){
  .st:nth-child(4n+3) .tip,
  .st:nth-child(4n+0) .tip{left:auto;right:0}
}
@media(min-width:1100px){
  .st:nth-child(n+5) .tip{left:auto;right:0}
}

/* ------------------------------------------------- very narrow (320-359px)
   iPhone SE 1 and similar. Two leftovers at this width:
   the season table's fixed columns total more than the 280px of content
   available, and a single long unbreakable title word ("Championships")
   overruns its line box even though the element itself is in bounds. */
@media(max-width:359px){
  /* buy back 12px of content width; 20px gutters are generous at this size */
  :root{--gut:14px}
  .srow{grid-template-columns:30px minmax(0,1fr) 46px 30px 58px;gap:4px}
  .syr,.srec,.sres{font-size:var(--t-label)}
  /* club names, seeds and results are nowrap by default; down here the
     header words alone ("Runner-up", "Seed") exceed their tracks */
  .sclub,.sres,.sseed,.srec{white-space:normal;overflow-wrap:anywhere}
  .mast h1{font-size:var(--t-xl)}
}

/* eras — what each platform can and cannot support */
.eragrid{display:grid;gap:clamp(20px,3vw,44px);margin-top:24px;
  grid-template-columns:1fr}
@media(min-width:760px){.eragrid{grid-template-columns:1fr 1fr}}
.era{border-top:1px solid var(--rule);padding-top:16px}
.eray{font-family:var(--mono);font-size:var(--t-lg);letter-spacing:var(--tr-head)}
.erap{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);margin-top:5px}
.erafig{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 18px;
  font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.erafig span{border-left:1px solid var(--rule);padding-left:10px}
.erafig span:first-child{border-left:none;padding-left:0}
.erak{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);margin-top:12px}
.erat{font-size:var(--t-xs);line-height:var(--lh-body);color:var(--paper);margin-top:4px;max-width:46ch}
.erafoot{margin-top:clamp(22px,3vw,34px)}

/* ================================================== power rankings
   The reference brief: crest blown up and bleeding off the frame in a
   team-coloured band, big numeral alongside. Everything else stays in the
   site's language — hairline rules, mono figures, no shadows. */
.rkbasis{margin-top:20px;padding-left:14px;border-left:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-label);line-height:var(--lh-loose);color:var(--muted);
  max-width:72ch}
.rktabs{display:flex;gap:22px;width:min(100% - 2 * var(--gut),1240px);margin-inline:auto}
.rktab{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);padding-bottom:8px}
.rktab.on{color:var(--paper);border-bottom:1px solid var(--signal)}

.rklist{border-top:1px solid var(--rule)}
.rkrow{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);
  align-items:stretch;border-bottom:1px solid var(--rule)}

/* The band carries the SOCIAL ICON - the mark with no wordmark on it. The
   crest was here first, oversized and cropped so its type fell away below the
   frame, but it still sliced words: "SEATTLE KRAKEN" came out "SEATTLE KRAKE".
   The icon needs no bespoke framing, so all twelve sit at one size, centred,
   and the column reads as a set. */
.rkband{position:relative;overflow:hidden;min-height:152px;display:block;
  background:linear-gradient(102deg,var(--p1) 0%,var(--p1) 58%,var(--p2) 340%)}
.rkicon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;height:64%;max-width:72%;object-fit:contain;
  filter:saturate(1.05) drop-shadow(0 6px 18px rgba(0,0,0,.4));
  transition:transform .35s ease}
.rkrow:hover .rkicon{transform:translate(-50%,-50%) scale(1.06)}
/* a mark supplied on an opaque square, rounded off to sit on the band */
.rkicon.round{border-radius:50%;overflow:hidden}
/* a shallow diagonal where the band meets the page, as in the reference */
@media(min-width:761px){
  .rkband{clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
}

.rkbody{display:grid;grid-template-columns:clamp(56px,6vw,96px) minmax(0,1fr);
  gap:clamp(12px,2vw,26px);align-items:center;
  padding:clamp(16px,2vw,24px) 0 clamp(16px,2vw,24px) clamp(16px,2.2vw,30px)}
.rknum{font-family:var(--sans);font-stretch:125%;font-weight:600;
  font-size:var(--t-xl);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  color:var(--paper);text-align:right;font-variant-numeric:tabular-nums}
.rkclub{font-size:var(--t-md);font-weight:600;letter-spacing:var(--tr-tight);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rkmgr{margin-top:4px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.rkfigs{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.rkfigs span{display:flex;flex-direction:column;gap:3px}
.rkfigs b{font-size:var(--t-sm);font-weight:500;letter-spacing:var(--tr-head);
  text-transform:none;color:var(--paper)}
.rkno{color:var(--muted);font-style:normal}
.rkmv{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;font-weight:500}
.rkmv.up{color:#4ADE80}
.rkmv.down{color:var(--signal)}
.rkmv.new{color:var(--signal);border:1px solid var(--signal-dim);padding:2px 6px}
.rkblurb{margin-top:12px;font-size:var(--t-sm);line-height:var(--lh-body);color:var(--muted);
  max-width:60ch}

@media(max-width:760px){
  .rkrow{grid-template-columns:1fr}
  .rkband{min-height:128px}
  .rkicon{height:70%;max-width:46%}
  .rkrow:hover .rkicon{transform:translate(-50%,-50%) scale(1.04)}
  .rkbody{padding:16px 0 22px;grid-template-columns:52px minmax(0,1fr);gap:14px}
  .rknum{font-size:var(--t-xl);text-align:left}
}

/* ===================================== hover, sizing and the archive gold
   Rollovers now speak in club colour rather than the signal red, which is
   reserved for live/now. The record book gets its own gold — it is the hall
   of fame, and it should not borrow anyone's palette. */
:root{--gold:#C9A227;--gold-lit:#E8C45A;--gold-glow:rgba(201,162,39,.13)}

/* the season ledger: the champion lights up in their own club colour */
a.champ:hover{color:var(--tc,var(--gold))}
.row:hover{background:color-mix(in srgb,var(--tc,#8A8A93) 9%,transparent)}

/* seasons index + final standings: the whole row washes in club colour */
.hrow:hover{background:color-mix(in srgb,var(--tc,#8A8A93) 10%,transparent)}
.strow:hover{background:color-mix(in srgb,var(--tc,#8A8A93) 10%,transparent)}

/* club marks on both pages, up ~28% */
.hico{width:48px;height:48px}
#record-list .hico,.h2h .hico{width:48px;height:48px}
@media(max-width:720px){.hico{width:46px;height:46px}}

/* the record book is the hall of fame — gold, not club colour */
.bkrow:hover{background:var(--gold-glow);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.22)}
.bkrow:hover .bkn{color:var(--gold-lit)}
.bkrow:hover .bkv{color:var(--gold-lit)}
.lbrow:hover{background:var(--gold-glow)}
a.lbm:hover span{color:var(--gold-lit)}
.bkback:hover{color:var(--gold-lit)}

/* the field: crests up another 25% on top of the previous bump */
.fcard .crest{width:clamp(80px,9.5vw,124px);height:clamp(80px,9.5vw,124px)}

/* breathing room before defending champion / record watch */
.glancegap{padding-top:var(--sec)}

/* the open row lost its numeral, so the count sits flush with the rows above */
.row.open .rn{display:none}
.row.open{grid-template-columns:1fr}

/* managers index: centred and enlarged, matching the field grid on The Front */
.mcard{text-align:center}
.mcard img{width:clamp(76px,9vw,118px);height:clamp(76px,9vw,118px);
  margin:0 auto clamp(13px,1.6vw,19px)}

/* ============================================ broadcast: latest + new season */
.featsec{padding-top:var(--sec)}
.feat{display:grid;gap:clamp(18px,3vw,40px);margin-top:20px;
  grid-template-columns:1fr;text-decoration:none;color:inherit;
  border-top:1px solid var(--rule);padding-top:22px}
@media(min-width:820px){.feat{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:center}}
.featthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.featthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.feat:hover .featthumb img{transform:scale(1.03)}
.feattitle{font-size:var(--t-xl);font-weight:600;letter-spacing:var(--tr-head);
  line-height:var(--lh-head);margin:0}
.featmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.featgo{margin-top:20px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--signal);
  border-top:1px solid var(--rule);padding-top:14px;display:inline-block}
.feat:hover .featgo{color:var(--paper)}
.epplay.big{width:74px;height:74px}

.epsoon{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,3vw,30px);margin-top:18px;padding:clamp(18px,3vw,30px) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid color-mix(in srgb,var(--ph,#FF2E2E) 45%,transparent)}
.epsoonn{font-family:var(--sans);font-stretch:125%;font-weight:600;
  text-transform:uppercase;
  font-size:var(--t-xl);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  color:var(--ph,var(--signal))}
.epsoonk{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);max-width:270px;line-height:var(--lh-body)}
.epsoonk b{display:block;color:var(--paper);font-weight:500}

/* ============================================ top bar carries the navigation */
:root{--neutral:#8A8A93}
.bar-in{gap:14px}

.barnav{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
.barnav a{color:var(--muted);text-decoration:none;transition:color .2s}
.barnav a:hover{color:var(--paper)}
@media(max-width:900px){
  .barnav{margin-left:0;width:100%;gap:16px;padding-top:8px;
    border-top:1px solid var(--rule)}
}

/* draft countdown clock, right of the figure */
/* sits in the middle of the draft row rather than pinned to the far edge,
   and reads in signal red so it belongs to the countdown beside it */
.clock{margin:0 auto;text-align:center}
.clockrow{display:flex;gap:clamp(12px,1.8vw,22px);justify-content:center}
.clockrow span{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted)}
.clockrow b{font-family:var(--mono);font-weight:500;
  font-size:var(--t-xl);line-height:var(--lh-flat);letter-spacing:var(--tr-display);
  color:var(--signal);text-shadow:0 0 18px rgba(255,46,46,.35);
  font-variant-numeric:tabular-nums}
/* ms is the fast digit - held narrower so the row does not jitter */
.clockrow b[data-ms]{font-size:var(--t-md);opacity:.72;
  min-width:3ch;display:inline-block}
.clockk{margin-top:10px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.clock{margin:14px 0 0;text-align:left}
  .clockrow{justify-content:flex-start}
  .clockrow span{align-items:flex-start}}

/* managers: bigger marks, and the figures stacked and centred */
.mcard img{width:clamp(112px,13.5vw,185px);height:clamp(112px,13.5vw,185px)}
.mcl{display:flex;flex-direction:column;align-items:center;gap:9px;
  line-height:var(--lh-snug)}
.mfig{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--mono);font-size:var(--t-sm);color:var(--paper)}
.mfig i{font-style:normal;font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted)}
.mfig.zero{color:var(--muted)}

/* ======================= ledger: club mark trades places with the name
   Hovering an active club lights the row in its colour and swaps the
   champion's name for the club badge. The name stays in the DOM at zero
   opacity - the link text is unchanged for screen readers and the row never
   reflows, because the badge is absolutely positioned over the slot. */
a.champ{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:42px}
.champname{transition:opacity .22s ease}
.champicon{position:absolute;left:0;top:50%;transform:translateY(-50%) scale(.94);
  height:42px;width:auto;opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.row:hover .champname{opacity:0}
.row:hover .champicon{opacity:1;transform:translateY(-50%) scale(1)}
/* alumni keep their name; they have no club mark to trade */
.row.isalum:hover .champname{opacity:1}
.alummark{height:19px;width:19px;object-fit:contain;opacity:.45;flex:none;
  margin-left:2px}
.row.isalum:hover .alummark{opacity:.8}
@media(prefers-reduced-motion:reduce){
  .champname,.champicon{transition:none}
}



/* ===================================== all-time badges: struck metal
   Sits to the right of the figure it describes. Three tiers, and the metal
   carries the ranking - gold for the league record, silver for the rest of
   the top ten, bronze to fiftieth. Each is a metallic gradient with a fine
   brushed grain over it; the gold gets a bevel and a glow, the silver a
   bevel only, the bronze neither. Descending order of interest, by design. */
.badge{
  grid-column:3;grid-row:1;align-self:center;
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 6px;border-radius:2px;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  cursor:default;
}
/* the brushed grain, shared */
.badge::before{
  content:'';position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(96deg,
    rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.06) 1px 2px, transparent 2px 4px);
}
.badge.bronze::before{opacity:.5}
.badge{position:relative;isolation:isolate}

.badge.gold{
  color:#2A1E05;
  background:linear-gradient(152deg,#FBEBA8 0%,#E3BC4E 26%,#B8891C 52%,
    #8A6410 68%,#E9CB6B 88%,#FFF3C4 100%);
  box-shadow:0 0 0 1px rgba(255,238,170,.55) inset,
             0 1px 0 rgba(255,255,255,.5) inset,
             0 0 14px rgba(201,162,39,.34);
}
/* silver sits a full step below gold: mid-grey metal rather than near-white,
   so it recedes on a dark page instead of competing with the record */
.badge.silver{
  color:#161A1F;
  background:linear-gradient(152deg,#C6CDD5 0%,#98A2AD 34%,#6E7883 58%,
    #A9B2BC 86%,#CFD6DD 100%);
  box-shadow:0 0 0 1px rgba(190,199,209,.22) inset;
  opacity:.88;
}
/* bronze is the quiet tier - dark metal, flat, no bevel, no glow */
.badge.bronze{
  color:#F0DCC6;
  background:linear-gradient(152deg,#8A5C33 0%,#6B4526 36%,#4E3119 60%,
    #7A5130 88%,#94663B 100%);
  box-shadow:0 0 0 1px rgba(138,92,51,.3) inset;
  opacity:.72;
}
@media(prefers-reduced-motion:no-preference){
  .badge.gold{transition:box-shadow .25s ease}
  .pd:hover .badge.gold{box-shadow:0 0 0 1px rgba(255,238,170,.7) inset,
    0 1px 0 rgba(255,255,255,.6) inset, 0 0 20px rgba(201,162,39,.5)}
}
@media(max-width:520px){.badge{font-size:var(--t-micro);padding:2px 6px;letter-spacing:var(--tr-label)}}

/* A badge takes width from the label beside it, which pushed the three-word
   labels ("Fewest points scored") onto a second line in the narrow h2h
   cards. Tighten the tracking only where a badge is present. Browsers
   without :has() simply keep the old wrap - no worse than before. */
.pd:has(.badge) .pdk{letter-spacing:var(--tr-label)}

/* ============================== stat card: detail | medal | figure
   Three zones. Supporting detail on the left, the medal standing full size
   between them, the number on the right with its all-time standing set
   directly beneath it. The medal is the ornament; the caption is the fact,
   so the badge never has to be decoded. */
.card3{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(12px,1.6vw,20px);align-items:center;
  padding:15px 0;border-top:1px solid var(--rule);min-width:0;
}
.card3.hasmedal{grid-template-columns:minmax(0,1fr) auto auto}
.c3l{min-width:0}
.c3k{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.c3t{margin-top:7px;font-size:var(--t-xs);line-height:var(--lh-snug);color:var(--paper);
  overflow-wrap:anywhere}
.c3t b{font-weight:600;color:var(--team2)}
.c3m{margin-top:3px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
/* fixed so the medals line up down a column - left to itself the right zone
   sizes to its caption, and "League record · highest ever" is a good deal
   wider than "5th widest all-time", which left the medals ragged */
.c3r{text-align:right;width:clamp(112px,12vw,158px);flex:none}
.c3v{font-family:var(--mono);font-size:var(--t-md);font-weight:500;letter-spacing:var(--tr-head);
  color:var(--paper);white-space:nowrap}
.pdcap{margin-top:6px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);line-height:var(--lh-snug);
  overflow-wrap:anywhere}
.pdcap.gold{color:var(--gold-lit)}

/* the medal, struck rather than printed */
.medal{
  position:relative;isolation:isolate;flex:none;
  width:clamp(42px,4.4vw,54px);height:clamp(42px,4.4vw,54px);
  border-radius:50%;display:grid;place-items:center;cursor:default;
}
.medal::before{            /* brushed grain */
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-linear-gradient(96deg,
    rgba(255,255,255,.11) 0 1px, rgba(0,0,0,.07) 1px 2px, transparent 2px 4px);
}
.medal::after{             /* struck rim */
  content:'';position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(0,0,0,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset;
}
.medalface{
  position:relative;z-index:2;font-family:var(--mono);font-weight:500;
  font-size:var(--t-xs);letter-spacing:var(--tr-head);
}
.medal.gold{
  background:linear-gradient(152deg,#FBEBA8 0%,#E3BC4E 26%,#B8891C 52%,
    #8A6410 68%,#E9CB6B 88%,#FFF3C4 100%);
  box-shadow:0 0 0 1px rgba(255,238,170,.5) inset,0 0 18px rgba(201,162,39,.38);
}
.medal.gold .medalface{color:#2A1E05;font-size:var(--t-md)}
.medal.silver{
  background:linear-gradient(152deg,#C6CDD5 0%,#98A2AD 34%,#6E7883 58%,
    #A9B2BC 86%,#CFD6DD 100%);
  box-shadow:0 0 0 1px rgba(190,199,209,.24) inset;opacity:.9;
}
.medal.silver .medalface{color:#161A1F}
.medal.bronze{
  background:linear-gradient(152deg,#8A5C33 0%,#6B4526 36%,#4E3119 60%,
    #7A5130 88%,#94663B 100%);
  box-shadow:0 0 0 1px rgba(138,92,51,.32) inset;opacity:.76;
}
.medal.bronze .medalface{color:#F0DCC6}
.medal.bronze::before{opacity:.5}
@media(prefers-reduced-motion:no-preference){
  .medal.gold{transition:box-shadow .25s ease}
  .card3:hover .medal.gold{box-shadow:0 0 0 1px rgba(255,238,170,.7) inset,
    0 0 26px rgba(201,162,39,.55)}
}
@media(max-width:520px){
  .card3,.card3.hasmedal{column-gap:10px}
  .c3v{font-size:var(--t-body)}
}

/* The head-to-head panel packs two cards into a ~500px column, so its cards
   are roughly 240px wide - far tighter than the season page's. Fixed zone
   widths that suit one blow out the other, so the medal and the figure zone
   step down here rather than everywhere. */
/* One column here. Two cards abreast leaves ~240px each, and once a medal
   takes its share the left text shreds into four-line fragments. The panel
   is a collapsible detail view, so height is cheap and legibility is not. */
.h2h-detail .pdgrid{grid-template-columns:minmax(0,1fr)}
.h2h-detail .card3{column-gap:14px}
.h2h-detail .c3r{width:clamp(104px,10vw,140px)}
.h2h-detail .medal{width:44px;height:44px}
.h2h-detail .medalface{font-size:var(--t-label)}
.h2h-detail .medal.gold .medalface{font-size:var(--t-sm)}
.h2h-detail .medal::after{inset:3px}
.h2h-detail .c3v{font-size:var(--t-body)}
.h2h-detail .pdcap{font-size:var(--t-micro);letter-spacing:var(--tr-label)}

/* ==================================================== three interactions
   All three are CSS only, all three degrade to nothing, and none of them
   moves anything the eye is trying to read. */

/* 1 — GROUP LABELS PIN WHILE THEIR GROUP SCROLLS.
   The record book runs 92 rows across five categories. Halfway down a long
   group you have lost the header, so the row you are reading has no context.
   position:sticky costs one line and no animation. */
.bkgrp{position:sticky;top:var(--barh,44px);z-index:5;
  background:linear-gradient(var(--ink) 78%,rgba(10,10,11,0));
  backdrop-filter:blur(6px)}

/* 2 — HOVERING A ROW RECEDES ITS NEIGHBOURS.
   On a dense table the eye has to hold its own line. Dropping the siblings
   to 45% for the duration does that work instead. It reads as focus, not
   decoration, and it only exists while the pointer is down the list. */
@media(hover:hover){
  .lbtable:hover .lbrow:not(:hover),
  .ledger:hover .row:not(:hover):not(.open),
  .rklist:hover .rkrow:not(:hover){
    opacity:.45;transition:opacity .28s ease}
  .lbtable .lbrow,.ledger .row,.rklist .rkrow{transition:opacity .28s ease}
}

/* 3 — SECTION HEADS RISE AS THEY ENTER.
   Scroll-driven, so it is tied to position rather than a timer: nothing
   plays on load, nothing plays twice, and scrolling back up rewinds it.
   Guarded twice - browsers without scroll timelines see the finished state,
   and anyone with reduced motion switched on sees it too. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mast h1,.bighead,.tabhead{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 26%;
    }
    @keyframes rise{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }
  }
}

/* ============================================ vertical rhythm, one rule
   Rhythm was coming from `section{padding:var(--sec) 0}`, which meant a block
   written as <div class="wrap"> got none — hence sections butting at 0px
   while others stacked padding-bottom against padding-top and opened to 165.
   Spacing that depends on which tag someone reached for is not a system.

   So: every top-level block owns the space ABOVE it and nothing below. One
   gap, one value, no stacking, regardless of tag. */
/* NOTE the .wrap in each selector. `.wrap` sets padding:0 and, being a class,
   outranks a bare `body > section` — so without it any block whose only class
   is "wrap" silently lost its rhythm. */
body > section.wrap,
body > section,
body > div.wrap,
body > header.mast{
  padding-top:var(--sec);
  padding-bottom:0;
}
body > footer{margin-top:var(--sec);padding-bottom:var(--sec-tight)}
/* the first block after the bar sets the page, and wants a touch more air */
body > .bar + *{padding-top:var(--sec)}
/* blocks that carry their own frame keep their internal padding */
.identity{margin-top:var(--sec);padding-top:0}
.id-in{padding-top:var(--sec);padding-bottom:var(--sec)}

/* links that used to be labels: the defending champion goes to that season,
   the record watch and the archive to the book */
a.defend{display:block;text-decoration:none;color:inherit}
a.defend .name{transition:color .2s ease}
a.defend:hover .name{color:var(--gold-lit)}
.eyelink{display:inline-block;text-decoration:none;transition:color .2s ease}
.eyelink:hover{color:var(--gold-lit)}
a.plainlink{color:inherit;text-decoration:none;transition:color .2s ease}
a.plainlink:hover{color:var(--gold-lit)}
/* NOTE: no display here. The rotator hides every card and shows one at a
   time via .on — an unqualified display on a.wcard outranks that and puts
   the whole list on the page at once. */
a.wcard{text-decoration:none;color:inherit}
a.wcard.on{display:block}

/* ============================ season rows open to their own schedule
   Same disclosure pattern as head-to-head, so the page holds one idea of
   what an expanding row is. */
.sitem{border-bottom:1px solid var(--rule)}
.sitem > summary{list-style:none;cursor:pointer;border-bottom:0}
.sitem > summary::-webkit-details-marker{display:none}
.sitem > summary::after{
  content:'';width:6px;height:6px;justify-self:end;align-self:center;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.sitem[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.sitem > summary:hover{background:color-mix(in srgb,var(--tc,#8A8A93) 8%,transparent)}
.sdetail{padding:var(--s4) 0 var(--s6)}
.fxsum{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--s3)}
.fxlist{border-top:1px solid var(--rule)}
.fx{display:grid;grid-template-columns:80px minmax(0,1fr) auto 26px;
  gap:var(--s4);align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--rule)}
.fxw{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.fxo{font-size:var(--t-sm);color:var(--paper);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fxs{font-family:var(--mono);font-size:var(--t-xs);color:var(--paper);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fxs span{color:var(--muted);padding:0 3px}
.fxr{font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  text-align:right}
.fx.w .fxr{color:#3BFF6E}
.fx.l .fxr{color:var(--signal)}
.fx.t .fxr{color:var(--muted)}
.fxgo{display:inline-block;margin-top:var(--s4);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);text-decoration:none}
.fxgo:hover{color:var(--gold-lit)}
@media(max-width:620px){
  .fx{grid-template-columns:62px minmax(0,1fr) auto;gap:var(--s3)}
  .fxr{display:none}
}

/* ================================================== the wire (news feed)
   Kind on the left in mono, the item in the middle, when on the right. The
   left rule takes the colour of the kind, so the feed can be scanned by
   category without a legend. */
.newsfeed{}
.nhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.nlive{display:inline-flex;align-items:center;gap:7px;color:var(--ph,var(--muted));
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase}
.nlist{border-top:1px solid var(--rule);margin-top:var(--s5)}
.nrow{display:grid;grid-template-columns:96px 84px minmax(0,1fr) auto;
  gap:var(--s4) var(--s5);align-items:center;
  padding:var(--s5) var(--s4) var(--s5) var(--s4);
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  border-left:2px solid transparent;transition:border-color .2s ease,background .2s ease}
.nrow:hover{background:var(--surface);border-left-color:var(--nk,var(--muted))}
.nkind{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--nk,var(--muted))}
.ntitle{font-size:var(--t-md);font-weight:500;letter-spacing:var(--tr-tight);
  color:var(--paper)}
.nrow:hover .ntitle{color:var(--nk,var(--paper))}
.ntext{margin-top:4px;font-size:var(--t-sm);color:var(--muted);line-height:var(--lh-snug)}
.nwhen{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.k-rankings{--nk:#B06BFF}
.k-broadcast{--nk:#1FA3BF}
.k-record{--nk:var(--gold-lit)}
.k-season{--nk:#3BFF6E}
.k-desk{--nk:var(--muted)}
@media(max-width:720px){
  .nrow{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s4);
    padding-left:var(--s3);align-items:start}
  .nkind{grid-column:1}
  .ncrests{grid-column:1 / -1;order:3}
  .ncrests.empty{display:none}
  .nbody{grid-column:1 / -1}
  .nwhen{grid-row:1;grid-column:2}
}

/* ==================================== the medal becomes a shield
   An NFL-style shield rather than a disc: flat shoulders, straight sides,
   a point at the bottom. Drawn with clip-path so it stays one element and
   costs no image.

   And the metal now actually catches light. A struck medal reads as metal
   because of a highlight travelling across a curved surface, not because
   it is yellow — so each face carries a sheen band angled across it, a
   bright shoulder at the top and a dark foot, over the base gradient. */
.medal{
  border-radius:0;
  clip-path:polygon(50% 0%,100% 13%,100% 58%,50% 100%,0% 58%,0% 13%);
  width:clamp(40px,4.3vw,52px);height:clamp(46px,5vw,60px);
}
.medal::before,.medal::after{border-radius:0}
.medal::before{           /* brushed grain plus the travelling sheen */
  background:
    linear-gradient(118deg,transparent 26%,rgba(255,255,255,.42) 41%,
      rgba(255,255,255,.06) 49%,transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.30),transparent 34%),
    linear-gradient(0deg,rgba(0,0,0,.34),transparent 30%),
    repeating-linear-gradient(96deg,
      rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.06) 1px 2px, transparent 2px 4px);
}
.medal::after{            /* struck inner edge, following the shield */
  inset:3px;border:0;
  clip-path:polygon(50% 0%,100% 13%,100% 58%,50% 100%,0% 58%,0% 13%);
  box-shadow:none;
  background:linear-gradient(160deg,rgba(255,255,255,.20),transparent 34%,
    rgba(0,0,0,.24));
  mix-blend-mode:overlay;
}
/* A shield's area centroid sits at about 44% of its height, not 50% - the
   lower two-fifths taper to a point and carry almost no mass. Anchoring the
   numeral there is what makes it look centred. Done with a percentage TOP
   rather than a translate, because a translate percentage resolves against
   the text's own height and so drifts as the type scales. */
.medalface{
  position:absolute;left:0;right:0;top:43%;
  transform:translateY(-50%);
  letter-spacing:0;                   /* trailing track shifts a centred word left */
  line-height:1;text-align:center;
  font-variant-numeric:tabular-nums;
}
.medal.gold{
  background:linear-gradient(152deg,#FFF6D0 0%,#F0CE63 20%,#C89A24 44%,
    #7E5A0C 60%,#D9B242 78%,#FFF9DC 100%);
  box-shadow:0 0 22px rgba(201,162,39,.42);
}
.medal.silver{
  background:linear-gradient(152deg,#EDF1F5 0%,#B4BEC9 26%,#7B8792 50%,
    #5A646E 62%,#B9C3CD 82%,#F2F6FA 100%);
  box-shadow:none;opacity:.94;
}
.medal.bronze{
  background:linear-gradient(152deg,#C08B58 0%,#96652F 28%,#6A431F 52%,
    #4A2E14 64%,#A5743F 84%,#CE9A66 100%);
  box-shadow:none;opacity:.86;
}
@media(prefers-reduced-motion:no-preference){
  .medal{transition:filter .3s ease,box-shadow .3s ease}
  .card3:hover .medal{filter:brightness(1.14) contrast(1.05)}
  .card3:hover .medal.gold{box-shadow:0 0 30px rgba(201,162,39,.62)}
}
.h2h-detail .medal{width:38px;height:44px}

/* ==================================================== the draft order
   Live only while it is news. Ranked by draw time, so the times are the
   evidence and sit in mono at the right. */
.dogrid{display:grid;gap:var(--s2);margin-top:var(--s5);
  grid-template-columns:1fr}
@media(min-width:640px){.dogrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.dogrid{grid-template-columns:1fr 1fr 1fr}}
.dorow{display:grid;grid-template-columns:44px 30px minmax(0,1fr) auto;
  gap:var(--s3);align-items:center;padding:var(--s3) var(--s3) var(--s3) 0;
  border-top:1px solid var(--rule);text-decoration:none;color:inherit;
  border-left:2px solid transparent;transition:border-color .2s,background .2s}
.dorow:hover{background:color-mix(in srgb,var(--tc,#8A8A93) 10%,transparent);
  border-left-color:var(--tc,var(--muted))}
.dorow.top{border-top-color:var(--gold)}
.dorow.top .dopick{color:var(--gold-lit)}
.dopick{font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:var(--tr-label);color:var(--muted);
  font-variant-numeric:tabular-nums}
.doi{width:30px;height:30px;object-fit:contain}
.doclub{font-size:var(--t-sm);font-weight:500;color:var(--paper);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doclub span{display:block;font-family:var(--mono);font-size:var(--t-micro);
  font-weight:400;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--muted)}
.dotime{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dotime i{font-style:normal;opacity:.6;padding-left:1px}
.dowatch{display:inline-block;margin-top:var(--s5);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--signal);text-decoration:none}
.dowatch:hover{color:var(--paper)}
.k-draft{--nk:#F5A623}

/* the wire shows the clubs a story is about rather than naming them.
   Crests overlap slightly, newest first, and fan apart on hover — the row
   reads as a group before a word of it is read. */
.ncrests{display:flex;align-items:center;justify-content:center;min-height:74px}
.ncr{width:74px;height:74px;object-fit:contain;flex:none;
  transition:transform .25s ease;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.nrow:hover .ncr{transform:scale(1.07)}
.ncr.mark{opacity:.72}
.nrow:hover .ncr.mark{opacity:1}

/* the back-to-back mark is a luxury the ledger cannot afford at 320px, so
   below that it keeps the star and drops the words */
@media(max-width:560px){
  .row.repeat .champname::after{content:'\2605';padding:2px 5px;margin-left:8px}
}
/* the manager line under a draft club needs the same clamp as the club */
.doclub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================ the team record book
   What a club owns, shown rather than listed. A shelf of silverware, the
   shape of its scoring across eighteen years, and where it stands on the
   marks that matter. The club's own colour is the accent throughout. */
.teamrec .nhead{align-items:baseline}
.tmtally{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted)}
.tmtally b{color:var(--accent);font-weight:500}
.tmhead{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule);
  margin-bottom:var(--s5)}

/* the shelf */
.tmshelf{display:grid;gap:var(--s3);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.tmshelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.tmshelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tmcard{display:flex;align-items:center;gap:var(--s4);min-width:0;
  padding:var(--s4);border:1px solid var(--rule);border-radius:2px;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,background .2s ease}
.tmcard:hover{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tmcard .medal{width:44px;height:50px;flex:none}
.tmcard .medalface{font-size:12px}
.tmcard .medal.gold .medalface{font-size:14px}
.tmbody{min-width:0}
.tmname{font-size:var(--t-sm);font-weight:500;color:var(--paper);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmval{font-family:var(--mono);font-size:var(--t-md);color:var(--accent);
  font-variant-numeric:tabular-nums;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmhold{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the arc */
.tmarc{margin-top:var(--sec-tight)}
.tmarc svg{width:100%;height:auto;overflow:visible}
.tmarea{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.tmline{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.tmdot{fill:var(--accent);opacity:.75}
.tmpk{fill:var(--gold-lit);stroke:var(--ink);stroke-width:1.5}
.tmpar{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4}
.tmparl,.tmtick{fill:var(--muted);font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase}
.tmparl{paint-order:stroke;stroke:var(--ink);stroke-width:3px;stroke-linejoin:round}
.tmtick{text-anchor:middle}
.tmcap{margin-top:var(--s4);font-size:var(--t-sm);color:var(--muted);
  line-height:var(--lh-snug);max-width:64ch}
.tmcap b{color:var(--paper);font-weight:500}

/* against the field */
.tmbars{margin-top:var(--sec-tight)}
.tmbar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) 92px 44px;
  gap:var(--s4);align-items:center;padding:var(--s3) 0;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.tmbar:hover .tmbn{color:var(--accent)}
.tmbn{font-size:var(--t-sm);color:var(--paper);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;transition:color .2s ease}
.tmtrack{height:6px;background:var(--surface);border-radius:1px;overflow:hidden}
.tmtrack span{display:block;height:100%;background:var(--accent);opacity:.8;
  transition:opacity .2s ease}
.tmbar:hover .tmtrack span{opacity:1}
.tmbv{font-family:var(--mono);font-size:var(--t-xs);text-align:right;
  color:var(--paper);font-variant-numeric:tabular-nums}
.tmbr{font-family:var(--mono);font-size:var(--t-micro);text-align:right;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.tmbr.first{color:var(--gold-lit)}
@media(max-width:640px){
  .tmbar{grid-template-columns:minmax(0,1fr) 72px 38px;gap:var(--s2) var(--s3)}
  .tmtrack{grid-column:1 / -1;order:3}
}

/* ======================================================= the trophy cup */
.champart{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.cup{height:clamp(120px,17vw,230px);width:auto;flex:none;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.65))
         drop-shadow(0 0 26px rgba(201,162,39,.16))}
.defend .cup.sm{height:clamp(64px,7vw,96px);display:block;
  margin-bottom:var(--s3)}
@media(max-width:700px){.champart{gap:var(--s4)}}

/* =================================================== the trophy room band
   The one moment on the site that is atmosphere rather than evidence. The
   photograph is full-bleed behind a scrim so the type stays readable no
   matter how the image is cropped by the viewport. */
/* Stacked with positive indices only. isolation:isolate plus a negative
   z-index put the photograph behind the section's own stacking context,
   where the page background covered it entirely. */
.trophyroom{position:relative;overflow:hidden;
  margin-top:var(--sec);padding-top:0;min-height:clamp(380px,46vw,560px);
  display:flex;align-items:center}
.troombg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 50%;z-index:0}
.trophyroom::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,var(--ink) 2%,rgba(10,10,11,.92) 30%,
    rgba(10,10,11,.42) 58%,rgba(10,10,11,.08) 100%)}
.troomin{position:relative;z-index:2;padding:var(--sec) 0}
.troomin .bighead{font-size:var(--t-xl);max-width:14ch}
.troomin .lede{max-width:42ch}
.troomin .lede b{color:var(--gold-lit);font-weight:500}
.troll{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.trm img{width:44px;height:44px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));opacity:.82;
  transition:opacity .2s ease,transform .2s ease}
.trm:hover img{opacity:1;transform:translateY(-3px)}
.troomgo{display:inline-block;margin-top:var(--s6);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--gold-lit);text-decoration:none}
.troomgo:hover{color:var(--paper)}
@media(max-width:760px){
  .troombg{object-position:64% 50%}
  .trophyroom::after{background:linear-gradient(180deg,rgba(10,10,11,.62) 0%,
    rgba(10,10,11,.9) 55%,var(--ink) 100%)}
}

/* ============================================ a club's own trophy room
   One cup per title. Three titles is three trophies on a shelf rather than
   the numeral 3 — silverware accumulates as objects, and the row makes that
   legible at a glance. Each case is lit from below in the club's colour and
   links to the season it was won. */
.cupshelf{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6)}
.cupcase{text-decoration:none;color:inherit;text-align:center;flex:none}
.cupbox{position:relative;display:grid;place-items:end center;
  width:clamp(112px,13vw,168px);height:clamp(160px,18vw,228px);
  padding-bottom:var(--s4);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 108%,
    color-mix(in srgb,var(--accent) 26%,transparent) 0%, transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%);
  transition:border-color .25s ease,transform .25s ease}
/* A percentage height on a grid item has no definite container to resolve
   against, so the cup rendered at its intrinsic 1071x1883 and was clipped by
   the case. Constrain both axes explicitly instead. */
.cupbox img{max-height:82%;max-width:72%;height:auto;width:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.7))
         drop-shadow(0 0 18px rgba(201,162,39,.22));
  transition:transform .25s ease}
.cupcase:hover .cupbox{border-color:var(--accent);transform:translateY(-3px)}
.cupcase:hover .cupbox img{transform:scale(1.04)}
.cupyr{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-md);
  color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cupcase:hover .cupyr{color:var(--accent)}
.cuprn{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  margin-top:2px}
@media(max-width:520px){.cupshelf{gap:var(--s4)}}

/* ================================================= the ballot call-out
   The one thing on the site that asks the reader to act rather than read,
   so it gets a full-width band and the live dot. Retires itself once the
   season opens, like the draft order. */
.ballotcall{display:block;text-decoration:none;color:inherit;
  margin-top:var(--sec);padding-top:0;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--rule);
  background:linear-gradient(103deg,
    color-mix(in srgb,var(--gold) 13%,transparent) 0%,
    color-mix(in srgb,var(--gold) 4%,transparent) 42%, transparent 78%);
  transition:background .3s ease}
.ballotcall:hover{background:linear-gradient(103deg,
    color-mix(in srgb,var(--gold) 20%,transparent) 0%,
    color-mix(in srgb,var(--gold) 7%,transparent) 46%, transparent 82%)}
.bcin{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s5);
  padding-top:var(--sec-tight);padding-bottom:var(--sec-tight)}
.bcleft{min-width:0;max-width:62ch}
.bclive{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--gold-lit)}
.bclive .dot{background:var(--gold-lit);box-shadow:0 0 10px var(--gold-lit)}
.bchead{font-family:var(--sans);font-stretch:125%;font-weight:600;
  text-transform:uppercase;font-size:var(--t-xl);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);margin-top:var(--s3)}
.bcsub{margin-top:var(--s3);font-size:var(--t-sm);line-height:var(--lh-body);
  color:var(--muted)}
.bcgo{flex:none;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--gold-lit);border:1px solid var(--gold);border-radius:2px;
  padding:var(--s3) var(--s5);white-space:nowrap;
  transition:background .25s ease,color .25s ease}
.bcgo span{display:inline-block;transition:transform .25s ease;padding-left:4px}
.ballotcall:hover .bcgo{background:var(--gold);color:#2A1E05}
.ballotcall:hover .bcgo span{transform:translateX(4px)}
@media(max-width:700px){.bcin{gap:var(--s4)}.bcgo{width:100%;text-align:center}}

/* countdown to kickoff — same figure treatment as the draft countdown it
   replaces, on its own row rather than inside the ledger */
.kickoff{padding-top:var(--sec)}
.kicin{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,44px);
  border-top:1px solid var(--rule);padding-top:var(--sec-tight)}

/* ====================================== latest episode, top of The Front
   The newest broadcast leads the page during the season, the way the ballot
   led it on draft day. Same shape every week, so the slot is recognisable. */
.latestpod{padding-top:var(--sec)}
.lp{display:grid;gap:clamp(18px,3vw,40px);margin-top:var(--s5);
  grid-template-columns:1fr;text-decoration:none;color:inherit;
  border-top:1px solid var(--rule);padding-top:var(--s5)}
@media(min-width:820px){.lp{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center}}
.lpthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.lpthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.lp:hover .lpthumb img{transform:scale(1.03)}
.lptitle{font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:-.025em;
  line-height:1.12;margin:0}
.lpsub{margin-top:var(--s3);font-size:var(--t-sm);line-height:var(--lh-body);
  color:var(--muted);max-width:46ch}
.lpmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted)}
.lp .featgo{margin-top:var(--s4)}

/* ============================================ THE LIVE SEASON (26-27)
   Everything below serves pages that change weekly. Two rules hold it
   together and keep it from becoming its own dialect:

   1. One chart idea. Every comparison on the stats page is the same
      horizontal bar - label, track, figure - because eight different
      chart types across one page reads as decoration, not analysis.
   2. Every grid track that holds text is minmax(0,1fr), never 1fr. A
      grid item defaults to min-width:auto, which makes 1fr a maximum
      rather than a limit, and long franchise names push out of the row.
      That bug has been fixed here three times; this is the note. */

/* ---------- section tabs ---------- */
.subnav{
  display:flex;gap:clamp(18px,3vw,34px);flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:var(--s4);
}
.subnav a{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding-bottom:var(--s3);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;
}
.subnav a:hover{color:var(--paper)}
.subnav a.on{color:var(--paper);border-bottom-color:var(--signal)}
.barnav a.on{color:var(--paper)}

/* ---------- scorebugs ---------- */
.sbgrid{
  display:grid;gap:clamp(8px,1.1vw,14px);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:720px){.sbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sbug{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:'a m' 'b m';
  column-gap:var(--s4);
  border:1px solid var(--rule);border-left:3px solid var(--w);
  padding:var(--s4) var(--s4) var(--s4) var(--s5);
  text-decoration:none;color:inherit;
  transition:background .2s ease,border-color .2s ease;
}
.sbug:hover{background:var(--surface)}
.sbside{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;
  gap:var(--s3);align-items:center;padding:6px 0;grid-area:b;
}
.sbside.win{grid-area:a;border-bottom:1px solid var(--rule)}
.sbico{width:32px;height:32px;object-fit:contain;opacity:.55;transition:opacity .2s}
.sbside.win .sbico{opacity:1}
.sbug:hover .sbico{opacity:1}
.sbn{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  font-size:var(--t-sm);letter-spacing:var(--tr-tight);
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sbside.win .sbn{color:var(--paper);font-weight:500}
.sbn span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}
.sbp{
  font-family:var(--mono);font-size:var(--t-md);line-height:var(--lh-flat);
  color:var(--muted);text-align:right;
}
.sbside.win .sbp{color:var(--paper);font-weight:500}
.sbm{
  grid-area:m;align-self:center;padding-left:var(--s4);
  border-left:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  min-width:64px;text-align:right;
}
.sbm::after{content:' margin';font-size:var(--t-micro);opacity:.6}
/* text-overflow does nothing on a flex container, so the franchise name gets
   its own block to be clipped in. Without this the names hard-cut mid-word
   on a phone - "Team Stud", "Mr. Irreleva" - with no ellipsis at all. */
.sbf,.rgn>.sbf{
  display:block;font-weight:inherit;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* below this the margin column takes more room than it is worth, so it moves
   under the scoreline instead of squeezing the names */
@media(max-width:620px){
  .sbug{grid-template-columns:minmax(0,1fr);grid-template-areas:'a' 'b' 'm';
        padding-left:var(--s4)}
  .sbm{border-left:0;border-top:1px solid var(--rule);padding:8px 0 0;
       margin-top:6px;text-align:left;min-width:0}
}

/* ---------- standings, wide variant ---------- */
.strow.sthead2{grid-template-columns:26px 44px minmax(0,1fr) 62px 74px 74px 74px 52px}
@media(max-width:860px){
  .strow.sthead2{grid-template-columns:24px 40px minmax(0,1fr) 56px 72px 62px}
  .strow.sthead2 .dim:first-of-type{display:none}
}
@media(max-width:600px){
  .strow.sthead2{grid-template-columns:22px 36px minmax(0,1fr) 52px 68px}
  .strow.sthead2 .dim{display:none}
}
.strow .spf.dim,.strow .srec.dim{color:var(--muted);opacity:.62}
.strow.shead.sthead2 div{text-align:right}
.strow.shead.sthead2 .sclubn,.strow.shead.sthead2 .sseed{text-align:left}
.strow .srec{text-align:right;font-family:var(--mono);font-size:var(--t-xs)}
.form{display:inline-flex;gap:3px}
.form i{
  display:grid;place-items:center;width:17px;height:17px;font-style:normal;
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  border:1px solid var(--rule);color:var(--muted);
}
.form i.fw{color:var(--ink);background:#3BFF6E;border-color:#3BFF6E}
.form i.fl{color:var(--paper);background:transparent;border-color:var(--signal-dim)}
.form i.ft{color:var(--muted)}

/* ---------- the one chart ---------- */
.bars{border-top:1px solid var(--rule);margin-top:var(--s5)}
.brow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,2fr) 86px;
  gap:var(--s4);align-items:center;
  padding:10px 0;border-bottom:1px solid var(--rule);
  transition:background .2s ease;
}
.brow:hover{background:var(--surface)}
/* On a phone the three-column row has no room for a track, but dropping the
   track outright guts the positional chart - the split IS the chart. So the
   row reflows to two lines instead: label and figure, then the bar full
   width underneath. */
/* On a phone the three-column row has no room for a track, but dropping the
   track outright guts the positional chart - the split IS the chart. So the
   row reflows to two lines: label and figure, then the bar full width under.
   All three are placed EXPLICITLY. Giving only .bval a definite row makes it
   a definite-position item, which grid places before the auto-placed .blab -
   so the figure took cell one and the name got squeezed into the 72px. */
@media(max-width:640px){
  .brow{grid-template-columns:minmax(0,1fr) 78px;gap:7px var(--s3)}
  .brow .blab {grid-area:1 / 1 / 2 / 2}
  .brow .bval {grid-area:1 / 2 / 2 / 3}
  .brow .btrack{grid-area:2 / 1 / 3 / -1}
}
.blab{display:flex;align-items:center;gap:var(--s3);min-width:0}
.blab span{
  font-size:var(--t-sm);letter-spacing:var(--tr-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.blab i{
  font-style:normal;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
  margin-left:var(--s2);
}
.bico{width:26px;height:26px;object-fit:contain;flex:none;opacity:.85}
.btrack{height:9px;background:var(--surface);position:relative;overflow:hidden}
/* signed values: a centre axis, bars growing out from it either way */
.btrack.axis{display:flex;align-items:stretch;overflow:visible}
.btrack.axis::before{
  content:'';position:absolute;left:calc(50% - .5px);top:-3px;bottom:-3px;
  width:1px;background:var(--rule);z-index:1;
}
.btrack.axis>i{position:absolute;top:0;bottom:0;height:auto}
.btrack.axis>i.pos{left:50%}
.btrack.axis>i.neg{right:50%}
.btrack>i{display:block;height:100%;opacity:.86;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.btrack.stack{display:flex;width:var(--f)}
.btrack.stack>i{height:100%;opacity:.9}
.bval{
  font-family:var(--mono);font-size:var(--t-xs);text-align:right;
  color:var(--paper);
}
.poskey{
  display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}
.poskey span{display:inline-flex;align-items:center;gap:6px}
.poskey i{width:10px;height:10px;display:block}

/* ---------- record watch cards ---------- */
.rwgrid{
  display:grid;gap:clamp(10px,1.4vw,18px);margin-top:var(--s6);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:720px){.rwgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.rwcard{
  display:block;padding:var(--s5);border:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .2s,border-color .2s;
}
.rwcard:hover{background:var(--surface);border-color:var(--muted)}
.rwn{
  font-family:var(--mono);font-size:var(--t-xl);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);
}
.rwl{margin-top:var(--s3);font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--muted)}
.rwl b{color:var(--paper);font-weight:500}
.rwm{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}

/* ---------- start/sit misses ---------- */
.misses{border-top:1px solid var(--rule);margin-top:var(--s5)}
.misrow{
  display:grid;grid-template-columns:38px 26px minmax(0,1fr) 76px;
  gap:var(--s3);align-items:center;padding:11px 0;
  border-bottom:1px solid var(--rule);border-left:2px solid var(--tc);
  padding-left:var(--s4);
}
.misw{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}
.misbody{font-size:var(--t-sm);color:var(--muted);line-height:var(--lh-snug)}
.misbody b{color:var(--paper);font-weight:500}
.misbody span{color:var(--muted)}
.misv{font-family:var(--mono);font-size:var(--t-xs);text-align:right;color:var(--signal)}
.eggs{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.egg{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--rule);padding:8px var(--s3);
  font-size:var(--t-sm);
}
.egg i{
  font-style:normal;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}

/* ---------- recap: one game ----------
   Broadcast treatment. Each club owns its half of the band - its primary as
   ground, its secondary as the name, its crest bled in behind at low opacity
   and clipped. The loser's half is desaturated rather than recoloured, so the
   result reads before a single number does. Same colour source as the
   rankings page (assets/colors.json), so the two pages are one system. */
.rgames{display:block}
.rgame{
  border-top:1px solid var(--rule);padding-top:var(--s7);margin-top:var(--s7);
  scroll-margin-top:calc(var(--barh) + 20px);
}
.rgames .rgame:first-child{margin-top:0}

.rgband{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;border:1px solid var(--rule);overflow:hidden;
}
.rgteam{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(12px,1.6vw,20px);padding:clamp(18px,2.2vw,30px) clamp(16px,2vw,26px);
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--p1) 92%,#000) 0%,
                          color-mix(in srgb,var(--p1) 70%,var(--ink)) 100%);
  text-decoration:none;color:var(--paper);overflow:hidden;
  filter:saturate(.35) brightness(.72);
  transition:filter .3s ease;
}
.rgteam.win{filter:none}
.rgteam:hover{filter:none}
/* the crest twice: a solid mark that reads at a glance, and the same crest
   blown up behind as a watermark. The watermark is anchored to the outer
   edge so the two halves push away from the centre line. */
.rgmark{
  position:relative;width:clamp(42px,4.4vw,58px);height:auto;display:block;
  flex:none;
}
.rgart{
  position:absolute;right:-16%;top:50%;transform:translateY(-50%);
  height:250%;width:auto;opacity:.16;pointer-events:none;
  filter:saturate(.45) contrast(.9);
}
.rgteam:not(.win) .rgart{right:auto;left:-16%}
.rgteam.win .rgart{opacity:.22}
.rgid{position:relative;min-width:0}
.rgclub{
  font-stretch:112%;font-weight:700;letter-spacing:var(--tr-tight);
  font-size:var(--t-md);line-height:var(--lh-head);color:var(--p2);
  text-wrap:balance;
}
.rgmgr{
  margin-top:5px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--paper);
  opacity:.72;
}
.rgp{
  position:relative;font-family:var(--mono);font-size:var(--t-lg);
  line-height:var(--lh-flat);font-weight:500;letter-spacing:var(--tr-head);
  text-align:right;
}
.rgv{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:0 clamp(12px,1.6vw,22px);background:var(--ink);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
}
.rgv span{font-family:var(--mono);font-size:var(--t-sm);color:var(--paper)}
.rgv i{
  font-style:normal;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}
@media(max-width:700px){
  .rgband{grid-template-columns:minmax(0,1fr)}
  .rgv{flex-direction:row;gap:8px;padding:8px 0;
    border-left:0;border-right:0;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .rgart{height:150%;right:-14%}
}

.rgkick{
  margin-top:var(--s6);font-family:var(--mono);font-size:var(--t-label);
  font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--w);
}
.rghead{
  margin-top:var(--s3);font-size:var(--t-lg);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);font-weight:600;max-width:26ch;
}
/* The two columns end level. The right side holds a module and a figure list
   of whatever length the game produced, so it is spread rather than stacked -
   otherwise it finishes high and leaves a hole beside the prose. */
.rgcols{display:grid;gap:clamp(24px,3.4vw,54px);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr);align-items:stretch}
@media(min-width:900px){.rgcols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.rgside2{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5)}
.rgtext p{max-width:58ch;font-size:var(--t-md);line-height:var(--lh-body);margin-bottom:var(--s4)}
.rgtext p:last-child{margin-bottom:0}
.rgpts{list-style:none;border-top:1px solid var(--rule)}
.rgpts li{
  padding:10px 0 10px var(--s4);border-bottom:1px solid var(--rule);
  font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--muted);position:relative;
}
.rgpts li::before{
  content:'';position:absolute;left:0;top:18px;width:6px;height:1px;background:var(--w);
}
/* ------------------------------------------------------ players and the wing
   The player pages and the index of everyone who has started a week here.
   Classes are pl*/pw*/po* prefixed; the book's own .lbtable shapes are reused
   for the boards themselves so they read as part of the same book. */
.plhead,.plrow{
  display:grid;grid-template-columns:3.4em minmax(0,1fr) 4.6em 6.4em;
  gap:12px;align-items:center;
}
.plhead{
  padding:0 0 10px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);margin-top:var(--s5);
}
.plhead div:nth-child(3),.plhead div:nth-child(4){text-align:right}
.plrow{
  padding:10px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;border-left:2px solid transparent;
  transition:background .2s ease,border-color .2s ease;
}
.plrow:hover{background:var(--surface);border-left-color:var(--signal)}
.plpos{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  color:var(--muted);
}
.plname{font-size:var(--t-sm);color:var(--paper);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plst,.plv{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);text-align:right}
.plv{color:var(--paper)}

.powners{border-top:1px solid var(--rule);margin-top:var(--s5)}
.powrow{
  display:grid;grid-template-columns:minmax(0,1fr) 7em 6em;gap:12px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);
}
.powrow a{color:var(--paper);text-decoration:none;font-size:var(--t-sm)}
.powrow a:hover{color:var(--signal)}
.powrow span{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);color:var(--muted)}
.powrow b{font-family:var(--mono);font-size:var(--t-sm);text-align:right;color:var(--paper)}

.pweeks{border-top:1px solid var(--rule);margin-top:var(--s5)}
.pwrow{
  display:grid;grid-template-columns:7.4em minmax(0,1fr) 4em 5em;gap:12px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule);
}
.pwwk,.pwslot{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);color:var(--muted)}
.pwslot{text-align:right}
.pwmgr{font-size:var(--t-sm);color:var(--paper);text-decoration:none;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwmgr:hover{color:var(--signal)}
.pwv{font-family:var(--mono);font-size:var(--t-sm);text-align:right;color:var(--paper)}

@media(max-width:560px){
  .plhead,.plrow{grid-template-columns:2.8em minmax(0,1fr) 3.4em 5em;gap:8px}
  .powrow{grid-template-columns:minmax(0,1fr) 5.4em 5em;gap:8px}
  .pwrow{grid-template-columns:6.4em minmax(0,1fr) 4.4em;gap:6px 8px}
  .pwslot{grid-column:3;grid-row:1;text-align:right}
  .pwv{grid-column:3;grid-row:2;text-align:right}
  .pwwk{grid-column:1;grid-row:1/span 2;align-self:center}
  .pwmgr{grid-column:2;grid-row:1/span 2;align-self:center}
}

/* --------------------------------------------- preview: lineups and changes
   A preview that only carries history is a history page. These two modules
   carry what the managers have actually done with their week: who they are
   starting, and who they moved. */
.modlineups{border-top:1px solid var(--rule)}
.lghead{
  display:grid;grid-template-columns:2.6em minmax(0,1fr) minmax(0,1fr);
  gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);
}
.lghead span:nth-child(1){grid-column:2}
.lghead span:nth-child(3){grid-column:3;text-align:right}
.lghead .lgk{display:none}
.lgrow{
  display:grid;grid-template-columns:2.6em minmax(0,1fr) minmax(0,1fr);
  gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);align-items:center;
}
.lgs{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  color:var(--muted);opacity:.75;
}
.lgc{display:flex;align-items:baseline;gap:8px;min-width:0}
.lgc.b{flex-direction:row-reverse}
.lgn{
  font-size:var(--t-sm);color:var(--paper);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lgn i{
  font-style:normal;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);color:var(--muted);opacity:.7;margin-left:6px;
}
.lgp{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);flex:0 0 auto}
.lgp.sat{color:var(--signal);opacity:.9}
.lgnew{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--w);flex:0 0 auto;
}
.lgfoot{
  padding-top:12px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted);
}
.lgkey{display:inline-block;width:8px;height:8px;background:var(--signal);
  margin:0 4px 0 8px;vertical-align:baseline}

.modchanges{display:grid;gap:var(--s5)}
.cgteam{border-top:1px solid var(--rule)}
.cgm{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-sm);font-weight:600;color:var(--paper);
}
.cgm span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.cgnone{padding:12px 0;font-size:var(--t-sm);color:var(--muted)}
.cgrow{
  display:grid;grid-template-columns:2.6em minmax(0,1fr) 3.6em 1.2em minmax(0,1fr);
  gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);
}
.cgs{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);color:var(--muted);opacity:.75}
.cgo{font-size:var(--t-sm);color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgo.cgadd{font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;opacity:.6}
.cgv{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);text-align:right}
.cgar{color:var(--muted);opacity:.5;text-align:center}
.cgi{font-size:var(--t-sm);color:var(--paper);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:560px){
  .lgrow,.lghead{grid-template-columns:2.4em minmax(0,1fr) minmax(0,1fr);gap:6px}
  .lgn i{display:none}
  .cgrow{grid-template-columns:2.4em minmax(0,1fr) 3.4em;gap:4px 8px}
  .cgs{grid-column:1;grid-row:1/span 2;align-self:start;padding-top:2px}
  .cgo{grid-column:2;grid-row:1}
  .cgv{grid-column:3;grid-row:1}
  .cgar{display:none}
  .cgi{grid-column:2/span 2;grid-row:2}
}

/* ---------------------------------------------------------- the season hub
   The hub opens on the week that has not happened yet. Each fixture is one
   row: the two clubs facing each other across a split probability bar, so the
   board reads as a set of contests rather than a list of teams. */
.heroweek .hwtop{
  display:grid;gap:clamp(12px,2vw,28px);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr);align-items:baseline;
}
@media(min-width:900px){
  .heroweek .hwtop{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}
.hwtitle{
  font-size:var(--t-xl);line-height:var(--lh-head);letter-spacing:var(--tr-head);
  font-weight:700;max-width:18ch;
}
.hwsub{font-size:var(--t-md);line-height:var(--lh-body);color:var(--muted);max-width:56ch}
.fxboard{margin-top:var(--s5);border-top:1px solid var(--rule)}
.fxrow{
  display:grid;align-items:center;gap:10px;padding:13px 0;
  grid-template-columns:minmax(0,1fr) 4.6em 132px 4.6em minmax(0,1fr);
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
}
.fxrow:hover{background:rgba(255,255,255,.028)}
.fxc{display:flex;align-items:center;gap:10px;min-width:0}
.fxc.a{justify-content:flex-end}
.fxc.b{justify-content:flex-start}
.fxi{width:26px;height:26px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.fxn{
  font-size:var(--t-sm);font-weight:600;color:var(--paper);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fxc.a .fxn{text-align:right}
.fxp{font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);text-align:left}
.fxp.r{text-align:right}
.fxodds{display:flex;flex-direction:column;gap:5px}
.fxbar{display:flex;height:4px;overflow:hidden}
.fxbar i{display:block;height:100%}
.fxbar i:first-child{opacity:.95}
.fxbar i:last-child{opacity:.45}
.fxpct{
  display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:var(--tr-micro);color:var(--muted);
}
/* Before the matchup board has been read, there is no projection and no win
   probability to draw. The row keeps its shape and carries the two records
   where the split bar goes, with the season's points per week either side. */
.fxodds.noproj{
  flex-direction:row;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-micro);
}
.fxrec{color:var(--paper)}
.fxvs{color:var(--muted);opacity:.6}
.fxp.form{opacity:.72}
/* Narrow: the two clubs stack with the bar between them, every cell placed. */
@media(max-width:760px){
  .fxrow{
    grid-template-columns:minmax(0,1fr) 4.6em;
    gap:6px 10px;padding:16px 0;
  }
  .fxc.a{grid-column:1;grid-row:1;justify-content:flex-start}
  .fxp{grid-column:2;grid-row:1;text-align:right}
  .fxodds{grid-column:1/span 2;grid-row:2;padding:4px 0}
  /* Stacked, both clubs want the icon first for a clean left edge. The away
     club's markup is name-then-icon, so reverse it rather than reorder. */
  .fxc.b{grid-column:1;grid-row:3;flex-direction:row-reverse;justify-content:flex-end}
  .fxp.r{grid-column:2;grid-row:3;text-align:right}
}

/* The recap sits inside its own week, under that week's scoreboard. */
.lwrecap{
  display:block;margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--rule);text-decoration:none;color:inherit;
}
.lwrk{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);
}
.lwrt{
  margin-top:10px;font-size:var(--t-lg);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);font-weight:700;
}
.lwrs{
  margin-top:12px;font-size:var(--t-md);line-height:var(--lh-body);
  color:var(--muted);max-width:62ch;
}
.lwrecap .featgo{margin-top:18px}

/* The pod. One episode at size, the rest as a list - a grid of equal cards
   makes the newest episode look like the oldest. */
/* .podgrid, not .pdgrid - that one is the record book's podium grid and is
   used on thirty-one pages. */
.podgrid{display:grid;gap:clamp(20px,3vw,44px);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .podgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.pdlead{text-decoration:none;color:inherit;display:block}
.pdthumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c0d0f}
.pdthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdbody{padding-top:18px}
.pdkick{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);
}
.pdtitle{
  margin-top:10px;font-size:var(--t-lg);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);font-weight:700;
}
.pdsub{margin-top:10px;font-size:var(--t-sm);line-height:var(--lh-body);
  color:var(--muted);max-width:52ch}
.pdmeta{
  display:flex;gap:14px;margin-top:12px;font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:var(--tr-micro);color:var(--muted);
}
.pdlist{align-self:start;border-top:1px solid var(--rule)}
.pdrow{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;
}
.pdrow:hover{background:rgba(255,255,255,.028)}
.pdrt{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c0d0f}
.pdrt img{width:100%;height:100%;object-fit:cover;display:block}
.pdrn{font-size:var(--t-sm);line-height:1.3;color:var(--paper);min-width:0}
.pdrd{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  color:var(--muted);white-space:nowrap;
}

/* The figure list sits under both columns, four across, rather than stacked
   under the module. The right column used to finish 150-290px below the prose
   because it carried a chart AND the numbers; giving the numbers their own
   full-width register evens the card and reads like a broadcast lower-third. */
.rgfoot{margin-top:var(--s5)}
.rgpts.four{
  display:grid;grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule);
}
.rgpts.four li{
  padding:14px 0 14px var(--s4);border-bottom:1px solid var(--rule);
}
@media(min-width:720px){
  .rgpts.four{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
}
@media(min-width:1040px){
  .rgpts.four{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s4)}
  .rgpts.four li{border-bottom:0;padding-bottom:0;min-height:5.2em}
}
.mladder{margin-top:var(--s4);border-top:1px solid var(--rule)}
.mlrow{
  display:grid;align-items:center;gap:12px;padding:9px 0;
  grid-template-columns:1.6em minmax(0,1fr) 5.4em 52px 4.4em;
  border-bottom:1px solid var(--rule);
}
.mlrk{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}
.mlwho{
  font-size:var(--t-sm);line-height:1.3;color:var(--muted);min-width:0;
}
.mlwho s{text-decoration:none;opacity:.5}
.mlwhen{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  color:var(--muted);opacity:.7;white-space:nowrap;align-self:start;padding-top:3px;
}
.mlbar{height:3px;background:var(--rule)}
.mlbar i{display:block;height:100%;background:var(--muted);opacity:.55}
.mlv{
  font-family:var(--mono);font-size:var(--t-sm);text-align:right;color:var(--paper);
}
.mlrow.now .mlwho,.mlrow.now .mlv{color:var(--w);opacity:1}
.mlrow.now .mlbar i{background:var(--w);opacity:1}
.mlrow.now .mlrk{color:var(--w)}
/* Narrow: the bar goes, the date drops under the names, and every cell is
   placed explicitly - an auto-placed child next to a definite one reflows
   into the wrong column and has bitten this stylesheet before. */
@media(max-width:560px){
  .mlrow{grid-template-columns:1.6em minmax(0,1fr) 4.4em;column-gap:10px;row-gap:0}
  .mlrk{grid-column:1;grid-row:1/span 2;align-self:start;padding-top:2px}
  .mlwho{grid-column:2;grid-row:1}
  .mlwhen{grid-column:2;grid-row:2;padding-top:2px}
  .mlbar{display:none}
  .mlv{grid-column:3;grid-row:1/span 2;align-self:center}
}
.msfoot{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--muted);padding-top:12px;
}
.rgpts.big{margin-top:var(--s5)}
.rgpts.big li{font-size:var(--t-md);color:var(--paper);padding-top:14px;padding-bottom:14px}
.rgpts.big li::before{top:23px;background:var(--signal);width:10px}
.rgmodk{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s4);
}

/* ---------- recap module: the margin ---------- */
.modmargin{border:1px solid var(--rule);padding:var(--s5)}
.mmn{
  font-family:var(--mono);font-size:var(--t-xl);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);color:var(--w);
}
.mml{margin-top:4px;font-size:var(--t-sm);color:var(--muted)}
.mmbar{
  position:relative;height:2px;background:var(--rule);margin:var(--s6) 0 var(--s3);
}
.mmbar i{position:absolute;top:-5px;width:2px;height:12px}
.mmrec{background:var(--muted)}
.mmnow{background:var(--w)}
.mmfoot{
  display:flex;justify-content:space-between;gap:var(--s4);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}

/* ---------- recap module: the bench ---------- */
.modbench{border:1px solid var(--rule);padding:var(--s5)}
.blhead,.blrow{
  display:grid;grid-template-columns:32px minmax(0,1fr) 16px minmax(0,1fr) 54px;
  gap:var(--s2);align-items:center;
}
.blhead{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
.blhead span:first-child{grid-column:2}
.blhead span:last-child{grid-column:4}
.blrow{padding:10px 0;border-bottom:1px solid var(--rule);font-size:var(--t-xs)}
.blslot{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}
.blstart,.blbench{display:flex;flex-direction:column;gap:2px;min-width:0}
.blstart{color:var(--muted)}
.blbench{color:var(--paper)}
.blstart b,.blbench b{font-family:var(--mono);font-weight:500}
.blarr{color:var(--muted);text-align:center}
.blsw{font-family:var(--mono);font-size:var(--t-xs);text-align:right;color:var(--signal)}
.blfoot{
  display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}
.blfoot b{color:var(--paper);font-weight:500;margin-left:5px}

/* ---------- recap module: big numbers ---------- */
.modbig{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
.bigp{border:1px solid var(--rule);padding:var(--s4)}
.bign{
  font-family:var(--mono);font-size:var(--t-lg);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);color:var(--w);
}
.bigl{margin-top:6px;font-size:var(--t-sm);font-weight:500;letter-spacing:var(--tr-tight)}
.bigs{
  margin-top:5px;font-family:var(--mono);font-size:var(--t-micro);
  line-height:var(--lh-snug);color:var(--muted);
}

/* ---------- recap module: the spread ----------
   Back to back from a centre axis, on ONE scale across the whole module.
   Per-row scaling was the first version and it was worse than useless: the
   better player was full width in every row, so two very different lineups
   drew the same picture. */
.modcol{border-top:1px solid var(--rule)}
.cchead{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}
.cchead span:last-child{text-align:right}
.ccnote{text-transform:none;letter-spacing:0;opacity:.6;white-space:nowrap}
.ccrow{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1.1fr) minmax(0,1fr);
  gap:var(--s3);align-items:center;padding:7px 0;border-bottom:1px solid var(--rule);
}
.ccl,.ccr{display:flex;gap:var(--s2);align-items:baseline;min-width:0;font-size:var(--t-xs)}
.ccr{justify-content:flex-end}
.ccl span,.ccr span{
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ccl b,.ccr b{font-family:var(--mono);font-weight:500;flex:none;color:var(--paper)}
.ccbar{
  display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  gap:7px;height:7px;align-items:stretch;position:relative;
}
/* the centre axis. Two clubs can own near-identical accent colours - Yim's
   gold and Ghost's amber differ by a few degrees of hue - so the axis and a
   weight difference carry the read, not the hue. */
.ccbar::before{
  content:'';position:absolute;left:calc(50% - .5px);top:-3px;bottom:-3px;
  width:1px;background:var(--rule);
}
.cch{display:flex;justify-content:flex-end;overflow:hidden;grid-column:1}
.cch.r{justify-content:flex-start;grid-column:3;opacity:.55}
.cch>i{display:block;height:100%;opacity:.95;min-width:1px}

/* ---------- recap module: the series ----------
   These rows are .msrow, not .srow. The manager pages have used .srow for
   their season-by-season rows since long before this module existed, and a
   second .srow later in this sheet won on every one of them - the club column
   collapsed and the name ran straight through the record beside it. Class
   names here are namespaced for that reason. */
.modseries{border-top:1px solid var(--rule)}
.msrow{
  display:grid;grid-template-columns:62px minmax(0,1fr) 124px minmax(0,1fr);
  gap:var(--s3);align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);
}
.msrow.now{background:var(--surface)}
.sryr{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}
.srbar{display:flex;height:7px;justify-content:flex-end;overflow:hidden}
.srbar.r{justify-content:flex-start}
.srbar i{display:block;height:100%;opacity:.8;min-width:1px}
.srsc{
  display:flex;justify-content:space-between;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);white-space:nowrap;
}
.srsc b{font-weight:400}
.srsc b.w{color:var(--paper);font-weight:500}

/* ---------- the front: live block ---------- */
.lbgrid{display:grid;gap:clamp(20px,3vw,44px);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.lbgrid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.lbscores .sbgrid{grid-template-columns:minmax(0,1fr);margin-top:0}
@media(min-width:620px){.lbscores .sbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.lbscores .sbgrid{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1180px){.lbscores .sbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Beside the standings the bug is about half as wide as it is on the season
   page, and the margin column was eating the franchise name. The margin is on
   /season/ and in the recap; here the scoreline is the point. */
.lbscores .sbm{display:none}
/* "Sherwood Forrest Turkeys" is two characters too long for this column at
   1400. Wrapping keeps the whole name and the same type size; shrinking the
   type would have made the front page disagree with /season/. */
.lbscores .sbf{white-space:normal;overflow:visible;line-height:var(--lh-snug)}
.lbscores .sbn{white-space:normal;overflow:visible}
.lbscores .sbug{grid-template-columns:minmax(0,1fr);grid-template-areas:'a' 'b'}
.mhead{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  border-bottom:1px solid var(--rule);padding-bottom:var(--s3);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);
}
.mhead a{color:var(--muted);text-decoration:none;transition:color .2s}
.mhead a:hover{color:var(--paper)}
/* .lmrow, not .mrow - the milestones board owns .mrow and .mrk. */
.lmrow{
  display:grid;grid-template-columns:20px 24px minmax(0,1fr) 44px 64px;
  gap:var(--s3);align-items:center;padding:9px 0;
  border-bottom:1px solid var(--rule);border-left:2px solid transparent;
  text-decoration:none;color:inherit;transition:background .2s,border-color .2s;
}
.lmrow:hover{background:var(--surface);border-left-color:var(--tc)}
.lmrk{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}
.mnm{
  font-size:var(--t-sm);letter-spacing:var(--tr-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mrec,.mpf{font-family:var(--mono);font-size:var(--t-xs);text-align:right;color:var(--muted)}
.livehit{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  align-items:center;margin-top:var(--s4);padding:var(--s4);
  border:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background .2s,border-color .2s;
}
.livehit:hover{background:var(--surface);border-color:var(--muted)}
.lhn{
  font-family:var(--mono);font-size:var(--t-lg);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);color:var(--signal);
}
.lhl{font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--muted)}
.lhl b{color:var(--paper);font-weight:500}

/* ---------- manager page: the live season ---------- */
.livemgr{border-top:1px solid var(--rule);margin-top:var(--sec)}
.livemgr .nhead{padding-top:var(--s5)}
.lmtop{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s5);
}
.lmgo{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;
}
.lmgo:hover{color:var(--accent,var(--paper))}
.livemgr .strip{
  margin-top:var(--s5);border-top:1px solid var(--rule);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:760px){.livemgr .strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.livemgr .stat{padding:var(--s5) 0}
.livemgr .stat .n{color:var(--accent,var(--paper))}
/* the live row in season-by-season */


/* ---------- preview: the band carries a projection, not a result ---------- */
.rgband.preview .rgteam{filter:saturate(.5) brightness(.8)}
.rgband.preview .rgteam.win{filter:saturate(.85) brightness(.95)}
.rgband.preview .rgteam:hover{filter:none}
.rgproj{position:relative;text-align:right;display:flex;flex-direction:column;gap:3px}
.rgproj b{
  font-family:var(--mono);font-size:var(--t-md);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);
}
.rgproj i{
  font-style:normal;font-family:var(--mono);font-size:var(--t-xs);
  font-weight:500;letter-spacing:var(--tr-label);color:var(--p2);
}
.rgteam:not(.win) .rgproj i{color:var(--paper);opacity:.75}
/* first-ever meeting: there is no history module to draw, so the absence
   is the module */
.modfirst{border:1px solid var(--rule);padding:var(--s5);text-align:center}
.mfn{
  font-family:var(--mono);font-size:var(--t-xl);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);color:var(--w);
}
.mfl{
  margin-top:6px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);
}
.mffoot{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--muted);text-align:left;
}
/* the series module gets a headline record when it leads a preview */
.msrec{
  display:flex;align-items:baseline;gap:var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule);margin-bottom:2px;
}
.msrec b{
  font-family:var(--mono);font-size:var(--t-lg);line-height:var(--lh-flat);
  font-weight:500;letter-spacing:var(--tr-head);color:var(--w);
}
.msrec span{font-size:var(--t-sm);color:var(--muted)}

/* ---------- the front: a way into the season hub ---------- */
.hubstrip{
  display:grid;gap:1px;margin-top:var(--s6);
  background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:760px){.hubstrip{grid-template-columns:repeat(5,minmax(0,1fr))}}
.hubstrip a{
  display:flex;flex-direction:column;gap:5px;
  padding:var(--s4) var(--s4) calc(var(--s4) + 2px);
  background:var(--ink);text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.hubstrip a:hover{background:var(--surface)}
.hubstrip b{font-size:var(--t-sm);font-weight:600;letter-spacing:var(--tr-tight)}
.hubstrip span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted);line-height:var(--lh-snug);
}
.hubstrip a:hover b{color:#3BFF6E}