/* ============================================================
   Tucson Turf Elite — site.css
   ONE stylesheet for the whole site: tokens + shared chrome/page
   patterns + per-page sections. Promoted verbatim (Phase 2 plan,
   Task 2) from the approved Phase 1 previews:
     design-previews/tokens.css, home.html, 7v7.html, locker.html
   ============================================================ */

/* ============================================================
   SELF-HOSTED SUBSET FONTS (Phase 2 plan, Task 14)
   ============================================================ */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ============================================================
   SECTION 1 — TOKENS (design-previews/tokens.css, promoted)
   ============================================================ */

:root {
  --ground:   #0A0E18;   /* page background — never pure black */
  --surface:  #111726;   /* cards/bands */
  --line:     #232B3E;   /* hairlines */
  --ink:      #EFECE2;   /* warm white text — never #FFF */
  --muted:    #98A0B3;
  --red:      #C8372D;   /* action only: buttons, links, live moments */
  --red-text: #E05A50;   /* AA-safe red for text on --ground/--surface (review finding #2) */
  --royal:    #2E5FB7;   /* secondary accent — alternate-kit nod */
  --gold:     #C9A24B;   /* HARDWARE ONLY */
  --font-display: "Archivo", Arial, sans-serif;  /* 800/900, font-stretch 115-125% */
  --font-body:    "Archivo", Arial, sans-serif;  /* 400-600, normal width */
  --font-label:   "IBM Plex Mono", Consolas, monospace; /* uppercase labels, ls 2-3px */
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
}

/* Type roles */
.display {
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
  text-transform: uppercase; line-height: 1.02; letter-spacing: .01em;
  text-wrap: balance;
}
.label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted);
}
.label--red  { color: var(--red-text); }
.label--gold { color: var(--gold); }  /* hardware contexts only */

/* Layout primitives */
.band { padding: 64px 20px; }
.band--surface { background: var(--surface); }
.inner { max-width: 1200px; margin: 0 auto; }
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Sunburst signature — SUBTLE only (hairline rays divider) */
.ray-divider {
  height: 28px;
  background:
    repeating-conic-gradient(from -14deg at 50% 130%,
      transparent 0deg 6deg, color-mix(in srgb, var(--ink) 7%, transparent) 6deg 6.5deg,
      transparent 6.5deg 12deg);
}

/* Action elements — the ONE red on screen at a time rule applies per viewport */
.btn {
  display: inline-block; background: var(--red); color: var(--ink);
  font-family: var(--font-label); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; padding: 14px 26px;
}
.btn--quiet {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
}
/* DEVIATION (Task 5): .btn was anchor-only in the approved previews. The 7v7
   interest form is the first real <button type="submit">, so a UA-chrome reset
   is genuinely missing — without it Chrome/Safari/Firefox each paint their own
   button bevel/background under the existing background/padding rules above.
   No visual change to any existing <a class="btn">. */
button.btn { border: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Full-bleed photo band with legibility scrim (required over bright grass) */
.photo-band { position: relative; overflow: hidden; }
.photo-band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.photo-band .content { position: relative; z-index: 2; }
.photo-band .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,24,.35) 0%, rgba(10,14,24,0) 40%, rgba(10,14,24,.86) 85%);
}
/* Optional left vignette for heroes whose subject sits right (7v7, Locker).
   DEVIATION from plan Step 1: selector strengthened from bare `.scrim--left`
   to `.photo-band .scrim--left` — the plan's literal selector has specificity
   (0,1,0), lower than the base `.photo-band .scrim` rule's (0,2,0), so the
   base rule always won regardless of source order and the left vignette
   never rendered. Verified visually: pre-fix, temp renders of 7v7/locker
   were measurably lighter than the approved previews; post-fix, pixel-diffed
   as identical (see Task 2 Step 5 verification). */
.photo-band .scrim--left {
  background:
    linear-gradient(90deg, rgba(10,14,24,.6) 0%, rgba(10,14,24,0) 55%),
    linear-gradient(180deg, rgba(10,14,24,.55) 0%, rgba(10,14,24,.15) 42%, rgba(10,14,24,.94) 86%);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal .5s ease-out both; }
  @keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
}

/* ============================================================
   SECTION 2 — SHARED PAGE PATTERNS
   (byte-identical blocks across the three approved previews;
   promoted once so each rule has a single owner)
   ============================================================ */

a { color: inherit; }

/* ---------- hero (chrome header replaces the in-hero lockup) ---------- */
.hero .content {
  min-height: clamp(560px, 92vh, 780px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 20px 56px;
}
.hero-wordmark {
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
  font-size: 19px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1;
}
.hero-lockup .label { display: block; margin-top: 6px; color: var(--ink); opacity: .8; }
.hero-bottom { max-width: 820px; }
.hero-kicker { color: var(--ink); opacity: .85; }
.hero-statement { font-size: 44px; margin: 14px 0 18px; }
.hero-sub { color: var(--muted); margin: 0; max-width: 46ch; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding-bottom: 80px; }
.footer .contact { color: var(--ink); }
.footer-row { margin-top: 34px; }
.footer-row:first-child { margin-top: 0; }
.footer-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.footer .label { line-height: 2.1; }

/* ---------- chip / link utilities ---------- */
.chip {
  display: inline-block; border: 1px solid var(--line); padding: 12px 20px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.link-action {
  font-family: var(--font-label); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; color: var(--red-text);
}
.link-quiet {
  font-family: var(--font-label); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  opacity: .85;
}

/* ---------- form fields (shared by 7v7 / 5v5 / other interest forms) ---------- */
.interest-fields { display: grid; gap: 12px; margin-bottom: 26px; max-width: 680px; }
.field {
  background: var(--ground); border: 1px solid var(--line);
  padding: 15px 16px; width: 100%; color: var(--ink);
  font-family: var(--font-label); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase;
}
.field::placeholder { color: var(--muted); }
.field--message { min-height: 120px; }
/* Honeypot (spam trap, Task 5 Step 3): visually hidden, still tab/AT-skippable
   via tabindex="-1". Shared by every interest form (7v7 / 5v5 / sponsor inquiry). */
.hp { position: absolute; left: -9999px; }
/* Form submit feedback (api/forms.php via assets/js/forms.js, Task 3): muted,
   not red — errors are information, not actions. */
.form-note { color: var(--muted); margin: 18px 0 0; max-width: 60ch; }

/* ---------- utilities / heading normalization (page conventions) ---------- */
.nowrap { white-space: nowrap; }
h2.label, h3.label { margin: 0; font-weight: 400; }

/* ---------- gate notice (Family Hub / Coaches shells — Task 9; reused
   unmodified by Task 10 so the Coaches shell needs no site.css changes) ---------- */

/* ---------- document/resource link rows (Family Hub Documents band — Task 9;
   reused as-is by the Coaches resource list — Task 10) ---------- */
.documents-links p { margin: 0 0 12px; }
.documents-links p:last-child { margin-bottom: 0; }
.documents-note { color: var(--muted); margin: 18px 0 0; font-size: 13px; }

/* ---------- chrome header (stamped by tools/build.py) ---------- */
.chrome-header {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 14px 24px; padding: 28px 20px;
}
body:not(.hero-page) .chrome-header { border-bottom: 1px solid var(--line); }
.hero-page .chrome-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.chrome-lockup { text-decoration: none; color: var(--ink); }
.chrome-nav { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 4px; }
.chrome-nav a { text-decoration: none; white-space: nowrap; }
.chrome-header[data-page="7v7"]    a[data-nav="7v7"],
.chrome-header[data-page="flag"]   a[data-nav="flag"],
.chrome-header[data-page="photos"] a[data-nav="photos"],
.chrome-header[data-page="locker"] a[data-nav="locker"],
.chrome-header[data-page="program"] a[data-nav="program"],
.chrome-header[data-page="sponsor"] a[data-nav="sponsor"] { color: var(--ink); }
@media (min-width: 900px) {
  .chrome-header { padding: 40px 48px; align-items: center; }
}

/* ---------- shared responsive overrides ---------- */
@media (min-width: 600px) {
  .hero-statement { font-size: 58px; }
}

@media (min-width: 900px) {
  .band { padding: 96px 48px; }
  .hero .content { padding: 40px 48px 88px; }
  .hero-wordmark { font-size: 22px; }
  .hero-statement { font-size: 76px; }
  .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; }
  .interest-fields { grid-template-columns: 1fr 1fr; gap: 14px; max-width: none; }
  .field--message, .field--email { grid-column: 1 / -1; }
}

/* ============================================================
   SECTION 3 — PAGE: HOME (design-previews/home.html)
   ============================================================ */

.page-home .hero .scrim {
  background: linear-gradient(180deg, rgba(10,14,24,.55) 0%, rgba(10,14,24,.15) 42%, rgba(10,14,24,.92) 88%);
}
.page-home .hero-sub { margin-bottom: 28px; }

/* ---------- per-image crop classes (page conventions: no inline styles) ----------
   DEVIATION from Task 4's file-touch constraint: these were meant to already exist
   from Task 2 ("per-image object-position values become crop classes here per the
   page conventions") but were not added then. Adding them now is required — the
   design law bans inline style attributes, and Task 4 Step 1 explicitly calls for
   crop classes to replace the preview's inline object-position. Values copied
   verbatim from design-previews/home.html's inline styles. */
.hero-photo--home { object-position: 50% 32%; }
.program-photo--sevens { object-position: 50% 24%; }
.program-photo--flag { object-position: 32% 30%; }
.marquee-photo--hs7v7 { object-position: 50% 22%; }
.marquee-photo--hsgirls { object-position: 50% 16%; }
.marquee-photo--14uboys { object-position: 68% 28%; }
.locker-photo--home { object-position: 50% 40%; }
.thumb-photo--coach { object-position: 50% 30%; }
.thumb-photo--jump { object-position: 40% 30%; }
.thumb-photo--gear { object-position: 50% 28%; }
.record-photo--home { object-position: 50% 34%; }
.photos-tease .tease-cta { margin-top: 18px; }

/* ---------- 02 PROOF STRIP ---------- */
.proof { padding: 0 20px; }
.proof .inner { display: flex; flex-direction: column; }
.proof-item { padding: 22px 0; border-top: 1px solid var(--line); }
.proof-item:first-child { border-top: 0; }
.proof-item .label { color: var(--ink); opacity: .78; line-height: 1.8; }

/* ---------- 03 PROGRAMS ---------- */
.programs .inner { display: grid; gap: 44px; }
.program-card .photo {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground);
}
.program-card .photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.program-title { font-size: 26px; margin: 22px 0 14px; }
.program-lines { margin: 0 0 18px; padding: 0; list-style: none; }
.program-lines li { color: var(--muted); padding: 3px 0; }

/* ---------- 04 MARQUEE TEAMS ---------- */
.marquee .inner { display: grid; gap: 28px; }
h2.marquee-kicker { margin-bottom: 26px; } /* h2-qualified: must outrank the h2.label margin reset */
.marquee-tile .photo {
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface);
}
.marquee-tile .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marquee-tile .label { display: block; color: var(--ink); margin: 14px 0 4px; }
.marquee-tile p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- 05 TEAM USA (the one centered exception) ---------- */
.teamusa { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.teamusa .inner { max-width: 640px; }
.teamusa p.body-copy { margin: 18px 0 0; font-size: 19px; line-height: 1.5; }
.teamusa p.olympic { margin: 22px 0 0; color: var(--muted); }

/* ---------- 06 LOCKER TEASE ---------- */
.locker .content {
  min-height: clamp(420px, 66vh, 560px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 64px 20px 56px;
}
.locker .scrim {
  background: linear-gradient(180deg, rgba(10,14,24,.5) 0%, rgba(10,14,24,.25) 45%, rgba(10,14,24,.9) 90%);
}
.locker-display { font-size: 34px; margin: 0 0 14px; }
.locker .brands { display: block; color: var(--ink); opacity: .8; margin-bottom: 24px; }

/* ---------- 07 PHOTOS TEASE ---------- */
.photos-tease .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.photos-tease .thumbs > div { aspect-ratio: 1 / 1; overflow: hidden; }
.photos-tease .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 08 THE RECORD ---------- */
.record .content {
  min-height: clamp(500px, 78vh, 680px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 64px 20px 56px;
}
.record .scrim {
  background: linear-gradient(180deg, rgba(10,14,24,.45) 0%, rgba(10,14,24,.2) 40%, rgba(10,14,24,.92) 88%);
}
.record-line { font-size: 22px; line-height: 1.35; margin: 14px 0 24px; max-width: 22ch; font-weight: 600; }

/* ---------- 09 INSTAGRAM ---------- */
.instagram-display { font-size: 28px; margin: 0 0 14px; }
.instagram p { color: var(--muted); margin: 0 0 26px; max-width: 44ch; }

/* ---------- 10 SPONSORS ---------- */
.sponsors .wordmarks { margin: 22px 0 18px; display: flex; flex-wrap: wrap; gap: 10px 0; }
.sponsors .wordmarks .label { color: var(--ink); opacity: .7; font-size: 12px; }
.sponsors p { color: var(--muted); margin: 0; max-width: 52ch; }

/* ---------- 11 SPONSOR / DONATE ---------- */
.donate-card {
  border: 1px solid var(--line); padding: 44px 28px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.donate-card p { margin: 0; font-size: 18px; }

@media (min-width: 600px) {
  .locker-display { font-size: 44px; }
  .instagram-display { font-size: 34px; }
}

@media (min-width: 900px) {
  .program-title { font-size: 32px; }
  .teamusa p.body-copy { font-size: 22px; }
  .locker-display { font-size: 54px; }
  .record-line { font-size: 28px; }
  .instagram-display { font-size: 42px; }
  .donate-card p { font-size: 21px; }

  /* proof strip: one row, vertical separators */
  .proof { padding: 0 48px; }
  .proof .inner { flex-direction: row; align-items: stretch; }
  .proof-item {
    border-top: 0; border-left: 1px solid var(--line);
    flex: 1 1 0; padding: 34px 28px;
    display: flex; align-items: center;
  }
  .proof-item:first-child { border-left: 0; padding-left: 0; }

  /* programs side-by-side */
  .programs .inner { grid-template-columns: 1fr 1fr; gap: 56px; }

  /* marquee 3-across */
  .marquee .inner { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  h2.marquee-kicker { grid-column: 1 / -1; margin-bottom: 6px; }

  .locker .content, .record .content { padding: 96px 48px 88px; }
  .locker .content { min-height: clamp(480px, 74vh, 640px); }
  .record .content { min-height: clamp(560px, 88vh, 760px); }

  /* photos tease: label block + thumbs share a row */
  .photos-tease .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: end; }
  .photos-tease .thumbs { margin: 0; gap: 14px; }

  .donate-card { flex-direction: row; align-items: center; justify-content: space-between; padding: 52px 48px; }
}

/* ============================================================
   SECTION 4 — PAGE: 7V7 (design-previews/7v7.html)
   ============================================================ */

/* ---------- 01 HERO ---------- */
/* Per-image crop class (page conventions: no inline styles) — value copied
   verbatim from design-previews/7v7.html's inline object-position. */
.hero-photo--sevens { object-position: 50% 22%; }

/* ---------- 02 TEAMS ---------- */
h2.teams-kicker { display: block; margin-bottom: 26px; }
.team-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.team-chip {
  display: inline-block; border: 1px solid var(--line); padding: 12px 18px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink);
}

/* ---------- 03 CIRCUITS ---------- */
h2.circuits-kicker { display: block; margin-bottom: 8px; }
.circuit-row { padding: 30px 0; }
.circuit-name { font-size: 24px; margin: 0 0 8px; }
.circuit-row p { margin: 0; color: var(--muted); max-width: 52ch; }

/* ---------- 04 HOW IT WORKS ---------- */
h2.joining-kicker { display: block; margin-bottom: 22px; }
.joining p { margin: 0 0 14px; max-width: 52ch; }
.joining p:last-child { margin-bottom: 0; }

/* ---------- 05 INTEREST FORM ---------- */
h2.interest-kicker { display: block; margin-bottom: 26px; }
/* DEVIATION (Task 5 Step 3): the plan's real markup makes the <form> itself
   the .interest-fields grid (`<form class="interest-fields">`), so the submit
   button is now a grid child instead of the preview's sibling anchor below the
   grid. Left as-is, that would (a) shrink the 26px gap before the button to
   the grid's 12px row-gap, and (b) leave a stray 26px of trailing space below
   the button from .interest-fields' own margin-bottom. These two rules
   reproduce the approved preview's spacing exactly: 12px (grid gap) + 14px
   (margin-top) = the original 26px gap before the button; margin-bottom is
   zeroed so nothing trails after it. justify-self keeps the button its
   natural (not grid-stretched) width. */
.interest .interest-fields { margin-bottom: 0; }
.interest .interest-fields .btn {
  grid-column: 1 / -1; margin-top: 14px; justify-self: start;
}

@media (min-width: 600px) {
  .circuit-name { font-size: 28px; }
}

@media (min-width: 900px) {
  /* teams: single quiet row */
  .team-chips { flex-wrap: nowrap; gap: 12px; }
  .team-chip { padding: 14px 24px; }

  /* circuits: name left, line right */
  .circuit-row {
    display: grid; grid-template-columns: 340px 1fr; gap: 48px;
    align-items: baseline; padding: 38px 0;
  }
  .circuit-name { font-size: 32px; margin: 0; }

  /* joining: kicker left, paragraphs right */
  .joining .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  h2.joining-kicker { margin-bottom: 0; }

  /* form: two columns, message + action full width */
  .interest .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  h2.interest-kicker { margin-bottom: 0; }
}

/* ============================================================
   SECTION 5 — PAGE: LOCKER (design-previews/locker.html)
   ============================================================ */

/* ---------- 01 HERO ---------- */
/* per-image crop classes (page conventions: no inline styles).
   Values copied verbatim from design-previews/locker.html's inline styles. */
.hero-photo--locker { object-position: 50% 38%; }
.photo--cleats { object-position: 50% 50%; }
.photo--recovery { object-position: 50% 26%; }

/* ---------- 02 GEAR GRID ---------- */
/* DEVIATION (same issue Task 4 hit with h2.marquee-kicker): plain `.gear-kicker`
   is specificity (0,1,0), lower than the shared `h2.label` reset's (0,1,1), so
   once the kicker became a real <h2> (page conventions: kickers are headings)
   the shared margin:0 always won and ate the 30px gap regardless of source
   order. Qualified with the h2 tag to tie specificity with h2.label so this
   page-specific rule (later in the cascade) wins, matching h2.marquee-kicker's
   fix. Verified via getComputedStyle in the Task 7 render pass. */
h2.gear-kicker { display: block; margin-bottom: 30px; }
.gear-grid { display: grid; gap: 44px; }
.gear-tile .photo {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface);
}
.gear-tile .photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Deliberate quiet placeholder — no photo yet */
.gear-tile .photo--pending {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px; border: 1px solid var(--line);
}
.photo--pending .pending-name {
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
  text-transform: uppercase; line-height: .95; letter-spacing: .01em;
  font-size: 34px; color: var(--muted); opacity: .3;
}
.photo--pending .label { opacity: .55; }
.gear-name { font-size: 22px; margin: 20px 0 8px; }
.gear-tile p { margin: 0 0 14px; color: var(--muted); }
.sponsor-chip {
  display: inline-block; border: 1px solid var(--line); background: var(--surface);
  padding: 7px 14px;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- 03 CLOSING ---------- */
.closing p { margin: 0 0 26px; font-size: 18px; max-width: 44ch; line-height: 1.5; }

@media (min-width: 600px) {
  .gear-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .gear-name { font-size: 24px; }
}

@media (min-width: 900px) {
  h2.gear-kicker { margin-bottom: 38px; }
  .gear-grid { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
  .gear-name { font-size: 26px; }
  .photo--pending .pending-name { font-size: 40px; }

  .closing p { font-size: 21px; }
}

/* ============================================================
   SECTION 6 — PAGE: 5V5 FLAG (no Phase 1 preview — spec §4.3,
   composed from the 7v7 idioms: chips, circuit rows, interest form)
   ============================================================ */

/* ---------- 01 HERO ---------- */
.hero-photo--flag { object-position: 50% 30%; }

/* ---------- 02 DIVISIONS ---------- */
h2.divisions-kicker { display: block; margin-bottom: 30px; }
.division-group + .division-group { margin-top: 38px; }
h3.division-label { display: block; margin-bottom: 16px; color: var(--muted); }
.division-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- 03 SERIES (circuit-row idiom) ---------- */
h2.series-kicker { display: block; margin-bottom: 8px; }

/* ---------- 04 JOURNEY ---------- */
h2.journey-kicker { display: block; margin-bottom: 22px; }
.journey p { margin: 0 0 24px; max-width: 52ch; }

@media (min-width: 900px) {
  /* journey: kicker left, copy right — matches the joining idiom */
  .journey .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  h2.journey-kicker { margin-bottom: 0; }

  /* divisions: kicker left, groups right — same 280px rail */
  .divisions .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  h2.divisions-kicker { margin-bottom: 0; }
}

/* ============================================================
   SECTION 7 — PAGE: PHOTOS (no Phase 1 preview — spec §4.4;
   static PHOTOS array until the Phase 4 OneDrive gallery API)
   ============================================================ */

/* ---------- 01 GALLERY ---------- */
/* h2-qualified per the systemic fix (Tasks 4/7): plain `.gallery-kicker`
   ties at specificity (0,1,0) with the shared `h2.label` margin:0 reset
   ((0,1,1) once the .label class is added) and loses regardless of source
   order. Qualifying with the h2 tag brings this rule to (0,1,1) so it wins. */
h2.gallery-kicker { display: block; margin-bottom: 10px; }
.gallery-sub { color: var(--muted); margin: 0 0 28px; max-width: 46ch; }
.album-rail { display: flex; gap: 10px; flex-wrap: wrap; }
.album-chip { background: transparent; cursor: pointer; }
.album-chip.is-active { border-color: var(--ink); color: var(--ink); }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
.photo-cell { padding: 0; border: 0; background: var(--surface); cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 02 PHOTO REMOVAL ---------- */
.removal p { margin: 0; color: var(--muted); max-width: 52ch; }

/* ---------- LIGHTBOX ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 24, .96); }
.lightbox img { position: absolute; inset: 0; margin: auto; max-width: 92vw; max-height: 86vh; }
.lightbox-btn {
  position: absolute; background: transparent; border: 1px solid var(--line);
  color: var(--ink); font-size: 20px; padding: 12px 16px; cursor: pointer;
}
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-download { position: absolute; bottom: 20px; left: 20px; color: var(--ink); }

@media (min-width: 900px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

/* ============================================================
   SECTION 8 — PAGE: FAMILY HUB (no Phase 1 preview — spec §4.6;
   ungated shell, real PHP gate lands Phase 3)
   ============================================================ */

/* ---------- 02 CREED (the page's sole display moment) ---------- */
h2.creed-kicker { display: block; margin-bottom: 18px; }
.creed-display { font-size: 34px; margin: 0; }
.creed-sub { color: var(--muted); margin: 16px 0 0; max-width: 52ch; }

/* ---------- 03 CLUB CALENDAR ---------- */
h2.calendar-kicker { display: block; margin-bottom: 8px; }
.event-row { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.calendar-note { color: var(--muted); margin: 18px 0 0; font-size: 13px; }

/* ---------- 04 FAQ ---------- */
h2.faq-kicker { display: block; margin-bottom: 8px; }
.faq-item { border-top: 1px solid var(--line); padding: 14px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { color: var(--muted); margin: 12px 0 0; max-width: 60ch; }

/* ---------- 05 DOCUMENTS ---------- */
h2.documents-kicker { display: block; margin-bottom: 20px; }

/* ---------- 06 REGISTER ---------- */
h2.register-kicker { display: block; margin-bottom: 8px; }
.register p { margin: 0 0 20px; max-width: 52ch; }
.register .btn { margin-bottom: 18px; }
.register-links { display: flex; flex-direction: column; gap: 10px; }

/* ---------- 07 GAMECHANGER ---------- */
h2.gamechanger-kicker { display: block; margin-bottom: 8px; }
.gamechanger-note { color: var(--muted); margin: 0 0 20px; max-width: 52ch; }
.gamechanger-chips { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 600px) {
  .creed-display { font-size: 44px; }
}

@media (min-width: 900px) {
  .creed-display { font-size: 54px; }
}

/* ============================================================
   SECTION 9 — PAGE: SPONSOR / DONATE (no Phase 1 preview — spec §4.8;
   Zeffy/Venmo are placeholders, live embeds land Phase 4)
   ============================================================ */

/* ---------- 01 OPENING ---------- */
h2.opening-kicker { display: block; margin-bottom: 18px; }
.opening-display { font-size: 34px; margin: 0 0 16px; }
.opening-sub { color: var(--muted); margin: 0 0 22px; max-width: 52ch; }

/* ---------- 02 TIERS ---------- */
h2.tiers-kicker { display: block; margin-bottom: 8px; }
.tier-row { padding: 30px 0; }
.tier-name { font-size: 24px; margin: 0 0 6px; display: block; }
.tier-amount { display: block; margin: 0 0 10px; }
.tier-row p { margin: 0; color: var(--muted); max-width: 52ch; }
.tiers-note { color: var(--muted); margin: 22px 0 0; max-width: 52ch; font-size: 14px; }

/* ---------- 03 SPONSOR INQUIRY ---------- */
h2.inquiry-kicker { display: block; margin-bottom: 26px; }
/* Form-is-the-grid fix (same shape as Task 5's 7v7 .interest deviation):
   the sponsor-inquiry <form> is itself the .interest-fields grid, so the
   submit button is a grid child rather than a sibling below the grid. */
.inquiry .interest-fields { margin-bottom: 0; }
.inquiry .interest-fields .btn { grid-column: 1 / -1; margin-top: 14px; justify-self: start; }
/* Design law #1 (one red per viewport-height): this page carries two reds
   (the inquiry submit above, the Donate btn below) in adjacent bands with
   only a ray-divider between them. Measured via headless Chrome at both
   390 and 1280: the default band padding left them ~465-550px apart
   (button top to button top) — comfortably inside a single phone or laptop
   viewport, so both reds could appear on screen together while scrolling.
   Extra padding on this band's bottom and .donate's top pushes the two red
   elements >900px apart at both widths (verified), so no realistic
   viewport shows both at once. */
.inquiry { padding-bottom: 300px; }

/* ---------- 05 DONATE ---------- */
h2.donate-kicker { display: block; margin-bottom: 8px; }
.donate p { margin: 0 0 16px; max-width: 52ch; }
.donate .tax-line { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.embed-pending {
  border: 1px dashed var(--line); background: var(--surface);
  padding: 48px 24px; max-width: 420px; text-align: center; margin: 0 0 24px;
}
.donate-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donate { padding-top: 300px; }

@media (min-width: 600px) {
  .opening-display { font-size: 44px; }
}

@media (min-width: 900px) {
  .opening-display { font-size: 54px; }

  /* tiers: name + amount left, benefits right — mirrors the circuit-row idiom */
  .tier-row {
    display: grid; grid-template-columns: 340px 1fr; column-gap: 48px;
    padding: 38px 0;
  }
  .tier-name { grid-column: 1; grid-row: 1; font-size: 32px; margin: 0; }
  .tier-amount { grid-column: 1; grid-row: 2; margin: 8px 0 0; }
  .tier-row p { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: start; }

  /* form: kicker left rail, fields right — matches the joining/journey idiom */
  .inquiry .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  h2.inquiry-kicker { margin-bottom: 0; }

  /* donate: kicker left rail, copy + actions right */
  .donate .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  h2.donate-kicker { margin-bottom: 0; }
}

/* ============================================================
   SECTION 10 — PAGE: THE PROGRAM (no Phase 1 preview — spec §4.9;
   the club's permanent record: mission, board, alumni honor wall,
   history & media archive. Page runs zero red; gold appears ONLY
   on the archive's "The Record" kicker — hardware context.)
   ============================================================ */

/* ---------- 01 MISSION & VALUES ---------- */
h2.mission-kicker { display: block; margin-bottom: 18px; }
.mission-display { font-size: 34px; margin: 0 0 18px; }
.mission-creed { margin: 0 0 14px; max-width: 52ch; }
.mission-statement { color: var(--muted); margin: 0; max-width: 52ch; }

/* ---------- 02 BOARD OF DIRECTORS ---------- */
h2.board-kicker { display: block; margin-bottom: 8px; }
.board-row { border-top: 1px solid var(--line); padding: 18px 0; display: grid; gap: 4px; justify-items: start; }
.board-row p { margin: 0; color: var(--muted); max-width: 60ch; }

/* ---------- 03 ALUMNI HONOR WALL ---------- */
h2.alumni-kicker { display: block; margin-bottom: 14px; }
.alumni-count { font-size: 28px; margin: 0 0 30px; }
/* Equal rows — every alumnus renders in the identical format (spec §4.9);
   the data template is uniform, so no name can become a headline.
   Badges are quiet chips, never gold: they mark people, not hardware. */
.alumni-row {
  border-top: 1px solid var(--line); padding: 16px 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.badge {
  display: inline-block; border: 1px solid var(--royal); color: var(--ink);
  padding: 3px 10px; font-size: 10px;
}

/* ---------- 05 HISTORY & MEDIA ARCHIVE ---------- */
h2.history-kicker { display: block; margin-bottom: 8px; }
.history-row { border-top: 1px solid var(--line); padding: 18px 0; display: grid; gap: 6px; justify-items: start; }
.history-row p { margin: 0; color: var(--muted); max-width: 60ch; }
.history-note { color: var(--muted); margin: 28px 0 0; font-size: 13px; }

@media (min-width: 600px) {
  .mission-display { font-size: 44px; }
  .alumni-count { font-size: 34px; }
}

@media (min-width: 900px) {
  .mission-display { font-size: 54px; }
  .alumni-count { font-size: 42px; }

  /* alumni: fixed columns so the equal format reads at a glance.
     Explicit column assignments keep alignment when an optional cell
     (years or badge) is removed by the hydrator. */
  .alumni-row {
    display: grid; grid-template-columns: 280px 190px 1fr auto;
    column-gap: 32px; align-items: baseline;
  }
  .alumni-row > strong { grid-column: 1; }
  .alumni-years { grid-column: 2; }
  .alumni-dest { grid-column: 3; }
  .alumni-row .badge { grid-column: 4; justify-self: end; }

  /* history: year rail left, entry right, quiet watch link far right */
  .history-row { grid-template-columns: 120px 1fr auto; column-gap: 32px; }
  .history-year { grid-column: 1; grid-row: 1; }
  .history-row > strong { grid-column: 2; grid-row: 1; }
  .history-row p { grid-column: 2; grid-row: 2; }
  .history-row .link-quiet { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ---------- gate login (family-hub.php / coaches.php) ---------- */
.page-gate .gate-card { max-width: 420px; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.page-gate .gate-line { color: var(--muted); max-width: 44ch; }
.page-gate .gate-line a { color: inherit; }
.page-gate .gate-err { color: var(--ink); }
.page-gate .gate-form .field { display: block; width: 100%; margin: 6px 0 16px; }
.page-gate h1.label { margin: 0 0 10px; font-weight: 400; }
.page-gate .gate-card p { margin: 0 0 12px; }

/* ---------- join your team (page-join.php) + first visit (single-tte_team.php) ---------- */
h2.join-kicker, h2.welcome-kicker { display: block; margin-bottom: 18px; }
.join-display, .welcome-display { font-size: 38px; margin: 0; }
.join-sub, .welcome-sub { color: var(--muted); margin: 16px 0 0; max-width: 52ch; }
.join-card { border: 1px solid var(--line); padding: 26px 20px; max-width: 520px; }
h2.join-card-kicker { display: block; margin-bottom: 10px; }
.join-card-line { margin: 0 0 20px; max-width: 46ch; }
.join-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.join-label { display: block; }
.join-field { font-size: 18px; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-label); font-size: 12px; letter-spacing: .2em; text-align: left; line-height: 1.6; }
.register-done { display: none; }
.register.is-registered .register-open { display: none; }
.register.is-registered .register-done { display: block; }
.register-done-line { max-width: 52ch; }
.team-tournaments .calendar-note { margin: 0 0 16px; }
.team-tournaments .event-list + .calendar-note { margin: 16px 0 0; }
.join-form .btn { margin-top: 6px; }
.join-err { color: var(--ink); }
.join-callout { border: 1px solid var(--line); padding: 22px 18px; margin: 0 0 22px; max-width: 520px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.join-callout-line { margin: 0; color: var(--muted); max-width: 46ch; }
.welcome { padding-bottom: 40px; }
.welcome-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
.welcome-card { border: 1px solid var(--line); padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.welcome-pass { font-size: 34px; line-height: 1; letter-spacing: .02em; word-break: break-all; }
.welcome-card-line { color: var(--muted); font-size: 14px; max-width: 40ch; }
.guide { display: flex; flex-direction: column; gap: 44px; }
.guide-block--two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
h3.guide-kicker { display: block; margin-bottom: 16px; }
.guide-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; max-width: 64ch; }
.guide-step { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.guide-step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; color: var(--red-text); grid-row: 1 / span 2; padding-top: 4px; }
.guide-step:first-child { border-top: 0; padding-top: 0; }
.guide-step-title { display: block; }
.guide-step-line { display: block; color: var(--muted); margin-top: 4px; max-width: 60ch; }
.guide-btn { margin-top: 20px; }
.code-chip { font-family: var(--font-label); letter-spacing: .14em; color: var(--ink); border: 1px solid var(--line); padding: 3px 8px; }
.fee-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; max-width: 640px; }
.fee-cell { border: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.fee-amount { font-size: 28px; line-height: 1; }
.fee-label { font-size: 9px; }
.guide-line { margin: 0 0 10px; max-width: 60ch; }
.guide-line--muted { color: var(--muted); }
.guide-help { color: var(--muted); margin: 0; max-width: 60ch; }
.guide-help .link-quiet { margin-left: 8px; }
.guide-toggle { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.guide-toggle summary { cursor: pointer; list-style: none; color: var(--ink); }
.guide-toggle summary::-webkit-details-marker { display: none; }
.guide-toggle summary::before { content: "+ "; color: var(--red-text); }
.guide-toggle[open] summary::before { content: "\2212  "; }
.guide-toggle .guide { margin-top: 28px; }
@media (min-width: 600px) {
  .join-display, .welcome-display { font-size: 50px; }
  .welcome-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
  .guide-block--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
  .fee-amount { font-size: 34px; }
}
@media (min-width: 900px) {
  .join-display, .welcome-display { font-size: 60px; }
}

/* ============================================================
   SECTION 11 — WORDPRESS-SPECIFIC
   (generic pages, password forms, admin bar, feed container)
   ============================================================ */

/* Generic page (legal pages, block-editor content): quiet single column */
.entry-page .inner { max-width: 760px; }
.entry-page h1.entry-title { margin-bottom: 28px; }
.entry-content h2 { font-family: var(--font-label); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); margin: 40px 0 12px; font-weight: 400; }
.entry-content h3 { font-size: 18px; margin: 28px 0 8px; }
.entry-content p, .entry-content li { color: var(--ink); max-width: 68ch; }
.entry-content a { color: var(--red-text); }
.entry-content ul, .entry-content ol { padding-left: 20px; }
.notfound-line { color: var(--muted); max-width: 44ch; }

/* WordPress password form rendered with the gate idiom */
.post-password-form { max-width: 420px; }
.post-password-form p { color: var(--muted); max-width: 44ch; }
.post-password-form label { display: block; }
.post-password-form input[type="password"] { display: block; width: 100%; margin: 10px 0 16px; }

/* Admin bar: the absolute chrome header on hero pages sits below it */
body.admin-bar .hero-page .chrome-header,
body.admin-bar.hero-page .chrome-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.hero-page .chrome-header { top: 46px; }
}

/* Instagram live feed container (feed plugin output) */
.instagram-feed { margin: 0 0 26px; }

/* Photos: empty state and no-JS note (Phase 3 backlog) */
.gallery-empty { color: var(--muted); margin: 28px 0 0; max-width: 46ch; }

/* ============================================================
   SECTION 12 — THE PROGRAM / SPONSOR (WordPress additions)
   ============================================================ */
.board-row .board-photo { width: 96px; height: 96px; object-fit: cover; display: block; margin-bottom: 8px; }
.history-row .history-kind { opacity: .7; }
.history-detail { grid-column: 2; grid-row: 2; }
.history-detail p { margin: 0 0 8px; color: var(--muted); max-width: 60ch; }
.history-detail p:last-child { margin-bottom: 0; }
.donate-embed { max-width: 420px; margin: 0 0 24px; }
.donate-embed iframe { width: 100%; height: 600px; border: 0; display: block; }

/* Preview flag for signed-in editors (plugin preview mode) */
.tte-preview-flag {
  position: fixed; right: 12px; bottom: 12px; z-index: 60;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); background: var(--royal); padding: 6px 10px; opacity: .9;
}

/* ============================================================
   SECTION 13 — DESIGN PASS 1 (2026-11-01, owner feedback)
   Shield in the chrome, legible nav, scoreboard proof tiles,
   shield watermark, red slab accents, sharper type and corners.
   Overrides earlier rules on purpose so the pass reads in one place.
   ============================================================ */

/* ---------- chrome: shield + words, nav that reads as nav ---------- */
.chrome-lockup { display: block; }
.chrome-logo { display: block; height: 64px; width: auto; }
.chrome-nav { gap: 6px 20px; padding-bottom: 0; flex-wrap: wrap; overflow: visible; }
.chrome-nav a.label {
  font-size: 13px; letter-spacing: .14em; color: var(--ink); opacity: .86;
  padding: 10px 0; position: relative;
}
.chrome-nav a.label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .18s ease-out;
}
.chrome-nav a.label:hover, .chrome-nav a.label:focus-visible { opacity: 1; }
.chrome-nav a.label:hover::after, .chrome-nav a.label:focus-visible::after,
.chrome-nav a.label[aria-current="page"]::after { transform: scaleX(1); }
.chrome-nav a.label[aria-current="page"] { opacity: 1; }
/* photo pages: a dark backdrop behind the chrome so the nav always reads */
.hero-page .chrome-header {
  background: linear-gradient(180deg, rgba(10,14,24,.78) 0%, rgba(10,14,24,.38) 50%, rgba(10,14,24,0) 100%);
  padding-bottom: 72px;
}
@media (min-width: 600px) { .chrome-logo { height: 78px; } }
@media (min-width: 900px) {
  .chrome-logo { height: 96px; }
  .chrome-nav { gap: 28px; flex-wrap: nowrap; }
  .chrome-nav a.label { font-size: 13px; }
  .hero-page .chrome-header { padding-bottom: 64px; }
}

/* ---------- red slab accent (skewed, one per viewport with no red button) ---------- */
.slab {
  display: inline-block; background: var(--red); color: var(--ink);
  padding: 7px 14px 6px; transform: skewX(-12deg); margin-left: 4px;
}
.slab > span { display: inline-block; transform: skewX(12deg); }
h2.label .slab, .hero-kicker .slab { color: var(--ink); opacity: 1; }
.hero-kicker { opacity: 1; }
h2.marquee-kicker { margin-bottom: 30px; }

/* ---------- proof strip as a scoreboard ---------- */
.proof { padding: 0 20px; }
.proof .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.proof-item, a.proof-item {
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
  padding: 26px 18px 26px 0; border-top: 1px solid var(--line); border-left: 0;
  text-decoration: none; color: var(--ink);
}
.proof-item:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line); }
.proof-item:nth-child(-n+2) { border-top: 0; }
.proof-head { font-size: clamp(18px, 5.6vw, 24px); line-height: .95; }
.proof-line { color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 22ch; }
a.proof-item:hover .proof-head, a.proof-item:focus-visible .proof-head { color: var(--red-text); }
@media (min-width: 900px) {
  .proof { padding: 0 48px; }
  .proof .inner { grid-template-columns: repeat(4, 1fr); }
  .proof-item, a.proof-item { padding: 40px 28px; border-top: 0; border-left: 1px solid var(--line); }
  .proof-item:first-child { border-left: 0; padding-left: 0; }
  .proof-item:nth-child(2n) { padding-left: 28px; }
  .proof-head { font-size: 32px; }
}

/* ---------- shield watermark in dark bands ---------- */
.band--shield { position: relative; overflow: hidden; }
.band--shield > .inner { position: relative; z-index: 1; }
.band--shield::before {
  content: ""; position: absolute; right: -14%; bottom: -22%;
  width: min(78vw, 640px); aspect-ratio: 1400 / 782;
  background: url("../media/brand/shield-xl.png") center / contain no-repeat;
  opacity: .07; transform: rotate(-12deg); pointer-events: none;
}
.footer.band--shield::before { right: -10%; bottom: -30%; opacity: .06; }
@media (min-width: 900px) {
  .band--shield::before { width: min(48vw, 760px); right: -8%; bottom: -34%; }
}

/* ---------- sharper type and corners ---------- */
.hero-statement { font-size: clamp(36px, 11.2vw, 48px); letter-spacing: 0; }
.program-title { font-size: 30px; }
.program-card .photo, .marquee-tile .photo, .gear-tile .photo:not(.photo--pending) {
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.ray-divider {
  background:
    repeating-conic-gradient(from -14deg at 50% 130%,
      transparent 0deg 6deg, color-mix(in srgb, var(--ink) 11%, transparent) 6deg 6.5deg,
      transparent 6.5deg 12deg);
}
@media (min-width: 600px) { .hero-statement { font-size: 64px; } }
@media (min-width: 900px) {
  .hero-statement { font-size: 88px; }
  .program-title { font-size: 38px; }
}

/* ---------- footer lockup ---------- */
.footer-lockup { height: 120px; width: auto; display: block; margin: 0 0 32px; opacity: .95; }
.footer.band--shield::before { right: auto; left: -16%; bottom: -36%; opacity: .05; transform: rotate(10deg); }
@media (min-width: 900px) { .footer-lockup { height: 150px; margin-bottom: 40px; } }

/* ============================================================
   SECTION 14 — DESIGN PASS 1b (header words, button nav, hero motion)
   ============================================================ */

/* chrome: shield + typed words */
.chrome-lockup { display: flex; align-items: center; gap: 14px; }
.chrome-shield { height: 56px; width: auto; display: block; flex: 0 0 auto; }
.chrome-words { display: flex; flex-direction: column; line-height: 1; }
.chrome-wordmark {
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
  font-size: 26px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.chrome-sub {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink); opacity: .78; margin-top: 6px;
}
@media (min-width: 900px) {
  .chrome-shield { height: 84px; }
  .chrome-wordmark { font-size: 36px; }
  .chrome-sub { font-size: 12px; margin-top: 8px; }
}

/* nav as buttons: border, fill, red on current and hover */
.chrome-nav a.label {
  padding: 11px 14px; border: 1px solid rgba(239,236,226,.28);
  background: rgba(10,14,24,.45); opacity: 1; font-size: 12px; letter-spacing: .16em;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.chrome-nav a.label::after { display: none; }
.chrome-nav a.label:hover, .chrome-nav a.label:focus-visible { border-color: var(--ink); background: rgba(239,236,226,.08); }
.chrome-nav a.label[aria-current="page"] { border-color: var(--red); background: rgba(200,55,45,.16); }
.chrome-nav { gap: 8px; }
@media (min-width: 900px) { .chrome-nav { gap: 10px; } .chrome-nav a.label { padding: 12px 16px; } }

/* hero photo crossfade + slow zoom */
.hero--slides > img.hero-slide {
  opacity: 0; transition: opacity 1.4s ease-in-out; will-change: opacity, transform;
}
.hero--slides > img.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero--slides > img.hero-slide.is-moving { animation: hero-drift 8s ease-out both; }
  @keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
}
/* phone: wordmark on one line, tighter chips */
@media (max-width: 599px) {
  .chrome-wordmark { font-size: 22px; white-space: nowrap; }
  .chrome-nav a.label { padding: 9px 11px; font-size: 11px; letter-spacing: .14em; }
  .chrome-nav { gap: 6px; }
}

/* ============================================================
   SECTION 15 — DESIGN PASS 2 (hero balance, stats, doors,
   hover outlines, story timeline)
   ============================================================ */

/* hero: statement is the star, tagline is the echo */
.hero-statement { font-size: clamp(44px, 13vw, 64px); }
.hero-tagline { font-size: clamp(20px, 5.6vw, 26px); margin: 10px 0 14px; color: var(--ink); opacity: .9; }
.hero-sub { margin-bottom: 26px; }
@media (min-width: 600px) { .hero-statement { font-size: 84px; } .hero-tagline { font-size: 30px; } }
@media (min-width: 900px) { .hero-statement { font-size: 116px; } .hero-tagline { font-size: 36px; } }

/* stats strip */
.stats { padding: 36px 20px 30px; border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-number { font-size: 44px; line-height: .9; color: var(--ink); }
.stat-label { color: var(--muted); max-width: 18ch; line-height: 1.6; }
@media (min-width: 900px) {
  .stats { padding: 52px 48px 44px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stats-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .stat-number { font-size: 64px; }
}

/* the four doors */
.doors { padding-top: 40px; padding-bottom: 40px; }
.doors-grid { display: grid; gap: 14px; }
.door { background: var(--surface); border: 1px solid var(--line); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.door-main { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.door-title { font-size: 28px; line-height: .95; }
.door-line { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 32ch; }
.door-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; }
.door-links .link-quiet { font-size: 11px; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s ease-out, border-color .15s ease-out; }
/* the box outlines on hover; each thing inside says what the tap will do (owner, 2026-11-03) */
.door-links .link-quiet:hover, .door-links .link-quiet:focus-visible { color: var(--red-text); opacity: 1; border-bottom-color: var(--red-text); }
.door-main .door-title { transition: color .15s ease-out; }
.door-main:hover .door-title, .door-main:focus-visible .door-title { color: var(--red-text); }
.door-main:hover .door-line { color: var(--ink); }
.link-quiet:hover, .link-quiet:focus-visible { color: var(--red-text); opacity: 1; }
@media (min-width: 600px) { .doors-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .doors { padding-top: 56px; padding-bottom: 56px; }
  .doors-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .door { padding: 32px 26px 26px; min-height: 230px; }
  .door-title { font-size: 30px; }
}

/* hover outline: a red frame draws in, the card lifts a hair */
.card-outline { position: relative; transition: transform .22s ease-out; }
.card-outline::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--red); opacity: 0; transform: scale(.985);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
.card-outline:hover, .card-outline:focus-within { transform: translateY(-3px); }
.card-outline:hover::after, .card-outline:focus-within::after { opacity: 1; transform: scale(1); }
.card-outline .photo img { transition: transform .6s ease-out; }
.card-outline:hover .photo img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .card-outline, .card-outline::after, .card-outline .photo img { transition: none; }
  .card-outline:hover { transform: none; }
}

/* story timeline on The Program */
.timeline { list-style: none; margin: 18px 0 0; padding: 0 0 0 28px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 34px; display: grid; gap: 6px; justify-items: start; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -28px; top: 8px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--gold);
}
.timeline-year { font-size: 26px; line-height: 1; color: var(--ink); }
.timeline-title { font-size: 17px; }
.timeline-kind { color: var(--gold); }
.timeline-detail { color: var(--muted); max-width: 60ch; }
.timeline-detail p { margin: 0 0 8px; }
@media (min-width: 900px) {
  .timeline { padding-left: 0; }
  .timeline::before { left: 139px; }
  .timeline-item { grid-template-columns: 120px 1fr; column-gap: 48px; padding-bottom: 40px; }
  .timeline-dot { left: 132px; top: 10px; }
  .timeline-year { grid-column: 1; grid-row: 1 / 4; font-size: 34px; justify-self: end; text-align: right; }
  .timeline-title, .timeline-kind, .timeline-detail, .timeline-item .link-quiet { grid-column: 2; }
}

/* ============================================================
   SECTION 16 — DESIGN PASS 2b (hero size, red stats strip,
   as-is display case, marquee tile shadow and bounce)
   ============================================================ */

.hero-statement { font-size: clamp(38px, 11vw, 52px); }
@media (min-width: 600px) { .hero-statement { font-size: 64px; } }
@media (min-width: 900px) { .hero-statement { font-size: 84px; } }

/* display text that keeps 7s / 5v5 lowercase letters */
.display--as-is { text-transform: none; }
.chrome-nav a.label { text-transform: none; }

/* stats strip: red, compact, numbers count up */
.stats { background: var(--red); border-bottom: 0; padding: 22px 20px 20px; }
.stats-grid { gap: 18px 16px; }
.stat { gap: 4px; }
.stat-number { font-size: 32px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--ink); opacity: .82; font-size: 10px; letter-spacing: .2em; }
@media (min-width: 900px) {
  .stats { padding: 28px 48px 26px; }
  .stats-grid { gap: 24px; align-items: center; }
  .stat { flex-direction: row; align-items: baseline; gap: 14px; }
  .stat-number { font-size: 40px; }
  .stat-label { font-size: 11px; max-width: 16ch; line-height: 1.5; }
}

/* marquee tiles: shadowed cards that bounce up on hover */
.marquee-tile {
  background: var(--surface); border: 1px solid var(--line); padding: 0 0 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease-out;
}
.marquee-tile .label, .marquee-tile p { padding: 0 18px; }
.marquee-tile .photo { clip-path: none; }
.marquee-tile.card-outline::after { display: none; }
.marquee-tile:hover, .marquee-tile:focus-within { transform: translateY(-8px); box-shadow: 0 24px 44px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .marquee-tile { transition: none; } .marquee-tile:hover { transform: none; } }

/* stats strip stays on one row at every width */
.stats-grid, .stats-grid--3, .stats-grid--5 { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid--5 { grid-template-columns: repeat(5, 1fr); }
.stat { gap: 4px; min-width: 0; }
.stat-number { font-size: clamp(22px, 7vw, 32px); }
.stat-label { font-size: 9px; letter-spacing: .14em; line-height: 1.4; }
@media (min-width: 900px) {
  .stats-grid, .stats-grid--3, .stats-grid--5 { gap: 24px; }
  .stat-number { font-size: 40px; }
  .stat-label { font-size: 11px; letter-spacing: .2em; }
}

/* stats are links to The Program */
a.stat { text-decoration: none; color: var(--ink); transition: transform .2s ease-out; }
a.stat:hover, a.stat:focus-visible { transform: translateY(-2px); }
a.stat:hover .stat-label { opacity: 1; }
.hero-sub { max-width: 34ch; font-size: 17px; }
@media (min-width: 900px) { .hero-sub { font-size: 20px; } }

/* ============================================================
   SECTION 17 — THE PROGRAM (alumni cards, mission)
   ============================================================ */
.mission-creed { font-size: 19px; line-height: 1.5; max-width: 52ch; margin: 0 0 14px; }
.alumni-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.alumni-card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.alumni-card--pro { border-color: var(--gold); }
.alumni-photo { position: relative; aspect-ratio: 4 / 5; background: var(--ground); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.alumni-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alumni-mono { font-size: 44px; color: var(--muted); opacity: .45; line-height: 1; }
.alumni-photo::before {
  content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background: url("../media/brand/shield-xl.png") center 40% / 70% no-repeat;
}
.alumni-photo img + .alumni-badges, .alumni-badges { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.alumni-card--pro .badge--nfl { border-color: var(--gold); color: var(--gold); }
.alumni-text { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.alumni-name { font-size: 15px; }
.alumni-text .alumni-dest { color: var(--muted); font-size: 14px; }
.alumni-text .alumni-years { font-size: 10px; }
@media (min-width: 600px) { .alumni-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 900px) {
  .alumni-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .alumni-mono { font-size: 56px; }
  .alumni-name { font-size: 16px; }
}

/* ============================================================
   SECTION 18 — PROGRAM PAGES REWORK (7v7, 5v5 Flag): spotlight,
   team rows with coaches, flagship-first circuits, gear strip,
   league on-ramp
   ============================================================ */
.spotlight .content, .league .content {
  min-height: clamp(420px, 66vh, 560px); display: flex; flex-direction: column;
  justify-content: flex-end; padding: 64px 20px 56px;
}
.spotlight .scrim, .league .scrim {
  background: linear-gradient(180deg, rgba(10,14,24,.45) 0%, rgba(10,14,24,.2) 40%, rgba(10,14,24,.92) 88%);
}
.spotlight-photo { object-position: 50% 30%; }
.league-photo { object-position: 50% 40%; }
h2.spotlight-kicker, h2.league-kicker { margin-bottom: 18px; }
.spotlight-title, .league-title { font-size: 34px; margin: 0 0 12px; }
.spotlight-line, .league-line { margin: 0 0 18px; max-width: 48ch; font-size: 17px; line-height: 1.5; }
.league-line--muted { color: var(--muted); font-size: 15px; }
.league .btn { margin-top: 6px; }
.team-list { display: flex; flex-direction: column; }
.team-row { border-top: 1px solid var(--line); padding: 16px 0; display: grid; gap: 4px; }
.team-row:first-child { border-top: 0; padding-top: 0; }
.team-name { font-size: 22px; line-height: 1; }
.team-coach { color: var(--muted); font-size: 15px; }
.team-groups { display: grid; gap: 40px; }
h3.team-group-label { display: block; margin-bottom: 14px; color: var(--muted); }
.flagship {
  position: relative; overflow: hidden; margin-top: 22px; padding: 28px 22px 26px;
  border: 1px solid var(--line); background: var(--ground);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.flagship::before {
  content: ""; position: absolute; right: -18%; bottom: -30%; width: min(70vw, 420px);
  aspect-ratio: 1400 / 782; background: url("../media/brand/shield-xl.png") center / contain no-repeat;
  opacity: .08; transform: rotate(-12deg); pointer-events: none;
}
.flagship > * { position: relative; }
.flagship-kicker { display: block; }
.flagship-name { font-size: 36px; margin: 0; }
.flagship-line { margin: 0; color: var(--ink); max-width: 44ch; font-size: 17px; line-height: 1.5; }
.circuit-cards { display: grid; gap: 12px; margin-top: 14px; }
.circuit-card { border: 1px solid var(--line); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.circuit-card-name { font-size: 20px; margin: 0; }
.circuit-card p { margin: 0; color: var(--muted); font-size: 14px; }
.circuit-card .link-quiet { font-size: 11px; margin-top: 4px; }
.featured-series { margin-top: 14px; border: 1px solid var(--line); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.featured-kicker { display: block; }
.featured-name { font-size: 26px; margin: 0; }
.featured-series p { margin: 0; color: var(--muted); max-width: 48ch; }
.series-also { margin: 22px 0 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.series-also .label { margin-right: 4px; }
.series-also-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.series-also-link:hover { border-bottom-color: var(--red); }
.gear-strip .inner { display: grid; gap: 28px; }
h2.gear-strip-kicker { display: block; margin-bottom: 14px; }
.gear-strip-line { margin: 0 0 22px; max-width: 48ch; }
.gear-strip-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.gear-strip-item { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gear-strip-photo { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.gear-strip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gear-strip-photo.photo--pending { display: flex; align-items: flex-end; padding: 12px; border: 1px solid var(--line); }
.gear-strip-photo.photo--pending .pending-name { font-size: 18px; }
.gear-strip-name { font-weight: 600; }
.gear-strip-side-photo { width: 100%; height: auto; display: block; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
@media (min-width: 600px) {
  .spotlight-title, .league-title { font-size: 44px; }
  .gear-strip-items { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .spotlight .content, .league .content { padding: 96px 48px 88px; min-height: clamp(480px, 74vh, 640px); }
  .spotlight-title, .league-title { font-size: 54px; }
  .team-row { grid-template-columns: 1fr auto; align-items: baseline; column-gap: 32px; padding: 18px 0; }
  .team-name { font-size: 26px; }
  .flagship { padding: 40px 36px 36px; margin-top: 28px; }
  .flagship-name { font-size: 48px; }
  .circuit-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .featured-series { padding: 26px 24px 22px; }
  .featured-name { font-size: 32px; }
  .gear-strip .inner { grid-template-columns: 1fr 380px; gap: 56px; align-items: center; }
}

/* ============================================================
   SECTION 19 — LOCKER partner + wide sponsor tiles, SPONSORSHIP nonprofit band
   ============================================================ */
a.gear-tile { text-decoration: none; color: inherit; display: block; }
.photo--partner .pending-name { opacity: .5; }
.gear-tile--wide {
  background: var(--surface); border: 1px solid var(--line); padding: 32px 26px;
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
  position: relative; overflow: hidden;
}
.gear-tile--wide::before {
  content: ""; position: absolute; right: -18%; bottom: -30%; width: 70%; aspect-ratio: 1400 / 782;
  background: url("../media/brand/shield-xl.png") center / contain no-repeat;
  opacity: .07; transform: rotate(-12deg); pointer-events: none;
}
.gear-tile--wide > * { position: relative; z-index: 1; }
.gear-name--wide { margin: 0; font-size: 28px; }
.gear-wide-line { margin: 0; color: var(--muted); max-width: 44ch; }
.gear-tile--wide .btn { align-self: flex-start; margin-top: 6px; }
@media (min-width: 600px) { .gear-tile--wide { grid-column: span 2; } }
@media (min-width: 900px) { .gear-name--wide { font-size: 34px; } }
.nonprofit-kicker { display: block; margin-bottom: 18px; }
.nonprofit-name { font-size: 30px; margin: 0 0 22px; }
.nonprofit-lines { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.nonprofit-lines li { border-top: 1px solid var(--line); padding: 14px 0; color: var(--ink); line-height: 1.5; }
.nonprofit-lines li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .nonprofit .inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
  .nonprofit-kicker { margin-bottom: 0; }
  .nonprofit-name { font-size: 40px; grid-column: 2; }
  .nonprofit-lines { grid-column: 2; }
}

/* Locker grid: columns never size to a photo's intrinsic width */
.gear-grid { grid-template-columns: minmax(0, 1fr); }
.gear-tile { min-width: 0; }
.gear-tile .photo img, .gear-strip-photo img { max-width: 100%; }
@media (min-width: 600px) { .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gear-name { overflow-wrap: anywhere; }
.photo--pending .pending-name { font-size: 28px; overflow-wrap: anywhere; }
@media (min-width: 900px) { .photo--pending .pending-name { font-size: 32px; } }

/* partner tile: dark logo on a warm panel */
.gear-tile .photo--partner { background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 14%; }
.gear-tile .photo--partner img { width: 100%; height: auto; object-fit: contain; }

/* ============================================================
   SECTION 20 — TEAM ZONE (landing) and TEAM PAGES
   ============================================================ */
h2.zone-kicker, h2.team-kicker, h2.team-hero-kicker { display: block; margin-bottom: 18px; }
h3.zone-group-label, h3.team-sublabel { display: block; margin: 26px 0 12px; color: var(--muted); }
h3.zone-group-label:first-of-type { margin-top: 0; }
.zone-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.zone-card {
  background: var(--ground); border: 1px solid var(--line); padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0;
}
.zone-card-title { font-size: 22px; line-height: 1; }
.zone-card-line { color: var(--muted); font-size: 14px; }
.zone-chip { align-self: flex-start; margin-top: 6px; border: 1px solid var(--line); padding: 4px 8px; font-size: 9px; }
.zone-empty, .register-login { color: var(--muted); max-width: 52ch; }
.register-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 22px 0 16px; }
.register-card {
  border: 1px solid var(--line); padding: 22px 18px; display: flex; flex-direction: column;
  gap: 14px; align-items: flex-start;
}
.register-card-title { font-size: 26px; line-height: 1; }
.event-list { display: flex; flex-direction: column; }
.event-list .event-row:first-child { border-top: 0; padding-top: 0; }
.event-when { color: var(--ink); opacity: .8; }
.event-team, .event-where { color: var(--muted); font-size: 14px; }
.event-row .link-quiet { font-size: 11px; margin-top: 4px; }
.faq-answer { color: var(--muted); margin: 12px 0 0; max-width: 60ch; }
.faq-answer p { margin: 0 0 8px; }
.document-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.document-link:hover { border-bottom-color: var(--red); }
.document-type { margin-left: 8px; font-size: 9px; }
.team-hero { padding-bottom: 44px; }
.team-hero-title { font-size: 40px; margin: 10px 0 12px; }
.team-hero-line { color: var(--muted); margin: 0 0 22px; }
.team-notes-body { max-width: 68ch; }
.team-foot p { margin: 0 0 14px; }
.team-creed { color: var(--ink); }
@media (min-width: 600px) {
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .register-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .register-cards--one { grid-template-columns: minmax(0, 420px); }
  .team-hero-title { font-size: 54px; }
}
@media (min-width: 900px) {
  .zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .event-row { grid-template-columns: 180px 1fr auto; column-gap: 32px; align-items: baseline; }
  .event-when { grid-column: 1; }
  .event-title { grid-column: 2; }
  .event-team, .event-where { grid-column: 2; }
  .event-row .link-quiet { grid-column: 3; justify-self: end; }
  .team-hero-title { font-size: 64px; }
}

/* ============================================================
   SECTION 21 — COACHES
   ============================================================ */
.coaches-head .inner > h1.label { margin-bottom: 10px; }
.coaches-line { margin: 0 0 26px; font-size: 19px; max-width: 48ch; }
.door--wide { max-width: 720px; }
h2.resources-kicker, h2.teams-kicker, h2.finance-kicker { display: block; margin-bottom: 18px; }
.documents-links p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.resource-kind { opacity: .7; }
.resource-note { color: var(--muted); font-size: 14px; flex-basis: 100%; }
.team-name--link { text-decoration: none; color: var(--ink); }
.team-name--link:hover, .team-name--link:focus-visible { color: var(--red-text); }
.zone-line { color: var(--muted); max-width: 52ch; margin: 0 0 20px; }

/* partner logos on Locker tiles and spotlight bands */
.gear-logo { position: absolute; top: 12px; right: 12px; width: 64px; height: auto; opacity: .95; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.gear-tile .photo { position: relative; }
.gear-chip-link { text-decoration: none; }
.gear-chip-link:hover .sponsor-chip, .gear-chip-link:focus-visible .sponsor-chip { color: var(--ink); border-color: var(--ink); }
.spotlight-logo { display: inline-block; background: var(--ink); padding: 10px 14px; margin: 0 0 18px; }
.spotlight-logo img { display: block; height: 56px; width: auto; }
@media (min-width: 900px) { .spotlight-logo img { height: 72px; } .gear-logo { width: 80px; } }

/* ============================================================
   SECTION 22 — FINANCE BAND (Coaches page)
   ============================================================ */
h2.finance-kicker { display: block; margin-bottom: 14px; }
.finance-empty { color: var(--muted); max-width: 52ch; margin: 0 0 12px; }
.finance-asof { color: var(--muted); margin: 0 0 22px; }
.finance-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 26px; }
.finance-filter .field { width: auto; min-width: 260px; max-width: 100%; }
.finance-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.finance-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.finance-table th, .finance-table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.finance-table thead th { border-top: 0; font-family: var(--font-label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.finance-table tfoot th { background: var(--ground); font-weight: 600; }
.finance-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-balance { color: var(--ink); font-weight: 600; }
.finance-team { color: var(--muted); }
.finance-update { border: 1px solid var(--line); padding: 24px 20px; margin: 0 0 32px; max-width: 760px; }
h3.finance-update-kicker { display: block; margin-bottom: 10px; }
.finance-update-intro { margin: 0 0 18px; max-width: 60ch; }
.finance-steps { max-width: none; }
.finance-step-action { display: block; margin-top: 12px; }
.finance-step-action .btn { white-space: nowrap; }
.finance-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.finance-upload-label { flex: 1 0 100%; }
.finance-upload .field { width: auto; max-width: 100%; flex: 1 1 260px; }
.finance-msg { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); max-width: 60ch; }
.finance-msg--ok { color: var(--ink); }
.finance-msg--err { color: var(--ink); border-color: var(--red); }
.finance-update-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.finance-update-foot .link-quiet { font-size: 11px; }
h2.roster-kicker { display: block; margin-bottom: 14px; }
.roster-team-name { font-size: 26px; margin: 0 0 18px; }
.roster-chip { display: inline-block; margin-left: 8px; border: 1px solid var(--line); padding: 2px 6px; font-size: 9px; vertical-align: middle; }
.roster-notdue { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; }
.roster-overdue .finance-balance { color: var(--red-text); }
.finance-table--roster { min-width: 640px; }
.finance-note { color: var(--muted); max-width: 60ch; margin: 0 0 16px; }
.finance-table--people { min-width: 720px; }
.finance-seasons { display: flex; flex-direction: column; gap: 4px; }
.finance-season { color: var(--muted); font-size: 13px; }
.finance-season b { color: var(--ink); font-weight: 600; margin-left: 6px; }
.finance-order { color: var(--muted); font-family: var(--font-label); font-size: 11px; }
.finance-mail { display: block; color: var(--muted); font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--line); width: max-content; max-width: 100%; }
.finance-mail:hover { color: var(--ink); border-bottom-color: var(--red); }
.finance-details { margin-top: 28px; display: grid; gap: 10px; }
.finance-detail { border: 1px solid var(--line); background: var(--ground); }
.finance-detail summary { cursor: pointer; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; list-style: none; }
.finance-detail summary::-webkit-details-marker { display: none; }
.finance-detail summary::before { content: "+"; font-family: var(--font-label); color: var(--muted); margin-right: 4px; }
.finance-detail[open] summary::before { content: "–"; }
.finance-detail-name { font-weight: 600; }
.finance-detail .finance-table-wrap { border: 0; border-top: 1px solid var(--line); }
.finance-table--lines { min-width: 640px; }
@media (min-width: 900px) {
  .finance-table { font-size: 15px; }
  .finance-filter { gap: 14px 18px; }
}

/* the four doors are always the same size */
.doors-grid { grid-auto-rows: 1fr; align-items: stretch; }
.door { height: 100%; min-height: 200px; }
@media (min-width: 900px) { .door { min-height: 240px; } }

/* ---------- uniforms (page-uniforms.php) + coaches field time ---------- */
.uniforms-display { font-size: 40px; margin: 10px 0 12px; }
.uniforms-msg { border: 1px solid var(--line); padding: 12px 14px; margin-top: 18px; max-width: 60ch; }
.uniforms-msg--bad { border-color: var(--red); }
.uniform-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.uniform-card { border: 1px solid var(--line); background: var(--ground); display: flex; flex-direction: column; }
.uniform-card--mine { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.uniform-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.uniform-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uniform-body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.uniform-title { font-size: 24px; margin: 0; }
.uniform-desc { margin: 0; color: var(--muted); }
.uniform-meta { margin: 0; line-height: 1.7; }
.uniform-updated { color: var(--muted); font-size: 13px; margin-left: 8px; }
.sizes-table, .issued-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sizes-table th, .sizes-table td, .issued-table th, .issued-table td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: left; }
.sizes-table thead th, .issued-table thead th { border-top: 0; font-family: var(--font-label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.sizes-table tfoot th { font-weight: 600; }
.issued-num { font-family: var(--font-label); font-size: 12px; }
.issued-date { color: var(--muted); white-space: nowrap; font-size: 13px; }
.issued-table--done td { color: var(--muted); }
.issued-history { margin-top: 10px; }
.issued-history summary { cursor: pointer; list-style: none; }
.issued-history summary::-webkit-details-marker { display: none; }
.issued-history summary::before { content: "+ "; color: var(--red-text); }
.issued-history[open] summary::before { content: "‘2  "; }
.uniform-issued { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.uniform-issued h3.label { margin-bottom: 4px; }
.uniform-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.uniform-form .label { flex: 1 0 100%; }
.uniform-form .field { width: auto; flex: 1 1 140px; padding: 11px 12px; }
.uniform-form .field--short { flex: 0 1 110px; }
.uniform-form textarea.field { flex: 1 0 100%; min-height: 90px; font-family: var(--font-label); font-size: 13px; }
.uniform-form .btn { padding: 12px 18px; }
.uniform-manage { border-top: 1px solid var(--line); padding-top: 12px; }
.uniform-manage summary { cursor: pointer; list-style: none; }
.uniform-manage summary::-webkit-details-marker { display: none; }
.uniform-manage summary::before { content: "+ "; color: var(--red-text); }
.uniform-manage[open] summary::before { content: "‘2  "; }
.uniform-manage .uniform-form { padding: 10px 0 4px; border-bottom: 1px solid var(--line); }
.uniform-manage .uniform-form:last-child { border-bottom: 0; }
.uniforms-door .door { max-width: 760px; }
@media (min-width: 700px) {
  .uniform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uniforms-display { font-size: 54px; }
}
@media (min-width: 1100px) {
  .uniform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- team tools: stay to play, collect, links, faq, board ---------- */
.stp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 0 0 10px; }
.stp-count { font-size: 44px; line-height: 1; }
.stp-of { font-size: 16px; color: var(--muted); margin-left: 8px; font-family: var(--font-label); font-weight: 400; letter-spacing: .1em; }
.stp-status { border: 1px solid var(--line); padding: 6px 10px; }
.stp-status--met { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.stp-status--short { color: var(--red-text); border-color: var(--red); }
.stp-note { margin: 0 0 8px; max-width: 60ch; }
.stp-list { margin: 16px 0; }
.stp-chip { display: inline-block; border: 1px solid var(--line); padding: 3px 8px; margin: 4px 6px 0 0; font-size: 13px; }
.stp-chip .link-button { margin-left: 4px; font-size: 13px; letter-spacing: 0; }
.link-note { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.team-sublabel { display: block; margin: 18px 0 10px; }
.faq-more { margin-top: 14px; }
.faq-more summary { cursor: pointer; list-style: none; }
.faq-more summary::-webkit-details-marker { display: none; }
.faq-more summary::before { content: "+ "; color: var(--red-text); }
.faq-more[open] summary::before { content: "\2212  "; }
.faq-more .faq-item:first-of-type { margin-top: 12px; }
.gc-card { border: 1px solid var(--line); padding: 20px 18px; margin-top: 26px; max-width: 720px; }
.gc-card h3.label { margin-bottom: 10px; }
.team-tool summary .link-quiet { margin-left: auto; font-size: 11px; }
.team-tool .board-request h4.label { margin: 22px 0 8px; }
.team-tool .board-request h4.label:first-child { margin-top: 0; }
.board-request { padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.board-request .entry-content { max-width: 68ch; }
.tool-toggle { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; }
.tool-toggle--quiet { color: var(--muted); font-size: 14px; flex: 0 1 auto; }
.resource-remove { margin-left: 8px; font-size: 10px; color: var(--muted); }
.roster-sizes { color: var(--muted); font-size: 13px; max-width: 18ch; }
.finance-table--todo { min-width: 640px; }
.fee-card-band .finance-update { margin-bottom: 0; }
@media (max-width: 599px) {
  .uniform-form .field--short { flex: 1 1 100px; }
  .finance-table, .issued-table, .sizes-table { font-size: 13px; }
  /* iOS zooms into fields under 16px; typed text reads as typed (review M14) */
  input.field, select.field, textarea.field { font-size: 16px; letter-spacing: .02em; text-transform: none; }
  input.field::placeholder, textarea.field::placeholder { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
}
/* destructive taps get a finger-sized target (review M15) */
.link-button.tap { min-height: 44px; min-width: 44px; padding: 8px 10px; }
.stp-chip .link-button.tap { min-height: 32px; min-width: 32px; padding: 4px 8px; }

/* ---------- sign in (header) + stay-to-play rows ---------- */
.chrome-signin { order: 3; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.signin-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); opacity: .75; font-size: 11px; }
.signin-link:hover, .signin-link:focus-visible { opacity: 1; }
.signin-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.signin-out { opacity: .55; }
@media (max-width: 599px) {
  .chrome-header { position: relative; }
  .chrome-signin { position: absolute; top: 10px; right: 12px; margin-left: 0; }
  .signin-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .signin-out .signin-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.stp-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin: 14px 0 8px; }
.stp-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stp-player { min-width: 0; overflow-wrap: anywhere; }
.stp-row .field { width: auto; padding: 9px 10px; text-align: center; }
.stp-save { padding: 10px 12px; }

/* ---------- phones: finance tables stack into cards (review L6) ---------- */
@media (max-width: 599px) {
  .finance-table-wrap:has(.finance-table--stack) { border: 0; overflow: visible; }
  .finance-table--stack { min-width: 0; display: block; }
  .finance-table--stack thead { display: none; }
  .finance-table--stack tbody, .finance-table--stack tr, .finance-table--stack td, .finance-table--stack tfoot, .finance-table--stack th { display: block; }
  .finance-table--stack tr { border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 10px; background: var(--ground); }
  .finance-table--stack td { border: 0; padding: 4px 0; text-align: left; display: flex; justify-content: space-between; gap: 12px; }
  .finance-table--stack td[data-label]::before { content: attr(data-label); font-family: var(--font-label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; padding-top: 3px; }
  .finance-table--stack td:not([data-label]) { justify-content: flex-end; }
  .finance-table--stack tfoot tr { background: var(--surface); }
  .finance-table--stack tfoot th { border: 0; padding: 2px 0; text-align: left; }
  .finance-table--stack tfoot th:empty { display: none; }
  .finance-table--stack .finance-num { white-space: normal; }
  .finance-table--stack .roster-sizes { max-width: none; }
}

/* ---------- team zone: find your team by age group ---------- */
.zone-lede { color: var(--muted); margin: 0 0 22px; max-width: 52ch; }
.age-card { border: 1px solid var(--line); background: var(--ground); padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.age-card-title { font-size: 26px; line-height: 1; }
.age-card-pages { display: flex; flex-direction: column; }
.age-page { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 44px; }
.age-page-program { color: var(--ink); }
.age-page-line { color: var(--muted); font-size: 14px; }
.age-page-go { color: var(--muted); transition: color .15s ease-out, transform .15s ease-out; }
.age-page:hover .age-page-program, .age-page:focus-visible .age-page-program { color: var(--red-text); }
.age-page:hover .age-page-go { color: var(--red-text); transform: translateX(3px); }
@media (min-width: 600px) { .zone-grid--ages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .zone-grid--ages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.age-card--one { text-decoration: none; color: var(--ink); padding-bottom: 18px; gap: 8px; }
.age-card--one .age-page-go { align-self: flex-end; margin-top: -26px; }
.age-card--one:hover .age-card-title, .age-card--one:focus-visible .age-card-title { color: var(--red-text); }
.age-card--one:hover .age-page-go { color: var(--red-text); transform: translateX(3px); }

/* ---------- tournament list (page-tournaments.php): phone-first cards with inline forms ---------- */
.tourn-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.tourn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tourn-field { display: flex; flex-direction: column; gap: 6px; }
.tourn-field .field { width: 100%; }
.tourn-help { color: var(--muted); font-size: 12px; }
.tourn-form .btn { align-self: flex-start; margin-top: 4px; }
.tourn-cards { display: flex; flex-direction: column; gap: 10px; }
.tourn-card { border: 1px solid var(--line); background: var(--ground); }
.tourn-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; min-height: 44px; }
.tourn-card summary::-webkit-details-marker { display: none; }
.tourn-card summary .event-when { grid-column: 1; }
.tourn-card summary .event-title { grid-column: 1; }
.tourn-card summary .event-where { grid-column: 1; color: var(--muted); font-size: 14px; }
.tourn-card summary .tourn-edit { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--red-text); }
.tourn-card[open] summary .tourn-edit::after { content: " \2212"; }
.tourn-body { padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.tourn-delete { color: var(--muted); }
.tourn-past { margin-top: 22px; }
.tourn-past .tourn-cards { margin-top: 12px; }
@media (min-width: 600px) { .tourn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- team page: sponsor promos ---------- */
.sponsor-promos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.sponsor-promo { border: 1px solid var(--line); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.sponsor-promo-logo img { display: block; max-height: 56px; width: auto; max-width: 100%; }
.sponsor-promo-name { font-size: 22px; }
.sponsor-promo-line { color: var(--ink); }
.sponsor-promo-go { color: var(--muted); margin-top: auto; }
a.sponsor-promo:hover .sponsor-promo-go, a.sponsor-promo:focus-visible .sponsor-promo-go { color: var(--red-text); }
@media (min-width: 600px) { .sponsor-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sponsor-promos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }