/* ---------------------------------------------------------------------
   Display face: Barlow Condensed (SIL OFL), self-hosted -- weights 600,
   700, 700 italic. Headlines, nav wordmark, section eyebrows, and big
   stat numerals only; body copy stays on the system stack (team-page
   design pass, 2026-08-27). font-display: swap keeps the page readable
   during the (usually sub-frame, since the files are ~22KB each) load
   window; the fallback stack leads with real condensed system faces so
   the swap is barely visible and layout shift stays small.
   No external font URLs -- files are committed under static/fonts/. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/static/fonts/barlow-condensed-700italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* NFL-shield navy media-guide palette (2026-08-27 design pass). */
  --navy: #013369;
  --field: #FFFFFF;
  --ink: #14171A;
  --silver: #A5ACAF;
  --silver-tint: #F0F1F3;
  /* Darkened from raw silver (#A5ACAF, 2.3:1 on white) so muted metadata
     text still clears WCAG AA 4.5:1 on the white field. Raw silver stays
     the token for hairlines/borders and for text sitting on navy, where
     it already passes on its own. */
  --silver-text: #6B7280;
  /* Spent sparingly: record-setting numbers and the reigning-champion
     callout only. If a third use turns up, stop and rethink. */
  --red: #D50A0A;
  /* The signature: championship rafter banners only. Everything else
     stays quiet so the banners carry the page. */
  --gold: #C9A227;
  /* Toilet Bowl shame color, deliberately off-palette. Scoped to the
     shame banner/cell only -- never used for general muted text. */
  --shame: #8b5a2b;
  /* The one green in the palette -- scoped to the form-strip "W" dot
     (team-page rework, 2026-08-27) only. Dark enough for white text at
     4.5:1+. */
  --win: #146C3A;

  /* Draft Board position tints (2026-08-28): light backgrounds under the
     board's near-black --ink text. Every tint measures 14.4:1+ contrast
     against --ink (#14171A) -- WCAG AA needs 4.5:1, AAA needs 7:1; see
     the report for the exact per-tint ratios -- so legibility was never
     the constraint, only keeping six pastels visually distinct from each
     other and from the plain white field. */
  --pos-qb: #FBE4E4;
  --pos-rb: #E1F0E5;
  --pos-wr: #E1EBF7;
  --pos-te: #FCEADB;
  --pos-k: #EDE3F5;
  --pos-dst: #E9EAEC;

  /* Condensed display stack: Barlow Condensed first, then real condensed
     system faces (so a slow/blocked font-fetch still looks intentional),
     then system-ui. Body text never uses this token. */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow",
    "Helvetica Neue Condensed", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--field);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

a {
  color: var(--navy);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Masthead: full-bleed navy bar using the same 100vw breakout technique as
   .wide-section further down (same centering math -- both rely on body
   being the horizontally-centered container). */
.site-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--navy);
  color: var(--field);
  text-align: center;
  padding: 1.75rem 1.5rem 1.25rem;
}

.site-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--field);
}

.site-header .est {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--silver);
}

.site-nav {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--navy);
  margin-bottom: 2rem;
}

.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--field);
  transition: color 120ms ease;
}

.site-nav a:hover {
  color: var(--silver);
  text-decoration: underline;
}

main {
  min-height: 40vh;
}

h2 {
  color: var(--navy);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.6rem;
  font-weight: 700;
  border-bottom: 3px solid var(--navy);
  padding-bottom: 0.35rem;
}

/* Trophy icons (webapp/static/trophy-champ.svg / trophy-toilet.svg),
   dropped in as <img> so their fills stay self-contained -- no CSS here
   colors them, it only places them. `.page-heading` turns a page's <h2>
   into a flex row so a large (~64px) trophy sits beside the title without
   disturbing the border-bottom rule below it. Banner-scoped trophies
   (home reigning banner, franchise Career banners) get no extra layout
   rule: those sections are already text-align:center, so a plain inline
   <img> ahead of the label text centers for free. */
.page-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.trophy {
  vertical-align: middle;
  flex-shrink: 0;
}

/* Banner/chip hardware (rafter title-year banner + Toilet Bowl chip):
   the trophy sits inline with its label inside .champion-year, so the
   line becomes a small flex row to keep a ~44px icon vertically centered
   against the label text instead of sitting on its text baseline. Scoped
   to .champion-banner/.toilet-banner .champion-year (not the bare
   .champion-year used standalone on the home page's reigning banner,
   where there's no icon in the same element) but harmless there too --
   a flex row around plain text still centers. */
.champion-banner .champion-year,
.toilet-banner .champion-year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Section eyebrow: condensed face + a gold rule instead of the old plain
   silver hairline -- the "media-guide section header" treatment applies
   sitewide (every <h3> on the site), not just the franchise page, so
   Career/The Now/Rivalries and every other section header pick it up
   automatically. */
h3 {
  color: var(--navy);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.3rem;
  margin-top: 2rem;
}

/* Championship rafter banner: the signature treatment. Navy block, gold
   lettering and trim, tapered to a point at the bottom like a banner
   hanging from an arena's rafters. Used for the home page's reigning
   champion and every franchise page's title-year list. Percentage-based
   clip-path scales with content height, so multi-line title-year lists
   still taper correctly -- the generous bottom padding keeps the last
   line of text clear of the notch. */
.champion-banner {
  background: var(--navy);
  color: var(--gold);
  text-align: center;
  padding: 1.75rem 1.75rem 2.5rem;
  margin: 0 auto 2rem;
  max-width: 480px;
  border: 2px solid var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
}

.champion-banner .champion-year {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
}

.champion-banner .champion-name {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
}

/* Reigning champion only (home page): the year line calls out in red --
   the one sanctioned "reigning champion" use of red on the site. */
.champion-banner.reigning .champion-year {
  color: var(--red);
}

/* Wide-section: breaks a table out of the 720px reading column so it can
   render at its natural width instead of scrolling in a box. The section
   spans the full viewport (standard negative-margin breakout), then the
   table inside is centered and capped so it never exceeds ~1200px even on
   huge screens. */
.wide-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.wide-section table.stats {
  width: auto;
  max-width: min(100%, 1200px);
  margin: 0 auto;
}

/* h2h-grid keeps its own scroll fallback (see mobile block below) since its
   12 columns physically don't fit on a phone even at the compressed floor. */
.h2h-wrap {
  overflow-x: visible;
}

.h2h-grid .code-name {
  display: none;
}

table.stats {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.stats th,
table.stats td {
  padding: 0.5rem 0.6rem;
  text-align: right;
  border-bottom: 1px solid var(--silver);
  white-space: nowrap;
}

table.stats th:first-child,
table.stats td:first-child {
  text-align: left;
}

table.stats thead th {
  background: var(--navy);
  color: var(--field);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
}

/* Zebra striping (silver tint) for ordinary data tables. The h2h grid is
   excluded -- its sticky row-label column already manages its own
   background per thead/tbody, and a matrix table reads better plain. */
.stats:not(.h2h-grid) tbody tr:nth-child(even) td,
.stats:not(.h2h-grid) tbody tr:nth-child(even) th {
  background: var(--silver-tint);
}

.champ-cell {
  color: var(--navy);
  font-weight: 700;
}

.shame-cell {
  color: var(--shame);
  font-weight: 700;
}

/* Record-setting number (legends page, top single-game performance) --
   the other sanctioned use of red. */
.record-cell {
  color: var(--red);
  font-weight: 700;
}

/* The Loyalty Tax (legends page): muted silver treatment, same family as
   .ledger -- this is a candid/wry list, not a highlight, so it stays
   quiet rather than competing with the gold/navy record callouts. */
.loyalty-tax-note {
  background: var(--silver-tint);
  color: var(--silver-text);
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.loyalty-tax-note p {
  margin: 0.35rem 0;
}

.loyalty-tax-note p:first-child {
  margin-top: 0;
}

.loyalty-tax-note p:last-child {
  margin-bottom: 0;
}

.toilet-banner {
  background: var(--shame);
  color: var(--field);
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 4px;
  margin-bottom: 2rem;
}

/* Team logos: the downloaded Sleeper avatar (img) or the inline SVG
   monogram fallback (webapp/templates/_logo.html) -- both render as a
   fixed-size circle so table rows line up either way. */
.team-logo {
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  flex-shrink: 0;
}

.team-logo-monogram .monogram-letters {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-weight: 800;
}

/* Active franchise, no Sleeper avatar: navy disc, gold letters, thin
   silver ring. */
.team-logo-monogram-active .monogram-disc {
  fill: var(--navy);
}

.team-logo-monogram-active .monogram-letters {
  fill: var(--gold);
}

.team-logo-monogram-active .monogram-ring {
  stroke: var(--silver);
  stroke-width: 3;
}

/* Defunct franchise: silver disc, navy letters, no ring. */
.team-logo-monogram-defunct .monogram-disc {
  fill: var(--silver);
}

.team-logo-monogram-defunct .monogram-letters {
  fill: var(--navy);
}

/* Franchise page header: logo beside the name (now the inner row of the
   navy hero band -- see .team-hero below). */
.franchise-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.franchise-header h2 {
  flex: 1;
  margin: 0;
}

/* Table-row team-name cell: logo + name, aligned inline. Used on the
   franchises index and the home page's all-time records table. */
.team-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------
   Franchise page hero band (team-page media-guide rework, 2026-08-27):
   full-bleed navy, same breakout technique as .site-header. Large logo
   + huge condensed team name + eyebrow line (owners / est. year / era
   names) on top; all-time record, win%, and title count as a
   horizontal gold-numeral stat row underneath.
   --------------------------------------------------------------------- */
.team-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--navy);
  color: var(--field);
  padding: 2rem 1.5rem 1.5rem;
  margin-bottom: 2rem;
}

.team-hero .franchise-header {
  max-width: 1100px;
  margin: 0 auto;
  gap: 1.25rem;
}

.team-hero-text {
  flex: 1;
  min-width: 0;
}

.team-hero-eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--silver);
}

/* Higher specificity than the plain h2/.franchise-header h2 rules above
   -- the hero name needs field-white text and no navy underline, since
   it sits directly on the navy band. */
.team-hero .franchise-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  color: var(--field);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 3.5vw, 3.5rem);
  line-height: 1.05;
}

.team-hero .reigning-tag {
  margin: 0.4rem 0 0;
}

/* Reigning-champion band accent -- the one sanctioned extra use of red
   here, echoing the home page's reigning-champion banner treatment. */
.team-hero.reigning {
  border-bottom: 4px solid var(--red);
}

.team-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat-number {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--gold);
  line-height: 1.1;
}

.hero-stat-label {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--silver);
}

/* Hero trophy case: one champ trophy per title year, one toilet trophy
   per Toilet Bowl year, sitting under the stat row. Two independently
   wrapping groups (champs, toilets) with a bigger gap BETWEEN the groups
   than between icons within a group, so the two trophy families read as
   distinct blocks even after wrapping on a phone. */
.hero-trophy-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 1.1rem auto 0;
}

.hero-trophy-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.hero-trophy {
  display: inline-flex;
  line-height: 0;
}

.hero-trophy-icon {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

/* THE NOW / FINAL SEASONS: 3-card grid (last-5 mini-table, form +
   latest draft, current keeper core), collapsing to 1 column on
   phones. Breaks out to full-bleed like .wide-section so the cards get
   real desktop width instead of squeezing into the 720px reading
   column, then centers and caps at 1100px. */
.now-wide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.now-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 1rem auto 1.5rem;
}

.now-card {
  background: var(--field);
  border: 1px solid var(--silver);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  min-width: 0;
}

.now-card-header {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom: 1px solid var(--silver);
  padding-bottom: 0.4rem;
}

/* The last-5-seasons mini table is squeezed into a ~1/3-width card, and
   the Result column's text ("Won Championship Final", "Toilet Bowl
   champion") is long -- let it wrap onto a second line instead of
   overflowing the card (the site-wide table default is nowrap, sized
   for a full-width wide-section breakout, which this card is not).
   BUT that wrap treatment must not reach the numeric columns (Year,
   W-L-T, PF): a blanket `white-space: normal; word-break: break-word`
   let the browser snap a bare number apart mid-value at this width --
   "2025" rendering as "202" / "5" on its own line, "10-4-0" as
   "10-4-" / "0" (caught from an owner screenshot 2026-08-28). Fix has
   two parts: (1) only the last column (Result -- Finish, column 4, is
   hidden above) gets the wrap treatment; Year/W-L-T/PF/Finish stay
   nowrap so a value never breaks internally. (2) `table-layout: fixed`
   with explicit percentage column widths, because auto layout was
   observed (headless-Chrome screenshot at 390px) letting the table's
   overall preferred width exceed the card and push the whole thing into
   horizontal overflow even with the nowrap/wrap split from (1) alone --
   fixed layout makes each column's width a hard cap instead of a
   content-driven suggestion, so Result is FORCED to wrap inside its 30%
   share rather than ever widening the table. Percentages sized off real
   worst-case content: Year "2025" and W-L-T "10-14-0" / PF "1300.5" all
   fit inside 22/26/22%; Result gets the rest (30%) to wrap into. */
.now-card table.stats {
  font-size: 0.78rem;
  table-layout: fixed;
  width: 100%;
}

.now-card table.stats th,
.now-card table.stats td {
  padding: 0.3rem 0.35rem;
  white-space: nowrap;
}

.now-card table.stats th:nth-child(1),
.now-card table.stats td:nth-child(1) {
  width: 22%;
}

.now-card table.stats th:nth-child(2),
.now-card table.stats td:nth-child(2) {
  width: 26%;
}

.now-card table.stats th:nth-child(3),
.now-card table.stats td:nth-child(3) {
  width: 22%;
}

.now-card table.stats th:nth-child(4),
.now-card table.stats td:nth-child(4) {
  display: none;
}

.now-card table.stats th:last-child,
.now-card table.stats td:last-child {
  width: 30%;
  text-align: right;
  white-space: normal;
  word-break: break-word;
}

.now-card .footnote {
  margin-top: 0;
}

.now-card .form-strip {
  margin: 0.5rem 0 0.75rem;
}

.now-card .keeper-core {
  margin: 0;
}

@media (max-width: 860px) {
  .now-grid {
    grid-template-columns: 1fr;
  }
}

/* CAREER: title/toilet banners side by side on desktop, stacking on
   narrower screens once they no longer fit two abreast. */
.banners-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 0 2rem;
}

.banners-row .champion-banner,
.banners-row .toilet-banner {
  flex: 1 1 320px;
  max-width: 480px;
  margin: 0;
}

.hint {
  color: var(--silver-text);
  font-style: italic;
  font-size: 0.85em;
}

.footnote {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--silver-text);
}

.h2h-grid th,
.h2h-grid td {
  text-align: center;
}

.h2h-grid th.sticky-col,
.h2h-grid td.sticky-col,
.draft-board th.sticky-col,
.draft-board td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  white-space: nowrap;
}

.h2h-grid thead th.sticky-col,
.h2h-grid thead td.sticky-col,
.draft-board thead th.sticky-col,
.draft-board thead td.sticky-col {
  background: var(--navy);
  color: var(--field);
}

.h2h-grid tbody th.sticky-col,
.h2h-grid tbody td.sticky-col,
.draft-board tbody th.sticky-col,
.draft-board tbody td.sticky-col {
  background: var(--field);
  color: var(--ink);
}

.h2h-grid td.diag {
  color: var(--silver);
}

/* Draft Board (owner-approved, 2026-08-28): rounds x franchises grid.
   .draft-board-wrap mirrors .h2h-wrap's breakout -- desktop renders at
   natural width inside .wide-section, phone falls back to horizontal
   scroll (see the 480px media block below) with the round-label first
   column pinned via .sticky-col. */
.draft-board-wrap {
  overflow-x: visible;
}

.draft-board th,
.draft-board td {
  text-align: left;
  vertical-align: top;
}

.draft-board td.pos-qb { background: var(--pos-qb); }
.draft-board td.pos-rb { background: var(--pos-rb); }
.draft-board td.pos-wr { background: var(--pos-wr); }
.draft-board td.pos-te { background: var(--pos-te); }
.draft-board td.pos-k { background: var(--pos-k); }
.draft-board td.pos-dst { background: var(--pos-dst); }

/* Small "?" corner badge for a resolved pick whose position isn't in the
   records -- deliberately neutral (silver, not a tint color) so it never
   reads as a seventh position. */
.pos-unknown {
  display: inline-block;
  margin-left: 0.35em;
  width: 1.15em;
  height: 1.15em;
  line-height: 1.1em;
  text-align: center;
  vertical-align: super;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--silver-text);
  background: var(--field);
  border: 1px solid var(--silver);
  border-radius: 50%;
}

/* Keeper badge (owner addendum, 2026-08-28): gold "K" on navy, same size
   and placement as .pos-unknown so the two never fight for space -- a
   cell that's both a keeper AND position-unknown just shows both badges
   side by side. 5.17:1 gold-on-navy contrast (see report), clears AA for
   the badge's small text. The cell accent uses an inset box-shadow
   rather than `border` -- border-collapse tables render adjacent cell
   borders inconsistently, box-shadow paints cleanly inside the cell's
   own box regardless. */
.keeper-badge {
  display: inline-block;
  margin-left: 0.35em;
  width: 1.15em;
  height: 1.15em;
  line-height: 1.1em;
  text-align: center;
  vertical-align: super;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--gold);
  background: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.draft-board td.keeper {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.draft-board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink);
}

.legend-swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.35em;
  vertical-align: middle;
  border: 1px solid var(--silver);
  border-radius: 2px;
}

.draft-year-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.draft-year-strip a {
  color: var(--navy);
  text-decoration: none;
}

.draft-year-strip a:hover {
  text-decoration: underline;
}

.draft-year-strip .current {
  color: var(--gold);
  text-decoration: underline;
}

.season-list {
  columns: 3;
  column-gap: 1.5rem;
  padding-left: 1.25rem;
}

.fun-fact {
  margin-top: 2rem;
  padding: 0.75rem 1rem;
  background: var(--silver-tint);
  border-left: 3px solid var(--navy);
  font-style: italic;
}

.site-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--silver);
  text-align: center;
  font-size: 0.85rem;
  color: var(--silver-text);
}

.footer-data-link {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

/* Colophon ("About the data") page: media-guide stat blocks -- big
   tabular-nums numbers over a small navy uppercase label, in a
   responsive tile grid. */
.eyebrow {
  color: var(--navy);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--silver);
  border: 1px solid var(--silver);
  margin: 1rem 0 2rem;
}

.stat-tile {
  background: var(--field);
  padding: 1rem 0.75rem;
  text-align: center;
}

.stat-tile .stat-number {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}

.stat-tile .stat-label {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--silver-text);
}

.superlatives {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.superlatives li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--silver);
}

.superlatives li:last-child {
  border-bottom: none;
}

/* The Honest Ledger: silver/muted treatment, same family as .fun-fact
   but without the navy accent bar -- this section is candid, not a
   highlight. */
.ledger {
  background: var(--silver-tint);
  color: var(--silver-text);
  padding: 1rem 1.25rem;
  margin: 1rem 0 2rem;
  font-size: 0.95rem;
}

.ledger p {
  margin: 0.5rem 0;
}

.ledger p:first-child {
  margin-top: 0;
}

.ledger p:last-child {
  margin-bottom: 0;
}

.provenance {
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
   Team-page rework (2026-08-27): clickable team names everywhere, and
   the franchise page's THE NOW / RIVALRIES sections.
   --------------------------------------------------------------------- */

/* Clickable team name/logo cell (team_link macro, webapp/templates/
   _team.html). Reuses .team-name-cell's flex/gap layout -- this class
   just fixes the link coloring: inherit the surrounding ink color and
   skip the underline until hover, so these read as team names first,
   not a sea of blue links. */
.team-link {
  color: inherit;
  text-decoration: none;
}

.team-link:hover {
  text-decoration: underline;
}

/* Clickable season-year (year_link macro, webapp/templates/_year.html).
   Same convention as .team-link above: inherit the surrounding ink color,
   underline only on hover -- years read as data first, links second. */
.year-link {
  color: inherit;
  text-decoration: none;
}

.year-link:hover {
  text-decoration: underline;
}

/* Reigning-champion header tag (franchise page): the same sanctioned red
   as the home page's reigning-champion banner year (.champion-banner.
   reigning .champion-year), applied inline in the header instead of a
   second banner. */
.reigning-tag {
  margin: 0.2rem 0 0;
  color: var(--red);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* THE NOW: last-10-games form strip. Newest game first (dots read
   left-to-right, matching the mini-table's newest-first years). */
.form-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 1.5rem;
}

.form-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.form-dot.result-w {
  background: var(--win);
  color: var(--field);
}

.form-dot.result-l {
  background: var(--silver);
  color: var(--ink);
}

.form-dot.result-t {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
}

/* Blank-score game -- no result to report, never guessed. */
.form-dot.result-unknown {
  background: transparent;
  border: 2px dashed var(--silver);
  color: var(--silver-text);
}

/* THE NOW: current keeper core -- a plain list, not a table. This is a
   small "who's locked in" glance; the full history stays in the
   Complete Keeper History table further down the page. */
.keeper-core {
  padding-left: 1.25rem;
  margin: 0.5rem 0 1.5rem;
}

.keeper-core li {
  margin: 0.2rem 0;
}

/* RIVALRIES: three most-played opponents as compact cards (logo, name,
   record, meeting count). */
.rivalry-top3 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.rivalry-card {
  flex: 1 1 200px;
  background: var(--field);
  border: 1px solid var(--silver);
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
}

.rivalry-card .team-name-cell {
  justify-content: center;
  font-weight: 700;
}

.rivalry-card-record {
  margin: 0.5rem 0 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.rivalry-card-record a {
  text-decoration: none;
}

.rivalry-card-record a:hover {
  text-decoration: underline;
}

.rivalry-card-meetings {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--silver-text);
}

/* RIVALRIES: nemesis / favorite-customer callouts, side by side. Nemesis
   reuses the Toilet Bowl shame-brown treatment; favorite customer reuses
   the Franchise Legend navy/gold treatment -- established color meanings,
   not new ones. */
.rivalry-callouts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.rivalry-callout {
  flex: 1 1 220px;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  text-align: center;
}

.rivalry-callout .callout-label {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
}

.rivalry-callout .callout-team {
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  justify-content: center;
}

.rivalry-callout .callout-stat {
  margin: 0.25rem 0 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.rivalry-callout.nemesis {
  background: var(--shame);
  color: var(--field);
}

.rivalry-callout.favorite {
  background: var(--navy);
  color: var(--gold);
}

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

/* Phone compression: shrink instead of scroll. Font-size floors at 11px,
   padding tightens, and long free-text cells are allowed to wrap onto a
   second line (row height grows, table width never exceeds the viewport).
   The h2h-grid is the one exception -- 12 team columns of W-L records
   don't fit even at this floor, so it falls back to overflow-x scrolling
   and its row labels swap to codes to buy back what room they can. */
@media (max-width: 480px) {
  .site-header {
    padding: 1.25rem 0.75rem 1rem;
  }

  .site-nav {
    padding: 0.6rem 0.75rem;
    gap: 0.2rem 0.9rem;
  }

  .champion-banner {
    padding: 1.25rem 1.25rem 2rem;
  }

  .champion-banner .champion-name {
    font-size: 1.3rem;
  }

  .wide-section {
    padding: 0 0.375rem;
  }

  .wide-section table.stats {
    font-size: 11px;
  }

  .wide-section table.stats th,
  .wide-section table.stats td {
    padding: 3px 5px;
    white-space: normal;
  }

  .h2h-wrap {
    overflow-x: auto;
  }

  .wide-section table.stats.h2h-grid th,
  .wide-section table.stats.h2h-grid td {
    white-space: nowrap;
  }

  .h2h-grid .full-name {
    display: none;
  }

  .h2h-grid .code-name {
    display: inline;
  }

  /* Draft Board: same horizontal-scroll fallback as the h2h grid, but
     only the sticky round-label column stays nowrap -- pick cells (player
     + hint + note) keep wrapping so a phone doesn't force one giant
     scroll-width from the longest cell in the whole board. Selector
     matches .h2h-grid's own phone override in specificity (four classes)
     so it isn't silently outweighed by the generic
     ".wide-section table.stats th/td { white-space: normal }" rule above. */
  .draft-board-wrap {
    overflow-x: auto;
  }

  .wide-section table.stats.draft-board th.sticky-col,
  .wide-section table.stats.draft-board td.sticky-col {
    white-space: nowrap;
  }

  .team-hero {
    padding: 1.5rem 1rem 1.15rem;
  }

  .team-hero .franchise-header {
    gap: 0.85rem;
  }

  .team-hero .team-logo {
    width: 64px !important;
    height: 64px !important;
  }

  .team-hero-stats {
    gap: 1.1rem;
  }

  .now-wide {
    padding: 0 0.75rem;
  }

  .now-card {
    padding: 0.85rem 0.9rem;
  }

  /* Page-heading trophies (champions/toilet, ~64px on desktop) shrink so
     they never crowd out the h2 text next to them on a narrow phone --
     same !important-over-attribute pattern as .team-hero .team-logo
     above, since sizing comes from the <img> width/height attributes. */
  .page-heading .trophy {
    width: 44px !important;
    height: 44px !important;
  }
}