/* THE MFFL — dark sports-media theme.
   Color tokens are injected per-league from the config's `theme` block (see
   base.html), so a second league restyles the whole site from one JSON file. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --pad: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-soft); }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.03em; }
h2 { font-size: clamp(20px, 2.6vw, 26px); }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* -- eyebrow / section headers ------------------------------------------ */

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.section-head .eyebrow { color: var(--accent); }

/* -- masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface-sunken) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}

/* Center-aligned, not baseline-aligned: the pills read as sitting beside the
   wordmark rather than hanging off its baseline. */
.wordmark { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wordmark__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
}
.wordmark__tags { display: flex; align-items: center; gap: 6px; }
.wordmark__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 0 8px;
}
.wordmark__tag--muted {
  color: var(--text-faint);
  border-color: var(--hairline);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav a:hover { color: var(--text); background: var(--surface-raised); }
.nav a.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* -- champion banner strip ----------------------------------------------- */

.banners {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
/* The strip runs the full width of the viewport rather than stopping at the
   content column, so a scrollable row of thirteen champions doesn't appear to
   be sliced off at an arbitrary point. The inline padding keeps the first
   banner aligned with the masthead above it, and the mask fades whichever end
   still has years on it. */
.banners__inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  --fade: 46px;
}
.banners__inner::-webkit-scrollbar { height: 4px; }
.banners__inner::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }

.banners__inner[data-edge="both"] {
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade),
    #000 calc(100% - var(--fade)), transparent 100%);
}
.banners__inner[data-edge="start"] {
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent 100%);
}
.banners__inner[data-edge="end"] {
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade));
}

.banner {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-raised);
  transition: border-color 0.15s, transform 0.15s;
}
.banner:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-1px);
}
.banner__year {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.banner__who { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
/* The season you're currently on, so the strip reflects where you are. */
.banner.is-current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-raised));
}
.banner.is-current .banner__who { color: var(--text); }
.banner:hover .banner__who { color: var(--text); }

/* -- hero ---------------------------------------------------------------- */

.hero {
  padding: clamp(36px, 7vw, 72px) 0 clamp(28px, 5vw, 48px);
  background:
    radial-gradient(900px 320px at 12% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--surface-sunken);
  border-bottom: 1px solid var(--hairline);
}
.hero__tagline { color: var(--text-dim); font-size: 16px; max-width: 54ch; margin-top: 12px; }

/* -- stat tiles ---------------------------------------------------------- */

/* Each tile is its own card rather than a cell in a hairline-backed grid: with
   five tiles in a four-column row the old approach left the empty sixth cell
   showing as a large blank block. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  margin-top: 32px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px 18px;
  min-width: 0;
}
.tile__value {
  font-family: var(--font-num);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.tile__label { margin-top: 5px; font-size: 10.5px; letter-spacing: 0.07em; }

/* A name where its neighbours have a number. It gets the numeric tile's line
   box so the labels below still line up across the row, but wraps on spaces
   rather than mid-word — `overflow-wrap: anywhere` turns "Stockbridge" into
   "Stockbri / dge". */
.tile__value--name {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: -0.015em;
  color: var(--accent);
  overflow-wrap: normal;
  display: flex;
  align-items: center;
  min-height: calc(clamp(24px, 3.4vw, 32px) * 1.1);
}

/* -- generic surfaces ---------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 20px;
}

section { padding: clamp(32px, 5vw, 56px) 0; }
section + section { border-top: 1px solid var(--hairline); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* -- pills / badges ------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill--gold { background: var(--accent); color: var(--accent-ink); }
.pill--ghost { border: 1px solid var(--hairline); color: var(--text-dim); }
.pill--div { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.pill--win { background: color-mix(in srgb, var(--positive) 20%, transparent); color: var(--positive); }
.pill--loss { background: color-mix(in srgb, var(--negative) 20%, transparent); color: var(--negative); }
.pill--live { background: color-mix(in srgb, var(--diverge-high) 20%, transparent); color: var(--diverge-high); }

/* -- manager cards ------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 18px; }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }

.card__head { display: flex; gap: 14px; align-items: center; padding: 18px 20px 14px; }

.avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-raised);
  border: 2px solid var(--hairline);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent);
}
.card:hover .avatar { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Platform logos are drawn for white backgrounds; a light disc keeps dark
   artwork legible. A real uploaded photo covers the disc entirely. */
