@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/big-shoulders-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Text";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/big-shoulders-text-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* brand -- constant in both modes */
  --navy: #0b1f3a;
  --gold: #f4c94c;

  /* content-area tokens (paper in light mode, a navy canvas in dark) */
  --bg: #ffffff;
  --surface: #eef3fb;
  --ink: #0b1f3a;
  --muted: #51607a;
  --border: #c7ccd1;
  --link: #0b1f3a;
  --link-visited: #7a4a00;
  --focus: #0b1f3a;
  /* subscribe-button outline: the button's own navy on paper; in dark mode
     the on-navy dim blue, so four navy buttons on the navy-tinted box stay
     distinct (#8fa8cf on #101c30: 7.04:1) */
  --cta-border: #0b1f3a;

  /* chrome tokens -- header, footer, hero, subscribe box: always navy */
  --on-navy-fg: #ffffff;
  --on-navy-muted: #c9d6ea;
  --on-navy-dim: #8fa8cf;
  --on-navy-link: #8fc0ff;
  --on-navy-link-visited: #e8c37a;
  --on-navy-focus: #f4c94c;

  --display-font: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --label-font: "Big Shoulders Text", "Arial Narrow", sans-serif;
  --body-font: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1420;
    --surface: #101c30;
    --ink: #eef2f8;
    --muted: #aab6c9;
    --border: #24344f;
    --link: #8fc0ff;
    --link-visited: #e8c37a;
    --focus: #f4c94c;
    --cta-border: #8fa8cf;
  }
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

main { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem 3rem; }
/* Header/footer bands paint full-bleed (they're the brand chrome), but
   their content aligns to the same 64rem column as main -- so the
   wordmark and "Sources and terms" text line up with the H1 below them
   instead of floating flush against the true viewport edge on a wide
   screen. */
.site-footer > * { max-width: 64rem; margin-left: auto; margin-right: auto; }

h1, h2 {
  font-family: var(--display-font);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
h1 { font-size: clamp(2rem, 5vw + 1rem, 3rem); margin-top: 1.5rem; }
h2 {
  font-size: clamp(1.15rem, 2vw + 0.8rem, 1.5rem);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
main > h1:first-child, main > h2:first-of-type { border-top: 0; }

p { max-width: var(--measure); }
.lede { font-size: 1.0625rem; color: var(--muted); }

a { color: var(--link); text-underline-offset: 0.15em; }
a:visited { color: var(--link-visited); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  a, .league-row-link, .next-game-cta, .subscribe-cta { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--navy); font-weight: 700;
  padding: 0.6rem 1rem; z-index: 10; text-decoration: none;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; border-radius: 0.25rem; }

/* ---- chrome: header + footer, always navy, the brand's own colors ---- */
.site-header {
  background: var(--navy);
  padding: 0.9rem 1.25rem;
}
.brand {
  display: flex; align-items: center; gap: 0.5rem;
  max-width: 64rem; margin: 0 auto; box-sizing: border-box;
  color: var(--on-navy-fg); text-decoration: none;
  font-family: var(--label-font); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.brand:visited { color: var(--on-navy-fg); }
.brand-mark { display: block; border-radius: 6px; }
.site-header a:focus-visible { outline-color: var(--on-navy-focus); }

.site-footer { background: var(--navy); color: var(--on-navy-muted); margin-top: 3rem; }
.site-footer > * { padding: 1.5rem 1.25rem 2rem; }
.site-footer h2 {
  color: var(--on-navy-fg); border-top: 0; margin-top: 0; padding-top: 0;
  font-size: 1.05rem;
}
.site-footer p { max-width: 42rem; font-size: 0.9375rem; }
.site-footer a { color: var(--on-navy-link); }
.site-footer a:visited { color: var(--on-navy-link-visited); }
.site-footer a:focus-visible { outline-color: var(--on-navy-focus); }
.site-footer .privacy-note { color: var(--on-navy-dim); }
.analytics-toggle {
  background: none; border: 0; padding: 0.125rem 0; min-height: 1.5rem;
  color: var(--on-navy-link); font: inherit; text-decoration: underline;
  text-underline-offset: 0.15em; cursor: pointer;
}
.site-footer button:focus-visible { outline-color: var(--on-navy-focus); }

/* ---- breadcrumb + source note ---- */
nav[aria-label="breadcrumb"] {
  font-family: var(--label-font); font-weight: 600; letter-spacing: 0.01em;
  font-size: 0.9rem; margin-top: 1.5rem;
}
.schedule-source-note { color: var(--muted); font-size: 0.9375rem; }

/* ---- index: league scoreboard strip ---- */
.league-strip { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--border); }
.league-row { border-bottom: 1px solid var(--border); }
.league-row-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 0.25rem; text-decoration: none; color: var(--ink);
}
.league-row-link:visited { color: var(--ink); }
.league-row-link:hover { background: var(--surface); }
.league-row-name { font-family: var(--display-font); font-weight: 700; font-size: 1.375rem; }
.league-row-count { font-family: var(--body-font); font-size: 0.9375rem; color: var(--muted); white-space: nowrap; }
.league-row--live .league-row-count {
  /* navy-on-gold, same pairing (and the same 10.47:1 ratio) as everywhere
     else gold appears -- both colors are brand constants, unchanged
     between light and dark mode, so this needs no dark-mode override. */
  color: var(--navy); font-weight: 600;
  background: var(--gold); padding: 0.2rem 0.55rem; border-radius: 999px;
}

.not-included-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.75rem; padding: 1.25rem 1.25rem 1.5rem; margin: 1.5rem 0;
}
.not-included-panel h2 { font-size: 1.05rem; border-top: 0; padding-top: 0; margin-top: 0; }
.not-included-panel p { font-size: 0.9375rem; color: var(--muted); }
.not-included-panel ul { padding-left: 1.1rem; font-size: 0.9375rem; }
.not-included-panel li { margin-bottom: 0.6rem; }

/* ---- team roster (league page) ---- */
.team-roster {
  list-style: none; margin: 0; padding: 0;
  columns: 1; column-gap: 1.5rem;
  border-top: 1px solid var(--border);
}
.team-roster li { border-bottom: 1px solid var(--border); break-inside: avoid; }
.team-roster a {
  display: block; padding: 0.65rem 0.25rem; text-decoration: none;
  font-family: var(--label-font); font-weight: 600; font-size: 1.05rem;
  color: var(--ink);
}
.team-roster a:visited { color: var(--ink); }
.team-roster a:hover { color: var(--link); text-decoration: underline; }
@media (min-width: 30rem) { .team-roster { columns: 2; } }

/* ---- team page: this week, and the other teams in the league; home page team lists ---- */
.this-week ul { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.this-week li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.more-teams, .all-teams { margin-top: 2rem; }
.all-teams h3 { margin: 1.5rem 0 0.5rem; }

/* ---- subscribe box: the .ics mechanic, styled as the actual product ---- */
.subscribe {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.85rem; padding: 1.5rem 1.25rem 1.25rem; margin: 1.5rem 0;
}
.subscribe::before, .subscribe::after {
  content: ""; position: absolute; top: -8px; width: 22px; height: 16px;
  background: var(--navy); border-radius: 4px;
}
.subscribe::before { left: 1.75rem; }
.subscribe::after { right: 1.75rem; }
.subscribe h2 { font-size: 1.15rem; border-top: 0; padding-top: 0; margin-top: 0; }
/* The feed URL is one long unbroken token (".../ics/<league>/<team>.ics");
   without a break opportunity it pushed team pages to 350-430 CSS px wide at
   a 320 px viewport, failing WCAG 1.4.10 Reflow. */
.subscribe p a, .other-apps p a { overflow-wrap: anywhere; }
.subscribe-instructions { padding-left: 1.1rem; font-size: 0.9375rem; }
.subscribe-instructions li { margin-bottom: 0.5rem; }
.subscribe-cta {
  display: inline-block; background: var(--navy); color: var(--on-navy-fg);
  font-family: var(--label-font); font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 0.5rem;
  margin-bottom: 0.15rem;
}
.subscribe-cta:visited { color: var(--on-navy-fg); }
.subscribe-cta:hover { background: #132a4d; }
.subscribe-buttons {
  list-style: none; margin: 0.75rem 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.subscribe-buttons .subscribe-cta { margin-bottom: 0; border: 1px solid var(--cta-border); }
.subscribe-feed { font-size: 0.9375rem; }

/* ---- team page hero: the actual next home game ---- */
.next-game {
  background: var(--navy); color: var(--on-navy-fg);
  border-radius: 0.85rem; padding: 1.5rem 1.25rem;
  margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 1.25rem;
}
.next-game-date {
  flex: 0 0 auto; width: 6rem; height: 6rem;
  background: var(--gold); color: var(--navy); border-radius: 0.6rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--display-font);
}
.next-game-date--tbd { background: var(--on-navy-dim); }
.next-game-month { font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; }
.next-game-day { font-size: 2.75rem; font-weight: 800; line-height: 1; }
.next-game-details { flex: 1 1 14rem; min-width: 0; }
.next-game-matchup {
  font-family: var(--display-font); font-weight: 800; font-size: clamp(1.4rem, 3vw + 1rem, 1.9rem);
  line-height: 1.05; margin: 0 0 0.3rem; max-width: none;
}
.next-game-when, .next-game-venue { margin: 0 0 0.2rem; color: var(--on-navy-muted); font-size: 0.9375rem; max-width: none; }
.next-game-cta {
  display: inline-block; background: var(--gold); color: var(--navy);
  font-family: var(--label-font); font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; padding: 0.65rem 1.15rem; border-radius: 0.5rem;
  margin-top: 0.75rem;
}
.next-game-cta:visited { color: var(--navy); }
.next-game-cta:hover { background: #ffd876; }
.next-game-cta--unavailable {
  background: none; color: var(--on-navy-dim); font-style: italic; padding: 0; font-size: 0.9375rem;
}
.next-game h2.next-game-label {
  flex: 1 0 100%; margin: 0; padding: 0; border-top: 0;
  font-family: var(--label-font); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-navy-muted);
}
.next-game--empty .next-game-label { margin-bottom: 0.5rem; }
.next-game-note { flex: 1 0 100%; margin: 0; color: var(--on-navy-muted); font-size: 0.9375rem; max-width: none; }
.next-game .game-status { color: var(--on-navy-fg); }
.next-game--empty { display: block; }
.next-game-empty-msg { color: var(--on-navy-muted); max-width: 36rem; margin: 0; }
.next-game a:focus-visible { outline-color: var(--on-navy-focus); }

/* ---- games table ---- */
.no-games-message { color: var(--muted); }
.games-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 1rem 0; border: 1px solid var(--border); border-radius: 0.6rem;
}
table.games-table { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: 0.9375rem; }
table.games-table th, table.games-table td {
  padding: 0.6rem 0.85rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
table.games-table thead th {
  background: var(--navy); color: var(--on-navy-fg);
  font-family: var(--label-font); font-weight: 700; letter-spacing: 0.01em;
  border-bottom: 0;
}
table.games-table tbody tr:nth-child(even) { background: var(--surface); }
table.games-table tbody tr:last-child td { border-bottom: 0; }
.game-date { font-family: var(--label-font); font-weight: 700; font-variant-numeric: tabular-nums; }
.ticket-unavailable { color: var(--muted); font-style: italic; }
.game-status { font-weight: 700; }
.home-away {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem;
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--label-font); font-weight: 700; font-size: 0.8125rem;
  color: var(--muted); white-space: nowrap;
}
.home-away--home { color: var(--ink); border-color: var(--ink); }

.sr-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }