*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Breakpoints ─────────────────────────────────────────────────────────────
   The house ladder, which is a description of what this codebase already does,
   not a new scheme to migrate to:

     480   phone, narrow
     640   phone, wide / small tablet portrait
     760   THE sitewide one — where a multi-column layout becomes one column
     900   where the nav bar stops fitting and becomes the hamburger
     1100  wide desktop, where a layout can afford a second axis

   and two upward rungs, added 2026-09-17, which are the only ones that make a
   layout BIGGER rather than narrower (they move --max, never --pad):

     1500  16" laptops at their roomier scalings and 1600px external displays
     1800  1920px desktop monitors

   Those two live in tokens.css beside the --pad ladder they extend, because both
   are token definitions. Everything between 1100 and 1500 is deliberately one
   band: nothing in the layout needs to change there, it just gets wider.

   Reach for one of these first. CSS cannot take a variable in a media query, so
   this comment is the only place the ladder can live — keep it accurate.

   Deliberate departures, all content-driven and all worth keeping:
     700 / 701  the homepage hero swaps its art crop and stacked-vs-overlay
                layout here, and home.js's matchMedia must agree with the CSS —
                see assets/css/home.css. Not the same question as 760.
     1099 / 1100  the nav's own pair, on the 1100 rung since 2026-09-17 (it was
                899 / 900, which predated the current decision labels and left
                every width from 900 to 1044 overflowing). The arithmetic is on
                that media block below, and site-nav.html's matchMedia is the
                other half of the pair.
     980        the homepage call band's three live data cards.
     860        two 398px pick widgets on a category hub stop fitting.
     620 / 560 / 520  single uses, each measured against its own content.

   A number that isn't on the ladder should be defensible as one of those — it
   should be where a specific piece of content actually breaks, and it should say
   so in a comment. Don't add a sixth rung because a design tool suggested one.

   Guarding this: `npm run check:overflow` loads a page per layout at 24 widths
   straddling every rung above and asserts nothing scrolls sideways. Run it after
   touching any layout CSS. It exists because the nav spent a long time pushing
   every page 62px wide between 761px and 861px with nothing to notice.
   ───────────────────────────────────────────────────────────────────────── */


body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-size: var(--t-body);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* Sitewide link default — without this, any <a> not covered by a more specific
   selector below falls back to the browser's UA stylesheet, which paints
   visited links purple (`a:visited { color: purple }`) regardless of the
   site's own palette. Author styles always beat UA styles, so this alone
   fixes every unstyled link on the site; more specific selectors elsewhere
   (`.cat-crumbs a`, `.about-page a`, etc.) still win by specificity and are
   unaffected.
   `:visited` is wrapped in :where() (2026-09-25) so it adds no specificity.
   As a bare `a:visited` (0,1,1) it outranked every single-class link colour
   (.btn-primary, .home-btn--primary at 0,1,0), so any button whose href had
   been visited repainted its label orange -- on the amber hero button, orange
   on amber. `a` alone already beats the UA's purple, since author styles win. */
a, :where(a:visited) { color: var(--orange); }
a:hover, a:focus-visible { color: var(--orange); filter: var(--hover-lift); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 200;
  background: var(--amber);
  color: #01172B;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.skip-link:focus-visible { top: 10px; }


/* ACCESSIBILITY: keyboard focus visibility */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #E8872B;
  outline-offset: 2px;
}

/* Shortcut tooltips */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid rgba(232,135,43,0.4);
  color: var(--muted); font-size: var(--t-mini); font-family: monospace;
  white-space: nowrap; padding: 3px 7px; border-radius: var(--r-sm);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 200;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }

/* NAV */
nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* --bleed-pad, not --pad: the bar's background runs edge to edge, its contents
     stop at the same left/right edge as the page's --max container. Identical to
     --pad at and below 1252px. See tokens.css. */
  padding: 0 var(--bleed-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { display: block; height: 44px; width: auto; }
.nav-links {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 0;
  height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav-hamburger,
.nav-mobile-panel,
.nav-noscript { display: none; }

.nav-link {
  font-family: var(--fd);
  font-weight: 400;
  font-size: var(--t-strong);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sub);
  padding: 0 13px;
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: transparent; }
.nav-link.active {
  color: var(--orange);
  border-bottom: 1px solid var(--orange);
}
.nav-link:focus-visible { color: var(--text); outline: 2px solid #E8872B; outline-offset: 2px; }

.nav-user {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.nav-user:hover { border-color: var(--orange); color: var(--orange); }
.nav-user:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Decision disclosures. The trigger names the decision directly; the panel carries
   its useful destinations. Buttons follow the WAI disclosure-navigation pattern. */
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-trigger {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  gap: 2px;
}
.nav-item.active > .nav-trigger { color: var(--orange); border-bottom-color: var(--orange); }
.nav-caret { flex-shrink: 0; opacity: 0.5; transition: transform 0.15s, opacity 0.15s; }
.nav-item.open > .nav-trigger .nav-caret { transform: rotate(180deg); opacity: 0.9; }

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 292px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
  box-shadow: var(--shadow-2);
  padding: 7px;
  z-index: 200;
}
/* `.open` is the only thing that shows a menu, and only the nav script sets it.
   Hover and focus deliberately do not appear here, so visual and ARIA state cannot
   disagree. Pointer and keyboard users both activate the disclosure button. */
.nav-item.has-menu.open .nav-menu { display: block; }

.nav-menu-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 7px 8px 10px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.nav-menu-head .trr-icon { flex-shrink: 0; opacity: 0.85; color: var(--orange); }
a.nav-menu-head:hover { color: var(--orange); }
/* Group label rather than a link. */
.nav-menu-head.is-label { color: var(--muted); cursor: default; }
.nav-menu-tile + .nav-menu-head { margin-top: 14px; }

.nav-menu.is-wide { min-width: 336px; }
.nav-menu.is-tracked { width: min(650px, calc(100vw - (2 * var(--pad)))); }
.nav-menu.is-end { left: auto; right: 0; }

.nav-track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.nav-track {
  min-width: 0;
  padding: 2px;
}
.nav-track-label {
  display: block;
  padding: 4px 8px 7px;
  font-family: var(--fm);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-menu-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.nav-menu-tile + .nav-menu-tile { margin-top: 2px; }
a.nav-menu-tile:hover { background: var(--surface); border-color: var(--c-border); }
a.nav-menu-tile:hover .nav-menu-tile-title { color: var(--c); }
.nav-menu-tile[aria-current="page"] .nav-menu-tile-title { color: var(--c); }
/* Coming-soon row: rendered as a <span>, so it is already unfocusable and
   unclickable — this is appearance only, not the thing that disables it. */
.nav-menu-tile.is-soon { opacity: 0.5; }
.nav-menu-tile-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-dim);
  color: var(--c);
  flex-shrink: 0;
}
.nav-menu-tile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-menu-tile-title {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--t-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
}
.nav-menu-tile-sub {
  font-family: var(--fb);
  font-size: var(--t-mini);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.35;
}
.nav-menu-tile-flag {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--c);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

.trr-ad-slot {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.trr-ad-slot:not(:empty) {
  padding: 8px var(--bleed-pad);
  border-bottom: 1px solid var(--border);
}

/* Navigation collapses at 1099px, moved up from 899px on 2026-09-17. This remains
   separate from the 760px content breakpoint.

   899 was measured against a shorter set of decision labels and went stale as they
   grew. The desktop bar's intrinsic width is now 1034px -- 81px logo + 824px links
   (NCAA Basketball 209, Hall of Fame 169, The Academy Awards 249, Guides 108,
   About 87) + 81px sign-in + a 48px gutter -- so every width from 900 to 1044
   rendered the full bar and then overflowed it, by up to 110px at 900px. That is
   the whole of check:overflow's long-standing failure, and it had been failing on
   main, which also meant prep:deploy could not pass its own gate.

   1100 is the ladder's existing "wide desktop" rung rather than a sixth number,
   and it leaves 66px of headroom, so the next label change does not silently
   reopen this. The cost is that 1024x768 landscape tablets now get the hamburger;
   that is strictly better than the broken bar they got before, and tightening
   .nav-link padding enough to fit 1034px into 1000px would have cost every width
   a squeezed nav to save one band.

   site-nav.html's matchMedia('(min-width: 1100px)') is the other half of this
   pair and must move with it -- the script uses it to decide whether the
   disclosure menus or the mobile panel are in play. */
@media (max-width: 1099px) {
  .site-nav {
    height: auto;
    min-height: 66px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
  }

  .nav-logo { padding: 8px 0; }

  .nav-links--desktop { display: none; }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 8px;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }
  .nav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--muted);
    border-radius: var(--r-sm);
    transition: background 0.15s, transform 0.2s, opacity 0.15s;
  }
  .nav-hamburger:hover span { background: var(--text); }
  nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--text); }
  nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--text); }

  .nav-mobile-panel {
    display: block;
    width: 100%;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    padding: 8px 0 14px;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
  }
  .nav-mobile-panel[hidden] { display: none; }
  .nav-mobile-primary,
  .nav-mobile-decision-link,
  .nav-mobile-sublinks a {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    text-decoration: none;
  }
  .nav-mobile-primary,
  .nav-mobile-decision-link {
    padding: 8px 12px;
    font-family: var(--fd);
    font-size: var(--t-strong);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text);
  }
  .nav-mobile-primary:hover,
  .nav-mobile-decision-link:hover,
  .nav-mobile-sublinks a:hover { background: var(--surface); }
  .nav-mobile-section-label,
  .nav-mobile-track-label {
    display: block;
    font-family: var(--fm);
    font-size: var(--t-mini);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .nav-mobile-section-label {
    margin: 8px 12px 3px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .nav-mobile-decision {
    padding: 2px 0 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  .nav-mobile-track-label { padding: 4px 22px 1px; }
  .nav-mobile-sublinks {
    display: flex;
    flex-wrap: wrap;
    padding: 0 14px 2px;
  }
  .nav-mobile-sublinks a {
    padding: 8px;
    color: var(--sub);
    font-size: var(--t-ui);
  }
  .nav-mobile-sublinks a + a::before {
    content: "/";
    margin-right: 16px;
    color: var(--border);
  }
  .nav-mobile-panel a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
  }

  .nav-user {
    min-height: 44px;
    margin-left: 2px;
    padding: 5px 9px;
    font-size: var(--t-label);
  }
}

.nav-noscript {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-left: auto;
}
.nav-noscript a { color: var(--sub); text-decoration: none; font-size: var(--t-ui); }
.nav-noscript a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .nav-caret,
  .nav-hamburger span { transition: none; }
}

/* IN-CATEGORY WAYFINDING — _includes/category-nav.html
   Breadcrumb + the 01/02/03 pillar rail, on every page below a category hub. */
.cat-nav {
  /* The bare `nav {}` element rule above styles the sticky site header, and it also
     matches this element. Reset every property it sets, or the three rows collapse
     onto one 66px-tall sticky flex line. */
  display: block;
  height: auto;
  position: static;
  background: transparent;
  border-bottom: none;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad) 0;
  box-sizing: border-box;
}

.cat-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--fm);
  font-size: var(--t-meta);
  color: var(--muted);
}
.cat-crumbs li { display: flex; align-items: center; gap: 7px; }
.cat-crumbs li + li::before { content: "/"; color: var(--border); }
.cat-crumbs a { color: var(--muted); text-decoration: none; }
.cat-crumbs a:hover { color: var(--orange); }
.cat-crumbs li[aria-current="page"] { color: var(--sub); }

.cat-track-chooser {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 10px;
  font-size: var(--t-ui);
}
.cat-track-chooser > span {
  margin-right: 2px;
  font-family: var(--fm);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.cat-track-chooser a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--sub);
  text-decoration: none;
}
.cat-track-chooser a:hover { border-color: var(--guide-border); color: var(--text); }

.cat-rail { display: flex; gap: 8px; }
.cat-rail-step {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 13px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.cat-rail-step:hover { border-top-color: var(--c, var(--orange)); background: var(--surface); }
.cat-rail-step.current {
  border-top-color: var(--c, var(--orange));
  background: var(--surface);
}
.cat-rail-step.soon { cursor: default; opacity: 0.62; }
.cat-rail-num {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-label);
  color: var(--muted);
  flex-shrink: 0;
}
.cat-rail-step.current .cat-rail-num { color: var(--c, var(--orange)); }
.cat-rail-title {
  font-family: var(--fb);
  font-size: var(--t-ui);
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-rail-step.current .cat-rail-title { color: var(--text); font-weight: 600; }
.cat-rail-soon {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--fd);
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .cat-rail { flex-wrap: wrap; }
  .cat-rail-step { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .cat-nav { padding: 14px 16px 0; }
  .cat-rail-title { white-space: normal; }
  .cat-track-chooser { align-items: stretch; flex-wrap: wrap; }
  .cat-track-chooser > span { width: 100%; }
  .cat-track-chooser a { min-height: 44px; }
}

/* BUTTONS — Soft Amber system */
/* .btn-orange was a byte-for-byte copy of .btn-primary except for 4px of
   horizontal padding and inline-block vs inline-flex. Two names, one button.
   Grouped rather than renamed so no markup has to move; the shared geometry
   (14px 24px, --r-md, --t-ui, 0.04em) is now the house button, and .home-btn
   below was realigned to it. */
.btn-primary,
.btn-orange {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--t-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--amber);
  color: #01172B;
  border: none;
  padding: 14px var(--s-5);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter .15s;
}
.btn-primary:hover,
.btn-orange:hover { filter: var(--hover-lift); }
/* The sitewide `a:hover, a:focus-visible` rule (0,1,1) would otherwise paint
   an <a class="btn-primary"> label orange on its own amber fill. */
.btn-primary:hover, .btn-primary:focus-visible,
.btn-orange:hover, .btn-orange:focus-visible { color: #01172B; }

.btn-ghost {
  font-family: var(--fd);
  font-weight: 500;
  font-size: var(--t-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--card);
  color: var(--text);
  border: 1px solid #14365F;
  padding: 14px var(--s-5);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.btn-ghost:hover { border-color: var(--amber); }

/* HOME SECTIONS */
.home-section {
  padding: var(--s-6) var(--pad);
  max-width: var(--max);
  margin-inline: auto;
}

.home-divider {
  height: 1px;
  background: var(--border);
  margin: 0 var(--pad);
}

.section-label {
  font-family: var(--fd);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.home-section-footnote { margin-top: 16px; font-size: var(--t-ui); }
.home-section-footnote a { color: var(--sub); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.home-section-footnote a:hover { color: var(--orange); }

.home-proof-lede { margin: -8px 0 24px; font-size: var(--t-read); color: var(--sub); max-width: 640px; }

/* HUB CARDS */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hub-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--c, var(--orange));
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.hub-card:hover { border-color: var(--c-border, rgba(255,119,4,0.4)); transform: translateY(-3px); }
.hub-card.featured { border-top-width: 3px; }
.hub-card.soon { opacity: 0.5; pointer-events: none; }

/* Decorative descending ticks in top-right corner */
.hc-ticks {
  position: absolute;
  top: 14px; right: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  opacity: 0.28; pointer-events: none;
}
.hc-ticks span { height: 2px; background: var(--c, var(--orange)); border-radius: var(--r-sm); display: block; }
.hc-ticks span:nth-child(1) { width: 20px; }
.hc-ticks span:nth-child(2) { width: 13px; }
.hc-ticks span:nth-child(3) { width: 7px; }

.hc-top { padding: 22px 20px 16px; flex: 1; }

.hc-label {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  color: var(--sub);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.hc-label::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--c, var(--amber));
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.hc-cat {
  margin-left: auto;
  font-family: var(--fm);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c, var(--orange));
}

.hc-title {
  font-family: var(--fb);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 9px;
}

.hc-subtext {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--t-meta);
  color: var(--c, var(--orange));
  margin-bottom: 9px;
}

.hc-desc {
  font-size: var(--t-body);
  color: var(--sub);
  line-height: 1.6;
}

.hc-bottom {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Chevron direction utilities — the "chevron" icon in _data/icons.yml (and
   IconChevron in studio-kit/src/icons.jsx) always points right; every other
   direction is this same glyph rotated, never a redrawn path, so they can
   never visually drift apart. */
.trr-icon-left { transform: rotate(180deg); }
.trr-icon-up { transform: rotate(-90deg); }
.trr-icon-down { transform: rotate(90deg); }

/* Pillar 01/02 hero "back to category" link — icon replaces the old literal ← */
.cat-back-link { display: inline-flex; align-items: center; gap: 4px; }

.hc-cta {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c, var(--orange));
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hc-cta .trr-icon { flex-shrink: 0; }

.hc-cta.soon-cta { color: var(--muted); }

.hc-badge {
  font-family: var(--fd);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.05em;
  background: var(--c-dim, rgba(232,135,43,0.13));
  border: 1px solid var(--c-border, rgba(232,135,43,0.3));
  color: var(--c, var(--amber));
  padding: 3px 9px;
  border-radius: var(--r-sm);
}
.hc-badge.dim { background: var(--surface); border-color: var(--border); color: var(--sub); }

/* GUIDE COVER PANELS — the "book cover" band on guide-card includes
   (guide-cover.html). One consistent system: a tinted panel, a low-opacity
   type-specific pattern, a soft glow seated behind the icon, and one solid-fill
   motif anchored at the same corner offset on every type, so the six templates
   read as one family instead of six one-off icons. gc-defs (guide-cover-defs.html)
   holds every gc-pattern's zero-size defs. */
.gc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.gc-cover {
  position: relative;
  height: 116px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 85% at 88% 96%, var(--c-dim, var(--guide-dim)), transparent 60%),
    linear-gradient(160deg, var(--c-dim, var(--guide-dim)), var(--card) 74%);
  border-bottom: 1px solid var(--c-border, var(--guide-border));
}
.gc-pattern {
  position: absolute; inset: 0; width: 100%; height: 100%;
  stroke: var(--c, var(--guide)); fill: var(--c, var(--guide)); opacity: 0.16;
}
.gc-motif {
  position: absolute; right: 14px; bottom: 10px; width: 56px; height: 56px;
  fill: var(--c, var(--guide)); stroke: var(--c, var(--guide));
}
.gc-tag {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--fm); font-weight: 700; font-size: var(--t-mini);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--c, var(--guide));
  background: var(--card); padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border, var(--guide-border));
}
/* A card carrying a gc-cover no longer needs hc-top's full top padding, or the
   small hc-icon/hc-label it replaces — those are dropped from the markup, not
   just hidden, on every card that includes guide-cover.html. */
.gc-card .hc-top { padding-top: 16px; }

/* ABOUT STRIP */
.about-wrap {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 8px;
}

.about-strip {
  max-width: var(--max);
  margin-inline: auto;
  padding: 32px var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

.about-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--r-circle);
  background: radial-gradient(circle at 35% 30%, #0A2E58 0%, var(--navy) 100%);
  border: 2px solid rgba(255,119,4,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.about-avatar img { width: 68%; height: 68%; object-fit: contain; }

/* Team-colored initials badge (HoF player stand-in for a photo -- see
   hofTeamBadgeHtml() in pro-football-hof/hof-shared.js for why there's no
   real headshot). Same circular-frame convention as .about-avatar, sized down
   and with the image swapped for a two-letter initials label. */
.hof-team-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-circle);
  border: 1.5px solid;
  font-family: var(--fb);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.about-text { flex: 1; }
.about-name { font-family: var(--fb); font-weight: 700; font-size: var(--t-lede); color: var(--text); margin-bottom: 4px; }
.about-bio { font-size: var(--t-strong); color: var(--sub); line-height: 1.6; max-width: 700px; }

.about-link {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
  text-decoration: none;
  margin-left: auto;
  flex-shrink: 0;
}

/* DATA NOTE */
.data-note {
  max-width: var(--max);
  margin-inline: auto;
  padding: 16px var(--pad) 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: var(--t-label);
  letter-spacing: 0.01em;
  color: var(--sub);
}
.data-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--live);
  flex-shrink: 0;
  position: relative;
}
.data-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--r-circle);
  border: 1px solid var(--live);
  opacity: 0;
  animation: data-pulse 1.8s ease-out infinite;
}
.data-dot.idle { background: var(--muted); }
.data-dot.idle::after { display: none; }
@keyframes data-pulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

/* DATA SOURCES FOOTER STRIP — replaces the old three stacked .data-note lines,
   which had inconsistent padding-top between them and read as a layout bug. */
.data-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--pad) 56px;
}
.data-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
.data-footer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: var(--t-label);
  letter-spacing: 0.01em;
  color: var(--sub);
  padding: 0 18px;
  border-right: 1px solid var(--border);
}
.data-footer-item:last-child { border-right: none; }
@media (max-width: 760px) {
  .data-footer-row { flex-direction: column; gap: 10px; }
  .data-footer-item { border-right: none; padding: 0; }
}

/* HOME — PILLAR PATH EXPLAINER
   Generic 3-step walkthrough of the Learn/Model/Make-the-Call path every
   category page uses, so a first-time visitor understands the site's
   structure once instead of re-learning it on each category hub. */
.home-pillars { padding-top: 8px; padding-bottom: 8px; }
.home-pillar-strip { display: flex; align-items: stretch; gap: 0; }
.home-pillar-step{
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--c, var(--orange));
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.home-pillar-num {
  font-family: var(--fm);
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--c, var(--orange));
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.home-pillar-title {
  font-family: var(--fb);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--text);
  margin-bottom: 7px;
}
.home-pillar-desc { font-size: var(--t-body); color: var(--sub); line-height: 1.6; }
.home-pillar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  color: var(--muted);
  font-size: var(--t-read);
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .home-pillar-strip { flex-direction: column; gap: 10px; }
  .home-pillar-arrow { width: auto; height: 10px; transform: rotate(90deg); }
}

/* Next-up strip — nearest calendar entry, any category, computed live in index.html. */
.home-next-up {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  text-decoration: none; transition: border-color .15s;
}
.home-next-up:hover { border-color: var(--guide); }
.home-next-up-label {
  font-family: var(--fb); font-size: var(--t-label); font-weight: 700; color: var(--guide);
  text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0;
}
.home-next-up-when { font-family: var(--fm); font-size: var(--t-ui); color: var(--text); flex-shrink: 0; }
.home-next-up-what { font-size: var(--t-ui); color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-next-up-cta { font-size: var(--t-ui); font-weight: 600; color: var(--orange); margin-left: auto; flex-shrink: 0; }
@media (max-width: 600px) {
  .home-next-up { flex-wrap: wrap; }
  .home-next-up-what { white-space: normal; }
  .home-next-up-cta { margin-left: 0; }
}

/* HOME — LIVE PROOF STRIP
   Reuses the trr-badges.js data-trr-badge mechanism (assets/js/trr-badges.js)
   already powering the category forecast pages and model guides, so these
   numbers can never drift independently from the model's own methodology
   payload. Blue (--projection) matches that pillar's accent everywhere else. */
.home-proof { padding-top: 8px; }
.home-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.home-stat-card {
  background: var(--card);
  padding: 20px 20px 18px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.home-stat-card:hover { background: var(--surface); }
.home-stat-val {
  font-family: var(--fm);
  font-size: 22px;
  font-weight: 700;
  color: var(--projection);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.home-stat-val .unit { font-size: var(--t-body); color: var(--sub); font-weight: 500; margin-left: 2px; }
.home-stat-label { font-family: var(--fd); font-size: var(--t-ui); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); margin-top: 9px; }
.home-stat-sub { font-size: var(--t-meta); color: var(--muted); margin-top: 3px; }
.home-stat-extra { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.home-stat-extra-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--t-meta); }
.home-stat-extra-row span { color: var(--muted); }
.home-stat-extra-row strong { font-family: var(--fm); color: var(--sub); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .home-stat-strip { grid-template-columns: 1fr; } }

/* PAGE HEADER */
.page-header {
  border-bottom: 1px solid var(--border);
}
.page-header-inner {
  padding: var(--s-6) var(--pad) var(--s-5);
  max-width: var(--max);
  margin-inline: auto;
}
.page-header-inner h1 {
  font-family: var(--fe);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.05;
  margin-bottom: 8px;
  color: var(--text);
}
.page-header-inner h1 span { color: var(--orange); }
.page-header-inner p { font-size: var(--t-read); color: var(--sub); max-width: 540px; }

/* SCORE BAR */
.score-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.score-bar-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 24px var(--pad);
  display: flex;
  align-items: center;
}
.score-main {
  padding-right: 36px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.score-num {
  font-family: var(--fm);
  font-weight: 700;
  font-size: 40px;
  color: var(--orange);
  line-height: 1;
}
.score-label {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
  margin-top: 3px;
}
.score-stats { display: flex; flex: 1; }
.ss {
  padding: 0 32px;
  border-right: 1px solid var(--border);
}
.ss:last-child { border-right: none; }
.ss-num {
  font-family: var(--fm);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 3px;
}
.ss-num.g { color: var(--ok); }
.ss-num.b { color: #60A5FA; }
.ss-num.a { color: #FBBF24; }
.ss-num.w { color: var(--text); }
.ss-label { font-size: var(--t-label); color: var(--sub); line-height: 1.4; }

/* ERA NOTE */
/* These two shared a hard 1100px while everything above them on /scorecard/ --
   breadcrumb, pillar row, page header, score bar -- sits at --max, so the board
   read as inset from its own page. The 1100 was never measured against the seed
   grid (nothing in the grid breaks at any width between 1100 and 1360); it was
   just an older cap that the rest of the page outgrew. Riding --max puts the
   board on the page's one spine and gives each of the four team columns the
   width its longer names wanted. */
.era-note {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px var(--pad) 0;
  font-size: var(--t-meta);
  color: var(--sub);
  font-style: italic;
  opacity: 0.75;
}

/* BRACKET */
.bracket-wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding: 36px var(--pad);
}
.bracket-layout { display: flex; gap: 28px; align-items: flex-start; }
.bracket-layout .bracket-grid { flex: 1; min-width: 0; margin-bottom: 0; }
.bubble-sidebar { flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.bracket-grid { display: flex; flex-direction: column; gap: 5px; margin-bottom: 28px; }

.seed-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s;
}
.seed-group:hover { border-color: rgba(255,119,4,0.2); }

.seed-num {
  width: 26px; height: 26px; min-width: 26px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-weight: 700; font-size: var(--t-meta);
  color: #fff; margin-top: 2px;
}
.s1{background:#E8872B} .s2{background:#D07828} .s3{background:#4A6FA5} .s4{background:#3D5E8C}
.s5{background:#3D5E8C} .s6{background:#304D73} .s7{background:#304D73} .s8{background:#2A4060}
.s9{background:#2A4060} .s10{background:#254060} .s11{background:#6B4A2A} .s12{background:#6B4A2A}
.s13{background:#555} .s14{background:#555} .s15{background:#484848} .s16{background:#3A3A3A}

/* A seed line always reads as a balanced block -- one full row, or rows of
   equal length. `auto-fit` used to decide the column count from the container
   alone, which broke the standard four-team line into 3 + 1 and an eight-team
   Opening Round line into 3 + 3 + 2. Two rules replace it: a fixed column
   budget per breakpoint (how many cells fit without truncating a team name --
   the widest .team-row is ~152px: logo, longest name, scorecard result chip),
   and the per-line-size overrides inside each step, which spread the teams over
   the fewest rows that fit and then split them evenly across those rows. Same
   rule the Studio and Bracket View apply to their own seed lines --
   studio-kit/src/ui.jsx's balancedColumns() and the copy of it in
   bracket/view/src/app.jsx. Keep the three in sync.

   These thresholds assume .bracket-layout has already stacked its bubble
   sidebar (1060px below) -- while the sidebar sits alongside, the line is only
   ~540px wide and four cells do not fit. */
.seed-teams-col {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 12px;
}
/* Line sizes 4 columns would leave ragged: 3 -> 3 across, 5 -> 3+2, 6 -> 3+3. */
.seed-teams-col:has(> :nth-child(3):last-child),
.seed-teams-col:has(> :nth-child(5):last-child),
.seed-teams-col:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seed-teams-col:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seed-teams-col:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

.team-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.team-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.team-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.team-name { font-family: var(--fb); font-weight: 700; font-size: var(--t-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.result {
  font-family: var(--fd);
  font-weight: 500;
  font-size: var(--t-label);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
/* Win/loss shape (check/x) comes from .wl-win/.wl-loss; round-reached color
   comes from .r6/.r4/.r3 -- the two are independent (a loss can happen in
   any round), so the icon is a currentColor mask, not a background swap. */
.result::before {
  content: "";
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: var(--muted);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.wl-win::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
}
.wl-loss::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.r6::before { background: var(--ok); }
.r4::before { background: #60A5FA; }
.r3::before { background: #FBBF24; }

/* BUBBLE SECTION */
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.bubble-card{ padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); }
.bubble-label {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bubble-label svg { flex-shrink: 0; }
.bubble-teams { display: flex; flex-direction: column; gap: 6px; }
.bubble-team { display: flex; align-items: center; gap: 6px; font-family: var(--fb); font-weight: 700; font-size: var(--t-ui); color: var(--text); line-height: 1.5; }
.bubble-team .team-logo { width: 16px; height: 16px; }
.last-four-in .bubble-label { color: #E8872B; }
.first-four-out .bubble-label { color: #8B4444; }
.next-four-out .bubble-label { color: #6B3A3A; }
.third-four-out .bubble-label { color: var(--sub); }

@media (max-width: 1060px) {
  .bracket-layout { flex-direction: column; }
  .bubble-sidebar { flex: 1 1 auto; width: 100%; }
}
/* Column budget drops rather than squeezing team names. The balance rule holds
   at every step: four teams read 4 across, then 2 + 2, then four single lines
   -- never 3 + 1. */
@media (max-width: 760px) {
  .seed-teams-col,
  .seed-teams-col:has(> :nth-child(3):last-child),
  .seed-teams-col:has(> :nth-child(5):last-child),
  .seed-teams-col:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .seed-teams-col,
  .seed-teams-col:has(> :nth-child(2):last-child),
  .seed-teams-col:has(> :nth-child(3):last-child),
  .seed-teams-col:has(> :nth-child(5):last-child),
  .seed-teams-col:has(> :nth-child(6):last-child) { grid-template-columns: minmax(0, 1fr); }
}
}

/* PREDICTIONS PAGE TYPOGRAPHY OVERRIDES */
/* Team names stay at --t-ui here. They were bumped to --t-strong (15px), which
   is wider than a quarter of a seed line -- the names truncated, and the row
   could only fit three columns, which is what forced the standard four-team
   line into a ragged 3 + 1. */
.predictions-page .result { font-size: var(--t-ui); }
.predictions-page .ss-num { font-size: 24px; }
.predictions-page .ss-label { font-size: var(--t-ui); }
.predictions-page .score-label { font-size: var(--t-meta); }
.predictions-page .bubble-label { font-size: var(--t-meta); }
.predictions-page .bubble-team { font-size: var(--t-strong); line-height: 1.7; }
.predictions-page .bubble-team .team-logo { width: 18px; height: 18px; }
.predictions-page .section-label { font-size: var(--t-ui); }

/* ABOUT PAGE */
/* Measure. The old 740px at 15px ran about 90 characters a line, well past what
   prose wants. `ch` is the width of "0", which in Space Grotesk is narrower than
   the font's average character, so this reads wider than the number suggests:
   82ch lands at roughly 600px and about 69 characters. Tied to font size rather
   than fixed in px so it tracks if the prose step moves. */
.about-page { max-width: 82ch; padding: var(--s-6) var(--pad); }
.about-page h2 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: var(--t-h2);
  text-transform: uppercase;
  color: var(--text);
  margin: 40px 0 10px;
}
.about-page h2:first-child { margin-top: 0; }
.about-page p { font-size: var(--t-read); color: var(--sub); line-height: 1.75; margin-bottom: 8px; }
/* Prose links had no rule at all, so they rendered as browser-default blue on /about/
   and every guide. Orange is the site's interactive color; --guide stays a category
   identity color used by the stat/section chrome, not by inline links. */
.about-page a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(255,119,4,0.32); transition: border-color .15s; }
.about-page a:hover { border-bottom-color: var(--orange); }
.about-page a.btn-primary { color: #01172B; border-bottom: none; margin-top: 8px; }
.about-page li { font-size: var(--t-read); color: var(--sub); line-height: 1.75; }
.about-page ul, .about-page ol { padding-left: 1.4rem; margin-bottom: 10px; }
.about-page h3 { font-family: var(--fd); font-weight: 600; font-size: var(--t-h3); text-transform: uppercase; color: var(--text); margin: 28px 0 8px; }
.about-page strong { color: var(--text); }

/* GUIDES — SHARED COMPONENT KIT
   Reusable across every /guides/ page. Signature accent is --guide (var(--ok)),
   already reserved for the Guides pillar in the hub-card category colors but
   otherwise unused — a stat block should read as "Guide" on sight. Which of
   these four leads is driven by guide type (methodology/how-to/current-cycle/
   glossary), not category — category only changes which icons/numbers show.
   --guide-dim/--guide-border are already defined in :root's hub-card colors. */

/* 1. Stat Strip — 2-4 live numbers up top */
.guide-stat-strip {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 28px;
}
.guide-stat-card { background: var(--card); padding: 20px 20px 18px; }
.guide-stat-val { font-family: var(--fm); font-size: 24px; font-weight: 700; color: var(--guide); line-height: 1; font-variant-numeric: tabular-nums; }
.guide-stat-val .unit { font-size: var(--t-strong); color: var(--sub); font-weight: 500; margin-left: 2px; }
.guide-stat-label { font-family: var(--fd); font-size: var(--t-ui); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); margin-top: 8px; }
.guide-stat-sub { font-size: var(--t-meta); color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) { .guide-stat-strip { grid-template-columns: 1fr; } }

/* 2. Step Pipeline — numbered sequence, reuses hub-card icon style */
.guide-pipeline { display: flex; align-items: stretch; gap: 0; margin: 8px 0 28px; }
.guide-step{ flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); }
.guide-step-num { font-family: var(--fm); font-size: var(--t-label); color: var(--guide); letter-spacing: 0.06em; margin-bottom: 10px; }
.guide-step-icon { width: 26px; height: 26px; color: var(--guide); margin-bottom: 10px; }
.guide-step-icon svg { width: 100%; height: 100%; }
.guide-step-title { font-family: var(--fd); font-size: var(--t-read); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px; }
.guide-step-desc { font-size: var(--t-body); color: var(--sub); line-height: 1.6; }
.guide-step-arrow { display: flex; align-items: center; justify-content: center; width: 24px; color: var(--muted); font-size: var(--t-read); flex-shrink: 0; }
@media (max-width: 700px) {
  .guide-pipeline { flex-direction: column; }
  .guide-step-arrow { width: auto; height: 20px; transform: rotate(90deg); }
}
/* Add .stacked when the pipeline sits inside the 740px .about-page prose column
   rather than a full-width container like .meth-page. Five steps across 740px
   leaves ~100px each and 400px-tall cards; stacked stays readable at any width. */
.guide-pipeline.stacked { flex-direction: column; }
.guide-pipeline.stacked .guide-step-arrow { width: auto; height: 20px; transform: rotate(90deg); }

/* 3. Inline Stat Callout — single number pulled out of prose */
.guide-inline-stat {
  display: flex; align-items: baseline; gap: 14px;
  border-left: 3px solid var(--guide); background: var(--guide-dim);
  padding: 12px 18px; border-radius: 0 4px 4px 0; margin: 18px 0;
}
.guide-inline-stat-num { font-family: var(--fm); font-size: 26px; font-weight: 700; color: var(--guide); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guide-inline-stat-label { font-size: var(--t-ui); color: var(--text); line-height: 1.5; }

/* 4. Icon Section Divider — quiet graphic break for reference-dense pages */
.guide-icon-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.guide-icon-head .guide-icon { width: 22px; height: 22px; color: var(--guide); flex-shrink: 0; }
.guide-icon-head .guide-icon svg { width: 100%; height: 100%; }
.guide-icon-head h3 { font-family: var(--fd); font-size: var(--t-h3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

/* 5. Reference Table — process/criteria tables on the "how it really works" guides.
   Stacks to label-over-value cards on phones so a 4-column quad table stays readable. */
.guide-table { border-collapse: collapse; width: 100%; margin: 18px 0 10px; font-size: var(--t-body); }
.guide-table th, .guide-table td { border: 1px solid var(--border); padding: 9px 14px; text-align: left; vertical-align: top; }
.guide-table thead tr { background: var(--card); color: var(--text); font-family: var(--fd); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--t-ui); }
.guide-table tbody tr { background: var(--surface); }
.guide-table tbody td { color: var(--sub); line-height: 1.6; }
.guide-table tbody td:first-child { color: var(--guide); font-family: var(--fm); font-size: var(--t-ui); white-space: nowrap; }
@media (max-width: 640px) {
  .guide-table, .guide-table thead, .guide-table tbody, .guide-table tr, .guide-table th, .guide-table td { display: block; width: 100%; }
  .guide-table thead { display: none; }
  .guide-table tbody tr { margin-bottom: 10px; border: 1px solid var(--border); }
  .guide-table tbody td { border: none; }
  .guide-table tbody td:first-child { padding-bottom: 0; white-space: normal; }
}

/* 6. Gap Note — where a real date/parameter isn't published yet. Deliberately quiet;
   the point is to admit the hole rather than let an estimate read as fact. */
.guide-note { font-size: var(--t-body); color: var(--muted); line-height: 1.7; border-left: 2px solid var(--border); padding-left: 14px; margin: 16px 0 8px; }

/* FOOTER */
footer {
  border-top: 1px solid var(--border);
  padding: 36px var(--bleed-pad) 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 48px;
  font-size: var(--t-label);
  color: var(--sub);
  margin-top: auto;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-logo {
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
.footer-tagline {
  font-size: var(--t-meta);
  color: var(--sub);
  line-height: 1.5;
  max-width: 300px;
}
.footer-copyright {
  font-size: var(--t-label);
  color: var(--muted);
  margin-top: 4px;
}
.footer-nav {
  /* The bare `nav {}` element rule above styles the sticky site header, and it also
     matches this footer <nav>. Reset every property it sets, or the nav-group
     columns get clipped to a 66px-tall sticky line and overflow into the disclaimer
     below (see the identical .cat-nav reset and its comment, higher in this file). */
  position: static;
  background: transparent;
  border-bottom: none;
  top: auto;
  z-index: auto;
  display: flex;
  height: auto;
  gap: 36px;
  align-items: flex-start;
  justify-content: flex-start;
}
.footer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav-label {
  font-family: var(--fd);
  font-weight: 500;
  font-size: var(--t-mini);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.footer-nav-link {
  color: var(--sub);
  text-decoration: none;
  font-size: var(--t-meta);
  transition: color .15s;
}
.footer-nav-link:hover { color: var(--text); }
.footer-disclaimer {
  grid-column: 1 / -1;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
  color: var(--muted);
  font-size: var(--t-label);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1200px) {


  .card-grid { grid-template-columns: 1fr; }

  .score-bar-inner {
    gap: 18px;
    align-items: flex-start;
  }
  .score-main { padding-right: 24px; }
  .ss { padding: 0 22px; }

  .about-strip {
    gap: 18px;
    align-items: flex-start;
  }
}

@media (max-width: 900px) {


  .card-grid { grid-template-columns: 1fr; }

  .score-bar-inner {
    flex-direction: column;
    gap: 14px;
  }
  .score-main {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 10px;
    width: 100%;
  }
  .score-stats {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .ss {
    padding: 0 16px;
    min-width: 140px;
  }
  .ss:first-child { padding-left: 0; }

  .about-strip {
    gap: 14px;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {


  .card-grid { grid-template-columns: 1fr; }

  .score-bar-inner { gap: 12px; }
  .score-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ss {
    border-right: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    min-width: 0;
  }

  .about-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .about-link { margin-left: 0; }
}

@media (max-width: 480px) {


  .card-grid { grid-template-columns: 1fr; }

  .score-bar-inner {
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 10px;
  }
  .score-stats { grid-template-columns: 1fr; }
  .score-num { font-size: 34px; }
  .ss { padding: 8px 10px; }

  .about-strip {
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 8px;
  }
  .about-name { font-size: var(--t-strong); }

  footer {
    grid-template-columns: 1fr;
  }
  .footer-nav {
    gap: 24px;
  }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* COOKIE NOTICE */
#cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-meta);
  color: var(--sub);
  z-index: 999;
  flex-wrap: wrap;
}
#cookie-notice a { color: var(--orange); }
#cookie-notice-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#cookie-notice button {
  background: var(--amber);
  border: none;
  color: #01172B;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  min-height: 32px;
}
#cookie-notice button.cookie-decline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--sub);
}

/* ── Screen-reader-only ──────────────────────────────────────────────────────
   For a heading that has to exist for the document outline and a11y navigation
   but would be visual noise on the page — see the homepage forecast band, whose
   three cards already name themselves. The clip/clip-path pair is the standard
   recipe: display:none and visibility:hidden would take it out of the a11y tree
   too, which is the one thing this must not do. */
.trr-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Upgrade CTA below ad slots ─────────────────────────────────────────── */
.trr-upgrade-cta {
  margin: 4px 0 0;
  text-align: right;
  font-family: var(--fb);
  font-size: var(--t-label);
}
.trr-upgrade-cta a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.trr-upgrade-cta a:hover { color: var(--orange); }

/* ── Upgrade / pricing page ─────────────────────────────────────────────── */
.upgrade-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.upgrade-success {
  background: #0e3a1a;
  border: 1px solid #1a6630;
  color: #6ee68e;
  font-family: var(--fb);
  font-size: var(--t-body);
  padding: 12px 20px;
  border-radius: var(--r-md);
  margin-bottom: 32px;
}

.upgrade-hero { text-align: center; margin-bottom: 48px; }
.upgrade-headline {
  font-family: var(--fd);
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0 0 12px;
}
.upgrade-sub {
  font-family: var(--fb);
  font-size: var(--t-read);
  color: var(--sub);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.upgrade-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.upgrade-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  flex: 1 1 260px;
  max-width: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upgrade-card--featured {
  border-color: var(--orange);
  box-shadow: var(--ring);
}

.upgrade-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #01172B;
  font-family: var(--fd);
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.upgrade-card-badge--secondary {
  background: var(--navy);
  border: 1px solid var(--border);
  color: var(--sub);
}

.upgrade-card-label {
  font-family: var(--fd);
  font-size: var(--t-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.upgrade-card-price {
  font-family: var(--fd);
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.upgrade-card-period {
  font-family: var(--fb);
  font-size: var(--t-meta);
  color: var(--muted);
  margin-bottom: 8px;
}

.upgrade-card-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-card-perks li {
  font-family: var(--fb);
  font-size: var(--t-ui);
  color: var(--sub);
  padding-left: 18px;
  position: relative;
}
.upgrade-card-perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: var(--t-meta);
}

.upgrade-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--navy);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--fd);
  font-size: var(--t-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-top: auto;
}
.upgrade-btn:hover { background: #0d3575; border-color: var(--orange); }
.upgrade-btn--featured {
  background: var(--amber);
  border-color: var(--amber);
  color: #01172B;
}
.upgrade-btn--featured:hover { filter: var(--hover-lift); }
.upgrade-btn--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--sub);
  max-width: 240px;
  margin: 0 auto;
}
.upgrade-btn--secondary:hover { border-color: var(--orange); color: var(--text); }
.upgrade-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.upgrade-paid {
  text-align: center;
  padding: 40px 0;
}
.upgrade-paid-msg {
  font-family: var(--fb);
  font-size: var(--t-read);
  color: var(--sub);
  margin-bottom: 20px;
}

.upgrade-fine-print {
  text-align: center;
  font-family: var(--fb);
  font-size: var(--t-meta);
  color: var(--muted);
  margin-top: 24px;
  line-height: 1.7;
}
.upgrade-fine-print a { color: var(--muted); text-decoration: underline; }

.upgrade-compare-wrap {
  margin-bottom: 28px;
}
.upgrade-compare {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.upgrade-compare col.upgrade-compare-row-label-col { width: 30%; }
.upgrade-compare th,
.upgrade-compare td {
  font-family: var(--fb);
  font-size: var(--t-ui);
  color: var(--sub);
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  word-wrap: break-word;
  line-height: 1.35;
}
.upgrade-compare thead th {
  font-family: var(--fd);
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 16px;
  position: relative;
}
.upgrade-compare-row-label {
  text-align: left;
  font-family: var(--fb);
  font-weight: 600;
  color: var(--text);
  font-size: var(--t-ui);
}
.upgrade-compare tbody tr:last-child th,
.upgrade-compare tbody tr:last-child td { border-bottom: none; }
.upgrade-compare-pro-col {
  background: rgba(255, 122, 0, 0.06);
  color: var(--text);
  font-weight: 600;
}
.upgrade-compare thead .upgrade-compare-pro-col {
  background: var(--amber);
  color: #01172B;
}

.upgrade-pro-picker {
  max-width: 480px;
  margin: 0 auto 40px;
}
.upgrade-billing-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.upgrade-billing-opt {
  flex: 1 1 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.upgrade-billing-opt--active {
  border-color: var(--orange);
  box-shadow: var(--ring);
}
.upgrade-billing-opt-badge {
  position: absolute;
  top: -10px;
  background: var(--amber);
  color: #01172B;
  font-family: var(--fd);
  font-size: var(--t-mini);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.upgrade-billing-opt-badge--secondary {
  background: var(--navy);
  border: 1px solid var(--border);
  color: var(--sub);
}
.upgrade-billing-opt-label {
  font-family: var(--fd);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 8px;
}
.upgrade-billing-opt-price {
  font-family: var(--fd);
  font-size: var(--t-lede);
  font-weight: 700;
  color: var(--text);
}
.upgrade-billing-opt-period {
  font-family: var(--fb);
  font-size: var(--t-mini);
  color: var(--muted);
}

.account-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.account-signed-out {
  text-align: center;
  padding: 60px 0;
}
.account-signed-out p { color: var(--sub); margin-bottom: 20px; font-size: var(--t-read); }
.account-section{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: 24px;
}
.account-section--danger { border-color: #6b2424; }

.account-section-label {
  font-family: var(--fd);
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 16px;
}

.account-profile { display: flex; align-items: center; gap: 16px; }
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--r-circle);
  border: 1px solid var(--border);
}
.account-name { font-family: var(--fb); font-size: var(--t-lede); font-weight: 700; color: var(--text); }
.account-email { font-family: var(--fb); font-size: var(--t-ui); color: var(--muted); }

.account-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account-plan-badge {
  font-family: var(--fd);
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--sub);
}
.account-plan-badge--paid { background: var(--amber); color: #01172B; }
.account-plan-detail { font-family: var(--fb); font-size: var(--t-ui); color: var(--sub); margin-top: 8px; }

.account-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--navy);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--fd);
  font-size: var(--t-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
.account-btn:hover { background: #0d3575; border-color: var(--orange); }
.account-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.account-btn--danger { background: transparent; border-color: #6b2424; color: #e07a7a; }
.account-btn--danger:hover { background: #2a0e0e; border-color: #a83b3b; color: #fff; }

.account-danger-text { font-family: var(--fb); font-size: var(--t-ui); color: var(--sub); margin-bottom: 16px; line-height: 1.6; }

.account-usage-row { font-family: var(--fb); font-size: var(--t-ui); color: var(--sub); margin-bottom: 12px; }
.account-slot-list { margin-bottom: 16px; }
.account-slot-row {
  font-family: var(--fb);
  font-size: var(--t-ui);
  color: var(--text);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.account-slot-row:last-child { border-bottom: none; }

.account-setting-intro{
  margin:0 0 var(--s-4);font-family:var(--fb);font-size:var(--t-body);
  line-height:1.6;color:var(--sub);
}
.account-decision-setting{scroll-margin-top:90px}
.account-decision-options{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);
  margin:0;padding:0;border:0;
}
.account-decision-option{position:relative;display:block;cursor:pointer}
.account-decision-option input{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;
}
.account-decision-option span{
  display:flex;min-height:72px;flex-direction:column;justify-content:center;gap:var(--s-1);
  padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);transition:border-color .15s ease,background-color .15s ease;
}
.account-decision-option strong{font-family:var(--fb);font-size:var(--t-body);color:var(--text)}
.account-decision-option small{font-family:var(--fm);font-size:var(--t-mini);color:var(--muted)}
.account-decision-option:hover span{border-color:var(--sub)}
.account-decision-option input:checked + span{border-color:var(--orange);background:rgba(255,119,4,.08)}
.account-decision-option input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.account-setting-status{margin-top:var(--s-3);font-family:var(--fm);font-size:var(--t-mini);color:var(--muted)}
@media(max-width:560px){.account-decision-options{grid-template-columns:1fr}}

/* Inline <code> carries identifiers with no natural break opportunity — the
   privacy page's utm_source/utm_medium/... run is one 200px+ unbreakable token,
   which pushed that page 207px past a 320px viewport until `npm run
   check:overflow` caught it. `anywhere` rather than break-all so a break is only
   taken when the line would otherwise overflow, and normal words are untouched.
   No other code styling exists sitewide; this is deliberately just the wrap. */
code { overflow-wrap: anywhere; }

/* ── The record band ──────────────────────────────────────────────────────────
   Pillar 02's track-record strip, at the top of each forecast page. Ported
   verbatim from the .cm-metric rules that lived in _includes/category-model.html
   so the tiles render exactly as they did on the deleted /<category>/model/
   pages -- this was a move, not a redesign.

   Uses the tokens rather than the literals it was written with: 24px -> --s-5,
   14px -> --s-3, 20px -> --s-4 + 4. The three half-pixel and bare sizes it
   carried (10.5px label, 11px sub, 14px lede, 32px value) stay literal for now;
   Stage 5 folds them into the type scale in one deliberate pass. */
.trr-record-band { padding: 32px var(--pad) 0; max-width: var(--max); margin: 0 auto; }
.trr-record-lede {
  font-size: 14px; color: var(--sub); max-width: 620px; margin: -8px 0 20px;
}
.trr-record-metrics { display: flex; }
.trr-record-metric { flex: 1; min-width: 0; padding: 0 var(--s-5); }
.trr-record-metric:first-child { padding-left: 0; }
.trr-record-metric:last-child { padding-right: 0; }
.trr-record-metric:not(:first-child) { border-left: 1px solid var(--border); }
.trr-record-metric-label {
  font-family: var(--fb); font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px;
}
.trr-record-metric-value {
  font-family: var(--fd); font-weight: 700; font-size: 32px; line-height: 1; color: var(--text);
}
.trr-record-metric-value.accent { color: var(--projection); }
.trr-record-metric-sub { font-family: var(--fm); font-size: 11px; color: var(--muted); margin-top: 5px; }
.trr-record-band .cm-chart { margin-top: var(--s-4); }
.trr-record-more { margin-top: var(--s-4); }
.trr-record-more a { color: var(--orange); text-decoration: none; font-weight: 600; font-size: var(--t-ui); }
.trr-record-more a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .trr-record-band { padding: var(--s-5) var(--s-4) 0; }
  .trr-record-metrics { flex-direction: column; }
  .trr-record-metric { padding: var(--s-3) 0; border-left: none; }
  .trr-record-metric:first-child { padding-top: 0; }
  .trr-record-metric:last-child { padding-bottom: 0; }
  .trr-record-metric:not(:first-child) { border-top: 1px solid var(--border); }
  .trr-record-metric-value { font-size: 26px; }
}

/* A four-tile record band stacked one-per-row (above) runs ~380px tall on a
   phone -- the tallest single block standing between the page header and
   /pro-football-hof/players/'s actual table. A 2x2 grid was tried first and
   reverted: at half the row width, "Real Hall of Famers that clear my bar"
   (the longest label) wraps three lines and the tiles end up taller than the
   single-column bar they replaced. Putting the label and value on one line
   instead -- full row width, so even the long label stays on one line --
   removes a whole line-height per tile without touching any metric's text. */
@media (max-width: 480px) {
  .trr-record-band { padding: var(--s-4) var(--s-4) 0; }
  .trr-record-lede { margin-bottom: var(--s-3); }
  .trr-record-metric { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) 0; }
  .trr-record-metric-label { margin-bottom: 0; }
  .trr-record-metric-value { font-size: 20px; }
  .trr-record-metric-sub { flex-basis: 100%; margin-top: 2px; }
  .trr-record-more { margin-top: var(--s-3); }
}

/* ── Shared text primitives ───────────────────────────────────────────────────
   Each of these existed two or three times, byte-identical, in different page
   <style> blocks -- the fingerprint of pages being designed one at a time and
   never compared. One definition each now.

   .trr-h1        replaced .osc-fc-h1 + .osc-hist-h1 -- a standalone page h1, for
                  pages that don't use the .page-header shell
   .trr-arrow-cta replaced .stat-strip-cta + .cal-shelf-cta, which were defined
                  69 lines apart in the SAME file (_includes/category-hub.html) */
.trr-h1 {
  font-family: var(--fe); font-weight: 600; font-size: var(--t-display);
  line-height: 1.05; color: var(--text); margin: 0 0 12px;
}
@media (max-width: 680px) { .trr-h1 { font-size: 26px; } }
.trr-arrow-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  color: var(--orange); font-weight: 600; font-size: 13px; text-decoration: none;
}
.trr-arrow-cta:hover { text-decoration: underline; }


/* The quiet normal timestamp: "Updated Sep 22", built by TRRDataStatus.stampHtml().
   Sits beside a stage pill (Oscars forecasts) or a section heading (HoF). */
.trr-updated-stamp {
  font-family: var(--fm); font-size: var(--t-label); font-weight: 400; letter-spacing: 0.04em;
  color: var(--muted); white-space: nowrap;
}

/* A quiet normal timestamp is enough most of the time. This notice renders only
   when the manifest says data is late, invalid, degraded, unavailable, or unreadable. */
.trr-data-notice {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: var(--r-md);
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.45;
}
.trr-data-notice strong { font-family: var(--fd); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.trr-data-notice--warn { color: #d88a2e; background: rgba(216,138,46,0.1); border-color: rgba(216,138,46,0.35); }
.trr-data-notice--error { color: #e07a7a; background: rgba(208,70,70,0.1); border-color: rgba(208,70,70,0.35); }

@media (max-width: 520px) {
  .trr-data-notice { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (max-width: 520px) {
  .upgrade-cards { flex-direction: column; align-items: center; }
.upgrade-card{ max-width: 100%; width: 100%; }
  .upgrade-compare th, .upgrade-compare td { padding: 10px 10px; font-size: var(--t-meta); }
  .upgrade-billing-toggle { flex-direction: column; }
  .upgrade-billing-opt-badge { position: static; margin-bottom: 4px; }
}

/* __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 */