/* ── The Round Robin — Homepage ────────────────────────────────────────────
   Companion to assets/js/home.js, linked by index.html and nothing else.
   Assumes assets/css/tokens.css is already loaded (it defines --bg, --orange,
   --card, --fh/--fd/--fb/--fm, --max, --pad and the --studio/--projection/
   --guide pillar triads).

   This file used to say it duplicated a handful of rules from join.css on
   purpose. join.css was deleted with the /join/ page, so as of 2026-09-09
   these are the sole definitions of the OPEN BETA badge, the proof strip, the seed table, the HoF class list and the Oscars bar
   chart — not copies of anything. Nothing needs reconciling with a twin.

   The --seed-* ramp used to live here too, which meant it resolved to black on
   every page that wasn't index.html. It now lives in tokens.css.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Shared primitives (section frame, buttons, labels) ─────────────────── */
.home-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

.home-sec{margin-top:clamp(56px,7vw,96px)}
.home-sec h2{
  margin:0 0 24px;font-family:var(--fb);font-weight:700;line-height:1.08;
  font-size:clamp(28px,3.4vw,40px);color:var(--text);text-wrap:balance;
}
.home-sec__lede{margin:0 0 28px;font-size:15.5px;line-height:1.65;color:var(--sub);max-width:56em}

.home-btn{
  display:inline-flex;align-items:center;gap:.6em;
  /* Geometry realigned to .btn-primary/.btn-ghost in main.css (2026-09-09): this
     was a parallel button system at 15px/.06em/--r-sm/14px 22px. Its hover lift is
     kept -- that gesture is the homepage's, not a divergence. */
  font-family:var(--fd);font-size:var(--t-ui);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:14px var(--s-5);border-radius: var(--r-md);text-decoration:none;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  cursor:pointer;transition:filter .18s ease,border-color .18s ease,transform .18s ease;
}
.home-btn:hover{filter:brightness(1.12);border-color:var(--studio-border);transform:translateY(-1px)}
.home-btn--primary{background:var(--orange);border-color:var(--orange);color:#01172B}
/* Label colour restated for hover/focus: the sitewide `a:hover, a:focus-visible`
   (0,1,1) outranks .home-btn--primary (0,1,0) and turned the label orange on
   the amber fill. */
.home-btn--primary:hover,.home-btn--primary:focus-visible{border-color:var(--orange);color:#01172B}
.home-btn--ghost{background:transparent}



/* ── Hero: the ring ─────────────────────────────────────────────────────
   Replaced the three rotating line-art scenes (bracket, ballot, stage) on
   2026-09-24. DESIGN_DIRECTION.md §7 rules out decorative brackets, ballots,
   curtains and spotlights, and §9 wants motion that shows a state change; the
   scenes were both. The ring is one set of marks that narrows through each
   decision in turn -- drawn on .hero-ring by home.js ("Hero ring"), which also
   positions the hub counter and the foot, because both sit on the ring's
   centre and the ring's geometry is measured off the copy column at runtime.

   Three layouts, one breakpoint pair shared with home.js's matchMedia calls:
     >=1100  the whole ring sits right of the copy; nothing overlaps the text.
     701-1099  the ring slides part-way off the right edge, behind a scrim.
     <=700  the ring rises from the bottom of the hero below the buttons;
            home.js sets --ring-pad to reserve that room.
   The hub and foot stay display:none until home.js adds .is-ring, so a
   no-JS or failed-script render is the copy alone, never an empty frame. */
.home-hero{background:var(--surface);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.home-hero__visual{position:relative;min-height:clamp(500px,40vw,580px);display:flex;align-items:center}
.hero-ring{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.home-hero__in{max-width:var(--max);width:100%;margin:0 auto;padding:clamp(56px,6vw,88px) var(--pad) clamp(96px,8vw,120px);position:relative;z-index:3}
.home-hero__in > *{max-width:540px}
.home-hero h1{
  font-family:var(--fe);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:.98;
  max-width:20ch;margin:0 0 16px;text-wrap:balance;
}
.home-hero h1 em{font-style:italic;color:var(--orange)}
.home-hero__lede{font-size:var(--t-lede);line-height:1.6;color:var(--sub);max-width:36em;margin:0 0 26px}
.home-hero__ctas{display:flex;gap:var(--s-3);flex-wrap:wrap}
.home-hero .home-btn--primary{background:var(--amber);border-color:var(--amber)}
.home-hero .home-btn--ghost{border-color:rgba(240,244,248,.3)}
.home-hero .home-btn--ghost:hover{border-color:var(--amber)}

.hero-ring__hub,.hero-ring__foot{display:none}
.home-hero.is-ring .hero-ring__hub{display:block}
.home-hero.is-ring .hero-ring__foot{display:grid}

/* The counter in the ring's centre. The soft disc behind it keeps the numeral
   legible where the bracket's inner rounds pass underneath. */
.hero-ring__hub{position:absolute;z-index:2;transform:translate(-50%,-50%);width:12em;text-align:center;pointer-events:none}
.hero-ring__hub::before{
  content:"";position:absolute;left:50%;top:50%;width:var(--disc,120px);height:var(--disc,120px);
  transform:translate(-50%,-50%);border-radius:var(--r-circle);z-index:-1;
  background:radial-gradient(closest-side,rgba(6,30,58,.92) 55%,rgba(6,30,58,0) 100%);
}
.hero-ring__hub b{display:block;font-family:var(--fe);font-weight:500;line-height:1;color:var(--text);font-size:var(--hub-size,44px);font-variant-numeric:lining-nums tabular-nums;transition:opacity .3s ease}
.hero-ring__hub span{display:block;margin-top:6px;font-family:var(--fm);font-size:var(--t-mini);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:opacity .3s ease}

/* The foot: which decision is playing, how far along, and where to read it. */
.hero-ring__foot{position:absolute;z-index:3;bottom:var(--s-4);transform:translateX(-50%);justify-items:center;gap:var(--s-1);width:max-content;max-width:calc(100% - 32px)}
.hero-ring__pips{display:flex;gap:var(--s-1)}
.hero-ring__pip{
  position:relative;min-height:40px;padding:10px 10px 12px;background:none;border:0;cursor:pointer;
  font-family:var(--fd);font-weight:500;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.hero-ring__pip:hover{color:var(--sub)}
.hero-ring__pip[aria-current="true"]{color:var(--text)}
.hero-ring__pip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hero-ring__pip i{position:absolute;left:10px;right:10px;bottom:4px;height:1px;background:var(--border);overflow:hidden}
.hero-ring__pip i::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(var(--p,0))}
.hero-ring__cap{
  margin:0;display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center;transition:opacity .3s ease;
  font-family:var(--fm);font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.hero-ring__cap a{color:var(--orange);text-decoration:none;white-space:nowrap}
.hero-ring__cap a:hover{text-decoration:underline}
.hero-ring__hub b.is-fading,.hero-ring__hub span.is-fading,.hero-ring__cap.is-fading{opacity:0}

@media(min-width:701px) and (max-width:1099px){
  .home-hero__in > *{max-width:500px}
  .home-hero.is-ring .home-hero__visual::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(6,30,58,.95) 0%,rgba(6,30,58,.88) 42%,rgba(6,30,58,.35) 62%,rgba(6,30,58,.1) 80%);
  }
}

/* ── The path: Learn -> Model -> Build ──────────────────────────────────
   One rule with three round stops, not three cards (2026-09-24). The rule's
   gradient runs through the three pillar colours in order, and it draws left
   to right when the section reveals; each stop's node fills as the line
   reaches it. Stacks vertically under 700px, with the rule running down the
   left edge. Without JS (no .js-reveals) everything renders drawn and filled. */
.home-path{
  --node:17px;position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);
}
.home-path::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--node) / 2);height:1px;
  background:linear-gradient(90deg,var(--guide),var(--projection) 50%,var(--studio));
  transform-origin:left center;
}
.home-path__stop{position:relative;padding-top:calc(var(--node) + var(--s-5));display:flex;flex-direction:column;min-width:0}
.home-path__stop--guides{--k:var(--guide)}
.home-path__stop--forecasts{--k:var(--projection)}
.home-path__stop--studios{--k:var(--studio)}
.home-path__node{
  position:absolute;top:0;left:0;width:var(--node);height:var(--node);border-radius:var(--r-circle);
  border:2px solid var(--k);background:var(--k);box-sizing:border-box;
}
.home-path__name{margin:0;font-family:var(--fe);font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.08;color:var(--text)}
.home-path__sub{margin:var(--s-2) 0 var(--s-3);font-family:var(--fb);font-size:var(--t-strong);font-weight:500;line-height:1.4;color:var(--text)}
.home-path__stop > p:not(.home-path__sub){margin:0;font-size:var(--t-body);line-height:1.65;color:var(--sub);flex:1;max-width:36ch}
.home-path__cta{
  margin-top:var(--s-4);align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--fd);font-size:var(--t-ui);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k);text-decoration:none;
}
.home-path__cta:hover{filter:var(--hover-lift)}
.home-path__cta:focus-visible{outline:2px solid var(--k);outline-offset:3px}
/* The one link off the path to the long-form explainer (/how-it-works/). */
.home-path__more{margin:var(--s-6) 0 0;font-size:var(--t-body)}
.home-path__more a{display:inline-flex;align-items:center;gap:5px;color:var(--sub);text-decoration:none;border-bottom:1px solid var(--border)}
.home-path__more a:hover,.home-path__more a:focus-visible{color:var(--text);border-bottom-color:var(--orange)}

