/* style.css, period 1980s Sunday sports section feel.
   Per spec section 9: serif headlines (Cheltenham/Times-style), slab section
   headers, faux newsprint background, scarlet + gold accents, agate-style
   tables, no modern gradients/shadows. */

:root {
  --ink: #1a1612;
  --ink-soft: #3d3429;
  --rule: #ada495;
  --rule-soft: #d6cfc1;
  --paper: #f2ebd9;
  --paper-soft: #f7f1e1;
  --paper-dark: #e6deca;
  --scarlet: #aa0000;
  --gold: #b3995d;
  --claude-tint: #f5e8cf;
  --claude-rule: #c79c52;
  --max-width: 1080px;
}

* { box-sizing: border-box; }

html, body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  padding: 0;
  font-family: "Iowan Old Style", "Palatino", "Georgia", serif;
  font-size: 16px;
  line-height: 1.45;
}

body {
  background-image:
    radial-gradient(rgba(120,100,50,0.05) 1px, transparent 1px),
    radial-gradient(rgba(120,100,50,0.04) 1px, transparent 1px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
}

/* ----- Layout ----- */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px 64px;
}
.masthead {
  border-top: 4px double var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 16px 0 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.masthead .logo {
  font-family: "Hoefler Text", "Times New Roman", "Times", serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--scarlet);
  text-transform: uppercase;
}
.masthead .meta {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}
.breadcrumbs {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 0 16px;
}
.breadcrumbs a { color: var(--ink-soft); }

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

h1, h2, h3, h4 {
  font-family: "Cheltenham", "Hoefler Text", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink);
}
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 8px; }
h2 { font-size: 22px; margin: 28px 0 8px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.section-header h2 {
  font-family: "Rockwell", "Roboto Slab", "Cheltenham", serif; /* slab serif */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
}
.section-header { display: flex; align-items: center; gap: 16px; }
h3 { font-size: 16px; margin: 16px 0 4px; }

p { margin: 0 0 12px; }
small, .small { font-size: 12px; color: var(--ink-soft); }

/* ----- Decade home ----- */
.decade-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 20px 0;
}
@media (max-width: 720px) {
  .decade-grid { grid-template-columns: repeat(2, 1fr); }
}
.decade-tile {
  display: block;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 18px 14px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.decade-tile:hover {
  background: var(--paper-dark);
}
.decade-tile .year {
  display: block;
  font-family: "Cheltenham", "Hoefler Text", serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--scarlet);
}
.decade-tile .progress {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 6px;
  min-height: 14px;
}

/* ----- Season home ----- */
.season-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.season-header .year { font-size: 56px; line-height: 1; color: var(--scarlet); font-family: "Cheltenham", serif; font-weight: 700; }
.season-header .coach { font-style: italic; color: var(--ink-soft); }

