@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/roboto-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/roboto-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/assets/fonts/robotomono-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/assets/fonts/robotomono-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/intertight-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/intertight-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/intertight-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/intertight-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/intertight-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/intertight-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/intertight-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/intertight-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/newsreader-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/newsreader-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-italic-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-italic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/newsreader-italic-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/newsreader-italic-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/pressstart2p-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/pressstart2p-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/newsreader-disp-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/newsreader-disp-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Antonio'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/antonio-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Antonio'; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/antonio-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/splinesansmono-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/splinesansmono-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/sourceserif4-italic-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/sourceserif4-italic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/sourceserif4-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/sourceserif4-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Power Play Units — one palette for the site and the morning email.
   The Sept 2026 editorial structure is unchanged — warm-paper serif
   headlines, mono data voice, hairlines, bright cards, one hard offset
   shadow. What changed (2 Sept 2026, owner's call) is the hue: the
   crimson and its pink tints did not read as hockey to the people the
   site is written for. The accent is now a rink navy, the paper is
   cooled a half-step so navy sits on it without fighting, and every
   surface that was already "dark" is honestly dark blue. Colour still
   only where it says something — the navy is the brand and the promotion
   arrow, never decoration about nothing. Every retired accent (crimson,
   lavender, marigold, sky, the five cast colours) resolves inside this
   palette so no old caller renders transparent. */
:root {
  --surface:       #f4f6f8;  /* the paper — every page, a cool off-white */
  --surface-alt:   #eaeef3;  /* row stripe, caption strips */
  --band:          #eaeef3;  /* alternating section band */
  --card:          #ffffff;  /* panels sit a step brighter than the paper */
  --chipbg:        #e3e9f0;  /* quiet chips */
  --ink:           #16202c;
  --ink-head:      #0d1826;  /* headings, masthead — near-black, serif */
  /* Text is black, full stop. Hierarchy is size and weight, never a grey
     ladder. Muted is the one exception and it clears AA on the paper. */
  --ink-secondary: #2c3846;
  --ink-muted:     #5a6672;
  --faint:         #5a6672;
  --dark:          #0d1b2a;  /* the midnight navy — masthead, ticker, footer,
                                bands, the PP1 box, the email head */
  --on-dark:       rgba(255,255,255,0.85);
  --on-dark-hi:    rgba(255,255,255,0.97);
  --hairline:      #d9e0e8;
  --line-soft:     #e5eaf0;
  --line-lite:     #e5eaf0;
  --line-ctl:      #b6c1cd;
  --disabled:      #95a0ad;
  --accent:        #1b4d89;  /* the rink blue — links, CTAs, the hot number */
  --accent-press:  #123a68;
  --accent-tint:   #eaf0f8;
  --accent-soft:   #d8e6f6;  /* the ONE fill: the column that matters */
  /* The accent reversed out of the navy block, where #1b4d89 would vanish.
     7.9:1 on --dark. */
  --accent-on-dark:#7fb3ea;
  --up:            #1b4d89;  /* a promotion is the headline — brand navy */
  --up-bg:         #eaf0f8;
  --up-line:       #c2d7ef;
  --down:          #5a6672;  /* a drop reads quiet, the glyph carries it */
  --down-bg:       #e7ebf0;
  --down-hot:      #0d1b2a;  /* the rule under the masthead */
  --neutral:       #5a6672;
  /* Retired accents, RE-mapped rather than collapsed. The deployment
     strip encodes PP1 / PP2 / no-PP-time by fill, so the three steps stay
     three distinguishable steps of one cool hue (L* .01 / .28 / .71),
     dark text legible on the light two. */
  --marigold:      #d3dce6;  /* pale — the lightest step, dark text on top */
  --marigold-tint: #eaeef3;
  --sky:           #7d93aa;  /* mid — the middle step */
  --cast-1: #0d1b2a; --cast-2: #1b4d89; --cast-3: #5a6672;
  --cast-4: #7d93aa; --cast-5: #a8b5c2;
  --font-ui: Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Cards are generously rounded per the brief; controls a step tighter. */
  --radius: 12px; --radius-s: 8px; --pill: 9999px;
  /* The brief's one shadow: hard, offset, never blurred. Ink under a
     button, accent under the card being sold. */
  --thrown-ink: 3px 3px 0 rgba(13,27,42,0.9);
  --thrown-accent: 6px 6px 0 var(--accent);
}
::selection { background: #d8e6f6; }

/* ---- reset, such as it is ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none;
    transition: color 200ms ease; }
a:hover { color: var(--accent-press); }
p a, li a { text-decoration: underline;
            text-decoration-color: rgba(27,77,137,0.40);
            text-underline-offset: 3px; }
p a:hover, li a:hover { text-decoration-color: currentColor; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent);
        color: #fff; padding: 10px 16px; z-index: 100;
        border-radius: 0 0 8px 0; }
.skip:focus { left: 0; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the ticker: the measured record, one line above the masthead -----
   Ticker and masthead are ONE navy block: the page opens on the brand
   colour, the paper starts under it. Nothing here moved — only the hue. */
.ticker { background: var(--dark);
          border-bottom: 1px solid rgba(255,255,255,0.13);
          font-family: var(--font-mono); font-size: 11px; font-weight: 500;
          letter-spacing: 0.14em; text-transform: uppercase;
          color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; }
.ticker .wrap { display: flex; flex-wrap: wrap; justify-content: center;
                gap: 6px 36px; padding-top: 10px; padding-bottom: 10px; }
.ticker .hot { color: var(--accent-on-dark); }
@media (max-width: 600px) { .ticker .wrap { gap: 4px 18px; } }

/* ---- the nav: navy glass, serif wordmark, one white button ------------ */
header.site { position: sticky; top: 0; z-index: 50;
              background: rgba(13,27,42,0.94);
              backdrop-filter: blur(12px);
              border-bottom: 1px solid var(--dark); }
header.site .wrap { display: flex; align-items: center; gap: 24px;
                    min-height: 64px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px;
         color: #ffffff; }
.brand:hover { color: #ffffff; }
.brand .bmark { display: none; }
.brand b { font-family: var(--font-display); font-size: 21px;
           font-weight: 700; letter-spacing: -0.015em;
           color: #ffffff; white-space: nowrap; }
.brand .btag { font-family: var(--font-mono); font-size: 10px;
               font-weight: 500; letter-spacing: 0.14em;
               text-transform: uppercase; color: rgba(255,255,255,0.62);
               white-space: nowrap; }
@media (max-width: 1250px) { .brand .btag { display: none; } }
nav.site { flex: 1; }
nav.site ul { display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
              list-style: none; margin: 0; padding: 0; }
nav.site a { display: block; padding: 8px 9px; font-size: 13.5px;
             font-weight: 500; color: rgba(255,255,255,0.88);
             white-space: nowrap; text-decoration: none; }
/* The accent is the page's link colour and it disappears on navy: up here
   the hover is white, which is the same promise one step brighter. */
nav.site a:hover { color: #ffffff; }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-cta .signin { color: rgba(255,255,255,0.88); font-size: 13.5px;
                   font-weight: 500; padding: 8px 8px; text-decoration: none;
                   white-space: nowrap; }
.nav-cta .signin:hover { color: #ffffff; }
/* The masthead CTA inverts: a navy button on a navy bar is not a button. */
.nav-cta .btn { background: #ffffff; color: var(--ink-head);
                box-shadow: 3px 3px 0 var(--accent); }
.nav-cta .btn:hover { background: var(--accent-tint); color: var(--ink-head);
                      box-shadow: 2px 2px 0 var(--accent); }

/* The mobile menu: a details element, zero JavaScript. */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; font-weight: 500;
                font-size: 14px; padding: 8px 16px; color: #ffffff;
                border: 1px solid rgba(255,255,255,0.38);
                border-radius: var(--pill); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav[open] summary { border-color: #ffffff; }
.mnav > ul { position: absolute; right: 0; top: calc(100% + 8px);
             min-width: 210px; background: var(--card);
             border: 1px solid var(--hairline);
             border-radius: var(--radius); padding: 8px; margin: 0;
             list-style: none; z-index: 55;
             box-shadow: 0 10px 28px -12px rgba(13,27,42,.2); }
.mnav li a { display: block; padding: 11px 14px; font-weight: 500;
             border-radius: 10px; font-size: 15px; color: var(--ink);
             text-decoration: none; }
.mnav li a:hover { background: var(--surface-alt); }
@media (max-width: 880px) {
  nav.site { display: none; }
  .mnav { display: block; margin-left: auto; }
  .nav-cta { margin-left: 0; }
  .nav-cta .signin { display: none; }
}
/* On a phone the hero's own crimson button is one scroll-height away;
   a four-line header button is noise, not a CTA. */
@media (max-width: 740px) { .nav-cta { display: none; } }

/* ---- buttons: crimson acts and throws a hard shadow ------------------- */
.btn, button {
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  padding: 12px 24px; cursor: pointer; display: inline-block;
  background: var(--accent); color: #ffffff;
  border: 0; border-radius: var(--radius-s); text-decoration: none;
  box-shadow: var(--thrown-ink);
  transition: background 160ms ease, transform 80ms ease,
              box-shadow 80ms ease;
}
.btn:hover, button:hover { background: var(--accent-press); color: #ffffff;
                           transform: translate(1px, 1px);
                           box-shadow: 2px 2px 0 rgba(13,27,42,0.9); }
.btn.s { padding: 9px 16px; font-size: 13.5px; }
.btn.big { padding: 15px 32px; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink);
             border: 1px solid var(--ink-head); box-shadow: none;
             transition: border-color 200ms ease, color 200ms ease; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent);
                   background: transparent; transform: none;
                   box-shadow: none; }
.btn.lav { background: var(--chipbg); color: var(--ink-head);
           box-shadow: none; }
.btn.lav:hover { background: var(--hairline); color: var(--ink-head);
                 transform: none; box-shadow: none; }
.btn.mar { background: #ffffff; color: var(--ink-head); box-shadow: none; }
.btn.mar:hover { background: var(--chipbg); color: var(--ink-head);
                 transform: none; box-shadow: none; }
/* A disabled button may not dress like a live one: no crimson, no thrown
   shadow, no press. */
.btn[disabled], button[disabled], .btn[disabled]:hover,
button[disabled]:hover {
  background: var(--chipbg); color: var(--ink-muted); box-shadow: none;
  transform: none; cursor: default;
}
.microline { font-size: 13px; color: var(--ink-muted); margin-top: 14px; }

/* ---- the footer: the navy block again, under a double rule --------------
   Masthead and footer bookend every page in the brand colour; the double
   rule that separated the footer from the paper is unchanged, drawn navy
   on navy with a hairline of paper between. */
footer.site {
  background: var(--dark); color: rgba(255,255,255,0.80);
  border-top: 1px solid var(--dark);
  box-shadow: 0 -4px 0 -3px var(--dark), 0 -5px 0 -3px var(--surface);
  margin-top: 100px; padding: 48px 0 36px; font-size: 14px;
}
footer.site a { color: rgba(255,255,255,0.80); text-decoration: none; }
footer.site a:hover { color: #ffffff; }
footer.site .cols { display: grid; gap: 32px;
                    grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 800px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
footer.site .fh { font-family: var(--font-mono); font-size: 11px;
                  font-weight: 500; letter-spacing: 0.14em;
                  text-transform: uppercase; color: rgba(255,255,255,0.58);
                  margin: 0 0 12px; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin: 0 0 8px; }
footer.site p { margin: 0 0 10px; max-width: 44ch; line-height: 1.55; }
footer.site .fbrand { display: flex; align-items: center; gap: 10px;
                      font-family: var(--font-display); font-size: 19px;
                      color: #ffffff; font-weight: 700;
                      margin-bottom: 14px; }
footer.site .fbrand .bmark { width: 26px; height: 26px;
                             border-radius: var(--pill);
                             background: #ffffff;
                             color: var(--dark); display: grid;
                             place-items: center; }
footer.site .fbrand .bmark svg { width: 14px; height: 14px; }
footer.site .stamp, footer.site .quality {
  font-size: 12.5px; color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums; }
/* .quality also renders on the paper (data-quality page); only the copy
   inside the footer reverses. */
.quality { font-size: 12.5px; color: var(--ink-muted);
           font-variant-numeric: tabular-nums; }
.quality a { color: var(--ink-muted); text-decoration: underline; }
footer.site .quality a { color: rgba(255,255,255,0.62);
                         text-decoration: underline; }
footer.site .bottom { border-top: 1px solid rgba(255,255,255,0.16);
                      margin-top: 36px; padding-top: 18px; }

/* ---- type: serif headlines, mono labels -------------------------------- */
h1 { font-family: var(--font-display); font-weight: 700;
     font-size: clamp(38px, 4.6vw, 56px); line-height: 1.05;
     letter-spacing: -0.02em; color: var(--ink-head);
     margin: 26px 0 12px; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 700;
     font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1;
     letter-spacing: -0.015em; color: var(--ink-head);
     margin: 48px 0 12px; text-wrap: balance; }
h3 { font-size: 16.5px; font-weight: 600; margin: 18px 0 6px;
     letter-spacing: -0.01em; }
h1 em, h2 em, .serif-em {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  letter-spacing: -0.01em;
}
p { margin: 0 0 10px; max-width: 72ch; }
.lede { font-size: 18px; color: var(--ink-secondary); line-height: 1.55;
        max-width: 560px; margin-bottom: 16px; text-wrap: pretty; }
.intro { font-family: var(--font-serif); font-weight: 400; font-size: 20px;
         line-height: 1.55; color: var(--ink); max-width: 640px; }
.intro.wide { max-width: 900px; }
.kicker, .eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  display: inline-block; margin-bottom: 14px;
}
.label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
/* Section titles are LARGE. The owner's words: "have all titles of
   sections LARGE!!! ... dont be timid". They render at the h2 scale;
   inside a capture card they step down so the card stays a card. */
.section-head { font-family: var(--font-display); font-weight: 700;
                font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1;
                letter-spacing: -0.015em; text-transform: none;
                color: var(--ink-head); margin: 48px 0 10px; }
.capture .section-head { font-size: 21px; letter-spacing: -0.01em; }
.phead h1 { margin: 0; }
.crumb { font-size: 12.5px; color: var(--ink-muted); margin: 16px 0 0; }
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

/* ---- the jersey-number circle: the site's only face -------------------- */
.jnum { border-radius: var(--pill); background: #ffffff; flex: none;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 600; color: var(--ink-head);
        font-variant-numeric: tabular-nums;
        width: 44px; height: 44px; font-size: 15px; border: 2px solid var(--cast-1); }
.jnum.c1 { border-color: var(--cast-1); } .jnum.c2 { border-color: var(--cast-2); }
.jnum.c3 { border-color: var(--cast-3); } .jnum.c4 { border-color: var(--cast-4); }
.jnum.c5 { border-color: var(--cast-5); }
.cast-row { display: flex; gap: 10px; align-items: center;
            margin-bottom: 26px; flex-wrap: wrap; }
.cast-row .jnum { width: 34px; height: 34px; font-size: 12px; }
.cast-row .eyebrow { margin: 0 0 0 6px; }

/* ---- the hero ---------------------------------------------------------- */
.hero-band { padding: 76px 0 0; display: grid; gap: 72px;
             grid-template-columns: 1.05fr 1fr; align-items: center; }
@media (max-width: 960px) { .hero-band { grid-template-columns: 1fr;
                                         gap: 32px; padding-top: 40px; } }
.hero-band h1 { font-size: clamp(44px, 5.5vw, 66px); line-height: 1.02;
                letter-spacing: -0.045em; margin: 0 0 22px; }
.hero-band .lede { margin: 0 0 34px; max-width: 500px; }
.hero-band .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-mock { position: relative; padding: 20px 0; }
.hero-mock .backer { position: absolute; top: 36px; right: -14px;
                     bottom: -10px; left: 36px;
                     background: var(--dark); border-radius: var(--radius);
                     transform: rotate(2.5deg); }
.hero-card { position: relative; background: var(--surface);
             border: 1px solid var(--hairline); border-radius: var(--radius);
             padding: 26px 26px 22px;
             box-shadow: 0 4px 24px rgba(13,27,42,0.08); }
.hero-card .hlabel { display: flex; align-items: baseline; gap: 16px;
                     justify-content: space-between; margin-bottom: 2px;
                     font-size: 11px; font-weight: 700;
                     letter-spacing: 0.1em; text-transform: uppercase;
                     color: var(--ink-head); }
.hero-card .hclub { font-size: 12px; font-weight: 600;
                    color: var(--ink-muted); }
.hero-card .htitle { font-size: 19px; font-weight: 600;
                     letter-spacing: -0.01em; }
.hero-card .hmeta { font-size: 13px; color: var(--ink-muted);
                    margin-bottom: 22px; }
.hero-card .hfoot { border-top: 1px solid var(--hairline); padding-top: 16px;
                    display: flex; align-items: flex-end;
                    justify-content: space-between; }
.hero-card .hstat { font-size: 30px; font-weight: 600;
                    letter-spacing: -0.02em; color: var(--ink-head);
                    font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-card .hsub, .hero-card .hside { font-size: 12px; color: var(--ink-muted);
                                      font-variant-numeric: tabular-nums; }

/* ---- accent stat cards: decoration with a number in it ------------------
   Each card carries a big self-drawn hockey glyph (rink, trend, clock,
   goal light) tucked into its corner -- our own line art, never league
   assets. */
.acards { margin-top: 76px; display: grid; gap: 16px;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.acard { border-radius: var(--radius); padding: 24px 26px;
         position: relative; overflow: hidden; }
.acard > div { position: relative; z-index: 1; }
.acard .ico { position: absolute; right: -18px; bottom: -24px;
              width: 130px; height: 130px; opacity: 0.5; z-index: 0;
              pointer-events: none; }
.acard.nvy .ico { opacity: 0.4; }
.acard .n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
            line-height: 1.1; margin-bottom: 8px;
            font-variant-numeric: tabular-nums; }
.acard .t { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.acard .s { font-size: 13px; line-height: 1.5; }
.acard.mar { background: var(--marigold); color: #16202c; }
.acard.mar .s { color: #16202c; }
.acard.sky { background: var(--sky); color: #16202c; }
.acard.sky .s { color: #16202c; }
.acard.lav { background: var(--chipbg); color: var(--ink-head); }
.acard.lav .s { color: var(--ink-head); }
.acard.nvy { background: var(--dark); color: #ffffff; }
.acard.nvy .s { color: rgba(255,255,255,0.88); }

/* ---- the split section: sticky editorial left, evidence right ---------- */
.split { display: grid; gap: 56px; align-items: start; margin: 100px 0 0;
         grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
/* Sticky is a wide-screen behaviour, and it is scoped that way rather than
   overridden back to static, because the override LOST once already: it sat
   in a max-width block ABOVE the base rule, equal specificity let the later
   `position: sticky` win at every width, and on phones the editorial panel
   rode down the page over the table. min-width scoping cannot lose to
   ordering. (Owner report, 24 Aug 2026.) */
@media (min-width: 901px) { .split > .lhs { position: sticky; top: 96px; } }
.split h2 { margin-top: 0; }
.tintcards { display: grid; gap: 12px; margin-top: 22px;
             grid-template-columns: 1fr 1fr; }
.tintcard { border-radius: var(--radius); padding: 18px 20px; }
.tintcard.lav { background: var(--chipbg); color: var(--ink-head); }
.tintcard.mar { background: var(--marigold-tint); color: #16202c; }
.tintcard .n { font-size: 24px; font-weight: 600;
               font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tintcard .s { font-size: 13px; line-height: 1.45; margin-top: 2px;
               color: inherit; }

/* ---- filter chips and tabs: radios, zero JavaScript -------------------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 22px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { background: var(--surface); color: var(--ink-secondary);
               border: 1px solid rgba(22,32,44,0.2); font-size: 13px;
               font-weight: 500; padding: 7px 16px; border-radius: var(--pill);
               cursor: pointer; transition: border-color 200ms ease,
               color 200ms ease; }
.chips label:hover { border-color: var(--accent); color: var(--accent); }
.chips input:checked + label { background: var(--accent); color: #ffffff;
                               border-color: var(--accent); }
body:has(#dv-atlantic:checked) [data-dv]:not([data-dv="atlantic"]),
body:has(#dv-metro:checked)    [data-dv]:not([data-dv="metro"]),
body:has(#dv-central:checked)  [data-dv]:not([data-dv="central"]),
body:has(#dv-pacific:checked)  [data-dv]:not([data-dv="pacific"]) {
  display: none;
}
body:has(#tab-least:checked) [data-tab="most"] { display: none; }
body:has(#tab-most:checked)  [data-tab="least"] { display: none; }

/* ---- CTA bands ---------------------------------------------------------- */
.band { border-radius: 20px; padding: 60px 68px; margin: 100px 0 0;
        display: grid; gap: 48px; grid-template-columns: 1fr 1fr;
        align-items: center; }
@media (max-width: 900px) { .band { grid-template-columns: 1fr;
                                    padding: 36px 28px; } }
.band.mar { background: var(--marigold); color: #16202c; }
.band.mar h2 { color: #16202c; margin: 0 0 10px; }
.band.mar p { color: #16202c; }
.band.nvy { background: var(--dark); color: #ffffff; }
.band.nvy h2 { color: #ffffff; margin: 0 0 10px; }
.band.nvy p { color: rgba(255,255,255,0.88); }
.band form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.mockup { background: var(--surface); border-radius: 12px; padding: 18px 20px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.1); color: var(--ink); }
.mockup .mh { font-size: 12px; color: var(--ink-muted); border-bottom:
              1px solid var(--hairline); padding-bottom: 10px;
              margin-bottom: 10px; line-height: 1.5; }
.mockup .mr { display: flex; align-items: center; gap: 10px;
              padding: 7px 0; font-size: 14px; }
.mockup .mr + .mr { border-top: 1px solid var(--line-soft); }

/* ---- move pills --------------------------------------------------------- */
.b-up, .b-down, .b-off { display: inline-block; border-radius: var(--pill);
                         padding: 3px 12px; font-size: 12px;
                         font-weight: 600; white-space: nowrap; }
.b-up { background: var(--chipbg); color: var(--accent); }
.b-down { background: rgba(22,32,44,0.07); color: var(--ink-secondary); }
.b-off { background: var(--down-bg); color: var(--down-hot); }
.io { font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      padding: 2px 10px; border-radius: var(--pill); margin-right: 6px; }
.io.in { background: var(--chipbg); color: var(--accent); }
.io.out { background: var(--down-bg); color: var(--down-hot);
          margin-left: 10px; }

/* ---- direction: hue AND glyph AND a signed number, always ------------- */
.dir { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dir .g { margin-right: 4px; }
.dir.up { color: var(--accent); }
.dir.down { color: var(--down); }
.dir.neutral { color: var(--neutral); }

/* ---- tables: white panels, hairline rows, quiet headers ---------------- */
.scroll { overflow: auto; max-height: 78vh; margin: 10px 0 6px;
          border: 1px solid var(--hairline); border-radius: var(--radius);
          background: var(--surface); }
thead th { position: sticky; top: 0; z-index: 4; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
caption { text-align: left; color: var(--ink-secondary); font-size: 13.5px;
          padding: 11px 22px; background: var(--surface);
          border-bottom: 1px solid var(--hairline); caption-side: top; }
th, td { padding: 11px 12px; text-align: right; white-space: nowrap;
         border-bottom: 1px solid var(--line-soft); }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
th.l, td.l, th:first-child, td:first-child { text-align: left; }
/* Text columns wrap instead of forcing the table wider than the page --
   nothing important may hide behind a sideways scroll. */
td.l { white-space: normal; }
/* The totals row lives in <thead>, directly under the labels, so each
   season figure sits exactly over the column it summarizes and a sort
   never moves it into the games. */
tr.totals td { font-weight: 700; font-size: 15px; color: var(--ink-head);
               background: var(--surface-alt);
               border-bottom: 2px solid var(--hairline);
               font-variant-numeric: tabular-nums; padding-top: 8px;
               padding-bottom: 8px; }
tr.totals td small { font-size: 10px; font-weight: 600; margin-left: 3px;
                     letter-spacing: 0.06em; text-transform: uppercase;
                     color: var(--ink-muted); }
thead th {
  font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); font-weight: 700;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  cursor: help;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-alt); }
td.num, th.num { font-variant-numeric: tabular-nums; }
table a { font-weight: 500; text-decoration: none; }
td .subnames { display: block; white-space: normal; max-width: 400px;
               font-size: 12.5px; font-weight: 400; line-height: 1.5;
               color: var(--ink-muted); }
td .subnames a { font-weight: 400; color: var(--ink-muted); }
td .subnames a:hover { color: var(--accent); }
.chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); background: var(--chipbg);
  border: 1px solid transparent; padding: 3px 8px; border-radius: 6px;
  display: inline-block;
}
/* Per-club chip colours land below via generated .chip.tc-XXX rules. */
/* Rows that say nothing about the units — no-PP zeros, DNP, unread. They
   are shown (hiding a game creates doubt) but muted, so the measured games
   stay the loudest thing in the log. */
tr.quiet td, tr.quiet td a { color: var(--ink-muted); }
tr.pp1 td { border-bottom: 2px solid rgba(22,32,44,0.2); }
tr.pp2 td { border-bottom: 1px solid var(--line-soft); }
tbody tr.pp1:last-child td, tbody tr.pp2:last-child td { border-bottom: 0; }

/* ---- sortable tables ---------------------------------------------------- */
thead th[data-sortable] { cursor: pointer; user-select: none; }
thead th[data-sortable]:hover { color: var(--accent); }
.ppu-tip { position: absolute; z-index: 60; max-width: 288px;
           background: var(--dark); color: #ffffff;
           font-size: 13px; line-height: 1.45; padding: 8px 12px;
           border-radius: var(--radius-s); pointer-events: none; }
.ppu-tip[hidden] { display: none; }
td.col-hot { background: var(--accent-soft); }
th.col-hot { color: var(--accent); }
thead th[data-sortable]::after { content: " ↕"; opacity: .5; }
thead th[aria-sort] { color: var(--accent); background: var(--accent-tint); }
thead th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
thead th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }

/* ---- the formation: five circles, drawn as they line up ---------------- */
.formations { display: grid; gap: 8px 28px; margin: 14px 0 6px;
              grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
@media (max-width: 470px) { .formations { grid-template-columns: 1fr; } }
.formations .formation { margin: 0; }
.formation { margin: 16px 0 10px; }
.formation header { display: flex; flex-wrap: wrap; align-items: baseline;
                    gap: 4px 14px; margin: 0 0 12px; }
.formation header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.formation .fmeas { font-size: 12px; font-weight: 500;
                    color: var(--faint);
                    font-variant-numeric: tabular-nums; }
.form-row { display: flex; flex-wrap: wrap; justify-content: center;
            gap: 12px 24px; list-style: none; margin: 0 0 16px; padding: 0; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 5px;
         width: 96px; text-align: center; text-decoration: none; }
.ptile:hover .pname { color: var(--accent); }
.pname { font-weight: 500; font-size: 13px; line-height: 1.2;
         color: var(--ink); min-height: 32px; }
.pmeta { font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
         text-transform: uppercase; color: var(--faint); }
.formation.mini .form-row { gap: 8px 12px; margin-bottom: 10px; }
.formation.mini .ptile { width: 76px; }
.formation.mini .jnum { width: 34px; height: 34px; font-size: 12.5px; }
.formation.mini .pname { font-size: 12px; min-height: 29px; }

/* ---- the board: club cards (Tonight) ----------------------------------- */
.board { display: grid; gap: 16px; margin: 22px 0;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.club-card { border: 1px solid var(--hairline); border-radius: var(--radius);
             padding: 18px 18px 16px; background: var(--surface);
             transition: border-color 200ms ease; }
.club-card:hover { border-color: rgba(22,32,44,0.3); }
/* The card's masthead: the club's 3-letter chip worn big, as the logo the
   brand rules forbid, and the full name at a scale that reads first. */
.club-card > h3 { display: flex; align-items: flex-start; gap: 10px;
                  margin: 0 0 6px; font-size: 19px; font-weight: 700;
                  letter-spacing: -0.01em; line-height: 1.2;
                  min-height: 46px; }
.club-card > h3 .chip { margin-top: 2px; }
.club-card > h3 .chip { font-size: 14px; padding: 5px 10px;
                        border-radius: 8px; }
.club-card > h3 a { color: var(--ink-head); text-decoration: none; }
.club-card > h3 a:hover { color: var(--accent); }
.club-card .pp2line { font-size: 12.5px; color: var(--ink-muted);
                      margin: 10px 0 0; line-height: 1.5;
                      display: -webkit-box; -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical; overflow: hidden; }
.club-card .pp2line .label { margin-right: 4px; }

/* ---- the league table row helpers (Home) -------------------------------- */
.inline-five { display: flex; flex-wrap: wrap; gap: 6px 12px;
               align-items: center; }
.inline-five .p { display: inline-flex; align-items: center; gap: 5px;
                  font-size: 13.5px; font-weight: 500; color: var(--ink);
                  text-decoration: none; white-space: nowrap; }
.inline-five .p:hover { color: var(--accent); }
.inline-five .n { width: 21px; height: 21px; border-radius: var(--pill);
                  background: rgba(22,32,44,0.08); color: var(--ink-head);
                  display: inline-flex; align-items: center;
                  justify-content: center; font-size: 10px; font-weight: 600;
                  font-variant-numeric: tabular-nums; flex: none; }

/* ---- the answer block --------------------------------------------------- */
.answer {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px 26px 16px; margin: 20px 0 8px;
}
.answer h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -0.015em; }
.answer p { max-width: 80ch; font-size: 15.5px; line-height: 1.55; }
.answer p:first-of-type { font-family: var(--font-serif); font-size: 18.5px;
                          line-height: 1.5; }
.answer a { font-weight: 500; }
.strip-facts { display: flex; flex-wrap: wrap; gap: 14px 0;
               margin: 20px 0 2px; padding: 0; list-style: none; }
.strip-facts > li { min-width: 110px; padding: 0 28px 0 0; margin-right: 28px;
                    border-right: 1px solid var(--hairline); }
.strip-facts > li:last-child { border-right: 0; }
.strip-facts .v { font-family: var(--font-ui); font-weight: 600;
                  font-size: 24px; line-height: 1.15; display: block;
                  color: var(--ink-head);
                  font-variant-numeric: tabular-nums;
                  letter-spacing: -0.015em; }

/* ---- stat tiles (form section) ----------------------------------------- */
.tile .k { display: block; font-size: 11px; font-weight: 600;
           letter-spacing: 0.08em; text-transform: uppercase;
           color: var(--ink-muted); margin: 0 0 4px; }
.tile .v { display: block; font-family: var(--font-ui); font-weight: 600;
           font-size: 30px; line-height: 1.05; color: var(--ink-head);
           font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile .v small { font-family: var(--font-ui); font-size: 11px;
                 font-weight: 600; letter-spacing: 0.06em;
                 text-transform: uppercase; color: var(--faint); }
.tile .d { display: block; font-size: 13.5px; margin-top: 3px;
           color: var(--ink-secondary); }
.spark { width: 100%; max-width: 220px; height: 36px; display: block;
         margin-top: 8px; }
.spark polyline { fill: none; stroke: #93a6bb;
                  stroke-width: 2; stroke-linejoin: round;
                  stroke-linecap: round; }
.spark circle { fill: var(--accent); }

/* ---- the one chart: season boxes ----------------------------------------
   Five states, five colours a reader tells apart at a glance -- the owner's
   call: navy on PP1, sky on PP2, marigold for dressed-but-off-the-units,
   an outline for a night with no power play, warm red for not dressed.
   A .gap cell is the seam where the playoffs start. */
.deploy { display: flex; gap: 3px; align-items: stretch; flex-wrap: wrap;
          margin: 10px 0 6px; }
.deploy span { flex: none; width: 13px; height: 13px; border-radius: 3px; }
.deploy .u1 { background: var(--dark); }
.deploy .u2 { background: var(--sky); }
.deploy .u0 { background: var(--marigold); }
.deploy .no { background: #ffffff; border: 1px solid rgba(22,32,44,0.35); }
.deploy .ab { background: var(--down-bg);
              border: 1px solid rgba(90,102,114,0.55); }
/* A game the engine could not read: neither played nor missed — unknown.
   Drawn as an empty dashed box so it cannot be mistaken for a decision. */
.deploy .nm { background: transparent;
              border: 1px dashed rgba(22,32,44,0.45); }
.deploy .gap { background: transparent; width: 7px; }
/* The seam between phases: a drawn dash, not empty air. */
.deploy .seam { background: transparent; width: 9px; height: 13px;
                border-radius: 0; position: relative; }
.deploy .seam::after { content: ""; position: absolute; left: 3px;
                       top: 5px; width: 3px; height: 3px; border-radius: 1px;
                       background: var(--ink); }
/* The strip's own dates, flanking the first and last box. */
.deploy .dedge { width: auto; height: auto; font-size: 10px;
                 font-weight: 600; color: var(--ink);
                 align-self: center; margin: 0 4px; white-space: nowrap;
                 font-variant-numeric: tabular-nums; }
.deploy-span { font-size: 12px; font-weight: 500;
               color: var(--ink); margin: 4px 0 2px;
               font-variant-numeric: tabular-nums; }
.deploy-key { display: flex; flex-wrap: wrap; gap: 6px 18px;
              font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
              text-transform: uppercase;
              color: var(--ink); margin: 0 0 8px;
              padding: 0; list-style: none; }
.deploy-key i { display: inline-block; width: 11px; height: 11px;
                border-radius: 3px; margin-right: 6px; vertical-align: -1px;
                border: 1px solid transparent; }
.deploy-key .u1 { background: var(--dark); }
.deploy-key .u2 { background: var(--sky); }
.deploy-key .u0 { background: var(--marigold); }
.deploy-key .no { background: #ffffff;
                  border-color: rgba(22,32,44,0.35); }
.deploy-key .ab { background: var(--down-bg);
                  border-color: rgba(90,102,114,0.55); }
.deploy-key .nm { background: transparent; border-style: dashed;
                  border-color: rgba(22,32,44,0.45); }

/* ---- the edition's per-skater breakdown --------------------------------
   One folded game per <details>. ~100 skater rows on a busy night, so it
   opens on demand and the movers above stay the lead. */
.ed-game { border-top: 1px solid var(--hairline); }
.ed-game > summary { list-style: none; cursor: pointer; padding: 16px 2px;
                     font-weight: 600; font-size: 16px;
                     color: var(--ink-head); display: flex;
                     align-items: baseline; gap: 14px; }
.ed-game > summary::-webkit-details-marker { display: none; }
.ed-game > summary::before { content: "+"; font-family: var(--font-mono);
                             color: var(--ink-muted); width: 12px;
                             flex: none; }
.ed-game[open] > summary::before { content: "‘2"; }
.ed-game > summary:hover { color: var(--accent); }
.ed-game .ed-n { margin-left: auto; font-family: var(--font-mono);
                 font-size: 12.5px; font-weight: 400;
                 color: var(--ink-muted);
                 font-variant-numeric: tabular-nums; }
.ed-club { display: flex; align-items: baseline; gap: 10px;
           margin: 22px 0 8px; font-size: 15px; }
.ed-club span { font-family: var(--font-mono); font-size: 12.5px;
                font-weight: 400; color: var(--ink-muted);
                font-variant-numeric: tabular-nums; }
.ed-game > *:last-child { margin-bottom: 22px; }
/* An unknown comparison, which is NOT a direction: no hue, no glyph, no
   signed number. A skater on his first game on a unit has nothing to be
   compared with, and printing "0:00" or a bare coloured dash would both
   claim he held station. */
.nodelta { color: var(--ink-muted); cursor: help; }

/* ---- the photo layer ----------------------------------------------------
   Committed Pexels photography (no NHL marks in frame). Rounded like the
   cards, cropped by the box, never stretching a page sideways. */
.photo { display: block; width: 100%; object-fit: cover;
         border-radius: var(--radius); }
.photo-banner { height: 240px; margin: 18px 0 8px; }
img.px.photo-banner { display: block; width: 100%; height: 200px;
                      object-fit: cover; object-position: center 62%;
                      border-radius: var(--radius);
                      border: 1px solid var(--hairline); }
.photo-strip { display: grid; gap: 14px; margin: 76px 0 0;
               grid-template-columns: 2fr 1fr 1fr; }
.photo-strip .photo { height: 280px; margin: 0; }
@media (max-width: 800px) { .photo-strip { grid-template-columns: 1fr; }
                            .photo-strip .photo { height: 200px; } }
.photo-side { height: 100%; min-height: 260px; }

/* ---- the regular-season / playoffs toggle ------------------------------- */
.scope-chips { margin: 18px 0 8px; }
body:has(#sc-po:checked) .sc-rs { display: none; }
body:has(#sc-rs:checked) .sc-po { display: none; }

/* ---- the bar chart (player form) ---------------------------------------- */
/* One row of minute labels along the top, one row of dates along the
   bottom, flat full-width bars growing from a shared baseline between
   them -- the owner's call over the ragged label-rides-its-bar layout. */
.bars { display: flex; gap: 8px; height: 170px; padding: 4px 4px 0; }
.bars .bar { flex: 1 1 0; min-width: 0; display: flex;
             flex-direction: column; align-items: center; height: 100%; }
.bars .bv { font-size: 11px; color: var(--ink-muted); height: 18px;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars .bfill { margin-top: auto; width: 100%; border-radius: 2px;
               max-height: calc(100% - 40px); background: #9db0c6; }
.bars .bar:last-child .bfill { background: var(--dark); }
/* One line, fixed height, never wrapping: a two-line "10 May" used to
   shrink that bar's track and break the shared baseline. */
.bars .bd { font-size: 10px; color: var(--faint); height: 15px;
            line-height: 15px; white-space: nowrap;
            font-variant-numeric: tabular-nums; }

/* ---- the fact strip (player header) -------------------------------------- */
.factstrip { display: flex; flex-wrap: wrap; margin: 22px 0 8px; padding: 0;
             list-style: none; border: 1px solid var(--hairline);
             border-radius: var(--radius); background: var(--surface); }
.factstrip > li { flex: 1 1 150px; padding: 16px 22px;
                  border-right: 1px solid var(--line-soft); }
.factstrip > li:last-child { border-right: 0; }
.factstrip .k { display: block; font-size: 11px; font-weight: 600;
                letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--ink-muted); margin-bottom: 4px; }
.factstrip .v { display: block; font-size: 22px; font-weight: 600;
                color: var(--ink-head); letter-spacing: -0.015em;
                font-variant-numeric: tabular-nums; line-height: 1.2; }

/* ---- accordions: details, zero JavaScript ------------------------------- */
.accord { border-top: 1px solid var(--hairline); }
.accord details { border-bottom: 1px solid var(--hairline); }
.accord summary { list-style: none; cursor: pointer; display: flex;
                  align-items: baseline; justify-content: space-between;
                  gap: 16px; padding: 16px 2px; font-size: 16.5px;
                  font-weight: 500; }
.accord summary::-webkit-details-marker { display: none; }
.accord summary::after { content: "+"; font-size: 20px; font-weight: 400;
                         color: var(--ink-muted); flex: none; }
.accord details[open] summary::after { content: "−"; }
.accord .ac-body { padding: 0 2px 18px; font-size: 15.5px;
                   color: var(--ink-secondary); max-width: 68ch;
                   line-height: 1.6; }

/* ---- cards, grids ------------------------------------------------------ */
.grid { display: grid; gap: 16px; margin: 14px 0;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { border: 1px solid var(--hairline); background: var(--surface);
        border-radius: var(--radius); padding: 20px; }
.card h3 { margin-top: 0; }
.teams { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0;
         list-style: none; }
.teams a { display: inline-block; padding: 6px 16px;
           border: 1px solid rgba(22,32,44,0.2); border-radius: var(--pill);
           font-size: 13px; font-weight: 500; text-decoration: none;
           color: var(--ink-secondary);
           transition: border-color 200ms ease, color 200ms ease; }
.teams a:hover { border-color: var(--accent); color: var(--accent); }
/* Watched clubs on the dashboard: chip + its own Remove, one row each. */
.teams li { display: inline-flex; align-items: center; gap: 6px; }
.teams li form button { padding: 4px 10px; font-size: 12px; }

/* ---- the answers hub ---------------------------------------------------- */
.qgrid { display: grid; gap: 16px; margin: 18px 0;
         grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.qcard { display: flex; flex-direction: column; gap: 8px;
         border: 1px solid var(--hairline); border-radius: var(--radius);
         padding: 22px; background: var(--surface); text-decoration: none;
         transition: border-color 200ms ease; }
.qcard:hover { border-color: rgba(22,32,44,0.35); color: var(--ink); }
.qcard h3 { margin: 0; font-weight: 600; font-size: 19px; line-height: 1.2;
            letter-spacing: -0.015em; color: var(--ink-head); }
.qstat { display: block; margin-top: 2px; }
.qstat b { display: block; font-family: var(--font-ui); font-weight: 600;
           font-size: 38px; line-height: 1; color: var(--ink-head);
           font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qstat .ql { display: block; font-size: 13px; color: var(--ink-secondary);
             margin-top: 4px; line-height: 1.45; }
.qwho { display: flex; align-items: center; gap: 8px; font-size: 13px;
        font-weight: 500; color: var(--ink-secondary); }
.qmore { margin-top: auto; padding-top: 8px; font-size: 13.5px;
         font-weight: 500; color: var(--accent); }

/* ---- capture, search ----------------------------------------------------- */
.capture { border: 1px solid var(--hairline); background: var(--surface);
           border-radius: var(--radius); padding: 26px 28px; margin: 34px 0; }
.capture .section-head { margin: 0 0 4px; }
.capture form { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.capture input[type=email], .capture input[type=search],
.band input[type=email], .search input[type=search] {
  font: inherit; font-size: 15px; padding: 11px 20px;
  border: 1px solid var(--line-ctl); border-radius: var(--pill);
  outline: none;
  background: var(--surface); color: var(--ink); min-width: 220px;
  flex: 1 1 220px;
}
.capture input:focus, .band input:focus, .search input:focus {
  border-color: var(--accent);
}
input::placeholder { color: #8d97a4; }

/* A unit status carried through absence: visible, quiet, explained. */
.held { display: inline-block; font-size: 9px; font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-muted); border: 1px solid var(--line-ctl);
        border-radius: 4px; padding: 1px 5px; vertical-align: 1px;
        cursor: help; }

/* The did-you-know strip: the hub's own cards, seeded per page. */
.sprinkle { margin: 90px 0 30px; }
.sprinkle h2 { display: flex; align-items: baseline; gap: 16px;
               flex-wrap: wrap; }
.sprinkle .sp-more { font-size: 14px; font-weight: 500; }

/* A compact page hero: eyebrow, title, one line, one strip. Best practice
   over decoration -- the content starts above the fold. */
.tight-hero { max-width: 760px; margin: 0 0 26px; }
.tight-hero h1 { margin: 6px 0 8px; }
.tight-hero .lede { margin: 0 0 10px; }

/* ---- article bylines ------------------------------------------------------ */
.byline { display: flex; align-items: center; gap: 10px;
          margin: 16px 0 6px; font-size: 14px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none;
          object-fit: cover; display: block; }
.avatar.mono { display: grid; place-items: center; background: var(--accent);
               color: #ffffff; font-size: 13px; font-weight: 700;
               letter-spacing: 0.04em; border: 0; box-shadow: none; }
.card .pubdate { font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
                 text-transform: uppercase; color: var(--ink-muted);
                 margin: 2px 0 6px; }

/* ---- the free-window banner (R7) ---------------------------------------- */
.fwban { background: var(--marigold); color: var(--dark);
         font-size: 13.5px; font-weight: 500; }
.fwban[hidden] { display: none; }
.fwban .wrap { display: flex; align-items: center; gap: 12px;
               padding-top: 8px; padding-bottom: 8px; }
.fwban a { color: var(--dark); font-weight: 700; white-space: nowrap; }
.fwban button { margin-left: auto; background: none; border: 0;
                font-size: 17px; line-height: 1; cursor: pointer;
                color: var(--dark); padding: 2px 6px; }

/* ---- offseason notes and the hero capture (R2/R3/R4) -------------------- */
.offseason-note { background: var(--accent-tint);
                  border: 1px solid var(--hairline);
                  border-radius: var(--radius-s); padding: 12px 16px;
                  font-size: 14px; line-height: 1.5; max-width: 760px;
                  margin: 10px 0 4px; }
.hero-capture { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0;
                max-width: 560px; }
.hero-capture input[type=email] {
  font: inherit; font-size: 15px; padding: 12px 20px; flex: 1 1 220px;
  border: 1px solid var(--line-ctl); border-radius: var(--pill);
  outline: none; background: var(--surface); color: var(--ink); }
.hero-capture input:focus { border-color: var(--accent); }

/* ---- the morning-email sample (R9) ---------------------------------------
   Dormant since R9 -- the component existed in this sheet with no markup
   emitting it. The landing page now prints a real edition through it
   (home._edition), so it grew the parts an edition actually has: a ranked
   row, the club chip, the move badge and the signed ice-time delta. The
   card is deliberately the EMAIL's proportions, not the site's: a 640px
   column on a white ground under a navy masthead strip, because the claim
   it is making is "this is what lands in your inbox". */
.email-sample { margin: 26px 0 18px; border: 1px solid var(--hairline);
                border-radius: var(--radius); background: var(--card);
                overflow: hidden; max-width: 640px;
                box-shadow: var(--thrown-accent); }
.email-sample .em-head { background: var(--dark); color: #ffffff;
                         font-family: var(--font-mono);
                         font-size: 11px; font-weight: 500;
                         letter-spacing: 0.14em; text-transform: uppercase;
                         padding: 12px 18px; display: flex;
                         justify-content: space-between; gap: 12px; }
.email-sample .em-sub { padding: 14px 18px 10px; font-size: 13px;
                        font-family: var(--font-mono);
                        letter-spacing: 0.04em; color: var(--ink-muted);
                        font-variant-numeric: tabular-nums; }
.email-sample .em-row { padding: 13px 18px; font-size: 14.5px;
                        line-height: 1.5; display: grid;
                        grid-template-columns: 20px 1fr auto auto;
                        align-items: baseline; gap: 4px 12px;
                        border-top: 1px solid var(--line-soft); }
.email-sample .em-rank { font-family: var(--font-mono); font-size: 12px;
                         color: var(--ink-muted);
                         font-variant-numeric: tabular-nums; }
.email-sample .em-body { min-width: 0; }
.email-sample .em-who { display: block; font-weight: 700;
                        color: var(--ink-head); }
.email-sample .em-who .chip { margin-left: 6px; vertical-align: 1px; }
.email-sample .em-what { display: block; font-size: 14px;
                         color: var(--ink-secondary); }
.email-sample .em-move { font-family: var(--font-mono); font-size: 11.5px;
                         font-weight: 500; letter-spacing: 0.06em;
                         white-space: nowrap; padding: 3px 9px;
                         border-radius: var(--pill); }
.email-sample .em-move.up { background: var(--up-bg); color: var(--up); }
.email-sample .em-move.down { background: var(--down-bg);
                              color: var(--ink-secondary); }
.email-sample .em-delta { font-family: var(--font-mono); font-size: 13.5px;
                          white-space: nowrap; color: var(--ink-head);
                          font-variant-numeric: tabular-nums; }
.email-sample .em-delta small { font-size: 10.5px; font-weight: 500;
                                letter-spacing: 0.08em;
                                color: var(--ink-muted); margin-left: 3px; }
.email-sample .em-foot { padding: 13px 18px 15px; font-size: 13px;
                         line-height: 1.5; color: var(--ink-muted);
                         border-top: 1px solid var(--hairline);
                         background: var(--surface); }
/* At phone width the rank gutter and the badge are the first things to go:
   the name, what changed and the delta are the row. */
@media (max-width: 560px) {
  .email-sample .em-row { grid-template-columns: 1fr auto; }
  .email-sample .em-rank { display: none; }
  .email-sample .em-move { grid-column: 1 / -1; justify-self: start;
                           margin-top: 2px; }
}
.capture .proof { font-size: 11.5px; letter-spacing: 0.04em;
                  text-transform: uppercase; color: var(--ink-muted); }
.photo.portrait { max-width: 220px; border-radius: var(--radius);
                  float: right; margin: 0 0 14px 22px; }
@media (max-width: 560px) { .photo.portrait { float: none; margin: 0 0 14px; } }

/* ---- the contact form (Web3Forms) --------------------------------------- */
.contact-form { display: block; max-width: 620px; }
.contact-form p { margin: 0 0 14px; }
.contact-form label { font-size: 12px; font-weight: 600;
                      letter-spacing: 0.06em; text-transform: uppercase;
                      color: var(--ink-muted); }
.contact-form input[type=text], .contact-form input[type=email],
.contact-form textarea {
  font: inherit; font-size: 15px; padding: 11px 16px; width: 100%;
  border: 1px solid var(--line-ctl); border-radius: var(--radius-s);
  outline: none; background: var(--surface); color: var(--ink);
  margin-top: 6px;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--accent);
}
/* The honeypot: invisible to people, present for bots. */
.contact-form .hp { position: absolute; left: -9999px; opacity: 0; }
.search { margin: 18px 0 8px; }
.search form { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- notes and disclosures ----------------------------------------------- */
.note { color: var(--ink-secondary); font-size: 14.5px; max-width: 72ch; }
.method-note { color: var(--ink-secondary); font-size: 14px; max-width: 72ch;
               margin: 8px 0 4px; line-height: 1.55; }
.preview {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  padding: 12px 18px; margin: 16px 0; font-size: 14.5px;
  background: var(--surface-alt);
}
.faq dt { font-weight: 600; margin: 18px 0 4px; }
.faq dd { margin: 0; max-width: 72ch; color: var(--ink-secondary); }

@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  h1 { font-size: 34px; }
  th, td { padding: 9px 9px; font-size: 13px; }
  th:first-child, td:first-child { padding-left: 14px; }
  th:last-child, td:last-child { padding-right: 14px; }
  .band { padding: 28px 20px; }
}

/* ==== the landing page (Sept 2026 brief) =================================
   Sections alternate paper and band; the band bleeds full-width from
   inside .wrap via the clip-path trick, so <main> needs no restructuring. */
.lp-sec { padding: 84px 0 0; }
.lp-sec.alt { background: var(--band); padding: 72px 0;
              box-shadow: 0 0 0 100vmax var(--band);
              clip-path: inset(0 -100vmax); }
/* a paper section has no bottom padding of its own, so without this its
   last line sits flush on the band that follows it */
.lp-sec:not(.alt) + .lp-sec.alt { margin-top: 72px; }
.lp-hero { display: grid; gap: 56px; grid-template-columns: 1.05fr 1fr;
           align-items: center; padding: 64px 0 72px; }
@media (max-width: 960px) { .lp-hero { grid-template-columns: 1fr;
                                       gap: 44px; padding: 36px 0 56px; } }
.lp-hero h1 { font-size: clamp(42px, 5.2vw, 60px); line-height: 1.03;
              margin: 0 0 20px; }
.lp-hero .lede { font-size: 19px; margin: 0 0 30px; max-width: 34em; }
.lp-cta-row { display: flex; align-items: center; gap: 12px 22px;
              flex-wrap: wrap; margin: 0 0 14px; }
.lp-alt { font-weight: 700; font-size: 15px; color: var(--ink);
          text-decoration: none; border-bottom: 3px solid var(--accent);
          padding-bottom: 4px; }
.lp-alt:hover { color: var(--accent); }
.lp-proof { display: flex; flex-wrap: wrap; gap: 8px 28px;
            margin: 26px 0 0; padding: 0; list-style: none;
            font-family: var(--font-mono); font-size: 12.5px;
            letter-spacing: 0.04em; color: var(--ink-muted);
            font-variant-numeric: tabular-nums; }

/* the hero art: the morning report drawn as the phone it lands on */
.lp-phone-wrap { position: relative; padding: 0 26px 40px 0; }
.lp-phone { background: var(--card); border: 3px solid var(--dark);
            border-radius: 26px; padding: 16px 18px 18px;
            box-shadow: 0 18px 40px -22px rgba(13,27,42,0.45);
            max-width: 440px; }
.lp-phone .ph-status { display: flex; justify-content: space-between;
                       font-family: var(--font-mono); font-size: 11px;
                       color: var(--ink-muted); margin-bottom: 14px; }
.lp-phone .ph-eyebrow { font-family: var(--font-mono); font-size: 10.5px;
                        letter-spacing: 0.12em; text-transform: uppercase;
                        color: var(--accent); margin-bottom: 4px; }
.lp-phone .ph-title { font-family: var(--font-display); font-weight: 700;
                      font-size: 20px; letter-spacing: -0.01em;
                      margin-bottom: 12px; color: var(--ink-head); }
.lp-move { border: 1px solid var(--hairline); border-radius: 10px;
           padding: 10px 14px 12px; margin-bottom: 10px;
           background: var(--surface); }
.lp-move.up { background: var(--up-bg); border-color: var(--up-line); }
.lp-move .mv-k { font-family: var(--font-mono); font-size: 10.5px;
                 letter-spacing: 0.1em; text-transform: uppercase;
                 color: var(--ink-muted); }
.lp-move.up .mv-k { color: var(--accent); }
.lp-move .mv-n { font-weight: 700; font-size: 15px; margin: 2px 0 1px; }
.lp-move .mv-s { font-size: 13px; color: var(--ink-secondary); }
.lp-phone .ph-foot { font-family: var(--font-mono); font-size: 11px;
                     color: var(--ink-muted); padding-top: 2px; }
.lp-stat { position: absolute; right: 0; bottom: 0; width: 230px;
           background: var(--card); border: 2px solid var(--ink-head);
           border-radius: var(--radius); padding: 14px 16px;
           box-shadow: var(--thrown-accent); }
.lp-stat .st-k { font-family: var(--font-mono); font-size: 10.5px;
                 letter-spacing: 0.12em; text-transform: uppercase;
                 color: var(--ink-muted); margin-bottom: 4px; }
.lp-stat .st-v { font-family: var(--font-mono); font-weight: 700;
                 font-size: 32px; line-height: 1.1; color: var(--accent);
                 font-variant-numeric: tabular-nums; }
.lp-stat .st-v small { font-size: 13px; font-weight: 500;
                       color: var(--ink-muted); }
.lp-stat .st-s { font-size: 12.5px; color: var(--ink-secondary);
                 margin-top: 2px; }
@media (max-width: 500px) { .lp-phone-wrap { padding: 0 0 40px 0; }
                            .lp-stat { right: -6px; width: 210px; } }

/* old way vs measured way */
.lp-vs { display: grid; gap: 24px; grid-template-columns: 1fr 1fr;
         margin-top: 34px; align-items: start; }
@media (max-width: 860px) { .lp-vs { grid-template-columns: 1fr; } }
.lp-vs-col { border: 1px solid var(--hairline); border-radius: var(--radius);
             background: var(--surface); padding: 26px 28px; }
.lp-vs-col.win { background: var(--card); border: 2px solid var(--ink-head);
                 box-shadow: var(--thrown-accent); }
.lp-vs-col h3 { font-family: var(--font-mono); font-size: 12px;
                font-weight: 500; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--ink-muted);
                margin: 0 0 14px; }
.lp-vs-col.win h3 { color: var(--accent); }
.lp-vs-col ul { list-style: none; margin: 0; padding: 0; }
.lp-vs-col li { padding: 10px 0; font-size: 15.5px; line-height: 1.5;
                border-top: 1px solid var(--line-soft); }
.lp-vs-col li:first-child { border-top: 0; padding-top: 0; }

/* the did-you-know trio: rule on top, mono number, one line */
.lp-know { display: grid; gap: 40px; grid-template-columns: 1fr 1fr 1fr;
           margin-top: 40px; }
@media (max-width: 860px) { .lp-know { grid-template-columns: 1fr;
                                       gap: 28px; } }
.lp-know-card { border-top: 3px solid var(--ink-head); padding-top: 16px; }
.lp-know-card .kk { font-family: var(--font-mono); font-size: 11px;
                    letter-spacing: 0.14em; text-transform: uppercase;
                    color: var(--ink-muted); margin-bottom: 10px; }
.lp-know-card .kv { font-family: var(--font-mono); font-weight: 700;
                    font-size: 46px; line-height: 1; color: var(--accent);
                    font-variant-numeric: tabular-nums;
                    letter-spacing: -0.02em; margin-bottom: 8px; }
.lp-know-card .ks { font-size: 14.5px; line-height: 1.5;
                    color: var(--ink-secondary); max-width: 34ch; }

/* pricing: one free thing, one paid thing, the paid one thrown forward */
.lp-prices { display: grid; gap: 30px; grid-template-columns: 1fr 1fr;
             margin-top: 40px; align-items: stretch; }
@media (max-width: 860px) { .lp-prices { grid-template-columns: 1fr; } }
.lp-price { border: 1px solid var(--hairline); border-radius: var(--radius);
            background: var(--surface); padding: 30px 30px 28px;
            display: flex; flex-direction: column; }
.lp-price.paid { background: var(--card); border: 2px solid var(--ink-head);
                 box-shadow: var(--thrown-accent); position: relative; }
.lp-price .pk { font-family: var(--font-mono); font-size: 12px;
                font-weight: 500; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--ink-muted);
                margin: 0; }
.lp-price.paid .pk { color: var(--accent); }
.lp-price .pv { font-family: var(--font-display); font-weight: 700;
                font-size: 46px; letter-spacing: -0.02em;
                color: var(--ink-head); margin: 8px 0 4px; }
.lp-price .pv .per { font-family: var(--font-ui); font-size: 16px;
                     font-weight: 400; letter-spacing: 0;
                     color: var(--ink-muted); }
.lp-price ul { list-style: none; margin: 10px 0 24px; padding: 0; }
.lp-price li { padding: 9px 0; font-size: 15px; line-height: 1.5;
               border-top: 1px solid var(--line-soft); }
.lp-price li:first-child { border-top: 0; }
.lp-price form, .lp-price .pcta { margin-top: auto; }
.lp-price form { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-price input[type=email] {
  font: inherit; font-size: 15px; padding: 11px 18px;
  border: 1px solid var(--line-ctl); border-radius: var(--radius-s);
  outline: none; background: var(--card); color: var(--ink);
  min-width: 200px; flex: 1 1 200px; }
.lp-price input:focus { border-color: var(--accent); }
.lp-flag { position: absolute; top: -14px; right: 22px;
           background: var(--accent); color: #ffffff;
           font-family: var(--font-mono); font-size: 11px; font-weight: 500;
           letter-spacing: 0.14em; text-transform: uppercase;
           border-radius: var(--pill); padding: 5px 14px; }

/* the on-this-page jump row: minted from the sections that rendered */
.toc { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
       margin: 24px 0 4px; }
.toc .toc-k { font-family: var(--font-mono); font-size: 11px;
              font-weight: 500; letter-spacing: 0.14em;
              text-transform: uppercase; color: var(--ink-muted);
              margin-right: 6px; }
.toc a { display: inline-block; padding: 7px 14px;
         border: 1px solid var(--line-ctl); border-radius: var(--pill);
         font-size: 13px; font-weight: 500; color: var(--ink-secondary);
         text-decoration: none;
         transition: border-color 200ms ease, color 200ms ease; }
.toc a:hover { border-color: var(--accent); color: var(--accent); }
/* A jump must not land the heading under the sticky masthead. */
h2[id] { scroll-margin-top: 96px; }

/* the free-preview band: the strongest offer, said at headline size */
.freeband { background: var(--accent-tint); border: 1px solid var(--up-line);
            border-radius: 10px; padding: 16px 20px 18px; margin: 0 0 16px; }
.freeband .fb-k { display: block; font-family: var(--font-mono);
                  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
                  text-transform: uppercase; color: var(--accent);
                  margin-bottom: 6px; }
.freeband .fb-v { display: block; font-family: var(--font-display);
                  font-weight: 700; font-size: clamp(24px, 2.6vw, 30px);
                  line-height: 1.15; letter-spacing: -0.015em;
                  color: var(--ink-head); }
.freeband .fb-s { display: block; font-size: 14px; line-height: 1.5;
                  color: var(--ink-secondary); margin-top: 6px; }

/* the FAQ: every answer visible, hairline-separated */
.lp-faq { max-width: 820px; margin-top: 10px; }
.lp-faq dt { font-weight: 700; font-size: 17px; color: var(--ink-head);
             border-top: 1px solid var(--hairline);
             padding: 22px 0 6px; margin: 0; }
.lp-faq dd { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6;
             color: var(--ink-secondary); max-width: 72ch; }

/* the closer */
.lp-final { text-align: center; padding: 96px 0 40px; }
.lp-final h2 { font-size: clamp(34px, 4vw, 48px); margin: 10px 0 18px; }
.lp-final .lede { max-width: 52ch; margin: 0 auto 28px; }
.lp-final .microline { margin-top: 18px; }

/* the one ask, inline (copy pass 2026-09-27): an address and a button that
   says what it gets. 16px text so iOS does not zoom the page on focus. */
.lp-signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px;
             margin: 0; }
.lp-signup input[type=email] {
  font: inherit; font-size: 16px; padding: 13px 18px;
  border: 1px solid var(--line-ctl); border-radius: var(--radius-s);
  outline: none; background: var(--card); color: var(--ink);
  min-width: 0; flex: 1 1 220px; }
.lp-signup input:focus { border-color: var(--accent); }
.lp-signup .btn { flex: 0 0 auto; }
@media (max-width: 500px) { .lp-signup .btn { flex: 1 1 100%; } }
.lp-hero .microline { margin-top: 12px; max-width: 34em; }
.lp-more { margin: 18px 0 0; }
.lp-season { display: inline-block; font-size: 14.5px; line-height: 1.45;
             background: var(--accent-tint); border: 1px solid var(--up-line);
             border-radius: 10px; padding: 9px 14px; margin: 0 0 18px;
             color: var(--ink-secondary); }
.lp-season b { color: var(--ink-head); }
.lp-edition-ask { margin-top: 36px; max-width: 620px; }
.lp-edition-ask h3 { margin: 0 0 12px; }
.lp-final .lp-signup { margin: 0 auto; justify-content: center; }
.lp-know.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .lp-know.four { grid-template-columns: 1fr 1fr;
                                            gap: 28px 20px; }
                            .lp-know.four .kv { font-size: 34px; } }
.lp-owner { display: grid; grid-template-columns: auto 1fr; gap: 28px;
            align-items: start; }
@media (max-width: 600px) { .lp-owner { grid-template-columns: 1fr;
                                        gap: 16px; } }
.lp-owner p { max-width: 62ch; }
.avatar.lg { width: 72px; height: 72px; font-size: 22px; }

/* ==== THE '95 LAYER ========================================================
   The owner's pixel-graphics handoff (18 Aug 2026): Sega-era NHL vibes.
   Body type stays Inter Tight for readability; the pixel face speaks only
   in the small scoreboard voice -- kickers, labels, scorebars. Panels get
   real edges and hard offset shadows, no plain boxes anywhere. */
:root { --font-px: 'Press Start 2P', 'Courier New', monospace;
        --ice: #bdeee6; --score-bg: #101538; --edge: #071040; }
.px, .pxi, .deploy span { image-rendering: pixelated; }
img.px { display: block; max-width: 100%; height: auto; }

/* arcade buttons: chunky edge, hard shadow, they PRESS */
.btn, button { border-radius: 10px; border: 2px solid var(--edge);
               box-shadow: 3px 3px 0 var(--edge);
               transition: transform 80ms ease, box-shadow 80ms ease,
                           background 200ms ease; }
.btn:hover, button:hover { transform: translate(2px, 2px);
                           box-shadow: 1px 1px 0 var(--edge); }
.btn.ghost { background: #ffffff; border: 2px solid var(--accent);
             box-shadow: 3px 3px 0 var(--chipbg); }
.btn.ghost:hover { background: #ffffff; }

/* no plain boxes: every panel gets an edge and a thrown shadow */
.answer, .card, .qcard, .club-card, .capture, .factstrip, .scroll,
.mockup, .hero-card {
  border: 2px solid var(--edge); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--chipbg);
}
.acard { border: 3px solid var(--edge); border-radius: 12px;
         box-shadow: 5px 5px 0 var(--edge); }
.tintcard { border: 2px solid var(--edge);
            box-shadow: 4px 4px 0 var(--chipbg); border-radius: 12px; }
.band { border: 3px solid var(--edge); border-radius: 14px;
        box-shadow: 8px 8px 0 var(--chipbg); }
.band.nvy { box-shadow: none; }
.tile { border: 2px solid var(--edge); border-radius: 12px;
        padding: 16px 18px; background:
        #f2fbf8 url(/assets/px/ice-texture.svg);
        box-shadow: 4px 4px 0 var(--chipbg); }
.grid.tiles, .tiles { display: grid; gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* the pixel voice: small caps become scoreboard text */
.eyebrow, .kicker { font-family: var(--font-px); font-size: 10px;
                    letter-spacing: 0.06em; line-height: 1.7; }
.label { font-family: var(--font-px); font-size: 8px;
         letter-spacing: 0.05em; }
.deploy-key { font-family: var(--font-px); font-size: 8px; }
.factstrip .k, .tile .k { font-family: var(--font-px); font-size: 8px;
                          letter-spacing: 0.04em; }
.footer .fh { }
footer.site .fh { font-family: var(--font-px); font-size: 9px; }

/* the scorebar: dark glass, yellow pixel digits, white keyline */
.scorebar { font-family: var(--font-px); background: var(--score-bg);
            color: var(--marigold); border: 3px solid #2a3163;
            border-radius: 10px; padding: 14px 18px; font-size: 11px;
            line-height: 1.9; display: flex; gap: 8px 22px;
            align-items: center; justify-content: space-between;
            flex-wrap: wrap; box-shadow: inset 0 0 0 2px #0a0e28; }
.scorebar .w { color: #ffffff; }
.scorebar a { color: var(--marigold); text-decoration: none; }
.scorebar a:hover { color: #ffffff; }

/* the pixel hero: the rink IS the image */
.hero-px { position: relative; border: 3px solid var(--edge);
           border-radius: 14px; overflow: hidden;
           box-shadow: 10px 10px 0 var(--chipbg); }
.hero-px img { display: block; width: 100%; height: auto;
               image-rendering: pixelated; }
.hero-px .scorebar { position: absolute; left: 14px; right: 14px;
                     bottom: 14px; margin: 0; }
@media (max-width: 700px) {
  .hero-px .scorebar { position: static; border-radius: 0;
                       border-left: 0; border-right: 0; border-bottom: 0; }
}

/* the crowd: a pixel-fan strip above the footer, like the old rink edge */
.crowd { height: 30px; margin-top: 100px;
         background: url(/assets/px/px-crowd.png) repeat-x;
         background-size: auto 100%; image-rendering: pixelated;
         border-top: 3px solid var(--edge); }
footer.site { margin-top: 0; }

/* ice panels: sections that used to float on plain white */
.ice-panel { background: var(--ice) url(/assets/px/px-ice.png);
             background-size: 240px; border: 3px solid var(--edge);
             border-radius: 14px; padding: 30px 32px;
             box-shadow: 6px 6px 0 var(--chipbg);
             margin-top: 100px; }
.ice-panel > h2:first-child, .ice-panel .split { margin-top: 0; }
.ice-panel .split { margin: 0; }

/* the icon sprite: 4 x 3 pixel tiles, labels baked in */
.pxi { display: inline-block; width: 76px; height: 76px; flex: none;
       background: url(/assets/px/px-icons.png) no-repeat;
       background-size: 400% 300%; }
.pxi.puck { background-position: 0% 0%; }
.pxi.net { background-position: 33.3333% 0%; }
.pxi.rink { background-position: 66.6667% 0%; }
.pxi.faceoff { background-position: 100% 0%; }
.pxi.stick { background-position: 0% 50%; }
.pxi.clock { background-position: 33.3333% 50%; }
.pxi.unit { background-position: 66.6667% 50%; }
.pxi.leaders { background-position: 100% 50%; }
.pxi.slotup { background-position: 0% 100%; }
.pxi.slotdown { background-position: 33.3333% 100%; }
.pxi.alert { background-position: 66.6667% 100%; }
.pxi.report { background-position: 100% 100%; }
.acard .pxi { position: absolute; right: 12px; top: 12px; }
.acard { padding-right: 96px; }

/* pixel empty states and band art */
.px-empty { max-width: 420px; border: 3px solid var(--edge);
            border-radius: 12px; margin: 10px 0; }
.bandimg { border: 2px solid rgba(255,255,255,0.4); border-radius: 10px;
           margin-bottom: 14px; }
.photo { border: 3px solid var(--edge);
         box-shadow: 6px 6px 0 var(--chipbg); }

/* ---- per-club chip colours (generated) ---- */
.chip.tc-ANA { background: #f47a38; color: #241305; }
.chip.tc-BOS { background: #ffb81c; color: #241a02; }
.chip.tc-BUF { background: #003087; color: #ffffff; }
.chip.tc-CAR { background: #ce1126; color: #ffffff; }
.chip.tc-CBJ { background: #002654; color: #ffffff; }
.chip.tc-CGY { background: #d2001c; color: #ffffff; }
.chip.tc-CHI { background: #cf0a2c; color: #ffffff; }
.chip.tc-COL { background: #6f263d; color: #ffffff; }
.chip.tc-DAL { background: #006847; color: #ffffff; }
.chip.tc-DET { background: #b30014; color: #ffffff; }
.chip.tc-EDM { background: #041e42; color: #ff4c00; }
.chip.tc-FLA { background: #c8102e; color: #ffffff; }
.chip.tc-LAK { background: #111111; color: #ffffff; }
.chip.tc-MIN { background: #154734; color: #ffffff; }
.chip.tc-MTL { background: #af1e2d; color: #ffffff; }
.chip.tc-NJD { background: #e03a3e; color: #ffffff; }
.chip.tc-NSH { background: #ffb81c; color: #041e42; }
.chip.tc-NYI { background: #00539b; color: #ffffff; }
.chip.tc-NYR { background: #0038a8; color: #ffffff; }
.chip.tc-OTT { background: #da1a32; color: #ffffff; }
.chip.tc-PHI { background: #f74902; color: #ffffff; }
.chip.tc-PIT { background: #fcb514; color: #231c00; }
.chip.tc-SEA { background: #99d9d9; color: #001628; }
.chip.tc-SJS { background: #006d75; color: #ffffff; }
.chip.tc-STL { background: #002f87; color: #fcb514; }
.chip.tc-TBL { background: #002868; color: #ffffff; }
.chip.tc-TOR { background: #00205b; color: #ffffff; }
.chip.tc-UTA { background: #6cace4; color: #01162e; }
.chip.tc-VAN { background: #00843d; color: #ffffff; }
.chip.tc-VGK { background: #b4975a; color: #211e1c; }
.chip.tc-WPG { background: #041e42; color: #ffffff; }
.chip.tc-WSH { background: #041e42; color: #c8102e; }

:root { --font-px: var(--font-ui);
        --ice: #e6ecf3; --score-bg: #0d1b2a; --edge: #d9e0e8; }
/* Buttons: the brief's, not the arcade's -- re-asserted over RETRO. */
.btn, button { border-radius: var(--radius-s); border: 0;
               box-shadow: var(--thrown-ink);
               transition: background 160ms ease, transform 80ms ease,
                           box-shadow 80ms ease; }
.btn:hover, button:hover { transform: translate(1px, 1px);
                           box-shadow: 2px 2px 0 rgba(13,27,42,0.9); }
.btn.ghost { background: transparent; border: 1px solid var(--ink-head);
             box-shadow: none; color: var(--ink-head); }
.btn.ghost:hover { background: transparent; transform: none;
                   box-shadow: none; }
.btn.lav, .btn.mar { box-shadow: none; }
.btn.lav:hover, .btn.mar:hover { transform: none; box-shadow: none; }
/* Panels: bright card on warm paper, one hairline, generous corners. */
.answer, .card, .qcard, .club-card, .capture, .factstrip,
.mockup, .hero-card, .acard, .tintcard, .band, .tile, .price-card,
.email-sample {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: none; background: var(--card);
}
.acard.nvy, .band.nvy { background: var(--dark); }
.scroll { border: 0; border-radius: 0; box-shadow: none; max-height: none;
          background: transparent; }
.scroll caption, .scroll thead th { background: var(--surface); }
.answer { border: 0; border-radius: 0; background: transparent; }
.hero-px { border: 1px solid var(--hairline); }
/* The pixel voice stays quiet: kickers are the mono voice of the brief. */
.kicker, .eyebrow, .scorebar, .hero-band .eyebrow {
  font-family: var(--font-mono); letter-spacing: 0.16em; }
.px, .pxi, .crowd, .hero-px img, img.px { display: none; }
.deploy span { image-rendering: auto; }
/* With the pixel rink hidden, the legacy hero's second column is an empty
   hole and a stray hairline. One column, and the mock goes with the art. */
.hero-band { grid-template-columns: 1fr; gap: 0; }
.hero-mock, .hero-px, .hero-card { display: none; }
/* Muted ink is a grey for the paper. On the ink band it is unreadable,
   and .microline sits inside one. */
.band.nvy .microline, .band.nvy .method-note, .band.nvy small,
.band.nvy label { color: rgba(255,255,255,0.78); }
.band.nvy .btn.mar { background: #fff; color: var(--ink-head); }
/* The edition archive: this week open, older months folded. One tag, no
   script, still crawlable. */
.ed-h { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-muted); margin: 34px 0 6px; font-weight: 500; }
.ed-list { list-style: none; margin: 0; padding: 0; }
.ed-list li { border-bottom: 1px solid var(--line-soft); }
.ed-list a { display: block; padding: 13px 2px; text-decoration: none;
             color: var(--ink); font-size: 15px; }
.ed-list a:hover { background: var(--surface-alt); }
.ed-month { border-bottom: 1px solid var(--hairline); }
.ed-month > summary { padding: 15px 2px; cursor: pointer; font-weight: 500;
                      font-size: 15px; color: var(--ink-head);
                      display: flex; align-items: baseline; gap: 12px; }
.ed-month > summary::-webkit-details-marker { display: none; }
.ed-month > summary::before { content: "+"; font-family: var(--font-mono);
                              color: var(--ink-muted); width: 12px; }
.ed-month[open] > summary::before { content: "‘2"; }
.ed-n { margin-left: auto; font-size: 13px; color: var(--ink-muted);
        font-weight: 400; }
.ed-month .ed-list { padding: 0 0 10px 24px; }

/* Homepage block 3: what you get / what this is not. */
.wyg { margin: 92px 0 0; }
.wyg-grid { display: grid; gap: 48px; grid-template-columns: 1fr 1fr;
            margin-top: 26px; }
@media (max-width: 820px) { .wyg-grid { grid-template-columns: 1fr;
                                        gap: 34px; } }
.wyg-col h3 { font-size: 12px; letter-spacing: 0.12em; font-weight: 500;
              text-transform: uppercase; margin: 0 0 14px;
              padding-bottom: 10px; border-bottom: 2px solid var(--ink-head); }
.wyg-col.no h3 { border-bottom-color: var(--down-hot);
                 color: var(--ink-muted); }
.wyg-col dl { margin: 0; }
.wyg-col dt { font-weight: 500; font-size: 16px; margin: 18px 0 3px;
              color: var(--ink-head); }
.wyg-col.no dt { color: var(--ink); }
.wyg-col dd { margin: 0; font-size: 15px; line-height: 1.55;
              color: var(--ink-muted); }

/* Homepage block 4: the price, once. */
.prices { margin: 92px 0 0; }
.price-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr;
              margin-top: 26px; }
@media (max-width: 820px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { border: 1px solid var(--hairline); border-radius: 4px;
              padding: 28px 26px 26px; background: var(--surface); }
.price-card.paid { border-color: var(--ink-head); border-width: 2px; }
.price-card .pk { font-size: 12px; letter-spacing: 0.12em; font-weight: 500;
                  text-transform: uppercase; color: var(--ink-muted);
                  margin: 0; }
.price-card .pv { font-size: 40px; font-weight: 700; letter-spacing: -0.03em;
                  color: var(--ink-head); margin: 6px 0 0; }
.price-card .pv .per { font-size: 15px; font-weight: 400;
                       letter-spacing: 0; color: var(--ink-muted); }
.price-card .pd { font-size: 15px; line-height: 1.55; margin: 12px 0 20px;
                  color: var(--ink); }
.price-card form { display: flex; gap: 8px; flex-wrap: wrap; }
.price-card input { flex: 1 1 190px; }
.price-card .btn[disabled] { background: var(--chipbg);
                             color: var(--ink-muted); cursor: default; }

:root {
  --paper: #ffffff; --ink-n: #111111; --red: #c8281e; --muted-n: #5c5c5c;
  --body2: #3d3d3d; --hair: #dddddd; --track: #ececec; --pp2: #b8b8b8;
  --field: #f6f6f6;
  /* The legacy variables, re-pointed. */
  --surface: #ffffff; --surface-alt: #ffffff; --band: #ffffff;
  --card: #ffffff; --chipbg: #ececec;
  --ink: #111111; --ink-head: #111111; --ink-secondary: #3d3d3d;
  --ink-muted: #5c5c5c; --faint: #5c5c5c;
  --dark: #111111; --on-dark: rgba(255,255,255,.86); --on-dark-hi: #ffffff;
  --hairline: #dddddd; --line-soft: #dddddd; --line-lite: #ececec;
  --line-ctl: #111111; --disabled: #7a7a7a;
  --accent: #c8281e; --accent-press: #111111; --accent-tint: #ffffff;
  --accent-soft: #ececec; --accent-on-dark: #ffffff;
  --up: #c8281e; --up-bg: #ffffff; --up-line: #111111;
  --down: #111111; --down-bg: #ffffff; --down-hot: #111111;
  --neutral: #5c5c5c;
  --marigold: #ffffff; --marigold-tint: #ffffff; --sky: #b8b8b8;
  --cast-1: #111111; --cast-2: #c8281e; --cast-3: #5c5c5c;
  --cast-4: #b8b8b8; --cast-5: #dddddd;
  --font-ui: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-display: Antonio, 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-px: var(--font-display);
  --radius: 0; --radius-s: 0; --pill: 0;
  --thrown-ink: none; --thrown-accent: none;
  --ice: #ffffff; --score-bg: #111111; --edge: #111111;
  --wrapmax: 1320px; --gut: clamp(16px, 3vw, 40px);
  /* The type scale. Owner, 29 Sept 2026: "i dont know where to look, way
     to big". The handoff sized the nameplate, the lead, the prices and the
     names as posters (190/150/112/56px), so every element shouted at once.
     Every display size on the site is now one of these steps: one headline
     per page, section heads a clear step below it, names at sub-head size,
     numbers that read as data. The clamp minimums are the phone sizes. */
  --t-mast: clamp(32px, 3.9vw, 54px);    /* the front-page nameplate */
  --t-mark: 26px;                        /* the nameplate on every other page */
  --t-h1: clamp(30px, 3.3vw, 46px);      /* the one headline on a page */
  --t-h1-long: clamp(26px, 2.6vw, 36px); /* a question- or article-length title */
  --t-h2: clamp(22px, 1.8vw, 26px);      /* section heads */
  --t-h3: 20px;                          /* sub-heads, names in lists, card titles */
  --t-stat: clamp(24px, 2vw, 28px);      /* numbers in a stat line */
  --t-big: clamp(30px, 2.5vw, 36px);     /* the one featured number: a price, a big stat */
  --t-deck: clamp(18px, 1.4vw, 21px);    /* decks and ledes, under a headline */
}
::selection { background: #111111; color: #ffffff; }

html { background: #ffffff; }
body { margin: 0; background: #ffffff; color: #111111;
       font-family: var(--font-serif); font-size: 18px; line-height: 1.45;
       -webkit-font-smoothing: antialiased; }
a { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--red); }
.wrap { max-width: var(--wrapmax); margin: 0 auto;
        padding-left: var(--gut); padding-right: var(--gut); }
main.wrap { padding-top: 8px; }
h1, h2, h3, .htitle, .section-head {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .005em; color: #111111; }
h1 { font-size: var(--t-h1); line-height: 1; margin: 18px 0 14px;
     text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1; margin: 44px 0 14px; }
h3 { font-size: var(--t-h3); line-height: 1; margin: 26px 0 8px; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; font-family: inherit;
                     font-size: inherit; text-transform: inherit; }
p, li, dd { max-width: 44em; }
.lede, .intro { font-family: var(--font-serif); font-size: var(--t-deck);
                line-height: 1.32; color: #111111; max-width: 32em; }
small, .small { font-size: 14px; }
.method-note, .quality, .stamp, .note {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  letter-spacing: .02em; color: var(--muted-n); }
.crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
         text-transform: uppercase; color: var(--muted-n); margin: 18px 0 0; }
.crumb a { color: var(--muted-n); }
.crumb a:hover { color: var(--red); }
.eyebrow, .kicker, .label, .hlabel, .k, .kk, .pk, .st-k, .toc-k, .fb-k {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; }
.kicker { color: var(--red); font-weight: 700; }
.kicker-ink { color: #111111; }

/* Buttons: solid red goes to ink on hover; outlined ink fills. */
.btn, button, .btn-red {
  display: inline-block; background: var(--red); color: #ffffff; border: 0;
  border-radius: 0; box-shadow: none; padding: 10px 16px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  line-height: 1.1; transition: background 120ms ease, color 120ms ease; }
.btn:hover, button:hover, .btn-red:hover {
  background: #111111; color: #ffffff; transform: none; box-shadow: none; }
.btn.big, .btn-lg { font-size: 22px; padding: 16px 26px; }
.btn.s { font-size: 15px; padding: 9px 14px; }
.btn.ghost, .btn-out, .btn.lav, .btn.mar {
  background: transparent; color: #111111; border: 2px solid #111111; }
.btn.ghost:hover, .btn-out:hover, .btn.lav:hover, .btn.mar:hover {
  background: #111111; color: #ffffff; }
.btn[disabled], button[disabled] { background: #b8b8b8; cursor: default; }
input[type=email], input[type=search], input[type=text], select, textarea {
  font: inherit; font-family: var(--font-serif); font-size: 17px;
  background: var(--field); color: #111111; border: 2px solid #111111;
  border-radius: 0; padding: 12px 14px; box-shadow: none; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red);
                                             outline-offset: 1px; }
/* css.py sets `.capture input[type=email] { outline: none }` (0,2,1); the
   focus ring must beat it everywhere a capture or band form sits. */
.capture input[type=email]:focus, .band input[type=email]:focus,
.signup input[type=email]:focus { outline: 2px solid var(--red); outline-offset: 2px; }
input::placeholder { color: #7a7a7a; }

/* Agate: every table. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0;
          border-radius: 0; box-shadow: none; background: transparent; }
/* Positioned, so an absolutely placed .sr-only inside a cell is clipped by
   the scroller instead of widening the page on a phone. */
.scroll { position: relative; }
table { border-collapse: collapse; width: 100%; font-family: var(--font-mono);
        font-size: 13px; font-variant-numeric: tabular-nums; background: transparent; }
caption { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
          letter-spacing: .06em; color: var(--muted-n); text-align: left;
          padding: 0 0 8px; caption-side: top; }
th { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
     letter-spacing: .06em; text-transform: uppercase; color: var(--muted-n);
     text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid #111111;
     background: transparent; white-space: nowrap; }
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hair);
     background: transparent; vertical-align: top; }
thead tr, tbody tr, tr.alt, tr:nth-child(even) { background: transparent; }
td.num, th.num { text-align: right; }
/* The legacy sheet's table voice, undone: it indented the first and last
   columns 20px (a card's padding, with no card left), set 2px grey bars
   under PP1 rows, bold ink headers, a tinted sorted column and row hover,
   and dropped the last row's rule. Agate is flush, hairline, quiet. */
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-weight: 500; font-size: 11px; color: var(--muted-n);
           background: #ffffff; border-bottom: 2px solid #111111; }
thead th[aria-sort] { background: #ffffff; color: #111111; }
thead th[data-sortable]:hover { color: var(--red); }
tr.pp1 td, tr.pp2 td, tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
tbody tr:hover { background: transparent; }
td.col-hot { background: transparent; font-weight: 700; }
th.col-hot { color: var(--red); }
table a { font-weight: inherit; }
tr.totals td { background: transparent; border-bottom: 1px solid #111111; }

/* css.py's legacy 20px (14px on mobile) first-column indent, undone once
   for every agate table rather than per page. */
th:first-child, td:first-child { padding-left: 0; }

/* Flatten every legacy card, tint, pill and shadow: rules, not boxes. */
.card, .acard, .club-card, .tintcard, .qcard, .capture, .hero-card, .ptile,
.tile, .answer, .faq, .accord, .freeband, .fwban, .email-sample, .formation,
.hero-band, .hero-mock, .mockup, .photo, .board, .toc a, .scope-chips a,
.chips a, .strip-facts li, .factstrip, .lp-price, .lp-vs-col, .lp-stat,
.lp-phone, .lp-move, .preview, .contact-form, .search, .offseason-note,
.backer, .split, .sprinkle {
  border-radius: 0 !important; box-shadow: none !important; }
.card, .acard, .club-card, .tintcard, .qcard, .hero-card, .tile, .ptile,
.freeband, .fwban, .preview, .offseason-note, .lp-price, .lp-vs-col {
  background: transparent; border: 0; border-top: 1px solid #111111; }
.answer { background: transparent; border: 0; padding: 0; }
.capture { background: transparent; border: 0; border-top: 6px double #111111;
           padding: 22px 0 8px; margin: 44px 0 20px; }
.capture .section-head { font-size: var(--t-h2); line-height: 1; }
.capture form, .band form { display: flex; flex-wrap: wrap; gap: 10px;
                            max-width: 620px; }
.capture input[type=email], .band input[type=email] { flex: 1 1 240px; min-width: 0; }
.band.nvy { background: #111111; color: #ffffff; border-radius: 0; box-shadow: none; }
.band.nvy h2, .band.nvy h2 em { color: #ffffff; }
.band.nvy p { color: rgba(255,255,255,.86); }
.band.nvy .btn:hover, .band.nvy button:hover { background: #ffffff; color: #111111; }
.band.nvy input[type=email] { background: #ffffff; border-color: #ffffff; }
.toc { border-top: 1px solid #111111; border-bottom: 1px solid #111111;
       padding: 10px 0; margin: 18px 0 8px; gap: 6px 20px; }
.toc a { border: 0; padding: 0; background: transparent; font-family: var(--font-mono);
         font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
         color: #111111; }
.toc a:hover { color: var(--red); }
.accord details, .faq details { border: 0; border-top: 1px solid #111111;
                                background: transparent; padding: 12px 0; }
.accord summary, .faq summary { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 22px; line-height: 1.05; cursor: pointer; }
.byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
          text-transform: uppercase; color: var(--muted-n); }
.byline b { color: #111111; }
.avatar.mono { background: #111111; color: #ffffff; border-radius: 0; }
.avatar { border-radius: 0; }
.qgrid { gap: 0 32px; }
.qcard { padding: 14px 0 18px; text-decoration: none; }
.qcard h3 { font-size: 22px; }
.qcard .qstat b { font-family: var(--font-display); color: var(--red); }
.sprinkle { border-top: 6px double #111111; padding-top: 22px; margin-top: 56px; }
.sprinkle h2 { margin-top: 0; }
.held { border-radius: 0; }
.jnum { border-radius: 0; }

/* Team chips everywhere: 12x16 swatch in the primary, secondary edge,
   then the abbreviation -- the handoff's club reference in every table. */
.chip { display: inline-flex; align-items: center; gap: 8px; background: none !important;
        color: #111111 !important; border: 0; border-radius: 0; padding: 0;
        font-family: var(--font-mono); font-weight: 700; font-size: inherit;
        letter-spacing: 0; text-decoration: none; }
.chip::before { content: ""; width: 12px; height: 16px; flex: none; box-sizing: border-box;
                background: var(--c1, #111111); border-bottom: 4px solid var(--c2, #111111); }
a.chip:hover { color: var(--red) !important; }

/* ---- chrome ------------------------------------------------------------ */
.nw-ticker { background: #111111; color: #ffffff; overflow: hidden; padding: 9px 0;
             font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
             text-transform: uppercase; }
.nw-track { display: flex; gap: 44px; padding-right: 44px; width: max-content;
            animation: nw-tick 60s linear infinite; }
.nw-track span { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.nw-track span::before { content: ""; width: 7px; height: 7px; background: var(--red);
                         display: inline-block; flex: none; }
.nw-ticker { position: relative; }
.nw-ticker:hover .nw-track, .nw-ticker:focus-within .nw-track,
.nw-pause-in:checked ~ .nw-track { animation-play-state: paused; }
.nw-pause-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nw-pause { position: absolute; right: 0; top: 0; bottom: 0; z-index: 1; display: flex;
            align-items: center; padding: 0 12px; background: #111111; color: #ffffff;
            cursor: pointer; border-left: 1px solid rgba(255,255,255,.35); }
.nw-pause-in:checked + .nw-pause { color: var(--red); }
.nw-pause-in:focus-visible + .nw-pause { outline: 2px solid var(--red); outline-offset: -2px; }
@keyframes nw-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nw-track { animation: none; flex-wrap: wrap; width: auto; row-gap: 6px; }
  .nw-track [aria-hidden="true"] { display: none; } }
.nw-util { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
           gap: 12px; padding: 14px 0; font-family: var(--font-mono); font-size: 12px;
           letter-spacing: .06em; text-transform: uppercase; }
.nw-util-r { display: flex; align-items: center; gap: 20px; }
.nw-util .btn-red { font-size: 15px; padding: 9px 14px; }
.nw-mast { border-top: 6px double #111111; padding-top: 10px; }
.nw-mast-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
                 line-height: .9; margin: 0; font-size: var(--t-mast);
                 letter-spacing: -.005em; text-align: center; }
.nw-mast-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
                 border-top: 1px solid #111111; margin-top: 12px; padding: 9px 0;
                 font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
                 text-transform: uppercase; }
.nw-mast-sm { border-top: 6px double #111111; padding: 12px 0 4px; }
.nw-mark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
           font-size: var(--t-mark); line-height: .9; color: #111111; text-decoration: none; }
.nw-mark:hover { color: var(--red); }
.nw-nav { display: flex; flex-wrap: wrap; gap: 4px 32px; border-top: 3px solid #111111;
          border-bottom: 1px solid #111111; }
.nw-nav a { border-bottom: 4px solid transparent; margin-bottom: -1px; padding: 12px 0 9px;
            font-family: var(--font-display); font-weight: 600; font-size: 19px;
            letter-spacing: .05em; text-transform: uppercase; color: #111111;
            text-decoration: none; }
.nw-nav a:hover { color: var(--red); }
.nw-nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.nw-foot { border-top: 6px double #111111; padding: 22px 0 40px; margin-top: 56px; }
.nw-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.nw-foot-brand { flex: 1 1 280px; }
.nw-foot-mark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
                font-size: 22px; line-height: .9; }
.nw-foot-tag { font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
               color: var(--muted-n); margin: 10px 0 0; }
.nw-foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--font-mono);
                 font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
                 align-content: flex-start; flex: 2 1 420px; }
.nw-foot-legal { font-size: 13px; line-height: 1.55; color: var(--muted-n); margin: 24px 0 0;
                 max-width: 60em; }
.nw-foot .quality, .nw-foot .stamp { margin: 12px 0 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #111111; color: #ffffff; padding: 8px 12px;
              z-index: 10; }

/* ---- atoms (news.py) ---------------------------------------------------- */
.ns { border-top: 6px double #111111; padding: 22px 0 48px; }
.nh-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
          gap: 8px 24px; margin-bottom: 20px; }
.nh { margin: 0; font-size: var(--t-h2); line-height: 1; }
.nh-sm { font-size: var(--t-h3); }
.nh-aside { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
            text-transform: uppercase; color: var(--muted-n); }
.sw { width: 12px; height: 16px; display: inline-block; flex: none; box-sizing: border-box;
      background: var(--c1, #111111); border-bottom: 4px solid var(--c2, #111111); }
.cc { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
      font-weight: 700; }
.cc-a { text-decoration: none; }
.cc-name { font-family: var(--font-serif); font-weight: 400; font-size: 14px;
           color: var(--muted-n); }
.tag { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 14px;
       line-height: 1.2; white-space: nowrap; }
.tag-up { background: var(--red); color: #ffffff; padding: 6px 10px; }
.tag-down, .tag-off { border: 2px solid #111111; color: #111111; padding: 4px 8px; }
.statline { display: flex; flex-wrap: wrap; gap: 18px 0; border-top: 3px solid #111111;
            border-bottom: 1px solid #111111; padding: 16px 0 14px; margin: 22px 0; }
.sl-c { flex: 1 1 120px; padding-right: 20px; }
.sl-v { font-family: var(--font-display); font-weight: 700; font-size: var(--t-stat); line-height: .9; }
.sl-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
        text-transform: uppercase; color: var(--muted-n); margin-top: 6px; }
.sweater { display: flex; flex-direction: column; gap: 5px; margin: 18px 0; }
.sweater i { display: block; height: 16px; background: var(--c1, #111111); }
.sweater i.s2 { height: 6px; background: var(--c2, #111111); }
.sweater-sm { gap: 4px; }
.sweater-sm i { height: 10px; }
.sweater-sm i.s2 { height: 4px; }
.ustrip { display: flex; gap: 3px; }
.ustrip i { display: block; flex: none; box-sizing: border-box; }
.ustrip-sm i { width: 14px; height: 18px; }
.ustrip-lg { gap: 4px; }
.ustrip-lg i { flex: 1 1 0; min-width: 4px; height: 56px; }
.ustrip .u1 { background: #111111; }
.ustrip .u2 { background: var(--pp2); }
.ustrip .u0 { background: transparent; border: 1px solid var(--pp2); }
.ustrip .ulast { background: var(--red); border: 0; outline: 2px solid var(--red);
                 outline-offset: 3px; }
.bigstat .bs-v { font-family: var(--font-display); font-weight: 700;
                 font-size: var(--t-big); line-height: .95; }
.bigstat .bs-v.red { color: var(--red); }
.bigstat .bs-c { font-size: 19px; line-height: 1.35; margin: 14px 0 0; max-width: 17em; }
.ctaband { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
           gap: 20px 40px; background: #111111; color: #ffffff;
           padding: 28px clamp(20px, 3vw, 36px); margin: 36px 0 52px; }
.ctaband .cb-line { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
                    font-size: var(--t-h2); line-height: 1; max-width: 18em; }
.ctaband .btn-red:hover { background: #ffffff; color: #111111; }
.lk { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
      letter-spacing: .06em; white-space: nowrap; }
.railbox { border-top: 6px solid #111111; padding-top: 14px; }
.agate td, .agate th { font-size: 13px; }
.agate .nm { font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.cols-ruled { display: flex; flex-wrap: wrap; gap: 32px 0; }
.cols-ruled > * { flex: 1 1 260px; padding: 0 28px; border-left: 1px solid #111111; }
.cols-ruled > *:first-child { padding-left: 0; border-left: 0; }
.signup { display: flex; flex-direction: column; gap: 10px; }
.signup input[type=email] { width: 100%; box-sizing: border-box; }
.signup .btn-red { width: 100%; font-size: 22px; padding: 14px 18px; }
.fine { font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
        color: var(--muted-n); margin: 10px 0 0; }

/* ---- team colours (news.TEAMS) ---- */
.tc-ANA { --c1: #F47A38; --c2: #B9975B; }
.tc-BOS { --c1: #FFB81C; --c2: #111111; }
.tc-BUF { --c1: #003087; --c2: #FFB81C; }
.tc-CAR { --c1: #CE1126; --c2: #111111; }
.tc-CBJ { --c1: #002654; --c2: #CE1126; }
.tc-CGY { --c1: #C8102E; --c2: #F1BE48; }
.tc-CHI { --c1: #CF0A2C; --c2: #111111; }
.tc-COL { --c1: #6F263D; --c2: #236192; }
.tc-DAL { --c1: #006847; --c2: #8F8F8C; }
.tc-DET { --c1: #CE1126; --c2: #111111; }
.tc-EDM { --c1: #041E42; --c2: #FF4C00; }
.tc-FLA { --c1: #041E42; --c2: #C8102E; }
.tc-LAK { --c1: #111111; --c2: #A2AAAD; }
.tc-MIN { --c1: #154734; --c2: #A6192E; }
.tc-MTL { --c1: #AF1E2D; --c2: #192168; }
.tc-NJD { --c1: #CE1126; --c2: #111111; }
.tc-NSH { --c1: #FFB81C; --c2: #041E42; }
.tc-NYI { --c1: #00539B; --c2: #F47D30; }
.tc-NYR { --c1: #0038A8; --c2: #CE1126; }
.tc-OTT { --c1: #C52032; --c2: #C2912C; }
.tc-PHI { --c1: #F74902; --c2: #111111; }
.tc-PIT { --c1: #111111; --c2: #FCB514; }
.tc-SEA { --c1: #001628; --c2: #99D9D9; }
.tc-SJS { --c1: #006D75; --c2: #EA7200; }
.tc-STL { --c1: #002F87; --c2: #FCB514; }
.tc-TBL { --c1: #002868; --c2: #A2AAAD; }
.tc-TOR { --c1: #00205B; --c2: #A2AAAD; }
.tc-UTA { --c1: #6CACE4; --c2: #010101; }
.tc-VAN { --c1: #00205B; --c2: #00843D; }
.tc-VGK { --c1: #B4975A; --c2: #333F42; }
.tc-WPG { --c1: #041E42; --c2: #004C97; }
.tc-WSH { --c1: #041E42; --c2: #C8102E; }

/* ---- page title + deck -----------------------------------------------
   The handoff's page-title scale (136px+) is for one-word titles like
   LEADERS. These pages carry questions and article headlines of 40-70
   characters; at 136px they ran to three lines and the comma descenders
   crashed into the deck. Same face, smaller step, and leading of 1.08:
   Antonio's comma hangs almost a cap-height's tenth below the baseline,
   so at .92 (and still at 1.0) "SKATER," and "QUESTIONS," cut into the
   title's own next line. A short title (h1.short, one or two words) keeps the
   handoff's page-title step, as LEADERS does. */
main.wrap:not(:has(> [class*="pg-"])) > h1 { font-size: var(--t-h1-long); line-height: 1.08;
          margin: 20px 0 18px; max-width: 15em; text-wrap: balance; }
main.wrap:not(:has(> [class*="pg-"])) > h1.short { font-size: var(--t-h1); line-height: 1;
                max-width: none; }
main.wrap:not(:has(> [class*="pg-"])) > h1 + .lede, main.wrap:not(:has(> [class*="pg-"])) > h1 + .photo + .lede { margin-top: 0; }
main.wrap:not(:has(> [class*="pg-"])) > .lede { margin: 0 0 18px; max-width: 32em; }

/* The owner's photographs: a plain newspaper photo, no frame. */
main.wrap:not(:has(> [class*="pg-"])) > .photo-banner { border: 0; box-shadow: none; border-radius: 0;
                     height: clamp(150px, 16vw, 220px); margin: 4px 0 18px; }

/* Headings below the title. */
main.wrap:not(:has(> [class*="pg-"])) h4 { font-family: var(--font-display); font-weight: 700; font-size: 20px;
        line-height: 1; text-transform: uppercase; margin: 22px 0 8px; }
main.wrap:not(:has(> [class*="pg-"])) p, main.wrap:not(:has(> [class*="pg-"])) li { max-width: 44em; }
main.wrap:not(:has(> [class*="pg-"])) .answer p, main.wrap:not(:has(> [class*="pg-"])) .answer li { font-size: 18px; line-height: 1.5; max-width: 42em; }
main.wrap:not(:has(> [class*="pg-"])) .answer p:first-of-type { font-size: 20px; line-height: 1.45; }
main.wrap:not(:has(> [class*="pg-"])) .answer > h2 { font-size: var(--t-h2); line-height: 1;
                  letter-spacing: .005em; margin: 40px 0 12px; }
main.wrap:not(:has(> [class*="pg-"])) .answer a { font-weight: inherit; }
main.wrap:not(:has(> [class*="pg-"])) > p a, main.wrap:not(:has(> [class*="pg-"])) .answer a, main.wrap:not(:has(> [class*="pg-"])) > ul a { text-decoration-thickness: 1px; }

/* Definition lists (the pillar's shapes + FAQ, the method's field list):
   the term in Antonio, the answer in body serif. */
main.wrap:not(:has(> [class*="pg-"])) dl.faq dt { font-family: var(--font-display); font-weight: 700;
               text-transform: uppercase; font-size: 22px; line-height: 1;
               margin: 22px 0 6px; }
main.wrap:not(:has(> [class*="pg-"])) dl.faq dd { margin: 0; font-size: 18px; line-height: 1.5; color: #3d3d3d;
               max-width: 42em; }
main.wrap:not(:has(> [class*="pg-"])) dl.faq dd + dt { border-top: 1px solid var(--hair); padding-top: 16px; }

/* ---- agate on these pages --------------------------------------------
   A table is as wide as its columns, never stretched across 1320px: a
   three-column table is a column of agate, not a spreadsheet. Wide ones
   still fill the width and scroll inside .scroll on a phone. */
main.wrap:not(:has(> [class*="pg-"])) .scroll { margin: 12px 0 8px; }
main.wrap:not(:has(> [class*="pg-"])) .scroll > table { width: auto; min-width: min(100%, 680px); }
/* The definition line stays in view when a wide table scrolls sideways on
   a phone: pinned to the scroller's left edge, never wider than the page. */
main.wrap:not(:has(> [class*="pg-"])) caption { color: var(--muted-n); padding: 0 0 8px; background: transparent;
             border: 0; line-height: 1.5; text-align: left;
             position: sticky; left: 0;
             max-width: calc(100vw - 2 * var(--gut)); }
/* The entity a row is about (player, five, club name) in the table's
   serif, as the handoff's agate does; a name column never squeezes to
   one word per line on a phone. */
main.wrap:not(:has(> [class*="pg-"])) td.l:has(> a:not(.chip)) { min-width: 12em; }
/* ...except a club cell (chip + short name), which gives the room to the
   five-name column beside it. */
main.wrap:not(:has(> [class*="pg-"])) td.l:has(> .chip):not(:has(.subnames)) { min-width: 0; white-space: nowrap; }
main.wrap:not(:has(> [class*="pg-"])) td.l > a:not(.chip) { font-family: var(--font-serif);
                         font-weight: 600; font-size: 15px;
                         letter-spacing: 0; }
/* Right-aligned figures side by side need more than the 10px cell pad, or
   "1.68" and "14th of 32" read as one token. */
main.wrap:not(:has(> [class*="pg-"])) td.num + td.num, main.wrap:not(:has(> [class*="pg-"])) th.num + th.num { padding-left: 18px; }
/* A nightly report stacks same-schema tables (moved to PP1 / PP2 / off):
   one shared width so their columns line up. */
main.wrap:not(:has(> [class*="pg-"])):has(.ed-game) .scroll > table { width: min(100%, 760px); }
main.wrap:not(:has(> [class*="pg-"])) td.l a { text-decoration: none; }
main.wrap:not(:has(> [class*="pg-"])) td.l a:hover { color: var(--red); }
main.wrap:not(:has(> [class*="pg-"])) td .subnames, main.wrap:not(:has(> [class*="pg-"])) td .subnames a { font-family: var(--font-serif);
                                     font-size: 13px; color: var(--muted-n); }
main.wrap:not(:has(> [class*="pg-"])) td.l .chip { white-space: nowrap; }
main.wrap:not(:has(> [class*="pg-"])) td.l:has(.b-up, .b-down, .b-off, .held) { white-space: nowrap; }

/* Unit movement tags in the nightly tables: the handoff's tags. */
.b-up, .b-down, .b-off { display: inline-block; border-radius: 0;
                         font-family: var(--font-mono); font-weight: 700;
                         font-size: 12px; line-height: 1.2; letter-spacing: 0;
                         white-space: nowrap; }
.b-up { background: var(--red); color: #ffffff; padding: 3px 8px; }
/* Solid red is PP1's signal alone (and the red CTA's): a move onto PP2 is
   an ink tag carrying the up glyph. */
.b-up.to-pp2 { background: transparent; color: #111111;
               border: 2px solid #111111; padding: 1px 6px; }
.b-down, .b-off { background: transparent; color: #111111;
                  border: 2px solid #111111; padding: 1px 6px; }
.io { border-radius: 0; font-family: var(--font-mono); }
.io.in { background: var(--red); color: #ffffff; }
.io.out { background: transparent; color: #111111; border: 2px solid #111111; }
.held { border-radius: 0; font-family: var(--font-mono); font-size: 10px;
        color: #111111; border: 1px solid #111111; padding: 1px 4px; }
.dir.up { color: var(--red); }
.dir.down { color: #111111; }

/* ---- the answers hub + the did-you-know strip (unscoped: it closes
   every page, redesigned or not) --------------------------------------- */
.qgrid { gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.qcard { border: 0; border-top: 1px solid #111111; background: transparent;
         padding: 14px 0 22px; gap: 6px; color: #111111; }
.qcard:hover { border-color: #111111; }
.qcard:hover h3 { color: var(--red); }
.qcard h3 { font-family: var(--font-display); font-weight: 700;
            text-transform: uppercase; font-size: 22px; line-height: 1;
            letter-spacing: .005em; }
.qstat b { font-family: var(--font-display); font-weight: 700; color: var(--red);
           text-transform: uppercase;
           font-size: var(--t-stat); line-height: .9; letter-spacing: 0; }
.qstat .ql { font-size: 14px; color: #3d3d3d; }
.qwho { font-family: var(--font-serif); font-size: 14px; font-weight: 400;
        color: #3d3d3d; }
.qmore { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
         letter-spacing: .06em; text-transform: uppercase; color: #111111;
         padding-top: 10px; }
.qcard:hover .qmore { color: var(--red); }
.sprinkle { margin: 56px 0 24px; }
.sprinkle h2 { font-size: var(--t-h2); line-height: .9; margin: 0 0 20px;
               justify-content: space-between; }
.sprinkle .sp-more, .sprinkle .sp-more a {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-n); }
.sprinkle .sp-more a:hover { color: var(--red); }

/* ---- analysis index: a front of headlines, not a grid of cards ---------- */
main.wrap:not(:has(> [class*="pg-"])) > .grid { gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
             margin: 18px 0 8px; }
main.wrap:not(:has(> [class*="pg-"])) > .grid > .card { border: 0; border-top: 1px solid #111111; background: transparent;
                     padding: 14px 0 26px; }
main.wrap:not(:has(> [class*="pg-"])) .card h3 { font-size: var(--t-h3); line-height: .95; margin: 0 0 10px; }
main.wrap:not(:has(> [class*="pg-"])) .card h3 a { text-decoration: none; color: #111111; }
main.wrap:not(:has(> [class*="pg-"])) .card h3 a:hover { color: var(--red); }
main.wrap:not(:has(> [class*="pg-"])) .card .pubdate { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
                    letter-spacing: .06em; text-transform: uppercase;
                    color: var(--muted-n); margin: 0 0 8px; }
main.wrap:not(:has(> [class*="pg-"])) .card .method-note { font-family: var(--font-serif); font-size: 16px;
                        line-height: 1.45; letter-spacing: 0; color: #3d3d3d; }

/* ---- the edition archive (/report/) -------------------------------------- */
main.wrap:not(:has(> [class*="pg-"])) .ed-h { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
           letter-spacing: .06em; text-transform: uppercase; color: var(--red);
           margin: 30px 0 0; padding-bottom: 8px; border-bottom: 3px solid #111111; }
main.wrap:not(:has(> [class*="pg-"])) .ed-list li { max-width: none; border-bottom: 1px solid var(--hair); }
main.wrap:not(:has(> [class*="pg-"])) .ed-list a { font-family: var(--font-serif); font-size: 18px; padding: 11px 0; }
main.wrap:not(:has(> [class*="pg-"])) .ed-list a:hover { background: transparent; color: var(--red); }
main.wrap:not(:has(> [class*="pg-"])) .ed-month { border-bottom: 1px solid #111111; }
main.wrap:not(:has(> [class*="pg-"])) .ed-month > summary { font-family: var(--font-display); font-weight: 700;
                         text-transform: uppercase; font-size: var(--t-h3); line-height: 1;
                         padding: 14px 0; color: #111111; }
main.wrap:not(:has(> [class*="pg-"])) .ed-month > summary:hover { color: var(--red); }
main.wrap:not(:has(> [class*="pg-"])) .ed-month > summary::before { color: #111111; font-size: 18px;
                                 width: auto; min-width: 16px; flex: none; }
main.wrap:not(:has(> [class*="pg-"])) .ed-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
           text-transform: uppercase; color: var(--muted-n); }
main.wrap:not(:has(> [class*="pg-"])) .ed-month .ed-list { padding: 0 0 12px 24px; }

/* ---- a nightly report (/report/<date>/) ---------------------------------- */
main.wrap:not(:has(> [class*="pg-"])) .ed-game { border-top: 1px solid #111111; }
main.wrap:not(:has(> [class*="pg-"])) .ed-game:last-of-type { border-bottom: 1px solid #111111; }
main.wrap:not(:has(> [class*="pg-"])) .ed-game > summary { font-family: var(--font-display); font-weight: 700;
                        text-transform: uppercase; font-size: var(--t-h3); line-height: 1;
                        padding: 14px 0; }
main.wrap:not(:has(> [class*="pg-"])) .ed-game > summary:hover { color: var(--red); }
main.wrap:not(:has(> [class*="pg-"])) .ed-game > summary::before { color: #111111; font-size: 18px;
                                width: auto; min-width: 16px; flex: none; }
/* The open-fold marker. css.py writes it as the Python text "\2212" in
   a plain (non-raw) string, so Python reads octal \221 and ships a C1
   control plus "2", drawn as a box over the fold title. The doubled
   backslash below emits the real CSS escape for a minus sign. */
main.wrap:not(:has(> [class*="pg-"])) .ed-game[open] > summary::before,
main.wrap:not(:has(> [class*="pg-"])) .ed-month[open] > summary::before { content: "\2212"; }
main.wrap:not(:has(> [class*="pg-"])) .ed-club { font-family: var(--font-display); font-size: 20px; }
main.wrap:not(:has(> [class*="pg-"])) .ed-club span { font-family: var(--font-mono); font-size: 12px; font-weight: 400;
                   letter-spacing: .06em; text-transform: uppercase; }
main.wrap:not(:has(> [class*="pg-"])) .nodelta { color: var(--muted-n); }

/* ---- the /power-play/ pillar's fact strip -> the handoff's stat line ---- */
main.wrap:not(:has(> [class*="pg-"])) .factstrip { display: flex; flex-wrap: wrap; gap: 18px 0; list-style: none;
                border: 0; border-top: 3px solid #111111; border-bottom: 1px solid #111111;
                background: transparent; padding: 16px 0 14px; margin: 22px 0 10px; }
main.wrap:not(:has(> [class*="pg-"])) .factstrip > li { flex: 1 1 150px; max-width: none; border: 0; padding: 0 20px 0 0;
                     display: flex; flex-direction: column-reverse; justify-content: flex-end; }
main.wrap:not(:has(> [class*="pg-"])) .factstrip .v { font-family: var(--font-display); font-weight: 700;
                   text-transform: uppercase; font-size: var(--t-stat); line-height: .9;
                   letter-spacing: 0; color: #111111; }
main.wrap:not(:has(> [class*="pg-"])) .factstrip .k { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
                   letter-spacing: .06em; text-transform: uppercase;
                   color: var(--muted-n); margin-top: 12px; }

/* ---- forms: contact, sign-in -------------------------------------------- */
main.wrap:not(:has(> [class*="pg-"])) .capture form.contact-form { display: block; max-width: 620px; }
main.wrap:not(:has(> [class*="pg-"])) .contact-form p { margin: 0 0 14px; max-width: none; }
main.wrap:not(:has(> [class*="pg-"])) .contact-form label { font-family: var(--font-mono); font-size: 11px;
                         font-weight: 500; letter-spacing: .06em;
                         text-transform: uppercase; color: var(--muted-n); }
main.wrap:not(:has(> [class*="pg-"])) .contact-form input[type=text], main.wrap:not(:has(> [class*="pg-"])) .contact-form input[type=email],
main.wrap:not(:has(> [class*="pg-"])) .contact-form textarea { width: 100%; box-sizing: border-box; margin-top: 6px;
                            min-width: 0; }
main.wrap:not(:has(> [class*="pg-"])) .contact-form .hp { position: absolute; left: -9999px; }
main.wrap:not(:has(> [class*="pg-"])) .capture .method-note { max-width: 44em; }
main.wrap:not(:has(> [class*="pg-"])) .search input[type=search] { border-radius: 0; border: 2px solid #111111;
                                background: var(--field); }

/* ---- method + data quality ---------------------------------------------- */
main.wrap:not(:has(> [class*="pg-"])) th:empty::after, main.wrap:not(:has(> [class*="pg-"])) thead th[data-sortable]:empty::after { content: none; }
main.wrap:not(:has(> [class*="pg-"])) td.l { white-space: normal; }

/* ---- a phone ------------------------------------------------------------- */
@media (max-width: 600px) {
  main.wrap:not(:has(> [class*="pg-"])) .answer p:first-of-type { font-size: 19px; }
  main.wrap:not(:has(> [class*="pg-"])) > .grid, .qgrid { grid-template-columns: 1fr; }
  main.wrap:not(:has(> [class*="pg-"])) td.l > a:not(.chip) { font-size: 14px; }
}


/* ---- front page (.pg-front) ------------------------------------------- */
.pg-front { min-width: 0; }
.pg-front p { max-width: none; }

/* lead + rail */
.pg-front .fp-top { display: flex; flex-wrap: wrap; gap: 40px 48px; padding: 36px 0 48px; }
.pg-front .fp-lead { flex: 999 1 560px; min-width: 0; }
.pg-front .fp-hed { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 1; margin: 10px 0 0; font-size: var(--t-h1);
  text-wrap: balance; overflow-wrap: anywhere; }
.pg-front .fp-deck { font-family: var(--font-serif); font-size: var(--t-deck);
  line-height: 1.3; margin: 18px 0 28px; max-width: 30em; text-wrap: pretty; }
.pg-front .fp-quiet .fp-deck { margin-bottom: 0; }
.pg-front .fp-list { border-top: 3px solid #111111; }
.pg-front .fp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid #111111; }
.pg-front .fp-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1; overflow-wrap: anywhere; }
.pg-front .fp-detail { font-size: 16px; line-height: 1.35; margin-top: 4px; color: var(--body2); }
.pg-front .fp-more, .pg-front .fp-held { font-family: var(--font-mono); font-size: 13px;
  line-height: 1.55; margin: 14px 0 0; color: var(--muted-n); }
.pg-front .fp-more { color: #111111; }
.pg-front .fp-more .lk { white-space: nowrap; }
/* The row link's .sr-only name is absolutely placed; anchor it here. */
.pg-front .fp-row .lk { position: relative; }

.pg-front .fp-rail { flex: 1 1 300px; min-width: 0; padding-top: 16px; }
.pg-front .fp-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; }
.pg-front .fp-daily { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-h2); line-height: 1; margin-top: 6px; }
.pg-front .fp-price { display: flex; align-items: flex-end; gap: 12px; margin: 14px 0 4px; }
.pg-front .fp-dollars { font-family: var(--font-display); font-weight: 700; font-size: var(--t-big);
  line-height: .9; color: var(--red); }
.pg-front .fp-terms { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.5; padding-bottom: 4px; }
.pg-front .fp-pitch { font-size: 18px; line-height: 1.4; margin: 16px 0 18px; text-wrap: pretty; }
.pg-front .signup { gap: 8px; }
.pg-front .signup input[type=email] { font-family: var(--font-mono); font-size: 14px;
  padding: 13px 12px; background: var(--field); border: 2px solid #111111; }
.pg-front .signup .btn-red, .pg-front .fp-buy { display: block; width: 100%; box-sizing: border-box;
  text-align: center; padding: 15px; font-size: 22px; letter-spacing: .05em; }
.pg-front .fp-buy { margin-bottom: 14px; }
.pg-front .fp-monday .btn-out { width: 100%; font-size: 17px; padding: 11px; }
.pg-front .fp-rail .fine { line-height: 1.6; margin-top: 12px; }

/* club by club */
.pg-front .fp-board .nh-row { margin-bottom: 16px; }
.pg-front .fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid #111111; border-left: 1px solid #111111; }
.pg-front .fb-c { display: block; border-right: 1px solid #111111; border-bottom: 1px solid #111111;
  padding: 0 0 12px; color: #111111; text-decoration: none; background: transparent; min-width: 0; }
.pg-front .fb-stripe { display: block; height: 8px; background: var(--c1, #111111);
  border-bottom: 3px solid var(--c2, #111111); }
.pg-front .fb-in { display: block; padding: 10px 12px 0; }
.pg-front .fb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pg-front .fb-ab { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1; }
.pg-front .fb-st { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; white-space: nowrap; }
.pg-front .fb-g { display: block; font-family: var(--font-mono); font-size: 12px; margin-top: 6px;
  color: var(--muted-n); font-variant-numeric: tabular-nums; }
.pg-front .fb-nm { display: block; font-size: 13px; line-height: 1.25; margin-top: 4px;
  color: var(--muted-n); }
.pg-front .fb-c:hover .fb-ab { color: var(--red); }
.pg-front .fb-c.moved { background: var(--c1, #111111); color: #ffffff; }
.pg-front .fb-c.moved .fb-g, .pg-front .fb-c.moved .fb-nm { color: #ffffff; }
.pg-front .fb-c.moved:hover .fb-ab { color: inherit; text-decoration: underline; }
/* Declared deviation from the handoff (which has white on every moved
   cell): each fill carries whichever of ink or white has the higher
   contrast ratio against it (home._ink_on). A light primary -- ANA orange,
   PHI orange, NSH gold, BOS yellow -- gets ink, because white on it fails
   contrast (white on PHI's #F74902 is 3.55:1; ink is 5.31:1). */
.pg-front .fb-c.moved.ink, .pg-front .fb-c.moved.ink .fb-g,
.pg-front .fb-c.moved.ink .fb-nm { color: #111111; }

/* the record */
.pg-front .fp-rec { padding-bottom: 52px; }
.pg-front .fp-rec .nh-row { margin-bottom: 24px; }
.pg-front .fp-record .bs-c { font-family: var(--font-serif); }
/* Antonio's own multiplication sign is a full-weight X at digit size; set
   smaller and lighter it reads as "times", not a fourth figure. */
.pg-front .fp-x { font-size: .56em; font-weight: 400; margin-left: .05em; vertical-align: .32em; }
.pg-front .fp-rec-more { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; margin: 28px 0 0; }

/* agate */
.pg-front .fp-agate { display: flex; flex-wrap: wrap; gap: 40px 48px; padding-bottom: 52px; }
.pg-front .fp-ag { flex: 1 1 440px; min-width: 0; }
.pg-front .fp-ag-h { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-bottom: 10px; }
.pg-front .fp-ag-h h3 { font-size: var(--t-h3); line-height: 1; margin: 0; }
.pg-front .fp-lt th { border-bottom: 2px solid #111111; font-size: 11px; font-weight: 500;
  letter-spacing: .06em; color: var(--muted-n); text-align: left; }
/* Agate is 13px and left-set; only figures are right-aligned, under
   right-aligned heads (the legacy sheet right-aligned Club and Unit under
   left-aligned heads). */
.pg-front .fp-lt td { font-size: 13px; text-align: left; }
.pg-front .fp-lt td.num, .pg-front .fp-lt th.num { text-align: right; }
/* The legacy sheet indents every first cell 20px (css.py); agate does not. */
.pg-front .fp-lt th:first-child, .pg-front .fp-lt td:first-child { padding-left: 0; }
.pg-front .fp-lt td { white-space: nowrap; }
.pg-front .fp-lt td.nm { font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  white-space: normal; }
.pg-front .fp-lt td.nm a { text-decoration: none; }
.pg-front .fp-lt td.nm a:hover { text-decoration: underline; }
.pg-front .fp-lt .num:last-child { padding-right: 0; }
.pg-front .fp-lt .fp-b { font-weight: 700; }
.pg-front .fp-units { border-top: 2px solid #111111; }
.pg-front .fp-u { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.pg-front .fp-u-club .cc { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3);
  line-height: 1; }
.pg-front .fp-u-five { font-size: 14px; line-height: 1.35; color: var(--body2); min-width: 0; }
.pg-front .fp-u-pace { font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; }

/* from the builder */
.pg-front .fp-builder { display: flex; flex-wrap: wrap; gap: 40px 48px; padding-bottom: 56px; }
.pg-front .fp-note { flex: 999 1 520px; min-width: 0; }
.pg-front .fp-note-h { font-size: var(--t-h2); line-height: 1; margin: 10px 0 18px;
  text-wrap: balance; }
.pg-front .fp-note-p { font-size: 20px; line-height: 1.5; margin: 0; max-width: 34em; text-wrap: pretty; }
.pg-front .fp-sig { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.pg-front .fp-rj { width: 48px; height: 48px; flex: none; display: flex; align-items: center;
  justify-content: center; background: #111111; color: #ffffff; border-radius: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; object-fit: cover; }
.pg-front .fp-sig-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.6; }
.pg-front .fp-method { flex: 1 1 300px; min-width: 0; padding-top: 16px; }
.pg-front .fp-m-h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-h3); line-height: 1; }
.pg-front .fp-m { font-family: var(--font-mono); font-size: 14px; margin-top: 10px;
  font-variant-numeric: tabular-nums; }
.pg-front .fp-m-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--hair); }
.pg-front .fp-m-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 600px) {
  /* Stacked, the record's column rules become row rules. */
  .pg-front .fp-record > * { border-left: 0; padding: 18px 0 0; border-top: 1px solid #111111; }
  .pg-front .fp-record > *:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 520px) {
  .pg-front .fp-top { padding-top: 24px; }
  .pg-front .fp-lt th, .pg-front .fp-lt td { padding-right: 7px; }
  .pg-front .fp-lt th { letter-spacing: .02em; }
  .pg-front .fp-lt td.nm { font-size: 14px; }
  .pg-front .fp-row { grid-template-columns: auto minmax(0, 1fr); }
  .pg-front .fp-row .lk { grid-column: 2; }
  .pg-front .fp-u { grid-template-columns: 72px minmax(0, 1fr) auto; }
}


/* ---- club page (render/team.py render_overview) ------------------------ */
.pg-club .cl-head { padding: 12px 0 20px; }
.pg-club .cl-head .kicker { margin-top: 6px; }
.pg-club h1 { font-size: var(--t-h1); line-height: 1;
              margin: 10px 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.pg-club .cl-h1sub span { white-space: nowrap; }
.pg-club .cl-h1sub { display: block; font-family: var(--font-mono);
  font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: .06em;
  color: var(--muted-n); margin-top: 14px; }
.pg-club .sweater { margin: 22px 0 0; }
.pg-club .cl-deck { font-family: var(--font-serif); font-size: var(--t-deck);
  line-height: 1.35; margin: 16px 0 0; max-width: 34em; text-wrap: pretty; }

/* Stat line: the prototype's cells, 150px basis, 48px Antonio. */
.pg-club .statline { gap: 0; padding: 0; margin: 4px 0 0; }
.pg-club .sl-c { flex: 1 1 150px; padding: 14px 16px 16px 0; margin-right: 16px; }
.pg-club .sl-v { line-height: 1; }
.pg-club .cl-scope { font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-n);
  margin: 8px 0 40px; max-width: none; }

/* First unit / Second unit. */
.pg-club .cl-units { display: flex; flex-wrap: wrap; gap: 36px 48px; margin-bottom: 44px; }
.pg-club .cl-unit { flex: 1 1 440px; min-width: 0; }
.pg-club .cl-uhead { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 4px 12px; border-bottom: 3px solid #111111;
  padding-bottom: 8px; }
.pg-club .cl-uhead h2 { margin: 0; font-size: var(--t-h2); line-height: 1; }
.pg-club .cl-uaside { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; }
.pg-club .cl-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.pg-club .cl-nm { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: var(--t-h3); line-height: 1; color: #111111;
  text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.pg-club .cl-nm:hover { color: var(--red); }
.pg-club .cl-nm.red, .pg-club .cl-ug a.red { color: var(--red); }
.pg-club .cl-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  white-space: nowrap; }
.pg-club .cl-t { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #111111; white-space: nowrap; }
.pg-club .cl-t-up { color: var(--red); }
.pg-club .cl-t-held { color: var(--muted-n); font-weight: 500; cursor: help; }
.pg-club .cl-foot { font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--muted-n); margin: 10px 0 0; }
.pg-club .cl-foot a, .pg-club .cl-held a { color: #111111; }
/* Held skaters: one muted line under the playing five, reason printed. */
.pg-club .cl-held { font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--muted-n); margin: 10px 0 0; padding-top: 8px;
  border-top: 1px dashed var(--hair); }

/* Unit by game. */
.pg-club .cl-ugsec { padding: 22px 0 36px; }
.pg-club .cl-ughead { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 8px 24px; margin-bottom: 14px; }
.pg-club .cl-ughead h2 { margin: 0; font-size: var(--t-h2); line-height: 1; }
.pg-club .cl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; }
.pg-club .cl-legend { margin: 0; padding: 0; list-style: none; }
/* css.py's legacy 20px first-column indent, undone for the agate look. */
.pg-club th:first-child, .pg-club td:first-child { padding-left: 0; }
.pg-club .cl-ug { min-width: 760px; }
.pg-club .cl-ug th { border-bottom: 2px solid #111111; font-size: 11px;
  font-weight: 500; color: var(--muted-n); letter-spacing: .06em; }
.pg-club .cl-ug th:last-child, .pg-club .cl-ug td:last-child { padding-right: 0; }
.pg-club .cl-ug td { vertical-align: middle; }
.pg-club .cl-ug td.nm { font-family: var(--font-serif); font-weight: 600; font-size: 15px;
  white-space: nowrap; }
.pg-club .cl-ug td.nm a { color: #111111; text-decoration: none; }
.pg-club .cl-ug td.nm a:hover { color: var(--red); }
.pg-club .cl-ug td.nm .cl-t { font-size: 11px; }
.pg-club .cl-ug td.b { font-weight: 700; }
/* On a phone the table scrolls; the name stays put so the newest squares
   (the news) can be scrolled to without losing whose row it is. */
@media (max-width: 760px) {
  .pg-club .cl-ug th:first-child, .pg-club .cl-ug td.nm {
    position: sticky; left: 0; z-index: 1; background: var(--paper);
    padding-right: 10px; }
  .pg-club .cl-ug td.nm { white-space: normal; min-width: 124px; max-width: 150px;
    line-height: 1.2; }
}
.pg-club .cl-note { font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--muted-n); margin: 12px 0 0; }

/* The CTA band sits between the design's sections and the record. */
.pg-club .ctaband { margin: 8px 0 52px; }

/* The reference record: the old page's substance, in the paper's voice --
   every section under a double rule, tables agate. */
.pg-club .cl-ref > h2, .pg-club .cl-ref > .answer > h2,
.pg-club .cl-ref .sc-rs > h2, .pg-club .cl-ref .sc-po > h2 {
  border-top: 6px double #111111; padding-top: 22px; margin-top: 48px;
  font-size: var(--t-h2); line-height: 1; }
.pg-club .cl-ref h3 { font-size: var(--t-h3); margin-top: 28px; }

/* The last game's fives (html.unit_formation), redrawn as the design's
   unit list: a ruled column per unit, the number square, the name in
   Antonio, the that-game time in mono. Left-aligned, no tiles. */
.pg-club .cl-ref .formations { gap: 28px 48px; margin: 18px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pg-club .cl-ref .formation header { border-bottom: 3px solid #111111;
  padding-bottom: 8px; margin: 0; gap: 4px 12px; justify-content: space-between; }
.pg-club .cl-ref .formation header h3 { margin: 0; font-size: var(--t-h3); font-weight: 700;
  line-height: .95; }
.pg-club .cl-ref .formation .fmeas { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-n); }
.pg-club .cl-ref .form-row { display: block; margin: 0; }
.pg-club .cl-ref .form-row li { border-bottom: 1px solid var(--hair); }
.pg-club .cl-ref .ptile { flex-direction: row; align-items: center; gap: 12px;
  width: auto; padding: 8px 0; text-align: left; border-top: 0; }
.pg-club .cl-ref .pname { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 20px; line-height: 1; min-height: 0;
  flex: 1 1 auto; min-width: 0; color: #111111; }
.pg-club .cl-ref .ptile:hover .pname { color: var(--red); }
.pg-club .cl-ref .pmeta { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; color: var(--muted-n); white-space: nowrap; }
/* Trend (last 5 vs season): the design's stat-cell type, not the legacy
   pixel font. */
.pg-club .cl-ref .tile { padding: 12px 16px 12px 0; }
.pg-club .cl-ref .tile .k { font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-n); }
.pg-club .cl-ref .tile .v { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-stat); line-height: 1; margin-top: 6px; }
.pg-club .cl-ref .tile .d { font-family: var(--font-mono); font-size: 12px; }
.pg-club .cl-ref .jnum { width: 32px; height: 32px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; border: 2px solid #111111; }
.pg-club .cl-ref .answer p { font-size: 19px; line-height: 1.45; max-width: 40em; }
.pg-club .cl-ref .capture { margin-top: 48px; }
.pg-club .cl-related { font-family: var(--font-mono); font-size: 13px; line-height: 1.8;
  letter-spacing: .02em; text-transform: uppercase; }


/* ---- player: head ------------------------------------------------------- */
.pg-player .pp-top { padding: 30px 0 24px; }
.pg-player .pp-status { margin: 0; }
.pg-player .pp-status .tag { font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; white-space: normal; }
.pg-player .pp-status .kicker { margin: 0; line-height: 1.5; }
.pg-player .pp-name h1 { font-size: var(--t-h1); line-height: 1;
  margin: 14px 0 0; text-wrap: initial; max-width: none; overflow-wrap: break-word; }
.pg-player .pp-name h1 span { display: block; }
.pg-player .pp-name-l h1 { font-size: clamp(28px, 3.3vw, 46px); }
.pg-player .pp-name-xl h1 { font-size: clamp(26px, 3.3vw, 46px); }
.pg-player .sweater { margin: 22px 0 0; }
.pg-player .pp-meta { font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; margin-top: 16px;
  line-height: 1.6; max-width: none; }
.pg-player .pp-bio { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted-n);
  margin-top: 4px; line-height: 1.6; }
.pg-player .pp-deck { font-family: var(--font-serif); font-size: clamp(19px, 2vw, 22px);
  line-height: 1.35; margin: 18px 0 0; max-width: 40em; }
.pg-player .offseason-note { font-size: 16px; padding: 10px 0 0; margin: 16px 0 0; }

/* ---- player: stat line -------------------------------------------------- */
.pg-player .statline { gap: 0; padding: 0; margin: 0; }
.pg-player .statline .sl-c { flex: 1 1 120px; padding: 14px 16px 16px 0;
  margin-right: 12px; }
.pg-player .statline .sl-v { line-height: 1; }
.pg-player .pp-fine { font-family: var(--font-mono); font-size: 11px;
  line-height: 1.55; letter-spacing: .02em; color: var(--muted-n);
  margin: 8px 0 40px; max-width: 70em; }

/* ---- player: unit, game by game ----------------------------------------- */
.pg-player .pp-strip { margin-bottom: 44px; }
.pg-player .pp-strip .nh-row { margin-bottom: 14px; }
.pg-player .pp-h { font-size: var(--t-h2); margin: 0; }
.pg-player .pp-strip .nh-aside { font-size: 11px; color: #111111; }
.pg-player .ustrip-lg { align-items: flex-end; }
/* Cells sized for 30 slots (29 gaps of 4px), so a short record stays a
   left-aligned game-by-game strip instead of stretching into blocks. */
.pg-player .ustrip-lg i { flex: 0 1 calc((100% - 116px) / 30); }
/* Newest game was last night but he did not move: keep the unit's fill,
   ring it in red. The filled red .ulast is reserved for a move. */
.pg-player .pp-lastnight .ustrip-lg i:last-child { outline: 2px solid var(--red);
  outline-offset: 3px; }
.pg-player .pp-strip-ends { display: flex; justify-content: space-between;
  gap: 12px; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted-n);
  margin-top: 10px; }
.pg-player .pp-now { color: var(--red); font-weight: 700; }
.pg-player .pp-then { color: #111111; font-weight: 700; }

/* ---- player: three ruled columns ---------------------------------------- */
.pg-player .pp-cols { display: flex; flex-wrap: wrap; gap: 36px 48px;
  border-top: 6px double #111111; padding: 22px 0 52px; }
.pg-player .pp-col { flex: 1 1 300px; min-width: 0; }
.pg-player .pp-col + .pp-col { border-left: 1px solid #111111; padding-left: 28px; }
.pg-player .pp-col-k { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-n); }
.pg-player .pp-col-v { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: var(--t-stat); line-height: 1; margin-top: 10px;
  overflow-wrap: break-word; }
.pg-player .pp-col-v span { font-size: 22px; }
.pg-player .pp-col-v a { color: #111111; text-decoration: none; }
.pg-player .pp-col-v a:hover { color: var(--red); }
.pg-player .pp-col p { font-size: 18px; line-height: 1.4; margin: 8px 0 0; }
@media (max-width: 760px) {
  .pg-player .pp-cols { gap: 0; }
  .pg-player .pp-col { flex-basis: 100%; padding: 18px 0 20px; }
  .pg-player .pp-col:first-child { padding-top: 0; }
  .pg-player .pp-col + .pp-col { border-left: 0; padding-left: 0;
    border-top: 1px solid #111111; }
}

/* ---- player: the band and the one form ---------------------------------- */
.pg-player .ctaband { margin: 0 0 20px; }
.pg-player .pp-signup { margin: 0 0 12px; max-width: 760px; }
.pg-player .pp-signup-lead { font-size: 18px; line-height: 1.4; margin: 0 0 12px; }
.pg-player .pp-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.pg-player .pp-form input[type=email] { flex: 1 1 240px; min-width: 0; }
.pg-player .pp-form .btn-red { font-size: 18px; padding: 12px 18px; }

/* ---- player: the record below (SEO blocks, restyled) -------------------- */
.pg-player .toc { margin-top: 40px; }
.pg-player .pp-more > h2, .pg-player .pp-more .answer > h2 {
  border-top: 6px double #111111; padding-top: 22px; margin: 48px 0 18px;
  font-size: var(--t-h2); line-height: 1; }
.pg-player .answer { margin: 0; padding: 0; border: 0; }
.pg-player .answer p { font-size: 18px; line-height: 1.45; max-width: 44em; }
.pg-player .answer p:first-of-type { font-size: clamp(19px, 2vw, 22px);
  line-height: 1.35; }
.pg-player .strip-facts { display: flex; flex-wrap: wrap; gap: 0;
  border-top: 3px solid #111111; border-bottom: 1px solid #111111;
  margin: 22px 0 0; padding: 0; list-style: none; }
.pg-player .strip-facts > li { flex: 1 1 140px; min-width: 0; max-width: none;
  padding: 12px 16px 14px 0; margin: 0 12px 0 0; border: 0; background: none; }
.pg-player .strip-facts .label { display: block; font-size: 11px;
  color: var(--muted-n); }
.pg-player .strip-facts .v { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 22px; line-height: 1.05; margin-top: 6px;
  letter-spacing: .01em; color: #111111; }
.pg-player figure .label { display: block; color: var(--muted-n); margin-bottom: 4px; }
/* The deployment strip's six states are css_deploy.py's, site-wide -- no
   page may re-colour them (owner, 28 Sept 2026: did-not-play must stand out). */
.pg-player h2 em { font-family: inherit; font-style: normal; font-weight: inherit;
  letter-spacing: inherit; }
.pg-player .scroll { margin: 8px 0 0; border: 0; background: transparent; }
.pg-player table { font-size: 13px; }
.pg-player thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; color: var(--muted-n); background: #ffffff;
  border-bottom: 1px solid #111111; }
.pg-player th:first-child, .pg-player td:first-child { padding-left: 0; }
.pg-player tr.totals td { font-size: 13px; background: #ffffff;
  border-bottom: 1px solid #111111; }
.pg-player tr.pp1 td, .pg-player tr.pp2 td { border-bottom: 1px solid var(--hair); }
.pg-player tbody tr:hover { background: transparent; }
.pg-player .method-note { max-width: 60em; }
.pg-player .pp-more p { max-width: 44em; }
.pg-player .accord { margin: 0; }
.pg-player .accord details:last-child { border-bottom: 1px solid #111111; }
.pg-player .ac-body { font-size: 18px; line-height: 1.45; padding: 10px 0 4px;
  max-width: 44em; }
.pg-player .pp-related { font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.9; }


/* ---- leaders (.pg-leaders) ---------------------------------------------- */
.pg-leaders .ld-kick { margin: 26px 0 0; font-family: var(--font-mono); font-size: 12px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.pg-leaders .ld-head { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 16px 48px; padding: 10px 0 22px; }
.pg-leaders .ld-head h1 { margin: 0; font-size: var(--t-h1);
  line-height: 1; }
.pg-leaders .ld-deck { flex: 1 1 320px; margin: 0 0 10px; max-width: 26em;
  font-size: var(--t-deck); line-height: 1.35; text-wrap: pretty; }
.pg-leaders .ld-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px;
  border-top: 3px solid #111111; border-bottom: 1px solid #111111;
  margin-bottom: 8px; }
.pg-leaders .ld-tabs a { border-bottom: 4px solid transparent; margin-bottom: -1px;
  padding: 12px 0 9px; font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: .03em; text-transform: uppercase;
  color: #111111; text-decoration: none; line-height: 1.1; }
.pg-leaders .ld-tabs a:hover { color: var(--red); }
.pg-leaders .ld-tabs a[aria-current="true"] { color: var(--red);
  border-bottom-color: var(--red); }
/* No script: every panel stands under its own heading. */
.pg-leaders .ld-panel { padding: 8px 0 12px; scroll-margin-top: 12px; }
.pg-leaders .ld-panel + .ld-panel { border-top: 6px double #111111;
  margin-top: 28px; padding-top: 22px; }
.pg-leaders .ld-ph { margin: 14px 0 12px; font-size: var(--t-h2); line-height: .9; }
/* With the script, the tabs ARE the headings: one panel, no double rule. */
.pg-leaders.ld-js .ld-panel + .ld-panel { border-top: 0; margin-top: 0;
  padding-top: 8px; }
.pg-leaders.ld-js .ld-ph { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.pg-leaders .ld-panel[hidden] { display: none; }
.pg-leaders .scope-chips { margin: 14px 0 4px; }

/* Agate, the handoff's way: 2px ink under the head, hairline rows. */
.pg-leaders .scroll { overflow-x: auto; padding-bottom: 12px; }
.pg-leaders table { min-width: 600px; font-size: 13px; }
.pg-leaders #skaters table { min-width: 820px; }
.pg-leaders #units table { min-width: 760px; }
.pg-leaders #draws table { min-width: 600px; }
.pg-leaders #clubs table { min-width: 640px; }
/* The table's caption, lifted above the scroll box so it wraps on a phone. */
.pg-leaders .ld-cap { margin: 4px 0 10px; max-width: none; font-family: var(--font-mono);
  font-size: 11px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-n); }
.pg-leaders .ld-none { margin: 8px 0 12px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted-n); }
.pg-leaders th { padding: 10px 10px 8px 0; border-bottom: 2px solid #111111;
  font-size: 11px; font-weight: 500; color: var(--muted-n); }
.pg-leaders td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hair);
  vertical-align: middle; }
.pg-leaders th:last-child, .pg-leaders td:last-child { padding-right: 0; }
.pg-leaders th:first-child, .pg-leaders td:first-child { padding-left: 0; }
.pg-leaders :is(th, td):is(.rk, .nm, .l, .club, .five, .bar, .cbar) { text-align: left; }
.pg-leaders td.five { white-space: normal; min-width: 240px; }
.pg-leaders td.rk { color: var(--muted-n); }
.pg-leaders td.nm, .pg-leaders td.five { font-family: var(--font-serif); font-size: 15px; }
.pg-leaders td.nm { font-weight: 600; }
.pg-leaders td.nm a, .pg-leaders td.five a { text-decoration: none; }
.pg-leaders td.nm a:hover, .pg-leaders td.five a:hover { text-decoration: underline; }
.pg-leaders td.tot { font-weight: 700; font-size: 15px; }
.pg-leaders td.club .cc { font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: .01em; }
.pg-leaders td.club .cc-name { margin-left: 6px; }
.pg-leaders .ld-sub { display: block; margin-top: 2px; font-family: var(--font-serif);
  font-size: 13px; color: var(--muted-n); }
.pg-leaders #clubs td { padding-top: 7px; padding-bottom: 7px; }
.pg-leaders th.bar { width: 150px; }
.pg-leaders th.cbar { width: 45%; }
.pg-leaders .ld-bar, .pg-leaders .ld-cbar { display: flex; align-items: center; gap: 8px; }
.pg-leaders .ld-bar i { flex: 1; height: 8px; background: var(--track); display: block; }
.pg-leaders .ld-bar b { display: block; height: 8px; background: #111111; }
.pg-leaders .ld-bar > span { width: 36px; text-align: right; flex: none; }
.pg-leaders .ld-cbar { gap: 10px; }
.pg-leaders .ld-cbar i { flex: 1; height: 14px; display: block; }
.pg-leaders .ld-cbar b { display: block; height: 14px; background: var(--c1, #111111); }
.pg-leaders .ld-cbar > span { width: 44px; text-align: right; flex: none; font-weight: 700; }
.pg-leaders .held { font-size: 11px; color: var(--muted-n); }

.pg-leaders .ld-notes { margin: 6px 0 36px; }
.pg-leaders .ld-notes .method-note { max-width: 60em; margin: 6px 0; }

/* The capture, as the handoff's dark CTA band. */
.pg-leaders .capture { background: #111111; color: #ffffff; border-top: 0;
  padding: 28px clamp(20px, 3vw, 36px); margin: 36px 0 52px; }
.pg-leaders .capture .section-head { color: #ffffff; margin: 0 0 16px;
  font-size: var(--t-h2); line-height: .95; max-width: 18em; }
.pg-leaders .capture form { max-width: 640px; }
.pg-leaders .capture input[type=email] { background: #ffffff; border-color: #ffffff; }
.pg-leaders .capture button { font-size: 20px; padding: 12px 22px; }
.pg-leaders .capture button:hover { background: #ffffff; color: #111111; }
.pg-leaders .capture .method-note { color: rgba(255,255,255,.78); max-width: 52em; }
@media (max-width: 600px) {
  .pg-leaders .ld-tabs { gap: 0 20px; }
  .pg-leaders .ld-tabs a { font-size: 21px; }
}


/* ---- pricing (.pg-pricing) ---------------------------------------------- */
.pg-pricing .pr-head { padding: 30px 0; }
.pg-pricing .pr-head h1 { margin: 0; font-size: var(--t-h1);
  line-height: 1; text-wrap: balance; }
.pg-pricing .pr-deck { margin: 18px 0 0; max-width: 32em;
  font-size: var(--t-deck); line-height: 1.35; text-wrap: pretty; }
.pg-pricing .pr-tiers { display: flex; flex-wrap: wrap; border-top: 6px solid #111111;
  margin-bottom: 48px; }
.pg-pricing .pr-tier { min-width: 0; box-sizing: border-box; }
.pg-pricing .pr-pp1 { flex: 1 1 420px; padding: 22px 36px 32px 0;
  border-right: 3px solid #111111; }
.pg-pricing .pr-pp2 { flex: 1 1 360px; padding: 22px 0 32px 36px; }
.pg-pricing .pr-top { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; }
.pg-pricing .pr-unit { margin: 0; font-size: var(--t-h2); line-height: 1; }
.pg-pricing .pr-pp1 .pr-unit { color: var(--red); }
.pg-pricing .pr-k, .pg-pricing .pr-terms { font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; }
.pg-pricing .pr-k { font-weight: 700; }
.pg-pricing .pr-price { display: flex; align-items: flex-end; gap: 12px; margin: 22px 0 6px; }
.pg-pricing .pr-amt { font-family: var(--font-display); font-weight: 700; font-size: var(--t-big);
  line-height: .9; }
.pg-pricing .pr-terms { line-height: 1.5; }
.pg-pricing .pr-lines { list-style: none; margin: 22px 0 24px; padding: 0;
  border-top: 1px solid #111111; }
.pg-pricing .pr-lines li { display: flex; gap: 16px; padding: 11px 0; margin: 0;
  max-width: none; border-bottom: 1px solid var(--hair); font-size: 18px; line-height: 1.35; }
.pg-pricing .pr-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--red); padding-top: 4px; flex: none; }
.pg-pricing .pr-pp2 .pr-n { color: var(--muted-n); }
.pg-pricing .pr-form { gap: 10px; }
.pg-pricing .pr-form input[type=email] { width: 100%; box-sizing: border-box; }
.pg-pricing .pr-cta { display: block; width: 100%; box-sizing: border-box; text-align: center;
  font-size: 20px; letter-spacing: .05em; padding: 17px; }
.pg-pricing .btn-out.pr-cta { padding: 15px; }
.pg-pricing .signup .btn-red.pr-cta { font-size: 20px; padding: 17px; }
.pg-pricing .fine { max-width: 44em; }

.pg-pricing .pr-sec { padding-bottom: 44px; }
.pg-pricing .pr-h { margin: 0 0 14px; font-size: var(--t-h2); line-height: .9; }
.pg-pricing .pr-sec .scroll { overflow-x: auto; }
.pg-pricing .pr-sec table { min-width: 560px; font-size: 14px; }
.pg-pricing .pr-sec th { padding: 10px 10px 8px 0; border-bottom: 2px solid #111111;
  font-size: 11px; font-weight: 500; color: var(--muted-n); }
.pg-pricing .pr-sec th.paid { color: var(--red); font-weight: 700; }
.pg-pricing .pr-sec td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--hair);
  text-align: left; white-space: normal; }
.pg-pricing .pr-sec th { text-align: left; }
.pg-pricing .pr-sec :is(th, td):first-child { padding-left: 0; }
.pg-pricing .pr-sec :is(th, td):last-child { padding-right: 0; }
.pg-pricing .pr-sec td.feat { font-family: var(--font-serif); font-size: 17px; }
.pg-pricing .pr-sec td.free { color: var(--muted-n); }
.pg-pricing .pr-sec td.paid { font-weight: 700; }
.pg-pricing .pr-faq { padding-bottom: 56px; }
.pg-pricing .pr-faq .pr-h { margin-bottom: 20px; }
.pg-pricing .pr-qs { display: grid; gap: 0 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pg-pricing .pr-q { border-top: 1px solid #111111; padding: 14px 0 22px; }
/* Each Q&A is an open <details>: no marker, no toggle affordance -- it
   reads as the handoff's static grid. */
.pg-pricing .pr-q > summary { display: block; list-style: none; cursor: default; }
.pg-pricing .pr-q > summary::-webkit-details-marker { display: none; }
.pg-pricing .pr-q h3 { margin: 0; font-size: var(--t-h3); line-height: 1.05; }
.pg-pricing .pr-q p { margin: 8px 0 0; font-size: 18px; line-height: 1.45; text-wrap: pretty; }

/* One column: the vertical rule becomes a rule across. */
@media (max-width: 829px) {
  .pg-pricing .pr-pp1 { border-right: 0; padding-right: 0; }
  .pg-pricing .pr-pp2 { padding-left: 0; border-top: 3px solid #111111; }
}
/* Phone: all three comparison columns in view, so the paid one is seen
   without a sideways scroll. The strings are short enough to wrap. */
@media (max-width: 600px) {
  .pg-pricing .pr-sec table { min-width: 0; font-size: 12px; }
  .pg-pricing .pr-sec td.feat { font-size: 15px; }
  .pg-pricing .pr-sec :is(th, td) { padding-right: 8px; }
}

/* ---- the strip: six states, six shapes (css_deploy.py) ---- */
.deploy span, .ustrip i, .deploy-key i {
  box-sizing: border-box; background: transparent; border: 0; }
.deploy span { width: 13px; height: 13px; }
.deploy .u1, .ustrip .u1, .deploy-key .u1 { background: #111111; }
.deploy .u2, .ustrip .u2, .deploy-key .u2 { background: #b8b8b8; }
.deploy .u0, .ustrip .u0, .deploy-key .u0 {
  background: #ffffff; border: 2px solid #111111; }
.deploy .no, .ustrip .no, .deploy-key .no,
.deploy .ab, .ustrip .ab, .deploy-key .ab { position: relative; overflow: hidden; }
.deploy .no, .ustrip .no, .deploy-key .no { border: 0; background: transparent; }
.deploy .no::after, .ustrip .no::after, .deploy-key .no::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; background: #6f6f6f; }
.deploy .ab, .ustrip .ab, .deploy-key .ab {
  border: 2px solid #c8281e; background: #ffffff; }
.deploy .ab::after, .ustrip .ab::after, .deploy-key .ab::after {
  content: ""; position: absolute; left: 50%; top: -4px; width: 2px;
  height: calc(100% + 8px); margin-left: -1px; background: #c8281e;
  transform: rotate(45deg); }
.deploy .nm, .ustrip .nm, .deploy-key .nm {
  border: 1px dashed #5c5c5c; background: transparent; }
.deploy .gap { width: 7px; }
.deploy .seam { width: 9px; height: 13px; position: relative; }
.deploy .seam::after { content: ""; position: absolute; left: 4px; top: -2px;
                       width: 1px; height: 17px; background: #111111; }
.deploy .dedge { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
                 color: #111111; }
.deploy-span { font-family: var(--font-mono); font-size: 12px; color: #111111; }
.deploy-key { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
              letter-spacing: .06em; text-transform: uppercase; color: #111111;
              gap: 8px 22px; margin: 6px 0 10px; }
.deploy-key li { display: inline-flex; align-items: center; }
.deploy-key i { width: 13px; height: 13px; margin-right: 8px; flex: none; }
/* the redesign's big player strip (news.unit_strip size='lg', 56px cells) */
.ustrip-lg .u0 { border-width: 3px; }
.ustrip-lg .ab { border-width: 3px; }
.ustrip-lg .ab::after { width: 3px; margin-left: -1.5px; top: -12px;
                        height: calc(100% + 24px); }
.ustrip-lg .no::after { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.ustrip i.ulast { background: #c8281e; border: 0; outline: 2px solid #c8281e;
                  outline-offset: 3px; }

*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }