/* Crew Fantasy — one hand-written stylesheet, no framework and no build step.

   THE LOOK IS "BROADCAST DARK": near-black by default, one electric accent, a single
   grotesk, big tabular numerals, and franchise colour as the only other colour on the
   page. Light mode exists and is a toggle away; it is the alternative, not the design.

   MOBILE FIRST. Every rule is written for a phone and widened at the two breakpoints
   below. Nothing here assumes a pointer: targets are 44px, hover is decoration only,
   and focus is visible for a keyboard. */

/* ------------------------------------------------------------------ fonts */
/* Geist, self-hosted: one variable file covers every weight, and nothing on the page
   phones a third party to render text. `swap` shows the fallback first, which on a
   phone is the difference between reading and waiting. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  --bg:      #0a0c10;                       /* the ground: black with a blue cast */
  --bg-2:    #10131a;                       /* a card sitting on it */
  --bg-3:    #171b24;                       /* the same card, hovered */
  --line:    rgba(255,255,255,.08);
  --line-2:  rgba(255,255,255,.16);
  --ink:     #eef1f6;
  --ink-2:   #c3cad5;
  --muted:   #8791a0;
  --accent:  #c8ff3d;                       /* volt: the one electric colour */
  --accent-ink: #0a0c10;                    /* text sitting on it */
  --accent-text: #d6ff66;                   /* the same accent, used AS text on dark */
  --good:    #3fd483;
  --bad:     #ff6363;
  --focus:   var(--accent);
  --hero-ink: #fff;
  --radius:  14px;
  --radius-s: 8px;
  --shadow:  0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px rgba(0,0,0,.45);
  --ease:    160ms cubic-bezier(.2,.7,.2,1);
  --head:    56px;                          /* the masthead, which the strip sticks under */
  --pad:     18px;                          /* the page gutter on a phone */
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7; --bg-2: #ffffff; --bg-3: #eef0f3;
  --line: rgba(10,12,16,.09); --line-2: rgba(10,12,16,.18);
  --ink: #0f1218; --ink-2: #363c47; --muted: #66707e;
  /* Volt on white is unreadable as text, so the accent keeps its job as a background and
     the text form darkens until it passes. */
  --accent: #b9f22a; --accent-ink: #0f1218; --accent-text: #4a7a00;
  --good: #14874a; --bad: #d1342a;
  --shadow: 0 1px 2px rgba(10,12,16,.06), 0 12px 28px rgba(10,12,16,.08);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 12px); }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";     /* Geist's single-storey a and open digits */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
b, strong { font-weight: 650; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.2vw + 1rem, 3.25rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.02; margin: 4px 0 14px; }
p { margin: 0 0 1em; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Numbers line up. Everywhere. */
.num, td, th, time, .pts, .count, .yr, .when { font-variant-numeric: tabular-nums; }

.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--pad); }
main.wrap { padding-top: 22px; padding-bottom: 40px; }
main section { margin-bottom: 36px; }

/* The eyebrow: every section label on the site. Small, spaced, and carrying a short
   volt dash so the eye finds the start of a block before it reads the words. */
main h2, .rail h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; padding: 0;
}
main h2::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--accent); flex: 0 0 auto; }
main h2 a { color: inherit; }
main h2 a:hover { color: var(--ink); text-decoration: none; }

.standfirst { color: var(--ink-2); font-size: clamp(1.05rem, .4vw + 1rem, 1.2rem); line-height: 1.5; margin: 0 0 18px; max-width: 62ch; text-wrap: pretty; }
.kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.why { color: var(--muted); font-size: .9em; }
.tablenote { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); max-width: 70ch; text-wrap: pretty; }
.seasonnav, .backlink { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.seasonnav a:hover, .backlink a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ masthead */
.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; height: var(--head);
  padding: 0 var(--pad);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-weight: 800; font-size: 15px; letter-spacing: .16em; white-space: nowrap;
  color: var(--ink); flex: 0 0 auto;
}
.wordmark:hover { text-decoration: none; color: var(--accent-text); }
.masthead .tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.iconbtn {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.iconbtn:hover { background: var(--bg-3); color: var(--ink); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn .sun, :root[data-theme="light"] .iconbtn .moon { display: none; }
:root[data-theme="light"] .iconbtn .sun { display: block; }

/* The nav on a phone is a sheet that drops from the bar; on a laptop it is the row of
   links it always was. Without JavaScript the sheet cannot open, so <noscript> turns it
   back into a scrolling strip -- the links are never unreachable. */
.masthead nav { display: none; }
/* The page dims behind the open sheet, so the sheet reads as on top of the page rather
   than as a slice of it. Inside the masthead's stacking context, so it sits under the
   links and over everything else. */
.masthead.open::before {
  content: ""; position: fixed; inset: var(--head) 0 0 0; z-index: -1;
  background: rgba(0,0,0,.55);
}
.masthead.open nav {
  display: flex; flex-direction: column; position: absolute; top: var(--head); left: 0; right: 0;
  padding: 8px var(--pad) 14px; background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.masthead nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 6px;
  font-size: 17px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line);
}
.masthead nav a:last-child { border-bottom: 0; }
.masthead nav a:hover { text-decoration: none; color: var(--accent-text); }
.masthead nav a[aria-current="page"] { color: var(--accent-text); }

/* ------------------------------------------------------------------ scoreboard strip */
/* Not sticky: with the masthead already pinned, a pinned strip took a third of a phone
   screen for a row of fixtures the reader glanced at once. It scrolls away. */
.scoreboard {
  display: flex; flex-direction: column; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
/* On a phone the label sits above the fixtures so the whole width goes to the cards;
   side by side it left room for one and a half of them. */
.sblabel {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px var(--pad) 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.scoreboard.fixtures .sblabel::before, .scoreboard.live .sblabel::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.sbtrack {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}
.sbtrack::-webkit-scrollbar { display: none; }
.sbgame {
  flex: 0 0 auto; min-width: 158px; padding: 9px 14px; border-right: 1px solid var(--line);
  font-size: 13.5px; scroll-snap-align: start; display: grid; gap: 3px;
}
/* A result links to its box score: the whole card is the target, so no underline. */
a.sbgame:hover { text-decoration: none; background: var(--bg-3); }
a.sbgame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sbrow { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); line-height: 1.35; }
.sbrow b { font-weight: 600; }
.sbrow.win { color: var(--ink); }
.sbrow.win b { font-weight: 800; }
.scoreboard.fixtures .sbrow { color: var(--ink-2); }

/* ------------------------------------------------------------------ front page */
.lede { display: grid; gap: 28px; padding: 26px 0 8px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
/* A grid item's minimum is its content, and the champions chip row is a scroller whose
   content is wider than a phone -- so without this the column blew out past the screen
   and took the headline with it. */
.lede > * { min-width: 0; }
.rail .plain.years { width: 100%; }
.feature h1 { margin: 10px 0 12px; }
.feature h1 a { color: var(--ink); }
.feature h1 a:hover { text-decoration: none; color: var(--accent-text); }
.feature .standfirst { font-size: clamp(1.1rem, .6vw + 1rem, 1.3rem); }
.byline { color: var(--muted); font-size: 13.5px; display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
.feature .byline { margin-top: 6px; }

/* The champions rail: a roll on a laptop, a row of chips on a phone. */
.rail .plain.years { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.rail .plain.years::-webkit-scrollbar { display: none; }
.rail .plain.years li {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.rail .plain.years .yr { color: var(--muted); font-weight: 600; margin: 0; }
/* The ticker's second copy of the roll (see .champroll) exists only for the desktop loop. */
.rail .plain.years .dup { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .rail .plain.years .dup { display: flex; }
}
.rail .plain.years .yr a:hover { color: var(--ink); text-decoration: none; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.plain li .why { font-size: 13px; }
.when { color: var(--muted); }

/* ------------------------------------------------------------------ headline lists */
.headlines { list-style: none; margin: 0; padding: 0; }
.headlines li {
  display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.headlines .hl { font-size: clamp(1.15rem, .8vw + 1rem, 1.35rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.headlines .hl:hover { text-decoration: none; color: var(--accent-text); }
.headlines .why { font-size: 14.5px; color: var(--ink-2); }
.headlines time { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------------ cards */
.honour, .trophy, .card, .side, .filters {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.honours { margin: 18px 0 30px; }
.honourrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.honour { padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 128px; }
.honour .mark { font-size: 28px; line-height: 1; }
.honour .label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.honour .who { font-size: 18px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.honour .who:hover { text-decoration: none; color: var(--accent-text); }
.honour .runner { font-size: 12px; color: var(--muted); }
.honour.empty { opacity: .45; }
.honour.empty .who { font-weight: 400; }
.comphead { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; }
.comphead:hover { text-decoration: none; }
.comphead:hover .label { color: var(--ink); }
.sacko { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); padding-top: 12px; border-top: 1px dashed var(--line-2); }
.lastyear h2 a { color: inherit; }

.case { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 30px; }
.trophy { padding: 16px 12px; text-align: center; color: inherit; display: grid; gap: 4px; transition: border-color var(--ease), transform var(--ease), background var(--ease); }
.trophy:hover { text-decoration: none; border-color: var(--line-2); background: var(--bg-3); transform: translateY(-1px); }
.trophy .mark { font-size: 24px; line-height: 1; }
.trophy .count { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.trophy.zero .count { color: var(--muted); }   /* a shelf that is empty says so quietly */
.trophy .label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------------ franchise */
.teamhero {
  background: var(--team, var(--bg-2)); color: var(--ink, var(--hero-ink));
  border-bottom: 4px solid var(--accent, var(--line-2));
  /* A sheen so a flat swatch reads as a surface rather than a fill. */
  background-image: linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%, rgba(0,0,0,.18));
}
.herowrap { display: flex; align-items: center; gap: 16px; padding: 26px var(--pad); }
.crest { font-size: 30px; line-height: 1; }
.crest.big {
  font-size: 44px; width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 10px 30px rgba(0,0,0,.25);
}
.teamhero h1 { margin: 0; font-size: clamp(1.9rem, 5vw + .5rem, 3rem); }
.teamhero .tagline { margin: 6px 0 0; font-size: 14px; opacity: .88; font-weight: 500; }

.cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-height: 132px; padding: 16px; border: 0; color: var(--ink, inherit);
  background: var(--team, var(--bg-2));
  background-image: linear-gradient(150deg, rgba(255,255,255,.16), transparent 50%, rgba(0,0,0,.22));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform var(--ease), box-shadow var(--ease);
}
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, var(--shadow); }
.card .crest { font-size: 34px; margin-bottom: auto; }
.card .name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.card .sub { font-size: 12.5px; opacity: .85; }

/* ------------------------------------------------------------------ tables */
/* Every stats table lives inside .tablewrap, which build_site.py adds on the way out.
   On a phone the table scrolls inside it and the first column stays put, so a row never
   loses its name while the numbers slide. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: var(--radius-s); }
table.stats { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.stats th {
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 10px 10px; background: var(--bg); border-bottom: 1px solid var(--line-2);
}
/* Cells never wrap: the table scrolls sideways instead, which is what the wrapper is for.
   A record broken across two lines at its dash read as two numbers. */
table.stats td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.stats tbody tr { background: var(--bg); transition: background var(--ease); }
table.stats tbody tr:hover { background: var(--bg-3); }
table.stats td:first-child, table.stats th:first-child { position: sticky; left: 0; z-index: 2; background: inherit; }
table.stats th:first-child { z-index: 3; background: var(--bg); }
table.stats td a:hover { color: var(--accent-text); text-decoration: none; }
.num, table.stats th.num, table.stats td.num { text-align: right; }
.yr { color: var(--muted); }
.yr a { font-weight: 600; }
.rank.champ { color: var(--accent-text); font-weight: 800; }
.compact td, .compact th { padding: 7px 8px; font-size: 13.5px; }
table.seasons td { padding: 12px 10px; }
table.seasons .yr a { font-weight: 700; font-size: 15px; color: var(--ink); }
.wonmarks { white-space: nowrap; font-size: 13px; letter-spacing: 1px; }
td.marks { font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.honcell .ha { display: inline-block; margin-right: 12px; white-space: nowrap; font-size: 13.5px; }
.winner { font-weight: 700; }
.weektable td.winner { font-weight: 700; }
.weektable .num { width: 68px; }
.weektable td.why { font-size: 12px; }
/* {{lowest N}}: the lowest weekly scores, as bars. One fill; the marked franchise in the accent. */
.lowchart { margin: 20px 0 24px; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s); }
.lowchart figcaption { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0 0 12px; }
.lowchart ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lowrow { display: grid; grid-template-columns: 1.25em minmax(0, 13em) minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: 14px; }
.lowrank { color: var(--muted); font-variant-numeric: tabular-nums; }
.lowwho { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.lowbar { height: 14px; }
.lowbar > span { display: block; height: 100%; min-width: 2px; background: var(--line-2); border-radius: 0 4px 4px 0; }
.lowrow.hit .lowbar > span { background: var(--accent); }
.lowrow.hit .lowwho { font-weight: 700; }
.lowpts { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 520px) {
  .lowrow { grid-template-columns: 1.25em minmax(0, 1fr) 3.2em; }
  .lowbar { grid-column: 2 / 4; grid-row: 2; }
}

/* Sortable headers: the arrow marks the column doing the sorting. */
th[data-k] { cursor: pointer; user-select: none; }
th[data-k]:hover { color: var(--ink); }
th[data-sorted]::after { content: " \25B2"; font-size: 9px; color: var(--accent-text); }
th[data-sorted="down"]::after { content: " \25BC"; }

.cols { display: grid; grid-template-columns: 1fr; gap: 30px; }

/* ------------------------------------------------------------------ filters */
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; margin: 16px 0 14px; }
.filters label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.filters input, .filters select {
  font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal; min-height: 44px; width: 100%;
  padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg); color: var(--ink); appearance: none; -webkit-appearance: none;
}
.filters select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.filters input::placeholder { color: var(--muted); }
.filters input:focus, .filters select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.filters button, .pager button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.filters button:hover, .pager button:hover:not(:disabled) { background: var(--bg-3); border-color: var(--ink-2); }
.filters button { align-self: end; }
.count { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.ticks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.filters .tick {
  flex-direction: row; align-items: center; gap: 6px; cursor: pointer; min-height: 40px;
  padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 16px; line-height: 1; background: var(--bg);
  transition: background var(--ease), border-color var(--ease);
}
.filters .tick input { min-width: 0; min-height: 0; width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--accent); }
.tick:hover { border-color: var(--ink-2); }
.tick:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--bg)); }
.pager { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager span { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ the matrix */
.matrixwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: var(--radius-s); }
table.matrix { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.rowhead, .rot span { font-weight: 700; white-space: nowrap; color: var(--ink); }
.rowhead { text-align: left; padding: 6px 10px; background: var(--bg); position: sticky; left: 0; z-index: 2; }
.rot { height: 92px; padding: 0; background: var(--bg); }
.rot span { display: inline-block; transform: rotate(-60deg); transform-origin: left bottom; width: 22px; margin-left: 50%; }
.cell {
  padding: 8px 8px; text-align: center; border-radius: 6px; color: var(--ink); min-width: 52px;
  white-space: nowrap;
  /* --c is which side of .500 this record falls, --m how far from it; both decided in
     build_site.py. Capped short of full strength so the number stays readable. */
  background: color-mix(in oklab, var(--c) calc(var(--m) * 62%), var(--bg-2));
}
.self { background: var(--bg-3); border-radius: 6px; }
.none { text-align: center; color: var(--muted); }

/* ------------------------------------------------------------------ box score */
.boxscore { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 18px; }
.side {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px;
  border-left: 5px solid var(--line-2);
}
.side.won { border-left-color: var(--good); }
.side .who { font-size: 20px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.side .who:hover { text-decoration: none; color: var(--accent-text); }
.side .pts { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--muted); }
.side.won .pts { color: var(--good); }
table.lineup td { padding: 8px 8px; font-size: 14px; }
table.lineup .slot { width: 52px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
table.lineup tr.benched td { color: var(--muted); }
table.lineup tr.total td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }
table.lineup tr.total td:nth-child(2) { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------------ competitions */
.comptitle { display: flex; align-items: center; gap: 14px; margin: 16px 0 10px; }
.bigmark { font-size: 40px; line-height: 1; }
.prov { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; color: var(--muted); }
.compchips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.compchip {
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
  color: var(--ink); font-weight: 600; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color var(--ease), background var(--ease);
}
.compchip:hover { text-decoration: none; border-color: var(--ink-2); background: var(--bg-3); }
.cycles li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.cycles .why { grid-column: 1 / -1; }
.cycles li.open .when { color: var(--ink); font-weight: 600; }
.alsosee { border-top: 1px solid var(--line); padding-top: 20px; }
.secref { color: inherit; }
.secref:hover { color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------------ best players */
.posgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 30px; }
.poscol h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.best li { display: grid; grid-template-columns: 18px 1fr auto; gap: 2px 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.best .pos-rank { color: var(--muted); font-size: 12px; }
.best .pl { font-weight: 600; }
.best .pl-pts { font-weight: 700; }
.best .why { grid-column: 2 / -1; font-size: 12px; }
.tbd { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------------ articles */
.article { max-width: 700px; }
.article h1 { margin: 10px 0 14px; }
.article .standfirst { font-size: clamp(1.15rem, .6vw + 1rem, 1.35rem); line-height: 1.45; margin: 0 0 16px; }
.article .byline { margin: 0 0 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.prose { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.prose p { margin: 0 0 1.25em; }
.prose strong { color: var(--ink); }
.prose h2 {
  display: block; font-size: clamp(1.3rem, .8vw + 1rem, 1.55rem); font-weight: 750; text-transform: none; letter-spacing: -.02em;
  color: var(--ink); margin: 40px 0 12px; padding-top: 18px; border-top: 1px solid var(--line);
}
.prose h2::before { content: none; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.prose em { color: var(--muted); }
.prose blockquote { margin: 0 0 1.25em; padding-left: 16px; border-left: 3px solid var(--accent); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 20px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.25em; }
.prose li { margin: 0 0 .5em; }
.teamref { white-space: nowrap; font-weight: 650; color: var(--ink); }
.teamref:hover { color: var(--accent-text); text-decoration: none; }
.tags { margin: 28px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tagchip { font-size: 13px; font-weight: 600; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); white-space: nowrap; }
.tagchip:hover { text-decoration: none; border-color: var(--ink-2); }

/* ------------------------------------------------------------------ footer */
.footer { margin-top: auto; padding: 28px 0 40px; border-top: 1px solid var(--line); background: var(--bg-2); font-size: 13.5px; color: var(--muted); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.fmark { font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.fmark:hover { text-decoration: none; color: var(--accent-text); }
.footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer nav a { color: var(--muted); min-height: 32px; display: inline-flex; align-items: center; }
.footer nav a:hover { color: var(--ink); text-decoration: none; }
.footer p { flex-basis: 100%; margin: 6px 0 0; max-width: 62ch; text-wrap: pretty; }

/* ================================================================== wider */
@media (min-width: 640px) {
  :root { --pad: 24px; }
  .scoreboard { flex-direction: row; align-items: stretch; }
  .sblabel { padding: 0 16px; border-right: 1px solid var(--line); }
  .honourrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boxscore { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .headlines li { grid-template-columns: 1fr auto; align-items: baseline; }
  .headlines .kicker { grid-column: 1 / -1; }
  .headlines .why { grid-column: 1; }
  .side .pts { font-size: 40px; }
  .herowrap { padding: 34px var(--pad); gap: 22px; }
  .crest.big { width: 96px; height: 96px; font-size: 52px; }
}

@media (min-width: 900px) {
  :root { --pad: 32px; }
  body { font-size: 16px; }
  .masthead { gap: 28px; height: 60px; --head: 60px; }
  .scoreboard { top: 60px; }
  .masthead nav, .masthead.open nav {
    display: flex; flex-direction: row; position: static; padding: 0; background: none; border: 0; box-shadow: none; gap: 2px;
  }
  .masthead nav a { min-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border: 0; border-radius: 8px; }
  .masthead nav a:hover { background: var(--bg-3); color: var(--ink); }
  .menubtn { display: none; }
  .lede { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding: 36px 0 18px; }
  .rail .plain.years { display: block; overflow: visible; padding: 0; }
  .rail .plain.years li { display: flex; align-items: center; box-sizing: border-box; height: var(--champ-row); padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: 14.5px; }

  /* THE CHAMPIONS TICKER. Six rows show; every champion rolls through them, on a loop.
     The list is rendered twice (the second copy .dup, hidden from assistive tech and the
     keyboard), and the whole of it slides up by exactly half its height -- at which point
     the copy stands precisely where the original began, so the restart cannot be seen.
     That only holds if every row is the same height, which is why the row is a fixed
     --champ-row rather than padding around whatever the text happens to measure.
     --n (the champion count) is set on the list by build_site.py, so the pace per row
     stays constant as the league adds a champion each year. */
  .champroll {
    --champ-row: 38px;
    height: calc(6 * var(--champ-row)); overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 14px, black calc(100% - 14px), transparent);
  }
  .champroll .plain.years { animation: champroll calc(var(--n, 19) * 2.6s) linear infinite; }
  .champroll:hover .plain.years, .champroll:focus-within .plain.years { animation-play-state: paused; }
  @keyframes champroll { to { transform: translateY(-50%); } }
  .cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cardgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .filters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; padding: 16px; }
  .filters label { min-width: 0; }
  .filters button { grid-column: auto; }
  table.stats { font-size: 14.5px; }
  .sbgame { min-width: 170px; }
}

@media (min-width: 1200px) {
  .filters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* No motion wanted: the global rule above already stops the ticker, which would strand the
   reader on the first six. Drop the copy and let the six-row window scroll by hand. */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .champroll { overflow-y: auto; mask-image: none; }
}

/* ------------------------------------------------------- the Friday Crew Quiz
   The one page on the site that is PLAYED rather than read, so it is allowed a
   hero the others are not. The Cup presents it, so the trophy is the mark and
   volt is the frame -- no new colour is introduced for a new page.

   Right and wrong use --good/--bad, which already pass in both themes, and are
   never the ONLY signal: a locked answer also carries a ✓ or ✗ glyph, because a
   red/green pair is the exact distinction a red-green colourblind reader cannot
   make. */
.qz { max-width: 720px; padding-bottom: 72px; }

.qz-hero { text-align: center; padding: 34px 0 6px; }
.qz-cup {
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(200,255,61,.28));
}
.qz-kicker {
  margin: 12px 0 2px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 600;
}
.qz-hero h1 {
  margin: 2px 0 6px; font-size: clamp(30px, 8vw, 46px); letter-spacing: -.02em;
  line-height: 1.02;
}
.qz-when {
  margin: 0; color: var(--muted); font-variant-numeric: tabular-nums;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.qz-rules {
  margin: 22px auto 26px; max-width: 46ch; text-align: center;
  color: var(--ink-2); font-size: 15px; line-height: 1.55;
}
.qz-empty { padding: 80px 0; text-align: center; color: var(--muted); }

.qz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.qz-q {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px 16px; box-shadow: var(--shadow);
}
.qz-ask { margin: 0 0 14px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.qz-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; vertical-align: 2px;
}
.qz-opts { display: grid; gap: 8px; }
.qz-opt {
  /* 44px minimum, because this is a phone page first and every option is a target. */
  min-height: 44px; width: 100%; padding: 11px 14px; text-align: left;
  background: var(--bg-3); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  font: inherit; font-size: 15px; cursor: pointer; transition: background var(--ease),
    border-color var(--ease), transform var(--ease);
}
.qz-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.qz-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qz-opt:disabled { cursor: default; opacity: .62; }
.qz-opt.is-right, .qz-opt.is-wrong { opacity: 1; font-weight: 600; }
.qz-opt.is-right {
  background: color-mix(in srgb, var(--good) 17%, var(--bg-3));
  border-color: var(--good); color: var(--ink);
}
.qz-opt.is-wrong {
  background: color-mix(in srgb, var(--bad) 15%, var(--bg-3));
  border-color: var(--bad); color: var(--ink);
}
.qz-opt.is-right::after  { content: " \2713"; color: var(--good); font-weight: 700; }
.qz-opt.is-wrong::after  { content: " \2717"; color: var(--bad);  font-weight: 700; }
.qz-why {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
}

.qz-result {
  margin-top: 28px; padding: 26px 18px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.qz-score {
  margin: 0; font-size: 56px; line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent-text); letter-spacing: -.03em;
}
.qz-of { color: var(--muted); font-size: 28px; }
.qz-verdict { margin: 8px 0 18px; color: var(--ink-2); font-size: 16px; }
.qz-share {
  /* Wide enough for the address on one line. At 30ch the URL broke after "quiz" and
     put the trailing slash on a line of its own, which reads as a broken link in the
     one box whose whole job is to look like what gets pasted. */
  margin: 0 auto 16px; padding: 14px 16px; max-width: 38ch;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: 13.5px; line-height: 1.7; text-align: left; white-space: pre-wrap;
  overflow-wrap: break-word; color: var(--ink-2);
}
.qz-copy {
  min-height: 44px; padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.qz-copy:hover { filter: brightness(1.06); transform: translateY(-1px); }
.qz-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.qz-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.qz-archive { margin-top: 44px; }
.qz-archive h2 {
  margin: 0 0 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.qz-old {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 10px;
}
.qz-old > summary {
  padding: 14px 16px; cursor: pointer; font-weight: 600; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.qz-old > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.qz-oldn { color: var(--muted); font-size: 13px; font-weight: 400; }
.qz-list--done { padding: 0 12px 14px; gap: 12px; }
.qz-list--done .qz-q { background: var(--bg); }

@media (min-width: 720px) {
  .qz-opts { grid-template-columns: 1fr 1fr; }
  .qz-ask { font-size: 17px; }
}

/* ------------------------------------------------------------------ the weekend, play by play */
/* The box score's chart. Everything is drawn by timeline.js from JSON the build writes;
   these rules only dress it. --sa and --sb are the two franchises' line colours, set per
   page by build_site.py -- each franchise's own colour, moved in lightness until it reads
   on this ground, and pushed to a second colour when the two sides would look alike. */
.tl-lede { color: var(--ink-2); margin: -4px 0 14px; max-width: 70ch; text-wrap: pretty; }
.tl-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 0 8px; }
.tl-key { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 0 16px 6px; font-size: 13px; color: var(--ink-2); }
.tl-key span { display: inline-flex; align-items: center; gap: 7px; }
.tl-key i { display: inline-block; }
.tl-ln { width: 18px; height: 2px; border-radius: 1px; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); }
.tl-dot.hollow { background: transparent; border: 2px solid var(--ink-2); }
.tl-dia { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
.tl-rk { font-weight: 400; font-size: 13px; line-height: 1; }
.tl-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.tl-scroll { overflow-x: auto; }
.tl-plot { position: relative; min-width: 640px; }
.tl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
.tl-svg text { font-family: inherit; }
.tl-axis text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tl-tick { stroke: var(--line-2); }
.tl-grid line { stroke: var(--line); }
.tl-win { fill: var(--bg-3); opacity: .55; }
.tl-winlabel { fill: var(--ink-2); font-size: 12px; font-weight: 650; }
.tl-brk { stroke: var(--line-2); fill: none; }
.tl-brklabel { fill: var(--muted); font-size: 10px; }
.tl-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.tl-line.sa, .tl-dot.sa, .tl-bridge.sa { stroke: var(--sa); }
.tl-line.sb, .tl-dot.sb, .tl-bridge.sb { stroke: var(--sb); }
.tl-bridge { fill: none; stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .7; }
.tl-svg .tl-dot { stroke-width: 2; }
.tl-svg .tl-dot.up.sa { fill: var(--sa); }
.tl-svg .tl-dot.up.sb { fill: var(--sb); }
.tl-svg .tl-dot.down { fill: var(--bg-2); }
.tl-rocket { font-size: 15px; }
.tl-end { font-size: 12px; font-weight: 700; }
.tl-end.sa, .tl-striplabel.sa { fill: var(--sa); }
.tl-end.sb, .tl-striplabel.sb { fill: var(--sb); }
.tl-end .v { fill: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-fill { opacity: .28; }
.tl-fill.sa { fill: var(--sa); }
.tl-fill.sb { fill: var(--sb); }
.tl-margin { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.tl-zero { stroke: var(--line-2); }
.tl-striplabel { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl-lead { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.tl-cross { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.tl-focus { stroke: var(--bg-2); stroke-width: 2; }
.tl-focus.sa { fill: var(--sa); }
.tl-focus.sb { fill: var(--sb); }
.tl-hit { fill: transparent; cursor: crosshair; }

.tl-tip {
  position: absolute; top: 0; left: 0; z-index: 2; width: min(320px, 78vw); pointer-events: none;
  display: grid; gap: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.4;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow);
}
.tl-tip[hidden] { display: none; }
.tl-tip .when { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.tl-tip .flag { color: var(--accent-text); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl-tip .d { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; align-items: baseline; }
.tl-tip .d b.sa { color: var(--sa); }
.tl-tip .d b.sb { color: var(--sb); }
.tl-tip .n { text-align: right; font-variant-numeric: tabular-nums; }
.tl-tip .part { color: var(--muted); font-size: 12px; }
.tl-tip .part.bonus { color: var(--ink-2); }
.tl-tip .after { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink-2); }

.tl-swings { margin-top: 12px; }
.tl-swings > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tl-swings > summary:hover { color: var(--ink); }
.tl-table td.when { white-space: nowrap; color: var(--muted); }
.tl-table td.play { min-width: 280px; white-space: normal; }
.tl-table tbody tr { cursor: pointer; }
.tl-table tbody tr[aria-selected="true"] td { background: var(--bg-3); }
.tl-where { color: var(--muted); font-size: 12px; }
.tl-chip {
  display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text);
  vertical-align: 1px; white-space: nowrap;
}
/* A competition game's banner in an article: the Shield (or an MWM round) set apart from
   the ordinary matchups as one card -- a label, the heading, one line of why. Replaced a
   row of 🛡️ above and below the heading, which broke into two ragged lines on a phone. */
.prose .compbanner { margin: 40px 0 20px; padding: 16px 18px 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-s); }
.prose .compbanner .compmark { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text); line-height: 1.4; }
.prose .compbanner h2 { margin: 0; padding: 0; border: 0; }
.prose .compbanner .compsub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* What a competition's winner takes, as a card under its banner: one tile per prize. The
   pips are progress toward a target (the MWM's +2), filled in the accent; each tile also
   says it in words, so the pips are never the only way to read it. Stacks on a phone. */
.prose .prizecard { margin: 20px 0; padding: 14px 16px 16px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-s); }
.prose .prizecard .prizemark { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text); line-height: 1.4; }
.prose .prizegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prose .prize { padding: 12px 14px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-s); }
.prose .prize p { margin: 0; }
.prose .prize .prizebig { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.prose .prize .prizename { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.prose .prize .prizenote { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.prose .pips { display: flex; gap: 6px; margin-top: 8px; }
.prose .pip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); }
.prose .pip.on { background: var(--accent-text); border-color: var(--accent-text); }
@media (max-width: 420px) { .prose .prizegrid { grid-template-columns: 1fr; } }
/* A score in prose is a link to its box score ({{game}}, {{score}}): quiet until wanted. */
.prose a.boxlink { color: var(--ink); text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; }
.prose a.boxlink:hover { color: var(--accent-text); text-decoration-color: currentColor; }

/* ---- quiz reveal graphics
   One series per chart, so one fill and no legend. The fill is volt stepped DOWN into
   the chart lightness band: the site accent (#c8ff3d, L 0.94) glares as a solid block on
   near-black, and #76a312 is the brightest volt that passes dataviz's validator on the
   card surface. Light mode takes the accent's own text form, which already passes on
   white. Every value is also printed as text, so no bar is ever the only way to read it. */
:root { --qz-bar: #76a312; }
:root[data-theme="light"] { --qz-bar: #4a7a00; }
/* Severity tiers, for a ranked "how bad" board (an article's inactives per 100 games): red
   for the worst bar alone, orange for the next three, yellow from 2 up, green under 2.
   Checked with the dataviz validator in both themes: every neighbouring pair is apart for
   normal and colour-blind vision. Light yellow and orange fall under 3:1 on white, which is
   why every bar carries its number and the chart a key -- colour is never the only cue. */
:root { --tier-1: #f2495c; --tier-2: #ff9d33; --tier-3: #f4e35a; --tier-4: #45d67f; }
:root[data-theme="light"] {
  --tier-1: #c8102e; --tier-2: #f5761a; --tier-3: #eec31c; --tier-4: #1a7f45;
}

.qz-why > p { margin: 0; }
.qz-why a { color: var(--accent-text); text-underline-offset: 2px; }
.qz-viz { margin: 16px 0 2px; }
.qz-viz figcaption {
  margin: 0 0 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* Shield history: the winner is the loudest thing in each row. */
.qz-cs, .qz-pod { list-style: none; margin: 0; padding: 0; }
.qz-cs li, .qz-pod li {
  display: grid; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
}
.qz-cs li:last-child, .qz-pod li:last-child { border-bottom: 0; }
.qz-cs li { grid-template-columns: 2.9em 1fr auto; }
.qz-cs-yr { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.qz-cs-m { min-width: 0; }
.qz-cs-win { font-weight: 700; color: var(--ink); font-size: 15px; }
.qz-cs-def { margin: 0 6px; color: var(--muted); font-size: 12px; }
.qz-cs-lose { color: var(--ink-2); font-size: 13.5px; }
.qz-cs-sc { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.qz-cs-sc { color: var(--accent-text); }
/* MWM lists reuse the Shield's rows: a franchise's own Finals tinted, seeds beside names. */
.qz-cs li.is-mark {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border-radius: var(--radius-s); padding-left: 8px; padding-right: 8px;
}
.qz-seed {
  margin-left: 4px; color: var(--muted); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
/* "QF winner" is one token: at phone width it moved to its own line mid-phrase. */
.qz-cs-m .qz-cs-def { white-space: nowrap; }
/* "Saints D/ST -6.0" is one token too: at phone width it broke inside the name. */
.qz-nw { white-space: nowrap; }

/* Player by franchise: a table, so the chart IS its own table view. */
.qz-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qz-tbl th, .qz-tbl td { padding: 7px 5px; text-align: left; border-bottom: 1px solid var(--line); }
.qz-tbl tbody tr:last-child > * { border-bottom: 0; }
.qz-tbl thead th {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.qz-tbl tbody th { font-weight: 600; white-space: nowrap; }
.qz-tbl tbody tr:hover { background: var(--bg-3); }
.qz-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qz-barcell { width: 46%; }
.qz-barwrap { display: flex; align-items: center; gap: 8px; }
.qz-track { flex: 1; min-width: 0; }
/* 10px thick, square at the baseline, 4px rounded at the data end. */
.qz-fill {
  display: block; height: 10px; min-width: 2px;
  background: var(--qz-bar); border-radius: 0 4px 4px 0;
}
.qz-n { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.qz-fill.tier-1 { background: var(--tier-1); }
.qz-fill.tier-2 { background: var(--tier-2); }
.qz-fill.tier-3 { background: var(--tier-3); }
.qz-fill.tier-4 { background: var(--tier-4); }
.qz-tiered .qz-n { min-width: 3ch; font-weight: 700; }
.qz-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; padding: 0;
          list-style: none; color: var(--muted); font-size: 12px; }
.qz-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px;
            border-radius: 2px; vertical-align: -1px; }

/* Draft podium. */
.qz-pod li { grid-template-columns: 1.4em 1fr auto; }
.qz-rk { font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.qz-who { min-width: 0; }
.qz-who b { display: block; font-weight: 600; }
.qz-who b a { color: var(--ink); }
.qz-sub { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; }
.qz-pts { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }

/* The title is the whole name, set as two lines: the Cup in accent, "Friday Quiz" in ink.
   One h1, so its accessible name is the full "Finch Howe League Cup Friday Quiz" -- the
   space between the spans is what keeps a screen reader from running the words together. */
.qz-h1a, .qz-h1b { display: block; }
.qz-h1a { color: var(--accent-text); }

/* Boards (blowouts, closest games, low scores, PPG): the podium's rows, with the answer's
   own row marked -- by a tint AND the words "this one", so it is never colour alone. */
.qz-board li.is-this {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border-radius: var(--radius-s); padding-left: 8px; padding-right: 8px;
}
.qz-this {
  margin-left: 8px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.qz-sub a { color: var(--accent-text); }
/* A score and a label are single tokens: either fits on the line or moves down whole.
   At phone width "175.9-70.1" broke at its dash and "THIS ONE" inside its own pill. */
.qz-sub a, .qz-this { white-space: nowrap; }
.qz-this { display: inline-block; }

/* A table row's second line -- the inactives table's breakdown under each franchise. */
.qz-tbl th .qz-sub { font-weight: 400; white-space: normal; }

/* Record starts: every season that opened on a record, as tags. The ones that made the
   playoffs are lit; the current season's is outlined, since it has not ended yet. */
.qz-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qz-chip {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.qz-chip-yr { font-variant-numeric: tabular-nums; }
.qz-chip-out { font-size: 11.5px; }
.qz-chip.is-po {
  color: var(--ink); font-weight: 600; border-color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.qz-chip.is-po .qz-chip-out { color: var(--accent-text); }
.qz-chip.is-now { color: var(--ink); border-style: dashed; border-color: var(--ink-2); }

/* Standings: named franchises tinted, movement as arrows with their numbers -- the
   number is what carries it, so an arrow is never colour alone. */
.qz-tbl tr.is-mark { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.qz-tbl tr.is-mark th { font-weight: 700; }
.qz-up { color: var(--good); } .qz-down { color: var(--bad); } .qz-flat { color: var(--muted); }
.qz-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The gap a top-N board shows before appending an answer ranked below it. */
.qz-board .qz-gap { display: block; padding: 0 0 2px; text-align: center; color: var(--muted);
  border-bottom: 0; letter-spacing: .3em; }

/* A themed Friday: its photo in place of the trophy, and the dedication above the name. */
.qz-photo {
  display: block; margin: 0 auto; width: 132px; height: 132px; object-fit: cover;
  border-radius: 18px; box-shadow: var(--shadow);
}
.qz-theme {
  margin: 14px 0 4px; font-size: 15px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}

/* Photos in a reveal and in a themed week's result. Natural shape, never cropped -- a
   caption burned into a photo ("Just Take Er") sits at its bottom edge -- and capped in
   height so a tall phone photo does not swallow the screen. */
.qz-pic { margin: 14px 0 2px; text-align: center; }
.qz-pic-img, .qz-result-img {
  /* Width comes inline from quiz_img(), worked out from the photo's real proportions. */
  display: inline-block; max-width: 100%; height: auto;
  border-radius: 12px; box-shadow: var(--shadow);
}
.qz-result-pic { margin: 0 0 18px; }
.qz-result-pic figcaption {
  margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}

/* The tale of the tape: label left, fact right. Stacks on a narrow phone. */
.qz-rv { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; font-size: 13.5px; }
.qz-rv dt, .qz-rv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); }
.qz-rv dt { color: var(--muted); padding-right: 14px; font-size: 12.5px; }
.qz-rv dd { color: var(--ink); }
.qz-rv dt:last-of-type, .qz-rv dd:last-of-type { border-bottom: 0; }
.qz-rv-n { color: var(--muted); font-size: 12px; }
.qz-rv a { color: var(--accent-text); white-space: nowrap; }