/* ==========================================================
   PFML

   Palette   paper  #F8F9FA   ink    #16111A   magenta #9E00C4
             deep   #7A0099   wash   #F4E4FA   acid    #CCFF3D
   Type      Archivo (headings, numerals) / Inter (body)
   Devices   soft 1px borders + a low, wide shadow instead of
              heavy black rules; generous whitespace does the
              separating. Magenta stays reserved for scores,
              links and the live season; acid marks the leader.
   ========================================================== */

:root {
  --paper: #F8F9FA;
  --ink: #16111A;
  --muted: #6A6172;
  --border: rgba(22, 17, 26, 0.10);
  --border-soft: rgba(22, 17, 26, 0.06);
  --magenta: #9E00C4;
  --deep: #7A0099;
  --wash: #F4E4FA;
  --acid: #CCFF3D;
  --card: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(22, 17, 26, .05);
  --shadow-md: 0 18px 40px -22px rgba(22, 17, 26, .35), 0 2px 6px -2px rgba(22, 17, 26, .08);
  --r: 16px;
  --r-sm: 11px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .n { font-family: "Archivo", "Inter", system-ui, sans-serif; }
.n { font-variant-numeric: tabular-nums; }

a { color: var(--deep); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--magenta); }

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }

.shell { max-width: 900px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(248, 249, 250, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;
}
.wordmark {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--magenta); }
.seasons { display: flex; gap: 7px; flex-wrap: wrap; }
.season-tab {
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.86rem;
  padding: 7px 15px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.season-tab:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.season-tab[aria-current="true"] {
  background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: var(--shadow-md);
}
.season-tab[aria-current="true"]:hover { color: #fff; }
.pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 0 3px var(--wash);
}
.season-tab[aria-current="true"] .pip { background: var(--acid); box-shadow: 0 0 0 3px rgba(255,255,255,.3); }

/* jump-to-section nav, second row of the same sticky top bar */
.jumpnav {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 20px 10px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.jumpnav::-webkit-scrollbar { display: none; }
.jump-link {
  flex: 0 0 auto; font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 500;
  color: var(--muted); text-decoration: none; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.jump-link:hover { color: var(--magenta); background: var(--wash); }

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

.hero { padding-top: 46px; padding-bottom: 8px; }
.hero h1 {
  margin: 0; font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 0.98;
}
.hero-line { margin: 12px 0 0; color: var(--muted); font-size: 1.05rem; max-width: 60ch; }

.scoreline {
  margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
}
.scoreline > div {
  background: var(--card); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
}
.scoreline dt { margin: 0 0 3px; font-size: 0.78rem; color: var(--muted); }
.scoreline dd {
  margin: 0; font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

/* ---------- blocks ---------- */

.block { padding-top: 44px; padding-bottom: 6px; }
.block-first { padding-top: 46px; }
.block h2 { margin: 0 0 5px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.block-note { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; max-width: 70ch; }
.block h2 + div, .block-note + div { margin-top: 0; }

.empty {
  border: 1px dashed var(--border); border-radius: var(--r);
  padding: 22px; color: var(--muted); font-size: 0.94rem; background: var(--card);
}

.framed {
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-sm);
}

/* ---------- standings ---------- */

.stand-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 14px;
  align-items: center; padding: 13px 18px;
}
.stand-row + .stand-row { border-top: 1px solid var(--border-soft); }
.stand-row:first-child { background: var(--wash); }
.stand-rank { font-family: "Archivo", sans-serif; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.stand-row:first-child .stand-rank { color: var(--magenta); }
.stand-name { font-weight: 600; }
.bar { margin-top: 6px; height: 7px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--magenta); border-radius: 4px; }
.stand-row:first-child .bar > i { background: linear-gradient(90deg, var(--magenta), var(--acid)); }
.stand-score { text-align: right; white-space: nowrap; }
.stand-score b { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stand-score span { display: block; font-size: 0.74rem; color: var(--muted); }

.stand-row.is-clickable { cursor: pointer; transition: background .12s ease; }
.stand-row.is-clickable:hover { background: var(--wash); }
.stand-row.is-clickable:focus-visible { outline-offset: -2px; }
.stand-row.is-selected {
  background: rgba(158, 0, 196, 0.045);
  box-shadow: inset 4px 0 0 var(--magenta);
}
.stand-row.is-selected.is-clickable:hover { background: rgba(158, 0, 196, 0.08); }
.stand-row.is-selected .stand-name { color: var(--deep); }

/* ---------- player focus / comparison panel ---------- */

#block-focus { padding-top: 8px; }
#block-focus .block-note { margin-bottom: 16px; }

.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
button.focus-chip {
  font-family: "Inter", sans-serif; font-size: 0.87rem; cursor: pointer;
  background: var(--wash); border-color: rgba(158, 0, 196, 0.25); color: var(--deep);
}
button.focus-chip:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.focus-clear-all {
  font-family: "Inter", sans-serif; font-size: 0.85rem; color: var(--muted);
  background: none; border: none; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; padding: 8px 4px;
}
.focus-clear-all:hover { color: var(--magenta); }

#focus h3 {
  margin: 26px 0 8px; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
}
#focus > .hl-grid:first-of-type { margin-top: 0; }
.focus-grid-spaced { margin-top: 20px; }

/* ---------- filter tag shown atop a filtered section ---------- */

.filter-tag {
  margin: 0 0 12px; font-size: 0.85rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.filter-tag b { color: var(--ink); font-weight: 600; }
.filter-tag-clear { font-size: 0.82rem; color: var(--magenta); }

/* highlighted track row: a selected player's entry inside an otherwise
   unfiltered round listing */
.trk.trk-hl { background: rgba(158, 0, 196, 0.045); }
.trk.trk-hl .trk-title { color: var(--deep); }

/* ---------- highlights ---------- */

.hl-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.hl {
  background: var(--card); padding: 17px 19px;
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.hl-label { margin: 0 0 7px; font-size: 0.79rem; color: var(--muted); }
.hl-value { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.06rem; line-height: 1.25; letter-spacing: -0.01em; }
.hl-value a { color: inherit; text-decoration-color: var(--magenta); }
.hl-big { font-size: 2rem; color: var(--magenta); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hl-meta { margin-top: 5px; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }

/* ---------- tracks ---------- */

.trk {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center; padding: 12px 16px;
}
.trk + .trk { border-top: 1px solid var(--border-soft); }
.trk-pos { font-family: "Archivo", sans-serif; font-weight: 700; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.trk-body { min-width: 0; }
.trk-title { font-weight: 600; }
.trk-title a { color: var(--ink); text-decoration-color: var(--magenta); }
.trk-title a:hover { color: var(--magenta); }
.trk-meta { font-size: 0.85rem; color: var(--muted); margin-top: 1px; }
.trk-meta a { color: var(--muted); text-decoration-color: var(--border); }
.trk-meta a:hover { color: var(--magenta); text-decoration-color: var(--magenta); }
.trk-pts { font-family: "Archivo", sans-serif; font-weight: 700; color: var(--magenta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trk-pts small { color: var(--muted); font-weight: 500; font-family: "Inter", sans-serif; }

/* ---------- rounds ---------- */

.rounds-list { display: flex; flex-direction: column; gap: 12px; }
.round {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.round > summary {
  padding: 16px 19px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.round > summary::-webkit-details-marker { display: none; }
.round > summary:hover { background: var(--wash); }
.round[open] { box-shadow: var(--shadow-md); }
.round[open] > summary { border-bottom: 1px solid var(--border); background: var(--wash); }
.round-title { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.04rem; }
.round-sub { color: var(--muted); font-size: 0.87rem; }
.round-sub b { color: var(--ink); font-weight: 600; }
.round-open { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.82rem; color: var(--magenta); white-space: nowrap; }
.round-body { padding: 17px 19px; }
.round-desc { margin: 0 0 14px; color: var(--muted); font-size: 0.91rem; max-width: 70ch; white-space: pre-wrap; }
.inner-list { border: 1px solid var(--border-soft); border-radius: var(--r-sm); overflow: hidden; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px;
  font-weight: 600; font-size: 0.87rem; color: var(--ink);
  text-decoration: none; background: var(--card); margin-bottom: 14px;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.pill:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pill.is-disabled {
  color: var(--muted); border-style: dashed; box-shadow: none; cursor: default;
}
.pill.is-disabled:hover { box-shadow: none; transform: none; }

/* resting-state hint that a playlist chip is a real, clickable link, not
   just a hover effect: a faint magenta halo and a barely-tinted border */
.pill.pill-live {
  border-color: rgba(158, 0, 196, 0.28);
  box-shadow: 0 0 0 3px rgba(158, 0, 196, 0.08), var(--shadow-sm);
}
.pill.pill-live:hover {
  border-color: rgba(158, 0, 196, 0.45);
  box-shadow: 0 0 0 4px rgba(158, 0, 196, 0.12), var(--shadow-md);
}

/* ---------- taste matrix ---------- */

.taste-scroll {
  border: 1px solid var(--border); border-radius: var(--r); overflow: auto; max-height: 560px;
  background: var(--card); box-shadow: var(--shadow-sm);
}
table.taste { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
table.taste th, table.taste td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); white-space: nowrap; }
table.taste thead th {
  position: sticky; top: 0; z-index: 2; background: var(--card);
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.72rem;
  text-align: left; border-bottom: 1px solid var(--border);
}
table.taste thead th.corner { left: 0; z-index: 3; }
table.taste tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  text-align: left; font-weight: 600; border-right: 1px solid var(--border);
}
table.taste td { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
table.taste td.nil { color: #C6BDCC; font-weight: 400; }

.legend { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; }
.legend .ramp { width: 130px; height: 10px; border-radius: 5px; border: 1px solid var(--border); background: linear-gradient(90deg, #fff, var(--magenta)); }

/* ---------- voters ---------- */

.vrow { display: grid; grid-template-columns: 1fr 5.5rem 5.5rem 5.5rem; gap: 10px; align-items: center; padding: 11px 18px; font-size: 0.92rem; }
.vrow + .vrow { border-top: 1px solid var(--border-soft); }
.vrow.head { background: var(--ink); color: var(--paper); font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.74rem; }
.vrow .num { text-align: right; font-family: "Archivo", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.vrow.head .num { font-size: 0.74rem; }
.vname { font-weight: 600; }

/* ---------- artists ---------- */

.art-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.art {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px;
  background: var(--card); text-decoration: none; color: var(--ink); font-size: 0.9rem; font-weight: 600;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.art:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.art b { font-family: "Archivo", sans-serif; color: var(--magenta); font-variant-numeric: tabular-nums; }

/* ---------- home page: season cards ---------- */

.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.season-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.season-card:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.season-card.is-live { background: linear-gradient(165deg, #fff 0%, var(--wash) 130%); }
.season-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.season-card-name-wrap { display: flex; align-items: center; gap: 9px; }
.season-card-name { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.28rem; letter-spacing: -0.01em; }
.season-card-arrow { color: var(--magenta); font-size: 1.2rem; }
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--magenta); color: #fff; font-family: "Archivo", sans-serif;
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.03em;
  padding: 3px 9px 3px 7px; border-radius: 999px; line-height: 1.4;
}
.live-badge .pip { background: var(--acid); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.season-card-stats { margin-top: 10px; color: var(--muted); font-size: 0.88rem; }
.season-card-round { margin-top: 6px; font-size: 0.88rem; }
.season-card-round .phase {
  display: inline-flex; align-items: center; font-weight: 600; color: var(--deep);
  background: var(--wash); border-radius: 999px; padding: 2px 10px; margin-left: 6px; font-size: 0.8rem;
}
.season-card-leader { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 0.9rem; }
.season-card-leader .lbl { color: var(--muted); display: block; font-size: 0.76rem; margin-bottom: 2px; }
.season-card-leader .val { font-weight: 700; font-family: "Archivo", sans-serif; }
.season-card-leader .val .pts { color: var(--magenta); }

/* ---------- home page: playlists ---------- */

.playlist-group { margin-bottom: 20px; }
.playlist-group:last-child { margin-bottom: 0; }
.playlist-group h3 {
  margin: 0 0 10px; font-size: 0.82rem; font-weight: 600; color: var(--muted);
  text-transform: none;
}
.playlist-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- points-over-time trend chart ---------- */

.chart-mode {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.chart-mode button {
  font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  padding: 7px 14px; background: var(--card); color: var(--muted); border: none;
}
.chart-mode button:not(:last-child) { border-right: 1px solid var(--border); }
.chart-mode button.is-active { background: var(--magenta); color: #fff; }
.chart-mode-note { margin: 0 0 14px; }

.trend-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
button.trend-chip {
  display: inline-flex; align-items: center; gap: 7px; font-family: "Inter", sans-serif; font-size: 0.83rem;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 8px; background: var(--card);
  color: var(--muted); cursor: pointer; box-shadow: var(--shadow-sm);
}
button.trend-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; opacity: 0.35; }
button.trend-chip:hover { border-color: rgba(158, 0, 196, 0.3); color: var(--ink); }
button.trend-chip.is-on { color: var(--ink); border-color: var(--border); background: var(--wash); }
button.trend-chip.is-on .dot { opacity: 1; }

.trend-controls { display: flex; gap: 14px; margin-bottom: 16px; }
.trend-control {
  font-family: "Inter", sans-serif; font-size: 0.82rem; color: var(--magenta); background: none; border: none;
  cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px;
}
.trend-control:hover { color: var(--deep); }

.chart-frame {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
  box-shadow: var(--shadow-sm); padding: 12px 8px;
}
.chart-frame svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.chart-axis-y, .chart-axis-x { font-size: 10px; fill: var(--muted); font-family: "Inter", sans-serif; }
.trend-line-hit, .trend-point-hit { cursor: pointer; }
.trend-series:hover .trend-line-visible { stroke-width: 4; }

/* ---------- comments ---------- */
/* .crow mirrors .vrow (voting style) but carries more numeric columns, so
   it gets its own grid template rather than overloading that one. */
.crow {
  display: grid; grid-template-columns: minmax(120px, 1.6fr) repeat(8, minmax(44px, 0.55fr));
  gap: 8px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
}
.crow:last-child { border-bottom: none; }
.crow.head {
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--wash);
}
.crow .num { text-align: right; font-variant-numeric: tabular-nums; }
.crow .vname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmt-quote {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
  box-shadow: var(--shadow-sm); padding: 14px 16px; margin-top: 14px;
}
.cmt-label {
  margin: 0 0 8px; font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.cmt-quote blockquote {
  margin: 0; padding-left: 12px; border-left: 3px solid var(--magenta);
  white-space: pre-wrap; font-size: 0.93rem; line-height: 1.55; max-width: 72ch;
}
.cmt-src { margin: 10px 0 0; font-size: 0.83rem; color: var(--muted); }

.nrow {
  display: grid; grid-template-columns: 1fr 7rem 7rem; gap: 10px; align-items: center;
  padding: 8px 0; font-size: 0.9rem; border-bottom: 1px solid var(--border-soft);
}
.nrow:last-child { border-bottom: none; }
.nrow.head {
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.nrow .num { text-align: right; font-variant-numeric: tabular-nums; }

.cmt-words, .cmt-notes { margin-top: 14px; padding: 14px 16px; }
.cmt-words h3, .cmt-notes h3 {
  margin: 0 0 10px; font-size: 0.82rem; font-weight: 600; color: var(--muted);
}
.cmt-notes h3 { margin-bottom: 4px; }
.cmt-word-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmt-word {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.83rem;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  background: var(--wash); color: var(--muted);
}
.cmt-word b { color: var(--ink); font-weight: 600; }
.cmt-foot { margin-top: 12px; }

@media (max-width: 720px) {
  /* the four style-rate columns are the first to go when there's no room */
  .crow { grid-template-columns: minmax(90px, 1.4fr) repeat(4, minmax(38px, 0.5fr)); font-size: 0.84rem; }
  .crow > :nth-child(n + 6) { display: none; }
}

/* ---------- career table ---------- */
/* column count varies with how many seasons have data, so the grid
   template is set inline per row from JS (see renderCareerStandings)
   rather than guessed here */
.career-table .vrow.is-leader { background: var(--wash); }

.career-head { padding: 0; }
.career-sort-btn {
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.74rem; color: var(--paper);
  background: none; border: none; cursor: pointer; text-align: right; padding: 11px 18px;
}
.career-sort-btn.is-left { text-align: left; }
.career-sort-btn:hover { color: var(--acid); }
.career-sort-btn.is-active { color: var(--acid); }
.career-sort-btn .arrow { font-size: 0.7rem; }

/* ---------- footer ---------- */

.site-footer {
  margin-top: 46px; padding-top: 24px; padding-bottom: 60px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 0.84rem;
}
.site-footer p { margin: 0; max-width: 70ch; }
.site-footer p + p { margin-top: 6px; }

/* ---------- responsive ---------- */

@media (max-width: 620px) {
  .hero { padding-top: 32px; }
  .scoreline dd { font-size: 1.3rem; }
  .vrow { grid-template-columns: 1fr 4.2rem 4.2rem; }
  .vrow > :nth-child(4) { display: none; }
  .stand-row, .trk { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .season-tab, .pill, .art, .season-card { transition: none; }
}