/* The draw: armed only when home.js has confirmed it will reveal the section. */
.js-reveals .home-path-sec[data-reveal] .home-path::before{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.3,.7,.2,1) .15s}
.js-reveals .home-path-sec[data-reveal] .home-path__node{background:var(--bg);transition:background .35s ease}
.js-reveals .home-path-sec[data-reveal] .home-path__stop--guides .home-path__node{transition-delay:.2s}
.js-reveals .home-path-sec[data-reveal] .home-path__stop--forecasts .home-path__node{transition-delay:.8s}
.js-reveals .home-path-sec[data-reveal] .home-path__stop--studios .home-path__node{transition-delay:1.35s}
.js-reveals .home-path-sec[data-reveal].is-revealed .home-path::before{transform:none}
.js-reveals .home-path-sec[data-reveal].is-revealed .home-path__node{background:var(--k)}

@media(max-width:700px){
  .home-path{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  /* Stacked, the rule runs node to node in two segments, so it ends at the
     last stop instead of running on past its text. */
  .home-path::before{display:none}
  .home-path__stop{padding-top:0;padding-left:calc(var(--node) + var(--s-4))}
  .home-path__node{top:2px}
  .home-path__stop:not(:last-child)::after{
    content:"";position:absolute;left:calc(var(--node) / 2);width:1px;
    top:calc(2px + var(--node) / 2);bottom:calc(-1 * var(--s-6) - 2px - var(--node) / 2);
    transform-origin:center top;
  }
  .home-path__stop--guides::after{background:linear-gradient(180deg,var(--guide),var(--projection))}
  .home-path__stop--forecasts::after{background:linear-gradient(180deg,var(--projection),var(--studio))}
  .js-reveals .home-path-sec[data-reveal] .home-path__stop::after{transform:scaleY(0);transition:transform .7s cubic-bezier(.3,.7,.2,1) .2s}
  .js-reveals .home-path-sec[data-reveal] .home-path__stop--forecasts::after{transition-delay:.85s}
  .js-reveals .home-path-sec[data-reveal].is-revealed .home-path__stop::after{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .js-reveals .home-path-sec[data-reveal] .home-path::before,
  .js-reveals .home-path-sec[data-reveal] .home-path__stop::after,
  .js-reveals .home-path-sec[data-reveal] .home-path__node{transition:none}
}

/* ── Mobile hero ───────────────────────────────────────────────────────── */
.home-hero__lede--short{display:none}
@media(max-width:700px){
  .home-hero__visual{min-height:0;align-items:flex-start}
  /* Trimmed 2026-09-14 (TickTick: "Recompose the homepage from premise into
     the next live decision") so a real forecast signal below shows up
     sooner. Every cut here is spacing, not content. */
  .home-hero__in{padding:28px var(--pad) 20px}
  /* Room for the ring to rise from the bottom edge; home.js sizes it. */
  .home-hero.is-ring .home-hero__in{padding-bottom:var(--ring-pad,300px)}
  .home-hero.is-ring .home-hero__visual::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,30,58,.9) 0%,rgba(6,30,58,.72) 48%,rgba(6,30,58,.2) 72%,rgba(6,30,58,0) 100%);
  }
  .home-hero h1{font-size:clamp(30px,7.4vw,46px)}
  /* Full lede reads to 6 lines here and used to be line-clamped to 3, which
     cut it off mid-word. A lede authored to land on a sentence boundary at 3
     lines beats clamping the long one; the full copy stays in the DOM. */
  .home-hero__lede--full{display:none}
  .home-hero__lede--short{
    display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
    font-size:var(--t-read);line-height:1.5;margin-bottom:18px;-webkit-line-clamp:3;
  }
  .home-hero__ctas{gap:var(--s-3)}
  .hero-ring__pip{padding:10px 7px 12px;font-size:var(--t-mini)}
}
/* Two auto-width buttons wrap to a ragged second row well before this, so
   stack them full-width and centre the labels instead. */