.layout-2col {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 32px;
}
@media (max-width: 720px) {
  .layout-2col { grid-template-columns: 1fr; }
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.schedule-tile {
  position: relative;
  display: block;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
/* Bottom-right icon cluster: watched eye + classic ⭐ + Madden mic.
   All three live in a horizontal row at the corner so they never
   overlap tile text (Bryan's round-4 spec). */
.tile-icons {
  position: absolute;
  bottom: 6px;
  right: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  pointer-events: none;
  font-size: 12px;
  line-height: 1;
}
.tile-icons > * { pointer-events: auto; }
.tile-icon-watched {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
.schedule-tile.watched .tile-icon-watched {
  background-color: #888;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.tile-icon-great,
.tile-icon-madden {
  display: none;
  cursor: help;
}
body.show-detailed .tile-icon-great,
body.show-detailed .tile-icon-madden {
  display: inline-block;
}
/* "No primary video on file" glyph, always visible like the watched eye,
   not a spoiler, just a content-availability cue. */
.tile-icon-no-video {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  opacity: 0.55;
  filter: grayscale(1);
  cursor: help;
}
/* Score row groups the final score + Vegas odds together so they read as
   a single block. Score gates on `.show-scores`, odds on `.show-detailed`,
   so the row may be empty / partially populated depending on toggles. */
.tile-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  min-height: 0;
}
.tile-odds {
  display: none;
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  background: var(--paper-soft);
  padding: 1px 4px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: nowrap;
}
body.show-detailed .tile-odds { display: inline-block; }
.schedule-tile.watched {
  border-color: var(--scarlet);
}
/* Eye SVG that matches the tile watched indicator, used in the legend. */
.legend-eye {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  background-color: #888;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.watch-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  font-size: 12px;
}
.watched-counter {
  color: var(--ink-soft);
  font-style: italic;
  margin-right: 4px;
}
button.ghost {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
button.ghost:hover { background: var(--paper-soft); }
.schedule-tile .week-num {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.schedule-tile .opp {
  font-weight: 700;
  font-size: 14px;
  margin: 2px 0;
}
.schedule-tile .where { font-style: italic; color: var(--ink-soft); }
.schedule-tile.current {
  border: 2px solid var(--scarlet);
  background: #f8e6e6;
}
.schedule-tile.beyond-cursor { opacity: 0.85; }

/* Schedule toggles */
.schedule-toggles {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 8px 0 12px;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--paper-soft);
  border: 1px dashed var(--rule);
}
.schedule-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Tile score (hidden by default; toggle reveals) */
.tile-score {
  display: none;
  font-weight: 700;
  font-size: 13px;
  margin-top: 4px;
  color: var(--ink);
}
body.show-scores .tile-score { display: block; }
.tile-score.result-win { color: #1f6b1f; }
.tile-score.result-loss { color: var(--scarlet); }
.tile-score.result-tie { color: var(--ink-soft); }

/* Inline legend (lives inside .schedule-toggles, emoji-only, no filler). */
.schedule-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: auto;
}
.schedule-legend > span { white-space: nowrap; }

table.alltime-stats {
  margin-bottom: 22px;
}
table.alltime-stats td:first-child {
  font-weight: 600;
}
table.alltime-stats th { white-space: nowrap; }

.broadcast-credits {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--paper-soft);
  border-left: 3px solid var(--scarlet);
  font-size: 13px;
}

/* Game info block (NFLverse-sourced metadata: roof, surface, weather, refs,
   QB matchup, Vegas line). Shows under the video block, above Score. */
.game-info-section {
  margin-bottom: 22px;
}
dl.game-info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 14px;
}
dl.game-info-list dt {
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  align-self: center;
}
dl.game-info-list dd {
  margin: 0;
  color: var(--ink);
}
.game-info-vegas {
  margin-top: 10px;
}

.standings-panel {
  margin-top: 24px;
}
.standings-panel.pre-week {
  margin-bottom: 22px;
}
.standings-panel.pre-week .standings-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.around-league-storylines {
  padding: 8px 14px;
  margin-top: 6px;
  border-bottom: 1px solid var(--rule);
}
.around-league-storylines h3 {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
ul.around-league-bullets {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  list-style: disc;
}
ul.around-league-bullets li {
  margin: 2px 0;
}
.standings-details {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-soft);
}
.standings-details summary {
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.standings-details summary::-webkit-details-marker { display: none; }
.standings-details summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  transition: transform 0.15s;
}
.standings-details[open] summary::before { transform: rotate(90deg); }
.standings-details summary:hover { background: #fff5e6; }
.standings-details summary .small {
  color: var(--ink-soft);
  font-weight: normal;
}
.standings-grid {
  padding: 8px 14px 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
/* Modern-era final standings: AFC | NFC two-column. Falls back to single
   column at narrow widths and on pre-1970 seasons (which have no AFC/NFC
   prefix and render with the default single-column grid above). */
.standings-grid.two-conf {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.standings-conf .conf-label {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  border-bottom: 2px solid var(--rule);
  padding-bottom: 4px;
}
@media (max-width: 720px) {
  .standings-grid.two-conf { grid-template-columns: 1fr; gap: 14px; }
}
.standings-div h3 {
  margin: 0 0 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}
table.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.standings-table td {
  padding: 3px 4px;
  border-bottom: 1px dotted var(--rule);
}
table.standings-table td.team { font-weight: 500; }
table.standings-table td.rec {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  width: 60px;
}
table.standings-table td.strk,
table.standings-table th.strk {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  width: 44px;
}
/* Final-standings panel streak column derived from league_games.csv.
   "W3" stays neutral; "L"-prefixed gets the soft red tint to read at a
   glance who's stumbling into the playoffs. */
table.standings-table td.streak {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  width: 44px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
table.standings-table td.streak-l { color: var(--scarlet); }
table.standings-table td.streak-w { color: var(--ink); font-weight: 500; }
table.standings-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  padding: 3px 4px;
}
table.standings-table thead th.rec,
table.standings-table thead th.strk { text-align: right; }
table.standings-table tr.team-niners td {
  background: #fff5e6;
  font-weight: 600;
  color: var(--scarlet);
}
.standings-source {
  padding: 0 14px 10px;
  margin: 6px 0 0;
}

/* Pre-week standings: AFC/NFC two-column split (UI 1.5 spec). */
.standings-conferences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 8px 14px 4px;
}
.standings-conference-heading {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 2px solid var(--rule);
  padding-bottom: 3px;
}
.standings-conference .standings-grid {
  padding: 0;
  grid-template-columns: 1fr;
}
@media (max-width: 720px) {
  .standings-conferences {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Every-Super-Bowl chronological grid at /super-bowls.html. 49ers SBs get
   a scarlet border so the franchise highlights pop out of the NFL-wide list. */
.sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 12px 0;
}
.sb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.12s, transform 0.12s;
}
.sb-tile:hover { transform: translateY(-1px); border-color: var(--scarlet); }
.sb-tile.involves-49ers {
  border-left: 4px solid var(--scarlet);
  background: linear-gradient(to right, #fff5e6 0%, var(--panel) 30%);
}
.sb-tile .sb-roman {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.sb-tile .sb-label { color: var(--ink-soft); font-variant: small-caps; }
.sb-tile .sb-matchup { font-size: 14px; font-weight: 500; }
.sb-tile .sb-date { color: var(--ink-soft); }
.sb-watched-marker {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: none;
}
.sb-watched-marker.watched {
  display: block;
  background: var(--scarlet);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--scarlet);
}

/* Epic NFL Games, chronological tile grid on /epic-games.html. Each tile
   links into /epic/<slug>.html for the per-game detail page. */
.epic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 12px 0;
}
.epic-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.12s, transform 0.12s;
}
.epic-tile:hover {
  border-color: var(--scarlet);
  transform: translateY(-1px);
}
.epic-tile .epic-season {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.epic-tile .epic-label {
  font-size: 16px;
  font-weight: 600;
}
.epic-tile .epic-matchup { color: var(--ink); }
.epic-tile .epic-date { color: var(--ink-soft); }
.epic-tile .epic-why {
  margin-top: 6px;
  color: var(--ink-soft);
  font-style: italic;
}
.epic-watched-marker {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: none;
}
.epic-watched-marker.watched {
  display: block;
  background: var(--scarlet);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--scarlet);
}

/* Classic games index */
.masthead-link {
  margin-left: 12px;
  font-style: normal;
  color: var(--scarlet);
  text-decoration: none;
  border-bottom: 1px dotted var(--scarlet);
}
.masthead-link:hover { background: #fff5e6; }
.classic-list {
  list-style: decimal;
  padding-left: 20px;
}
.classic-row {
  border-bottom: 1px dotted var(--rule);
  padding: 8px 0;
}
.classic-link {
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
}
.classic-year {
  font-weight: 700;
  color: var(--scarlet);
  min-width: 50px;
}
.classic-desc { flex: 1; }
.classic-score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--paper-soft);
  padding: 1px 8px;
  border: 1px solid var(--rule);
  font-size: 12px;
}
.classic-reasons {
  margin-left: 62px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.story-so-far {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 16px;
  margin: 16px 0;
}

.notable-players {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notable-players li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--rule-soft);
  font-size: 14px;
}

/* ----- Weekly page ----- */
.week-header {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 16px;
  position: relative;
}
.week-header.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
}
.week-header .header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.week-header .kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.week-header h1 {
  font-size: 36px;
  line-height: 1.05;
  margin: 4px 0;
}
.week-header .dateline {
  font-style: italic;
  color: var(--ink-soft);
}
.master-toggle {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 6px 14px;
  cursor: pointer;
  flex: 1;
  max-width: 220px;
}
.master-toggle:hover { background: var(--paper-dark); }
.master-toggle[aria-pressed="true"] { background: #2c241b; color: var(--paper); }
.header-mark-watched {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.header-mark-watched:hover { background: var(--paper-dark); }
.header-mark-watched.watched {
  background: var(--scarlet);
  color: var(--paper);
  border-color: var(--scarlet);
}
.nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.nav-arrow:hover:not(.disabled) { background: var(--paper-dark); }
.nav-arrow.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.bottom-nav .nav-arrow {
  width: 48px;
  height: 40px;
  font-size: 22px;
}
.bottom-nav-up {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 10px 18px;
  background: var(--paper-soft);
}
.bottom-nav-up:hover { background: var(--paper-dark); }

/* Articles */
.articles-block {
  display: grid;
  /* Auto-fit means a single article fills the row; two side-by-side when
     space allows. Avoids the "scrunched on the left, empty right" feel
     when only one writer has filed for a slot. */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}
@media (max-width: 720px) { .articles-block { grid-template-columns: 1fr; } }
.article {
  border-top: 4px double var(--rule);
  padding-top: 8px;
}
.article h3 { margin: 0 0 4px; font-size: 18px; }
.article .label-row {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.article.claude {
  background: var(--claude-tint);
  border-left: 3px solid var(--claude-rule);
  padding: 10px 14px;
}
.article.claude .label-row {
  color: #6b4a14;
  font-weight: 700;
}

/* Around the league */
.around-league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  font-size: 13px;
}
.around-league-row {
  border: 1px solid var(--rule-soft);
  padding: 6px 10px;
}

/* Video */
.video-frame {
  position: relative;
  padding-bottom: 56.25%;
  background: #111;
  margin: 8px 0;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 8px 0;
}
.video-meta-text {
  font-style: italic;
}
.video-cta {
  display: inline-block;
  background: #aa0000;
  color: #fff !important;
  font-weight: 700;
  font-style: normal;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  margin-right: 10px;
  font-size: 14px;
}
.video-cta:hover { background: #c20000; }

/* Around-the-league classic-games sub-page */
.classic-games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 12px;
}
.classic-game-card {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 14px 16px;
}
.classic-game-header h3 {
  margin: 0;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 22px;
}
.classic-game-when {
  color: var(--ink-soft);
  margin: 4px 0 10px;
}
.around-league-link {
  background: linear-gradient(135deg, #fff5e6 0%, #fff8f0 100%);
  border: 1px solid #d4af37;
}
.around-league-link:hover {
  background: linear-gradient(135deg, #ffeacc 0%, #fff0db 100%);
}

.video-cta.secondary {
  background: var(--paper-soft);
  color: var(--ink) !important;
  border: 1px solid var(--ink);
  font-weight: 500;
  font-size: 13px;
}
.video-cta.secondary:hover { background: var(--paper-dark); }
.video-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.video-embed-note {
  margin-top: 6px;
  font-style: normal;
  color: var(--ink-soft);
}

/* Spoilers */
.spoiler {
  position: relative;
  min-height: 60px;
}
.spoiler:not(.revealed) > :not(.spoiler-overlay) {
  visibility: hidden;
}
.spoiler:not(.revealed) {
  background: repeating-linear-gradient(
    135deg,
    var(--paper-dark) 0,
    var(--paper-dark) 6px,
    var(--paper-soft) 6px,
    var(--paper-soft) 12px
  );
  border: 1px dashed var(--rule);
}
.spoiler-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.spoiler.revealed .spoiler-overlay { display: none; }
.spoiler-icon { font-size: 22px; }

/* When master is "shown", reveal everything regardless of per-element state. */
body.spoilers-shown .spoiler {
  background: transparent;
  border: 0;
}
body.spoilers-shown .spoiler > :not(.spoiler-overlay) {
  visibility: visible;
}
body.spoilers-shown .spoiler-overlay { display: none; }

/* Tables (agate-styled) */
table.agate {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.agate th, table.agate td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 4px 8px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
table.agate th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}
table.agate td.num, table.agate th.num { text-align: right; }
table.agate tr.totals td { border-top: 1px solid var(--ink); font-weight: 700; }
table.agate tr.team-divider td {
  background: var(--paper-dark);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 6px 8px;
}
table.agate tr.team-divider:first-child td { border-top: 1px solid var(--ink); }
table.playerstats td:first-child { font-weight: 600; }
.jersey {
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 4px;
  font-size: 0.92em;
}
.player-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.player-link:hover {
  color: var(--scarlet);
  border-bottom-color: var(--scarlet);
}
.article-byline {
  font-family: "Rockwell", "Roboto Slab", "Cheltenham", serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.article-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.article-bullets li {
  position: relative;
  padding: 4px 0 4px 20px;
  border-bottom: 1px dotted var(--rule);
  font-variant-numeric: tabular-nums;
}
.article-bullets li:last-child { border-bottom: none; }
.article-bullets li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  color: var(--scarlet);
  font-size: 10px;
  top: 6px;
}
.article-cites { margin-top: 8px; }
.article strong.subhead {
  display: block;
  font-family: "Rockwell", "Roboto Slab", "Cheltenham", serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  margin: 12px 0 4px;
  color: var(--ink);
}
.reddit-discuss {
  margin-top: 24px;
  padding: 14px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
}
.reddit-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff4500;
  color: #fff !important;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  margin-right: 8px;
}
.reddit-cta:hover { background: #ff5722; }
.reddit-cta.secondary {
  background: #fff;
  color: #ff4500 !important;
  border: 1px solid #ff4500;
}
.reddit-cta.secondary:hover { background: #fff5f0; }
.reddit-logo {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
}
.reddit-cta.secondary .reddit-logo circle { fill: #ff4500; }
.reddit-title-hint { margin-top: 10px; }
table.teamstats tr.stats-section td {
  background: var(--paper-dark);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 8px 8px 4px 8px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
table.teamstats tr.stats-section:first-child td { border-top: 1px solid var(--ink); }

/* Linescore */
.linescore { width: auto; min-width: 320px; }
.linescore td.team { font-weight: 700; }

/* Quarter picker */
.quarter-picker {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.quarter-picker .qp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-right: 4px;
}
.quarter-picker button {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  cursor: pointer;
  font-family: inherit;
}
.quarter-picker button:hover { background: var(--paper-dark); }
.quarter-picker button.active {
  background: var(--scarlet);
  color: #fff;
  border-color: var(--scarlet);
}

/* Quarter reveal hide / show */
.q-hidden {
  visibility: hidden;
}
.linescore td.q-hidden::before, .linescore th.q-hidden::before {
  content: ", ";
  visibility: visible;
  color: var(--ink-soft);
}
tr.q-hidden { display: none; }
.running-score { display: none; font-size: 24px; font-weight: 700; }
.running-score.q-active { display: inline; }
/* Linescore "Total" column: one span per picker state so the cell shows
   the running total through the selected quarter. Final span starts active
   so the table reads correctly before any picker click. */
.running-total { display: none; }
.running-total.q-active { display: inline; }
.linescore td.linescore-total,
.linescore th.linescore-total { font-weight: 700; }
.score-display { margin: 12px 0; min-height: 28px; }

/* Citations */
.cite {
  font-size: 10px;
  vertical-align: super;
  margin: 0 1px;
  color: var(--scarlet);
  text-decoration: none;
}
.sources-footer {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-soft);
}
.sources-footer ol { padding-left: 18px; margin: 4px 0; }

/* Journal / reactions / bookmarks */
.journal-section, .bookmarks-section {
  margin: 24px 0;
  padding: 16px;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
}
.journal-section textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--rule);
  background: white;
  padding: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}
.emoji-row { margin-top: 10px; }
.emoji-row button {
  font-size: 18px;
  background: white;
  border: 1px solid var(--rule);
  padding: 4px 8px;
  margin-right: 4px;
  cursor: pointer;
}
.reaction-chip {
  display: inline-block;
  font-size: 13px;
  background: white;
  border: 1px solid var(--rule);
  padding: 2px 8px;
  margin: 4px 4px 0 0;
  cursor: pointer;
}
.bookmarks-section ul { padding-left: 18px; margin: 8px 0 0; }
.bookmarks-section input, .bookmarks-section select {
  font-family: inherit;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  background: white;
  margin-right: 4px;
}
.bookmark-remove {
  font-size: 11px;
  background: transparent;
  border: 0;
  color: var(--scarlet);
  cursor: pointer;
}

/* Buttons */
button.primary {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  background: var(--scarlet);
  color: white;
  border: 0;
  padding: 8px 14px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
button.primary:hover { background: #8a0000; }
button.primary:disabled { background: var(--gold); cursor: default; }

/* Mark watched section */
.mark-watched {
  text-align: center;
  margin: 32px 0 8px;
}

/* Cursor strip + decade tabs (home page) */
.cursor-strip {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  margin: 12px 0 18px;
}
.cursor-strip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.cursor-current { display: flex; flex-direction: column; }
.cursor-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-size: 11px;
}
.cursor-value {
  font-family: "Cheltenham", "Hoefler Text", serif;
  font-size: 22px;
  color: var(--scarlet);
}
.cursor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.primary-link {
  background: var(--scarlet);
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.primary-link:hover { background: #8a0000; }
.cursor-edit-btn, .cursor-reset-btn, .cursor-cancel-btn {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  background: white;
  border: 1px solid var(--rule);
  padding: 6px 10px;
  cursor: pointer;
}
.cursor-edit-btn:hover, .cursor-reset-btn:hover, .cursor-cancel-btn:hover {
  background: var(--paper-dark);
}
.cursor-note {
  margin: 8px 0 0;
  color: var(--ink-soft);
}
.cursor-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.cursor-editor[hidden] { display: none; }
.cursor-editor label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--ink-soft);
  gap: 4px;
}
.cursor-editor select {
  font-family: inherit;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  background: white;
}

.decade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--ink);
  margin: 12px 0 18px;
}
.decade-tab {
  font-family: "Cheltenham", "Hoefler Text", serif;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-bottom: none;
  background: var(--paper-soft);
  cursor: pointer;
  color: var(--ink);
  margin-bottom: -2px;
}
.decade-tab.decade-tab-empty {
  opacity: 0.55;
  font-style: italic;
}
.decade-tab.active {
  background: var(--scarlet);
  color: white;
  border-color: var(--scarlet);
  font-weight: 700;
}
.decade-tab:hover:not(.active) {
  background: var(--paper-dark);
}

.decade-tile-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--paper);
}
.decade-tile-disabled .year { color: var(--ink-soft); }

/* Video companion strip + missing-video block */
.video-extras {
  margin: 16px 0;
  border-top: 1px solid var(--rule-soft);
  padding-top: 10px;
}
.video-extras-head {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 6px;
}
.video-extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.video-extra {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}
.video-extra img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule-soft);
}
.video-extra-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}
.video-extra:hover .video-extra-title { color: var(--scarlet); }

.game-not-found {
  background: var(--paper-soft);
  border: 1px dashed var(--rule);
  padding: 18px;
  text-align: center;
}
.game-not-found p { margin: 4px 0; }

/* Playoff tiles + round-gated dashboard */
.playoff-tile {
  border-left: 3px solid var(--gold);
}
.playoff-game-tile {
  border-top: 1px solid var(--rule);
}
.playoff-game-tile.sf-game {
  border-left: 3px solid var(--scarlet);
  background: #fbeaea;
}
.round-gated .round-matchups-grid { display: none; }
.round-gated .round-gated-message {
  background: var(--paper-soft);
  border: 1px dashed var(--rule);
  padding: 24px;
  text-align: center;
}

/* Story-so-far Claude tint reuse */
.story-so-far.claude {
  background: var(--claude-tint);
  border: 1px solid var(--claude-rule);
}

/* Bye-week placeholder tile (matches schedule-tile geometry but is
   non-interactive and visually muted so it reads as "no game this week"). */
.bye-tile {
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
  background: var(--paper-soft);
  border-style: dashed;
}

/* Per-quarter scoring blocks (UI 1.4). Each quarter renders in its own
   spoiler so the rewatch can pace by quarter. The block heading shows the
   quarter label even when the spoiler is curtained, so the reader knows
   what they're about to reveal. */
.quarter-blocks { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.quarter-blocks-hint { margin-top: 6px; }
.quarter-block { border-top: 1px solid var(--rule); padding-top: 8px; }
.quarter-block-heading {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
/* Critical: every quarter-spoiler has the SAME footprint so the user can't
   infer "lots of scoring this quarter" from a tall blur or "nothing this
   quarter" from a short one. Height is fixed; revealed content scrolls
   internally if it overflows. */
.quarter-spoiler {
  height: 180px;
  overflow: auto;
  position: relative;
}
.quarter-spoiler:not(.revealed) { overflow: hidden; }
.quarter-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 24px 8px;
}
/* OT plays are folded into the Q4 block (so OT-existence isn't a spoiler
   before Q4 reveals). The divider row labels them clearly. */
tr.ot-divider td {
  background: #fff5e6;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--scarlet);
  border-top: 1px solid var(--rule);
  padding: 4px 6px;
}

/* Season-level videos section (HANDOFF_SPEC §3). Always collapsed by
   default; renders as a grid of YouTube-thumb tiles when expanded. */
.season-videos { margin-top: 22px; }
.season-videos-details {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-soft);
}
.season-videos-details summary {
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.season-videos-details summary::-webkit-details-marker { display: none; }
.season-videos-details summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  transition: transform 0.15s;
}
.season-videos-details[open] summary::before { transform: rotate(90deg); }
.season-videos-details summary:hover { background: #fff5e6; }
.season-videos-grid {
  padding: 8px 14px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.season-video-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  background: white;
  border-radius: 3px;
  overflow: hidden;
}
.season-video-tile img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.season-video-meta { padding: 6px 8px; }
.season-video-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.season-video-title { font-size: 13px; margin: 2px 0; }
.season-video-channel { color: var(--ink-soft); }

/* Season margin chip strip, lives inside the spoiler-gated recap section.
   Replaces the prose "margins season-to-date now: plus-3, plus-3, ..." list
   that previously appeared in every recap_trend body. Color-coded green for
   wins, red for losses, gray for not-yet-played. */
.margin-strip-wrap {
  margin: 8px 0 18px;
  padding: 10px 12px 12px;
  background: var(--paper-deep, #faf7f1);
  border: 1px solid var(--rule, #d9d3c5);
  border-radius: 4px;
}
.margin-strip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.margin-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.margin-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.margin-chip .wk {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.55);
}
.margin-chip .mg {
  font-weight: 600;
  font-size: 12px;
}
.margin-chip.win {
  background: #d9efd6;
  border-color: #a9d4a3;
  color: #1f4a1c;
}
.margin-chip.loss {
  background: #f1d6d6;
  border-color: #d6a3a3;
  color: #5a1d1d;
}
.margin-chip.tie {
  background: #e6e0d2;
  border-color: #bfb8a4;
  color: #444;
}
.margin-chip.empty {
  background: transparent;
  border-color: var(--rule, #d9d3c5);
  color: var(--ink-soft);
  opacity: 0.55;
}