/* =============================================================================
   FHS BLACK KATS — STYLESHEET
   One file, shared by every page. Organised top to bottom as:
     1. Reset & tokens
     2. Base typography
     3. Layout primitives (container, section, grid)
     4. Skip link & focus
     5. Status strip
     6. Header & nav
     7. Claw divider
     8. Scoreboard hero (home page only)
     9. Score blocks (win/loss)
     10. Game rows (schedule)
     11. Tables (standings, roster desktop)
     12. Roster cards (mobile)
     13. Buttons & forms
     14. Footer
     15. Utility classes
     16. Responsive
     17. Reduced motion
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. RESET & TOKENS
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

:root {
  /* Palette — exactly these five colours, nothing else */
  --ink: #000000;
  --gold: #FFC000;
  --chalk: #FFFFFF;
  --dust: #A3A3A3;
  --soot: #141414;
  --surface: #141414; /* kept as an alias — some older rules still reference it */

  /* Hairlines */
  --line-chalk: rgba(255, 255, 255, 0.14);
  --line-gold: var(--gold);

  /* Type */
  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Barlow", sans-serif;

  --type-16: 1rem;
  --type-21: 1.313rem;
  --type-28: 1.75rem;
  --type-37: 2.313rem;
  --type-50: 3.125rem;
  --type-67: 4.188rem;
  --type-89: 5.563rem;
  --type-score: clamp(5rem, 18vw, 14rem);

  /* Spacing (multiples of 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --radius-btn: 2px;
  --content-max: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
}

html {
  background: var(--ink);
  color-scheme: dark;
}

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: var(--type-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   -------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--type-67); }
h2 { font-size: var(--type-50); }
h3 { font-size: var(--type-37); }
h4 { font-size: var(--type-28); font-weight: 700; }

p, li, dd { max-width: 68ch; }
p + p { margin-top: var(--sp-4); }

.dust { color: var(--dust); }

.tabular { font-variant-numeric: tabular-nums; }

a.text-link {
  text-decoration: underline;
  text-decoration-color: var(--line-chalk);
  text-underline-offset: 3px;
}
a.text-link:hover { text-decoration-color: var(--gold); }

/* -----------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------- */
main { display: block; }

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--line-chalk);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------
   4. SKIP LINK & FOCUS
   -------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  background: var(--gold);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s;
}
.skip-link:focus { top: var(--sp-4); }

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

/* -----------------------------------------------------------------------
   5. (status strip removed — the header itself is the fixed element now)
   -------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   6. HEADER & NAV
   -------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--gold);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-4);
  gap: var(--sp-4);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-21);
  line-height: 1;
}
.wordmark img { height: 44px; width: auto; }
.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--dust);
  letter-spacing: 0.02em;
}

.main-nav__list {
  display: flex;
  gap: var(--sp-4);
  white-space: nowrap;
}

.main-nav__list a {
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
  font-weight: 600;
}
.main-nav__list a:hover { border-color: var(--line-chalk); }
.main-nav__list a[aria-current="page"] { border-color: var(--gold); color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--chalk);
  border-radius: var(--radius-btn);
  padding: var(--sp-2) var(--sp-3);
}

/* -----------------------------------------------------------------------
   7. CLAW DIVIDER — used once between major sections, nowhere else
   -------------------------------------------------------------------- */
.claw-divider {
  display: flex;
  justify-content: center;
  padding-block: var(--sp-6);
}
.claw-divider svg { width: 64px; height: 40px; }

/* -----------------------------------------------------------------------
   8. SCOREBOARD HERO
   -------------------------------------------------------------------- */
.scoreboard-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--gold);
}

.yard-spine {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.scoreboard-hero .container {
  position: relative;
  z-index: 1;
}

.scoreboard-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-50);
  line-height: 0.9;
  margin-bottom: var(--sp-4);
}
.scoreboard-hero__kicker .mark-heading { width: 40px; height: 25px; flex-shrink: 0; }

.scoreboard-hero__opponent {
  font-size: clamp(2.25rem, 6vw, 4rem);
  margin-bottom: var(--sp-2);
}

.scoreboard-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  color: var(--dust);
  font-weight: 500;
  margin-bottom: var(--sp-8);
}
.scoreboard-hero__meta a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }

.countdown {
  display: flex;
  gap: var(--sp-4);
  border-top: 1px solid var(--line-chalk);
  border-bottom: 1px solid var(--line-chalk);
  padding-block: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.countdown__segment {
  flex: 1;
  text-align: center;
}
.countdown__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-score);
  color: var(--gold);
  line-height: 0.85;
}
.countdown__unit {
  color: var(--dust);
  font-weight: 600;
  font-size: 0.85rem;
}

.scoreboard-hero__record {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-28);
  margin-bottom: var(--sp-8);
}
.scoreboard-hero__record span { color: var(--gold); }

.scoreboard-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* -----------------------------------------------------------------------
   9. SCORE BLOCKS — win/loss, same shape, inverted fill
   -------------------------------------------------------------------- */
.score-block {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-50);
  padding: var(--sp-3) var(--sp-6);
  line-height: 1;
}
.score-block--win {
  background: var(--gold);
  color: var(--ink);
}
.score-block--loss {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.score-block__sep { font-size: 0.6em; opacity: 0.6; }

/* -----------------------------------------------------------------------
   10. GAME ROWS (schedule list)
   -------------------------------------------------------------------- */
.game-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line-chalk);
}
.game-row:first-child { border-top: 1px solid var(--line-chalk); }

.game-row--bye { color: var(--dust); font-style: normal; }

.game-row__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
}

/* Schedule rows stack top to bottom, so the date + home/away line sits at
   the left instead of being spread across the row. */
.game-row__top--start { justify-content: flex-start; }
.game-row > .score-block { justify-self: start; }

.game-row__date {
  font-weight: 600;
  color: var(--dust);
  min-width: 9ch;
}

.game-row__opponent {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-28);
}
.game-row__opponent img { height: 32px; width: 32px; object-fit: contain; }

.game-row__tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dust);
  border: 1px solid var(--line-chalk);
  padding: 2px 8px;
  border-radius: var(--radius-btn);
}

.game-row__venue { color: var(--dust); }

.game-row__result .score-block { font-size: var(--type-28); padding: var(--sp-2) var(--sp-4); }

.game-row__links {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-1);
}

/* -----------------------------------------------------------------------
   11. TABLES (standings, roster desktop)
   -------------------------------------------------------------------- */
.data-table {
  font-variant-numeric: tabular-nums;
}
.data-table caption { text-align: left; color: var(--dust); margin-bottom: var(--sp-3); }
.data-table th, .data-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-chalk);
}
.data-table th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--dust);
  font-size: 0.85rem;
  text-transform: none;
}
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tbody tr.is-us { border-bottom: 1px solid var(--gold); }
.data-table tbody tr.is-us td:first-child { color: var(--gold); font-weight: 700; }
/* Standings: a thick gold line under the 4th team separates the top four
   from the rest. */
.data-table tbody tr.is-cutoff td { border-bottom: 4px solid var(--gold); }
/* Standings: small screens keep Team, W, L, PF, PA only. */
@media (max-width: 699px) {
  .data-table .col-extra { display: none; }
}

/* -----------------------------------------------------------------------
   12. ROSTER CARDS (mobile, <700px)
   -------------------------------------------------------------------- */
.roster-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-chalk);
}
.roster-card__number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-37);
  color: var(--ink);
  -webkit-text-stroke: 1.5px var(--gold);
  min-width: 2.5ch;
  text-align: center;
}
.roster-card__name { font-weight: 600; }
.roster-card__position { color: var(--dust); font-size: 0.9rem; }

/* -----------------------------------------------------------------------
   13. BUTTONS & FORMS
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-weight: 600;
  border-radius: var(--radius-btn);
  border: 1px solid var(--chalk);
  background: transparent;
  color: var(--chalk);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--chalk); color: var(--ink); }

.btn--primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn--primary:hover { background: transparent; color: var(--gold); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.filter-bar button {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-chalk);
  background: transparent;
  color: var(--dust);
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-weight: 600;
}
.filter-bar button:hover { border-color: var(--chalk); color: var(--chalk); }
.filter-bar button[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.field label { font-weight: 600; }
.field input, .field textarea, .field select {
  background: var(--surface);
  border: 1px solid var(--line-chalk);
  border-radius: var(--radius-btn);
  padding: var(--sp-3);
  color: var(--chalk);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold);
}
.field-hint { color: var(--dust); font-size: 0.85rem; }

/* -----------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-chalk);
  padding-block: var(--sp-12);
}
.site-footer .grid { margin-bottom: var(--sp-8); }
.site-footer h4 { font-size: var(--type-21); margin-bottom: var(--sp-3); }
.site-footer ul li { margin-bottom: var(--sp-2); }
.site-footer .record { color: var(--gold); font-weight: 700; }

.sponsor-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) var(--gutter);
  background: var(--gold);
}
.sponsor-strip img { height: 28px; width: auto; filter: grayscale(1); opacity: 0.8; }
.sponsor-strip img:hover { filter: none; opacity: 1; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-chalk);
  color: var(--dust);
  font-size: 0.85rem;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom p + p { margin-top: var(--sp-1); }

/* Countdown settle-in: the one deliberate motion moment on the site */
.countdown.is-settling .countdown__value {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s steps(4), transform 0.4s steps(4);
}
.countdown.is-settled .countdown__value {
  opacity: 1;
  transform: translateY(0);
}

/* Sponsor groups (home page + support page) */
.sponsor-tier { margin-bottom: var(--sp-8); }
.sponsor-tier h4 { color: var(--dust); font-size: var(--type-21); font-weight: 700; margin-bottom: var(--sp-4); }
.sponsor-tier__list { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; }
.sponsor-tier--gold img { height: 56px; }
.sponsor-tier--silver img { height: 42px; }
.sponsor-tier--bronze img,
.sponsor-tier--game-day-fuel img,
.sponsor-tier--game-day-staging img,
.sponsor-tier--official-media img { height: 34px; }

.venue-list li,
.coach-list li { padding-block: var(--sp-4); border-bottom: 1px solid var(--line-chalk); }
.venue-list li:last-child,
.coach-list li:last-child { border-bottom: none; }

/* Friday-night-at-the-stadium info block, and the three equal-weight CTAs */
.info-list { display: grid; gap: var(--sp-3); }
.info-list li { display: flex; gap: var(--sp-3); border-bottom: 1px solid var(--line-chalk); padding-bottom: var(--sp-3); }
.info-list li:last-child { border-bottom: none; }
.info-list dt { font-weight: 600; min-width: 11ch; color: var(--dust); }

.action-row {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 700px) { .action-row { grid-template-columns: repeat(3, 1fr); } }
.action-row a {
  display: block;
  padding: var(--sp-6);
  border: 1px solid var(--line-chalk);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-28);
}
.action-row a:hover { background: var(--ink); border-color: var(--gold); color: var(--gold); }

/* -----------------------------------------------------------------------
   15. UTILITY CLASSES
   -------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mt-8 { margin-top: var(--sp-8); }
.text-center { text-align: center; }

/* -----------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------- */
/* The nav switches to the drawer well before the roster table does — nine
   items plus the wordmark need more room than 700px to sit on one line
   without wrapping awkwardly, even though the roster table itself fits
   fine down to 700px. */
@media (max-width: 1099px) {
  .main-nav { display: none; }
  .main-nav.is-open {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--chrome-h, 96px);
    background: var(--ink);
    z-index: 200;
    padding: var(--sp-8) var(--gutter);
  }
  .main-nav.is-open .main-nav__list { flex-direction: column; gap: var(--sp-6); }
  .nav-toggle { display: block; }
}

@media (max-width: 699px) {
  table.data-table.roster-table { display: none; }

  /* Footer sponsor strip is desktop-only — kept off small phones to
     keep the footer short there. */
  .sponsor-strip-wrap { display: none; }
}

@media (min-width: 700px) {
  .roster-cards { display: none; }
}

/* -----------------------------------------------------------------------
   17. REDUCED MOTION
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =============================================================================
   REDESIGN — alternating grounds, helmet stripe, football mark, photography,
   sponsor grid. Added in the 2026 visual refresh; everything above this line
   is untouched from the previous build (including the roster page's own
   rules in sections 11–12, which stay exactly as they were).
   ========================================================================== */

/* -----------------------------------------------------------------------
   GROUND SYSTEM — .ground-ink is the default (body background already is
   black); .ground-gold flips a full-bleed section to the yellow ground and
   re-tints every shared component (buttons, links, tables, score blocks,
   filters, focus ring) that lives inside it. Nothing outside a .ground-gold
   ancestor is affected — the override is entirely scoped by descendant
   selectors, so existing black-ground pages/sections need no changes.
   -------------------------------------------------------------------- */
.ground-gold {
  background: var(--gold);
  color: var(--ink);
  --line-chalk: rgba(0, 0, 0, 0.18);
  --dust: #3a3a3a;
  border-bottom-color: rgba(0, 0, 0, 0.18);
}
.ground-gold a.text-link { text-decoration-color: rgba(0, 0, 0, 0.35); }
.ground-gold a.text-link:hover { text-decoration-color: var(--ink); }

.ground-gold .btn { border-color: var(--ink); color: var(--ink); }
.ground-gold .btn:hover { background: var(--ink); color: var(--gold); }
.ground-gold .btn--primary { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.ground-gold .btn--primary:hover { background: transparent; color: var(--ink); }

.ground-gold .score-block--win { background: var(--ink); color: var(--gold); }
.ground-gold .score-block--loss { color: var(--ink); border-color: var(--ink); }

.ground-gold .data-table th, .ground-gold .data-table td { border-bottom-color: rgba(0, 0, 0, 0.18); }
.ground-gold .data-table tbody tr.is-us { border-bottom-color: var(--ink); }
.ground-gold .data-table tbody tr.is-us td:first-child { color: var(--ink); }

.ground-gold .filter-bar button { border-color: rgba(0, 0, 0, 0.3); color: #3a3a3a; }
.ground-gold .filter-bar button:hover { border-color: var(--ink); color: var(--ink); }
.ground-gold .filter-bar button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }

.ground-gold .field input, .ground-gold .field textarea, .ground-gold .field select {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.3);
  color: var(--ink);
}
.ground-gold .field input:focus, .ground-gold .field textarea:focus, .ground-gold .field select:focus {
  border-color: var(--ink);
}

.ground-gold .game-row__tag { border-color: rgba(0, 0, 0, 0.3); color: #3a3a3a; }
.ground-gold .action-row a { border-color: rgba(0, 0, 0, 0.3); }
.ground-gold .action-row a:hover { background: var(--ink); border-color: var(--ink); color: var(--gold); }

.ground-gold :focus-visible { outline-color: var(--ink); }

/* -----------------------------------------------------------------------
   HELMET STRIPE — the divider between grounds. A yellow band with a black
   line through its centre, referencing the stripe down a football helmet.
   -------------------------------------------------------------------- */
.helmet-stripe {
  height: 14px;
  background: var(--gold);
  position: relative;
}
.helmet-stripe::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--ink);
}

/* -----------------------------------------------------------------------
   FOOTBALL MARK — replaces the old three-slash claw motif everywhere.
   Used in exactly three contexts: a small mark before a section heading,
   the bullet on the game day / volunteer lists, and one large low-opacity
   watermark per page. Nowhere else. Drawn as a flat ellipse with a seam
   and laces "knocked out" in the ground colour — see BK.footballSVG().
   -------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.section-head__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.mark-heading {
  display: inline-block;
  width: 28px;
  height: 17px;
}
.section-head__title .mark-heading {
  flex-shrink: 0;
  transform: translateY(-0.1em);
}
.section-head__title h1, .section-head__title h2 { margin: 0; }

.mark-watermark {
  position: absolute;
  width: 46vw;
  max-width: 640px;
  aspect-ratio: 100 / 60;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.mark-watermark svg { width: 100%; height: 100%; }
[data-mark-watermark-host] { position: relative; overflow: hidden; }
[data-mark-watermark-host] > .container { position: relative; z-index: 1; }

/* The .marked-list bullet is used on the game day info list and the
   volunteer roles list, both of which sit on a dark (soot) ground, so the
   glyph is drawn gold-on-dark: a solid gold football body with the seam
   and laces "knocked out" in ink, matching the football mark everywhere
   else it appears on a black or near-black ground. */
.marked-list li { position: relative; padding-left: 28px; }
.marked-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4em;
  width: 18px; height: 11px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cellipse cx='50' cy='30' rx='46' ry='24' fill='%23FFC000'/%3E%3Cline x1='12' y1='30' x2='88' y2='30' stroke='%23000000' stroke-width='4'/%3E%3Cline x1='32' y1='21' x2='32' y2='39' stroke='%23000000' stroke-width='4'/%3E%3Cline x1='44' y1='21' x2='44' y2='39' stroke='%23000000' stroke-width='4'/%3E%3Cline x1='56' y1='21' x2='56' y2='39' stroke='%23000000' stroke-width='4'/%3E%3Cline x1='68' y1='21' x2='68' y2='39' stroke='%23000000' stroke-width='4'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------
   PHOTOGRAPHY — hero banner, full-width band, and page-specific photos
   -------------------------------------------------------------------- */
.hero-banner {
  position: relative;
  width: 100%;
  height: clamp(340px, 62vh, 640px);
  overflow: hidden;
}
.hero-banner img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  margin: 0 auto;
}
.hero-banner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.05) 78%);
}
.hero-banner__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
  overflow-wrap: break-word;
}
.hero-banner__content h1 {
  font-size: clamp(2rem, 6vw, var(--type-67));
  margin-bottom: var(--sp-1);
}
.hero-banner__content p {
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: var(--type-21);
}

.photo-band {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

/* Last-result layout: content and a square photo, side by side on a wide
   screen; the photo drops below the content on a narrow one (DOM order
   already puts content first, so no extra reordering is needed). */
.last-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 700px) {
  .last-result-grid { grid-template-columns: 1fr minmax(220px, 340px); }
}
.last-result-grid__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.photo-inline {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  margin-bottom: var(--sp-8);
}

/* -----------------------------------------------------------------------
   SPONSOR GRID — uniform white cards on the dark ground, normalising
   whatever shape and aspect ratio a sponsor's own logo happens to be.
   -------------------------------------------------------------------- */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 560px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .sponsor-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .sponsor-grid--gold { grid-template-columns: repeat(4, 1fr); } }

/* The logo is absolutely positioned inside the 4:3 card rather than capped
   with max-height: Safari/WebKit (every browser on iPhone and iPad, and
   Safari on Mac) ignores a percentage max-height when the card's height
   comes only from aspect-ratio, so tall portrait logos (Dairy Farmers,
   A to Z) grew past the card and overlapped the next tier there. An
   absolutely positioned image can't stretch the card, and its percentages
   always resolve against the card's real size, in every browser. */
.sponsor-card {
  position: relative;
  display: block;
  background: var(--chalk);
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sponsor-card img {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 80%;
  height: 70%;
  max-width: none;
  object-fit: contain;
}
/* Browsers too old for aspect-ratio (iOS 14 and earlier): hold the 4:3
   shape with a padding spacer instead. */
@supports not (aspect-ratio: 4 / 3) {
  .sponsor-card::before { content: ""; display: block; padding-top: 75%; }
}
.sponsor-card--unlinked { opacity: 1.00; } 

.sponsor-tier-group { margin-bottom: var(--sp-12); }
.sponsor-tier-group:last-child { margin-bottom: 0; }

/* Donor thank-you card — text only, under the sponsor grid. */
.donor-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  max-width: 760px;
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  background: var(--soot);
  border: 1px solid var(--gold);
  border-left-width: 6px;
}
.donor-card__icon { width: 44px; height: 44px; flex-shrink: 0; }
.donor-card__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-21);
  color: var(--gold);
  text-transform: uppercase;
}
.donor-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-37);
  line-height: 1;
  margin-top: var(--sp-1);
}
.donor-card__name a { text-decoration: underline; text-underline-offset: 4px; }
.donor-card__message { margin-top: var(--sp-3); }
@media (max-width: 559px) {
  .donor-card { gap: var(--sp-4); padding: var(--sp-4); }
  .donor-card__icon { width: 32px; height: 32px; }
  .donor-card__name { font-size: var(--type-28); }
}
.sponsor-tier-group__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-28);
  margin-bottom: var(--sp-4);
}

/* -----------------------------------------------------------------------
   COUNTDOWN — resized down from the original build; it dominated the hero
   -------------------------------------------------------------------- */
.countdown__value {
  font-size: clamp(2.25rem, 6vw, 4rem);
}

/* -----------------------------------------------------------------------
   TEAM.E.A.M. lockup (support.html)
   -------------------------------------------------------------------- */
.team-lockup {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, var(--type-50));
  line-height: 1.05;
  margin-bottom: var(--sp-3);
}
.team-lockup span { color: var(--gold); }
.ground-gold .team-lockup span { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.team-lockup-expand {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-6);
  font-weight: 600;
}
@media (min-width: 700px) { .team-lockup-expand { grid-template-columns: repeat(4, 1fr); } }

/* -----------------------------------------------------------------------
   GROUND-SOOT — a section that stays on the dark palette but is lifted
   very slightly off pure black (#141414 instead of #000000). Unlike
   .ground-gold this doesn't re-tint anything: default chalk/gold text
   already reads correctly on this near-black, so no overrides needed.
   -------------------------------------------------------------------- */
.ground-soot { background: var(--soot); }

/* -----------------------------------------------------------------------
   Home page "last result" score block — always the gold-tag treatment
   (gold fill, ink border, ink text) regardless of win or loss, since this
   section sits on a dark ground and the placard is the one deliberate
   spot of colour in it. Scoped to this block only — the per-game score
   chips on the schedule page keep the original win/loss-distinct styling.
   -------------------------------------------------------------------- */
[data-last-result] .score-block,
[data-last-result] .score-block--win,
[data-last-result] .score-block--loss {
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--ink);
}

/* Volunteer role tags ("Every game" / "Home games only") — always a solid
   gold tag, regardless of the section's ground. */
.game-row__tag--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* -----------------------------------------------------------------------
   .btn--invert — an ink-filled, gold-text button that stays legible on
   any ground (unlike relying on .ground-gold's contextual button flip).
   Used for the social page's channel buttons and the contact form's
   submit button, both of which keep this look even on a dark section.
   -------------------------------------------------------------------- */
.btn--invert {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
.btn--invert:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

/* Contact form — keeps the translucent light field look and the inverted
   submit button regardless of the section's ground (see contact.html). */
[data-contact-form] input,
[data-contact-form] textarea,
[data-contact-form] select {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.3);
  color: var(--ink);
}
[data-contact-form] input:focus,
[data-contact-form] textarea:focus,
[data-contact-form] select:focus {
  border-color: var(--ink);
}
[data-contact-form] .btn--primary {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
[data-contact-form] .btn--primary:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

/* -----------------------------------------------------------------------
   AWARDS PAGE (awards.html) — season cards, trophy history, name search.
   Uses only the existing palette; sits on the black and soot grounds.
   -------------------------------------------------------------------- */
.awards-intro { align-items: center; }
@media (min-width: 700px) {
  .awards-intro { grid-template-columns: 1fr minmax(260px, 440px); }
}
.awards-intro__photo img { width: 100%; height: auto; border: 1px solid var(--line-chalk); }

.awards-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-8);
}
.awards-stats > div { display: flex; flex-direction: column-reverse; }
.awards-stats dt { color: var(--dust); font-weight: 600; font-size: 0.85rem; }
.awards-stats dd {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-37);
  line-height: 1;
  color: var(--gold);
}
.awards-stats--small { margin-top: var(--sp-6); }
.awards-stats--small dd { font-size: var(--type-28); }

.awards-modes { margin-bottom: var(--sp-8); }
.awards-modes button { font-size: 1.05rem; padding: var(--sp-3) var(--sp-6); }

.season-bar {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.season-bar .btn { padding-inline: var(--sp-4); }
.season-bar .btn:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--chalk); }
.season-select { margin: 0; }
.season-select select {
  height: 100%;
  min-width: 8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-21);
  background: var(--ink);
}

.awards-season-head { margin-bottom: var(--sp-4); }
.awards-season-note { color: var(--dust); margin-bottom: var(--sp-8); }
.awards-subhead { font-size: var(--type-28); margin: var(--sp-12) 0 var(--sp-4); }

.award-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.award-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--ink);
  border: 1px solid var(--line-chalk);
  border-top: 3px solid var(--gold);
  max-width: none;
}
.award-card__title { font-size: var(--type-21); font-weight: 700; line-height: 1.1; }
.award-card__trophy { color: var(--dust); font-size: 0.85rem; }
.award-card__winners { margin-top: var(--sp-2); }
.award-card__winners li { max-width: none; }
.award-card__winners .award-winner {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-28);
  line-height: 1.1;
}
.award-card__note { display: block; color: var(--dust); font-size: 0.85rem; margin-top: var(--sp-1); }
.award-card__link { margin-top: auto; padding-top: var(--sp-3); font-size: 0.85rem; color: var(--dust); align-self: flex-start; }
.award-card__link:hover { color: var(--chalk); }

.award-winner__note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dust);
  white-space: nowrap;
}
.award-captain {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 3px 5px;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius-btn);
  transform: translateY(-0.15em);
}
.award-sep { color: var(--dust); }

.awards-trophy-picker { margin-bottom: var(--sp-8); }
.awards-trophy-picker button { font-size: 0.9rem; }

.trophy-detail {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 700px) {
  .trophy-detail { grid-template-columns: minmax(200px, 300px) 1fr; }
}
.trophy-detail__photo img { width: 100%; height: auto; border: 1px solid var(--line-chalk); }
.trophy-detail__photo--empty {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-chalk);
  background: var(--ink);
}
.trophy-detail__photo--empty .mark-heading { width: 96px; height: 58px; opacity: 0.35; }
@media (max-width: 699px) {
  .trophy-detail__photo { max-width: 240px; }
  .trophy-detail__photo--empty { display: none; }
}
.trophy-detail__trophy {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-28);
  color: var(--gold);
  margin-top: var(--sp-3);
}
.trophy-detail__latest { margin-top: var(--sp-6); }
.trophy-detail__latest .award-winner { font-family: var(--font-display); font-weight: 900; font-size: var(--type-37); line-height: 1.1; }

.awards-history td:first-child { width: 7rem; font-weight: 600; }
.awards-history .award-winner { font-weight: 600; }
.awards-history .award-card__note { max-width: 60ch; }

.awards-search { max-width: 32rem; }
.awards-search input { font-size: 1.1rem; background: var(--ink); }
.search-results { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.search-result {
  padding: var(--sp-4) var(--sp-6);
  background: var(--ink);
  border: 1px solid var(--line-chalk);
  border-left: 3px solid var(--gold);
  max-width: none;
}
.search-result__name { font-size: var(--type-28); margin-bottom: var(--sp-2); }
.search-result__count { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--dust); }
.search-result ul li { padding-block: 2px; }

.awards-source { font-size: 0.85rem; }