img.avatar { background: #e7ebee; }

.card__name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.card__team { font-size: 13px; color: var(--text-dim); font-style: italic; margin-top: 1px; }

.trophy-case {
  margin: 0 20px;
  padding: 12px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.trophy-case__label { margin-bottom: 8px; }
.trophy-case__row { display: flex; flex-wrap: wrap; gap: 6px; }
.trophy-case__empty { font-size: 12.5px; color: var(--text-faint); font-style: italic; }

.card__bio {
  padding: 14px 20px 0;
  font-size: 13.5px;
  color: var(--text-dim);
  font-style: italic;
}

.statlist {
  margin: 14px 0 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 20px;
}
.statlist__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
}
.statlist__k { color: var(--text-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.statlist__v { font-family: var(--font-num); font-weight: 600; white-space: nowrap; }

/* -- tables -------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-raised);
  padding: 11px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable::after { content: "↕"; opacity: 0.28; margin-left: 5px; font-size: 10px; }
th.sortable[data-dir="asc"]::after { content: "↑"; opacity: 1; color: var(--accent); }
th.sortable[data-dir="desc"]::after { content: "↓"; opacity: 1; color: var(--accent); }

tbody td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
td.n, th.n { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rank { color: var(--text-faint); font-family: var(--font-num); width: 34px; }
.strong { font-weight: 650; }

.row-champ { box-shadow: inset 3px 0 0 var(--accent); }
.row-last { box-shadow: inset 3px 0 0 var(--negative); }

/* -- head-to-head matrix -------------------------------------------------- */

.matrix-wrap { overflow: auto; max-height: 78vh; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.matrix th, .matrix td { border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }

.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  vertical-align: bottom;
  padding: 8px 6px;
  min-width: 52px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.matrix thead th:first-child { left: 0; z-index: 3; min-width: 170px; text-align: left; }

/* Full names rotated into the column heads — initials collide once two
   managers share them (this league has two Tobins and two J. Sellons). */
.matrix__vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: block;
  margin: 0 auto;
  height: 96px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}

.matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-raised);
  padding: 7px 12px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.matrix td {
  padding: 7px 6px;
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.matrix td.self { background: var(--surface-sunken); color: var(--text-faint); }
.matrix td.empty { color: var(--text-faint); }
.matrix tbody tr:hover th, .matrix tbody tr:hover td { outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -1px; }

.legend { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.legend__scale { display: flex; height: 10px; width: 190px; border-radius: 999px; overflow: hidden; border: 1px solid var(--hairline); }
.legend__scale i { flex: 1; }

.rulebook-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transition: border-color 0.15s, transform 0.15s;
}
.rulebook-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.rulebook-link__label { display: block; font-weight: 650; font-size: 14px; }
.rulebook-link__host { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }

/* -- expandable rosters ---------------------------------------------------- */

.row-expandable { cursor: pointer; }
.row-expandable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chevron {
  display: inline-block;
  margin-right: 7px;
  color: var(--text-faint);
  transition: transform 0.15s, color 0.15s;
}
.row-expandable.is-open .chevron { transform: rotate(90deg); color: var(--accent); }
.row-expandable:hover .chevron { color: var(--accent); }

.roster-row > td { padding: 0 !important; background: var(--surface-sunken); }
.roster { padding: 14px 16px 16px; }
.roster__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.roster__table { font-size: 12.5px; }
.roster__table thead th {
  position: static;
  background: transparent;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
}
.roster__table tbody td { padding: 6px 10px; border-bottom: 0; }
.roster__table tbody tr:hover td { background: transparent; }
.roster__bench { color: var(--text-faint); }
.roster__bench .strong { font-weight: 400; }
.roster__slot {
  font-family: var(--font-num);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
}

/* -- info tooltip --------------------------------------------------------- */

.info { position: relative; display: inline-flex; align-items: center; margin-left: 5px; }
.info__icon {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--text-faint);
  cursor: help;
}
.info:hover .info__icon,
.info:focus-visible .info__icon { color: var(--accent); border-color: var(--accent); }
.info__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: 230px;
  padding: 8px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  color: var(--text-dim);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
}
.info:hover .info__bubble,
.info:focus-visible .info__bubble { opacity: 1; visibility: visible; }
.info__bubble b { color: var(--text); font-variant-numeric: tabular-nums; }

/* -- bracket lineup dialog ------------------------------------------------ */

.game { position: relative; }
.peek {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.game:hover .peek,
.peek:focus-visible { opacity: 1; }
.peek:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover: none) { .peek { opacity: 1; } }

/* Inside a record-book row the eye sits inline after the number, not pinned to
   a card corner, and is always visible since there's no card to hover. */
.statlist__v .peek {
  position: static;
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-left: 7px;
  vertical-align: middle;
  opacity: 1;
}

.lineup-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--surface-sunken) 82%, transparent);
  backdrop-filter: blur(3px);
}
.lineup-modal[hidden] { display: none; }
.lineup-modal__panel {
  width: min(760px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
}
.lineup-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
}
.lineup-modal__close {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--text-dim);
  cursor: pointer;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.lineup-modal__close:hover { color: var(--text); border-color: var(--accent); }