@media(max-width:560px){
  .home-hero__ctas{flex-direction:column;align-items:stretch;gap:var(--s-2)}
  .home-hero .home-btn{justify-content:center}
}

/* ── "Who's behind it" ───────────────────────────────────────────────────
   Reuses join.css's .join-about component verbatim (this is the same kind
   of content — the site's one-person, AI-assisted origin story — so there's
   no reason to invent a second version of this card). Only the rules this
   page actually uses are duplicated here (no .join-about-logo or
   .join-about-callout, since this page's markup doesn't call for either). */
.join-about{
  margin-top:clamp(56px,7vw,96px);padding:clamp(32px,4vw,48px) 0 clamp(56px,7vw,96px);
  border-top:1px solid var(--border);
}
.join-about-grid{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:flex-start}
.join-about-copy{flex:1 1 320px;min-width:min(100%,300px)}
.join-about-copy h2{margin:0 0 16px;font-family:var(--fb);font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.1;color:var(--text)}
.join-about-copy>p{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--sub);max-width:560px}
.join-about-email{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.join-about-stats{flex:0 1 300px;min-width:min(100%,260px);display:flex;flex-direction:column}
.join-about-stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.join-about-stat:last-child{border-bottom:none}
.join-about-stat span:first-child{font-family:var(--fd);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.join-about-stat span:last-child{font-family:var(--fm);font-size:18px;font-weight:700;color:var(--text)}
@media(max-width:900px){.join-about-grid{gap:24px}}


/* ── Live decision stage ───────────────────────────────────────────────── */
.call-cards-sec{padding:clamp(28px,3.4vw,44px) 0 clamp(40px,5vw,52px)}
/* The eyebrow/rule/headline stack these three sections used to share is gone —
   see the comments in _includes/home-call-band.html and index.html. What's left
   is one heading per section that has something to say, and no label over it. */
.call-h2{font-family:var(--fd);font-size:22px;font-weight:600;text-transform:uppercase;color:var(--text);margin:0 0 24px}

.call-card{
  display:flex;flex-direction:column;gap:18px;background:var(--card);
  border:1px solid var(--border);border-radius: var(--r-lg);padding: var(--s-5);height:100%;
  transition:border-color .15s ease;
}
.call-card:hover{border-color:rgba(255,119,4,.4)}

.call-card-head{display:flex;flex-direction:column;gap:12px}
.call-card-toprow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.call-card-cat{font-family:var(--fb);font-size:22px;font-weight:700;line-height:1.15;color:var(--text)}
.call-badge{font-family:var(--fd);font-size:11px;font-weight:500;letter-spacing:.05em;color:var(--sub);
  background:var(--surface);border:1px solid var(--border);border-radius: var(--r-sm);padding:3px 9px;white-space:nowrap}
.call-badge--amber{color:var(--amber);background:rgba(232,135,43,.13);border-color:rgba(232,135,43,.3)}
.call-phase{font-family:var(--fm);font-size:11px;color:var(--orange);border:1px solid rgba(255,119,4,.35);
  border-radius: var(--r-sm);padding:4px 9px;align-self:flex-start;text-transform:uppercase;letter-spacing:.06em}

/* NCAA one-line / Last Four In / First Four Out rows (client-rendered, see the inline
   script — these classes are also written by that JS, so they can't just be
   scoped inside :nth-child selectors here). */
.call-rows{display:flex;flex-direction:column;justify-content:center;gap:20px;flex:1}
.call-loading{font-family:var(--fb);font-size:13px;color:var(--muted);padding:6px 0}
.call-fieldgroup-head{display:flex;align-items:center;gap:9px;padding-bottom:7px}
.call-fieldgroup-head span:first-child{font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);white-space:nowrap}
.call-fieldgroup-rule{flex:1;border-top:1px solid rgba(255,119,4,.25)}
.call-fieldgroup.is-dashed .call-fieldgroup-head span:first-child{color:var(--muted)}
.call-fieldgroup.is-dashed .call-fieldgroup-rule{border-top:1px dashed var(--border)}
/* One team per row, not the 2-up pair grid this used to be. Two-up gave each
   team ~141px, which left roughly 65px for the name once the seed chip and the
   ranking cell took their fixed columns — school names wrapped to two lines at
   that width even before the logo column existed, and with it they'd have had
   ~32px. The card grows taller as a result, which is free: .call-cards is
   align-items:stretch and the Oscars card's poster rows already set a taller
   common height, so this fills space the bracket card was leaving empty. */
.call-fieldgroup-rows{display:grid;grid-template-columns:1fr}
.call-fieldrow{display:grid;grid-template-columns:26px 24px 1fr 48px;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
/* School mark, straight off teams.json's own logo path. Fixed box so a row
   with no logo (26 of 365 teams have no self-hosted file and fall back to an
   ESPN CDN URL, a handful to nothing) keeps the four columns aligned. */
.call-fieldlogo{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.call-seedchip{font-family:var(--fm);font-size:12px;font-weight:700;text-align:center;padding:5px 0;
  background:var(--surface);border-radius: var(--r-sm);color:var(--text);border:1px solid var(--border)}
.call-seedchip--top{color:var(--orange);border-color:rgba(255,119,4,.5)}
.call-fieldteam{min-width:0;display:flex;flex-direction:column;gap:1px}
.call-fieldname{font-family:var(--fb);font-size:15px;font-weight:700;color:var(--text);line-height:1.15}
.call-fieldname.is-out{color:var(--sub)}
.call-fieldconf{font-family:var(--fm);font-size:9px;color:var(--muted)}
.call-rank{font-size:11px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap}
.call-rank span{font-size:8px;font-weight:500;letter-spacing:.05em;color:var(--muted)}

/* Hall of Fame table */
.call-hoftable-head{display:grid;grid-template-columns:36px 1fr 92px;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--border);
  font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.call-right{text-align:right;letter-spacing:.02em;line-height:1.3}
.call-hofrow{display:grid;grid-template-columns:36px 1fr 92px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
/* Team-colored initials badge, standing in for the player photo the site has no
   license path to publish. Colors are applied inline from _data/nfl_team_colors.yml
   by _includes/hof-badge.html; only geometry lives here. Replaced the orange
   position chip that used to hold this column -- position moved into the meta
   line, since two orange marks per row and no player identity was the worse trade. */
.call-hofbadge{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-circle);border:2px solid;
  font-family:var(--fb);font-size:var(--t-ui);font-weight:700;letter-spacing:.02em;color:#fff}
/* Unrecognised or missing team code -- never guess a franchise's colors. */
.call-hofbadge--none{background:var(--surface);border-color:var(--border);color:var(--muted)}
.call-hofmain{display:flex;flex-direction:column;gap:5px;min-width:0}
.call-hofname{font-family:var(--fb);font-size:17px;font-weight:700;color:var(--text);line-height:1.15}
.call-hofmeta{font-family:var(--fm);font-size:10px;color:var(--muted)}
.call-track{position:relative;height:5px;background:var(--surface);border-radius: var(--r-sm);margin-top:1px}
.call-track-fill{position:absolute;inset:0 auto 0 0;height:100%;background:var(--orange);border-radius: var(--r-sm)}
.call-track-fill.is-muted{background:var(--muted)}
/* prob_low..prob_high, drawn behind the fill. At the preseason stage this band is
   ~30 points wide, which is the point: the bar alone read as a hard point estimate
   on a number the model itself labels low-confidence. Steel and translucent, per
   CHART_STYLE.md's band treatment — uncertainty is never red, and never a colour
   that competes with the value. */
.call-track-band{position:absolute;top:0;bottom:0;background:var(--sub);opacity:.22;border-radius: var(--r-sm)}
.call-track-mark{position:absolute;left:80%;top:-2px;width:1px;height:9px;background:var(--sub)}
.call-hofchance{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--orange);text-align:right}
.call-threshold{display:flex;align-items:center;gap:8px;padding-top:9px}
.call-threshold-tick{width:1px;height:9px;background:var(--sub);flex-shrink:0}
.call-threshold .mono{font-size:10px;color:var(--muted)}

/* Oscars table */
.call-osctable-head{display:grid;grid-template-columns:52px 1fr 84px;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--border);
  font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.call-oscrow{display:grid;grid-template-columns:52px 1fr 84px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
/* Poster at a real size rather than a thumbnail -- this is the card's only
   piece of imagery and the films are the subject. 2:3 is TMDB's own aspect;
   w154 is the smallest TMDB size that still looks sharp at 2x. The taller rows
   grow this card, and .call-cards' align-items:stretch grows the other two to
   match, which is why all three stay the same height. */
.call-oscposter{width:52px;height:78px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--surface);flex-shrink:0}
/* TMDB has no art for this title yet -- hold the column, don't collapse it. */
.call-oscposter--none{display:block}
/* Required by TMDB's API terms wherever their art renders. */
.call-tmdb{font-size:var(--t-micro);color:var(--muted);padding-top:5px}
.call-tmdb a{color:var(--muted);text-decoration:underline}
.call-tmdb a:hover{color:var(--text)}
.call-oscmain{display:flex;flex-direction:column;gap:5px;min-width:0}
.call-oscname{font-family:var(--fb);font-size:17px;font-weight:700;color:var(--text);line-height:1.15}
.call-footnote{font-family:var(--fm);font-size:10px;color:var(--muted);padding-top:9px}

.call-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:15px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.call-cta{font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--orange);text-decoration:none;transition:color .15s ease}
.call-cta:hover{color:var(--amber)}
.call-foot-record{font-family:var(--fm);font-size:10px;color:var(--muted)}
/* The card's record and its data date share the foot's right side, date on top.
   Stacked rather than inline because the two are different kinds of claim — one
   is how the model has done, the other is when this card last moved. */
.call-foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
.call-stamp{font-size:10px;color:var(--muted)}
.call-stamp:empty{display:none}
/* A stale card states it in words as well as colour (the script appends "· not
   refreshed since"), so this is reinforcement, never the only signal. */
.call-stamp.is-stale{color:var(--orange)}

/* The record sheet — the only accuracy content above the footer, and the page's
   one light surface (tokens --paper/--ink; DESIGN_DIRECTION.md §12). Square, no
   shadow: a printed sheet laid on the dark page, not a floating card. */
.call-record-sec{
  margin-top:clamp(28px,4vw,48px);padding:clamp(24px,3.4vw,40px);
  background:var(--paper);color:var(--ink);border-top:3px solid var(--ink);
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s-6);align-items:start;
}
.call-record-left{display:flex;flex-direction:column;gap:var(--s-2)}
.call-record-h2{font-family:var(--fe);font-weight:600;font-size:28px;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.call-record-sub{margin:0;font-family:var(--fb);font-size:var(--t-body);line-height:1.5;color:var(--paper-sub)}
.call-record-cta{
  margin-top:var(--s-3);align-self:flex-start;font-family:var(--fd);font-size:var(--t-meta);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);
}
.call-record-cta:hover{color:var(--paper-sub);border-color:var(--paper-sub)}
.call-record-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.call-record-stats{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.call-record-stat{display:flex;flex-direction:column;gap:var(--s-1);padding:0 var(--s-4);border-left:1px solid var(--paper-rule)}
.call-record-stat dd{margin:0}
.call-record-label{order:2;font-family:var(--fd);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-sub)}
.call-record-value{order:1;font-size:30px;font-weight:600;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.call-record-scope{order:3;font-family:var(--fm);font-size:var(--t-mini);line-height:1.45;color:var(--paper-sub)}
@media(max-width:1099px){
  .call-record-sec{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
}
@media(max-width:700px){
  .call-record-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-5)}
  .call-record-stat:nth-child(odd){border-left:0;padding-left:0}
}

/* ── Visual decision stage ───────────────────────────────────────────────
   The earlier .call-* rules remain the typography and data-row primitives.
   This layer sets the composition: one decision owns the stage, and the
   other two are text tabs above it. Opened up 2026-09-24 -- no box, fill or
   tab column any more; the tabs sit on a rule the way the hero's pips do,
   and the chart sits straight on the page. */
.call-stage{display:block}
.call-switcher{
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 var(--s-6);
  border-bottom:1px solid var(--border);min-width:0;
}
.call-switch{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);
  padding:0 0 var(--s-3);text-align:left;color:var(--muted);background:none;border:0;cursor:pointer;
}
.call-switch::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.call-switch:hover{color:var(--sub)}
.call-switch[aria-selected="true"]{color:var(--text)}
.call-switch[aria-selected="true"]::after{background:var(--orange)}
.call-switch:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.call-switch-num{display:none}
.call-switch-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.call-switch-copy strong{font-family:var(--fd);font-weight:500;font-size:var(--t-strong);letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.call-switch-copy small{font-family:var(--fm);font-size:var(--t-mini);line-height:1.5;color:var(--muted)}
.call-switch-settings{
  margin:0 0 var(--s-3) auto;font-family:var(--fd);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--orange);
}
.call-switch-settings:hover{color:var(--amber)}

.call-cards{display:block;min-width:0}
.call-card{
  display:none;min-height:560px;height:100%;padding:clamp(24px,3vw,40px) 0 0;
  gap:var(--s-5);background:transparent;border:0;border-radius:0;
}
.call-card[data-decision="bracket"]{min-height:520px}
.call-card[hidden]{display:none}
.call-card.is-active{display:flex;animation:call-stage-in .24s ease both}
@keyframes call-stage-in{from{opacity:.35;transform:translateX(8px)}to{opacity:1;transform:none}}
.call-card:hover{border-color:transparent}
.call-card-head{gap:var(--s-2)}
.call-card-cat{font-size:clamp(25px,2.4vw,34px);letter-spacing:-.02em}
.call-card-toprow{align-items:flex-start}
.call-badge{margin-top:2px}
.call-phase{border:0;padding:0;color:var(--muted)}

/* The Hall chart keeps the candidates and numeric threshold as the visual
   argument. Its generated prose frame is intentionally suppressed here. */
.call-hofchart .trr-chart-claim,
.call-hofchart .trr-chart-caveat{display:none}
.call-hofchart .trr-chart-svg{margin-top:0}

/* The NCAA data becomes a four-quadrant, 16-team field board. */
.call-card[data-decision="bracket"] .call-rows{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6);
  align-items:start;justify-content:stretch;
}
.call-fieldgroup-head span:first-child{font-size:var(--t-label)}
.call-fieldrow{grid-template-columns:40px 34px minmax(0,1fr) 52px;padding:var(--s-3) 0}
.call-fieldlogo{width:38px;height:38px}
.call-fieldname{font-size:var(--t-lede)}

/* Poster art carries the Academy view: three rows of five, with the real
   ten-nominee cut drawn between rows two and three. */
#call-oscars-rows{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5) var(--s-3)}
.call-osctable-head{display:none}
.call-oscrow{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s-2);
  min-width:0;padding:0;border-bottom:0;
}
.call-oscart{position:relative}
.call-oscposter{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-md)}
.call-oscposter--none{background:var(--surface)}
.call-oscrank{
  position:absolute;top:var(--s-2);left:var(--s-2);display:grid;place-items:center;
  min-width:25px;height:25px;padding:0 5px;background:rgba(1,23,43,.88);
  border:1px solid rgba(255,119,4,.55);border-radius:var(--r-sm);
  color:var(--text);font-size:var(--t-mini);font-weight:700;
}
.call-oscmain{gap:var(--s-2)}
.call-oscname{min-height:38px;font-size:var(--t-strong)}
.call-oscmetric{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
.call-oscmetric span{font-family:var(--fd);font-size:8px;line-height:1.1;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.call-oscmetric strong{font-size:var(--t-ui);color:var(--text)}
.call-track{height:6px;margin-top:0}
.call-track-scale{display:flex;justify-content:space-between;margin-top:-4px;font-size:7px;color:var(--muted)}
.call-osccut{grid-column:1/-1;display:flex;align-items:center;gap:var(--s-3);color:var(--orange)}
.call-osccut::before,.call-osccut::after{content:"";height:1px;flex:1;background:rgba(255,119,4,.4)}
.call-osccut span{font-family:var(--fd);font-size:var(--t-label);font-weight:600;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.call-footnote{padding-top:var(--s-3)}
.call-foot{padding-top:var(--s-4)}

@media(max-width:850px){
  /* Let the decision box itself make the entrance on small screens. The
     section wrapper stays put so the animation feels like a fitted object
     arriving in the viewport rather than the whole page shifting. */
  .js-reveals .call-band[data-reveal]{opacity:1;transform:none;transition:none}
  .js-reveals .call-band[data-reveal] .call-stage{
    opacity:0;transform:translateY(44px) scale(.975);transform-origin:50% 0;
    transition:opacity .28s ease,transform .42s cubic-bezier(.2,.8,.2,1);
    will-change:opacity,transform;
  }
  .js-reveals .call-band[data-reveal].is-revealed .call-stage{opacity:1;transform:none}
  .call-switcher{gap:0 var(--s-4)}
  .call-switch-copy small{display:none}
  .call-switch-copy strong{font-size:var(--t-meta);letter-spacing:.06em}
  .call-switch-settings{order:5;flex-basis:100%;margin:var(--s-3) 0 0;padding:var(--s-3) 0;border-top:1px solid var(--border)}
  .call-card{min-height:0;padding:var(--s-5) 0 0}
  .call-card[data-decision="bracket"]{min-height:0}
  .call-card[data-decision="bracket"] .call-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6)}
  .call-card[data-decision="bracket"]{gap:var(--s-4)}
  .call-fieldrow{grid-template-columns:34px 30px minmax(0,1fr) 48px;padding:6px 0}
  .call-fieldlogo{width:30px;height:30px}
  .call-fieldname{font-size:var(--t-strong)}
  #call-oscars-rows{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:650px){#call-oscars-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){
  .call-switcher{gap:0 var(--s-3)}
  .call-switch-copy strong{font-size:var(--t-label);letter-spacing:.03em}
  .call-card-cat{font-size:var(--t-h2)}
  .call-card-toprow{flex-direction:column;gap:var(--s-2)}
  .call-badge{margin:0}
  .call-card[data-decision="bracket"] .call-rows{grid-template-columns:1fr}
  #call-oscars-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .call-card.is-active{animation:none}
  .js-reveals .call-band[data-reveal] .call-stage{opacity:1;transform:none;transition:none}
}

/* ── Section reveal (progressive enhancement) ────────────────────────────
   .js-reveals is only added to <html> by home.js once an
   IntersectionObserver is confirmed available — so a [data-reveal] section
   stays visible by default and only animates when the JS is actually going
   to reveal it. Same convention as join.css. */
.js-reveals [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js-reveals [data-reveal].is-revealed{opacity:1;transform:translateY(0)}

/* __CACHEBUST_20260820b -- see SESSION_LOG.md; a second jekyll-serve deploy race today poisoned this file's immutable hash again, this content-only edit forces a fresh URL */