.lineup-modal__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--hairline);
}
.lineup { background: var(--surface); padding: 14px 18px 18px; }
.lineup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.lineup__who { font-weight: 700; font-size: 15px; }
.lineup__total { font-size: 17px; font-weight: 700; color: var(--text-dim); }
.lineup--won .lineup__total { color: var(--accent); }
.lineup__team { font-size: 12.5px; color: var(--text-faint); font-style: italic; margin-bottom: 8px; }

/* -- playoff bracket ------------------------------------------------------ */

.bracket {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: stretch;
}

.bracket__round {
  flex: 1 1 205px;
  display: flex;
  flex-direction: column;
  min-width: 205px;
}
.bracket__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
/* Games spread down the column so each round lines up against the next,
   the way a printed bracket does. */
.bracket__games {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 10px;
  flex: 1;
}

.game {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.game__side {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
}
.game__side + .game__side { border-top: 1px solid var(--hairline); }
.game__side--won { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.game__side--won .game__name { font-weight: 700; }
.game__side--lost { color: var(--text-dim); }
.game__seed {
  flex: 0 0 auto;
  width: 20px;
  font-family: var(--font-num);
  font-size: 10.5px;
  color: var(--text-faint);
}
.game__name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.game__score { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.game__side--won .game__score { color: var(--accent); font-weight: 700; }

.bye {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--text-faint);
}

.champion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.champion-card__trophy { font-size: 24px; }

/* -- season navigator ------------------------------------------------------ */

.year-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.year-nav__item {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.15s, transform 0.15s;
}
.year-nav__item:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-1px);
}
.year-nav__item.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.year-nav__year { font-family: var(--font-num); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.year-nav__who {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.year-nav__item.is-live .year-nav__who { color: var(--diverge-high); }

/* -- division field ------------------------------------------------------- */

.division {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.division__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.division__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.division__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
.division__row:last-child { border-bottom: 0; }
.division__team { font-size: 13px; color: var(--text-dim); }
.division__rec { margin-left: auto; font-family: var(--font-num); font-size: 12.5px; }

/* -- prose / markdown ----------------------------------------------------- */

.prose { max-width: 72ch; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.prose h2, .prose h3 { color: var(--text); margin: 26px 0 10px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.prose blockquote {
  margin: 16px 0;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--accent);
  font-style: italic;
}

/* -- misc ----------------------------------------------------------------- */

.empty {
  padding: 28px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-lg);
  color: var(--text-faint);
  font-size: 14px;
  text-align: center;
}

/* Normal tracking — the .eyebrow style's 0.14em letter-spacing reads as broken
   on a word this short sitting next to a name. */
.tag-alum {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  vertical-align: middle;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12.5px;
  font-family: var(--font-num);
  color: var(--text-dim);
}
.chip.is-active, .chip:hover { border-color: var(--accent); color: var(--accent); }

.toggle { display: inline-flex; padding: 3px; background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 999px; }
.toggle a { padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.toggle a.is-active { background: var(--accent); color: var(--accent-ink); }

.footer {
  padding: 32px 0 48px;
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
  font-size: 12.5px;
}

.select {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}

@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .statlist { grid-template-columns: 1fr; }
  .masthead__bar { height: auto; flex-wrap: wrap; padding: 10px 0; gap: 10px; }
  .nav { margin-left: 0; width: 100%; }
}

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