/* =============================================================
   SFDA v2 — additive stylesheet
   Loaded AFTER styles.css, which is LOCKED and must not be edited.
   This file only adds what v2 introduces: the announcements cards,
   the Monday pickup blocks, the archive banner, the pending-button
   state and the lightbox. Everything reuses the existing tokens
   (--bg / --surface / --accent / --ink-3 / --r-lg / --ease-out /
   --section-y / --pad-x), Bebas display type, Inter body type and
   the pill button shapes. Mobile-first; holds at 390px and 1440px.
   ============================================================= */

/* =============================================================
   v2.1 — SIX-ITEM NAV (superseded by v2.2 below — SEVEN-ITEM NAV)
   "Bessy Monday Pickup" and "Bharat Trophy 2026" are both long.
   Measured at 0.82rem/0.14em the six items need 916px of bar, and
   with the 160px logo and 2 × var(--pad-x) the header does not fit
   them below ~1220px. v2's 861–1080px tightening was sized for four
   items; six would need ~10.9px type to clear 861px, which is past
   legibility. So the drawer breakpoint moves 860px → 1024px, which
   the run's design tokens explicitly allow, and the desktop bar starts at
   1025px with a fluid gap and type size.

   v2.2 — SEVEN-ITEM NAV
   Adding "Documents" between Outlook and Bharat Trophy 2026 pushed the
   bar back over budget: measured with CDP at 1025px the first nav link
   sits flush against the logo (0px gap) all the way through ~1081px —
   not wrapped, but touching, which counts as not fitting. The gap only
   clears into comfortable double digits from ~1090px, reaching 17px at
   1120px and 31.8px at 1440px. So the breakpoint moves 1024px → 1119px;
   the desktop bar (same fluid gap/type rules, untouched) now starts at
   1120px, and the drawer band below extends to match.
   ============================================================= */
@media (min-width: 1120px) {
  .nav-menu {
    flex-wrap: nowrap;
    gap: clamp(12px, 1.8vw, 30px);
  }
  .nav-link {
    font-size: clamp(0.72rem, 1.05vw, 0.82rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* The drawer, from 1119px down.
   styles.css only opens its drawer at ≤860px and is LOCKED, so the
   861–1119px band is built here from the same rules.

   The height fix is v2's and must not regress: .site-header carries
   `backdrop-filter: blur(0px)`, and any backdrop-filter other than
   `none` makes an element the containing block for its position:fixed
   descendants. The drawer's `inset: 0 0 0 auto` therefore resolved
   against the 80px header rather than the viewport — the panel rendered
   79px tall and `justify-content: center` pushed Home to top:-62px, off
   the top of the screen. Pinning top/height to the viewport fixes it.
   Seven items need more room than six, hence the wider panel and the
   slightly smaller drawer type: at 1.15rem "Bessy Monday Pickup" wrapped
   inside a 320px panel. */
@media (max-width: 1119px) {
  .nav-toggle { display: flex; z-index: 60; }
  .nav-menu {
    position: fixed;
    inset: 0 0 auto auto;
    top: 0;
    bottom: auto;
    height: 100vh;
    height: 100svh;
    width: min(86vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.35rem;
    padding: 96px 28px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(10, 14, 26, 0.97);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-left: 1px solid var(--line);
    transform: translateX(105%);
    transition: transform 0.4s var(--ease-out);
    z-index: 55;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-menu { transform: translateX(0); }
  body.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 15, 0.55);
    z-index: 54;
  }
  /* v2.4 — the drawer lives inside .site-header, whose z-index:50 makes
     it a stacking context, so the drawer's own z-index:55 only counts
     inside the header. The overlay above (54, on the root) therefore
     sat over the whole header, drawer included: every tap on a link hit
     the overlay, and main.js's tap-outside handler closed the drawer
     instead of navigating. Lifting the header above the overlay while
     the drawer is open puts the links back on top. */
  body.nav-open .site-header { z-index: 56; }
  .nav-link {
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}

/* =============================================================
   v2.1 — COMPACTION TOKENS
   The v2 page was a page of gaps. Section rhythm comes down by
   about a third; the hero stops eating a whole screen. Token
   overrides only — nothing renames, no colour moves, no new font.
   ============================================================= */
:root { --section-y: clamp(40px, 4.4vw, 64px); }
@media (max-width: 860px) {
  :root { --section-y: clamp(32px, 8vw, 48px); }
}

/* Hero. The 110px padding-top is clearance for the fixed 92px
   header, not decoration — it stays. Only the floor and the
   bottom padding come down. */
.hero {
  min-height: 70vh;
  min-height: 70svh;
  padding-bottom: clamp(32px, 5vw, 56px);
}
.hero--short { min-height: 52vh; min-height: 52svh; }
@media (max-width: 860px) {
  .hero {
    min-height: 60vh;
    min-height: 60svh;
    padding-bottom: clamp(28px, 6vw, 44px);
  }
  .hero--short { min-height: 46vh; min-height: 46svh; }
}

/* Section headings.
   .display--xl is clamp(2.6rem, 8vw, 6.5rem) — 104px at full width,
   and most of the home page's dead space. It is declared in the LOCKED
   styles.css and used by the four frozen archive pages, so the bare
   class is left alone and the cut is scoped two ways: to `.section`
   (no frozen page has a bare `.section` ancestor — tryouts' xl sits in
   `.legacy`, tnpp's in `.roster-section`, roles' in `.roles-section`),
   and to an explicit `.section__title` the v2.1 pages carry. */
/* The four frozen campaign pages are exempt from the compaction.
   `--section-y` is a :root token and `.hero` is a bare class, so the
   cuts above would have re-flowed /tryouts/, /tnpp/, /roles/ and
   /tnpp-countdown-archive/ as well — measured at 1440px, tryouts alone
   lost 647px of page height. Those pages are frozen, and changing how
   one renders is a defect, not a compaction win. `.archive-banner`
   appears on exactly those four pages and on no other, so it is the
   discriminator. Values restored are styles.css's originals verbatim.
   Wrapped in @supports so a browser without :has() simply gets the
   compacted page rather than a broken one. */
@supports selector(:has(*)) {
  :root:has(.archive-banner) { --section-y: clamp(64px, 9vw, 120px); }
  @media (max-width: 768px) {
    :root:has(.archive-banner) { --section-y: clamp(56px, 11vw, 96px); }
  }
  body:has(.archive-banner) .hero {
    min-height: 88vh;
    min-height: 88svh;
    padding-bottom: clamp(44px, 7vw, 80px);
  }
  body:has(.archive-banner) .hero--short { min-height: 70vh; min-height: 70svh; }
  @media (max-width: 480px) {
    body:has(.archive-banner) .hero {
      min-height: 92vh;
      min-height: 92svh;
      padding-bottom: 60px;
    }
  }
}

.section .display--xl,
.display--xl.section__title { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.section .display--lg,
.display--lg.section__title { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }

/* ---------- Generic v2 section ---------- */
.section {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--bg);
}
.section--tight { padding: clamp(28px, 3vw, 44px) 0; }
/* Last section on a page whose footer already carries its own top padding. */
.section--flush { padding-bottom: 0; }
.section--alt { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.section .display { margin-top: 0.15rem; }
.section .eyebrow { margin-bottom: 0.9rem; }
.eyebrow a { color: var(--accent); }
.eyebrow a:hover { color: var(--accent-2); }

/* A short standfirst under a section heading — the line that stops a
   section reading as a title with a gap under it. */
/* Heading block and its "see everything" link on one row, so the
   link does not cost a whole extra band under the cards. */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}
.section__head > :first-child { min-width: 0; }

.section__lede {
  margin-top: 1rem;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- Announcement cards ---------- */
.acard-grid {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px)  { .acard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .acard-grid { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } }

.acard {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.3rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease-out), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.acard:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 214, 10, 0.35);
  background: var(--surface-2);
}
.acard__date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.acard__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.5rem 0 0.55rem;
}
@media (min-width: 1000px) { .acard__title { font-size: 1.8rem; } }
.acard__summary {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.acard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.tag {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.acard:hover .tag { border-color: var(--line-strong); }
.acard__cta {
  margin-top: auto;
  padding-top: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.acard__cta svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.acard:hover .acard__cta svg { transform: translateX(4px); }

/* ---------- Pending action — visibly inert, never a link ---------- */
.btn--pending {
  background: var(--surface);
  color: var(--ink-3);
  border: 1px dashed var(--line-strong);
  cursor: default;
  box-shadow: none;
}
.btn--pending:hover {
  background: var(--surface);
  transform: none;
  box-shadow: none;
}
.btn--pending:hover svg { transform: none; }
.btn--pending svg { width: 17px; height: 17px; opacity: 0.8; }

/* ---------- Archive banner ----------
   The site header is position: fixed, so this strip — which is the
   first thing in <main> on the three archive pages — has to pad
   itself clear of the header instead of sliding underneath it. */
.archive-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* .site-header is position:fixed and auto-height: 80px at rest on mobile,
     92px from 768px up where .logo-img grows to 160px. Measured, not guessed —
     76px of padding left the text 4px (mobile) to 16px (desktop) under it. */
  padding-top: 96px;
  padding-bottom: 12px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .archive-banner { padding-top: 108px; }
}
.archive-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.archive-banner__inner a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.archive-banner__inner a:hover { color: var(--accent-2); }
.archive-banner__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}

/* ---------- Announcement article ---------- */
/* Left-aligned, not centred: the page's h1 sits at the container's left edge, and
   an auto-centred 760px measure inside a 1160px container pushed the prose 200px
   right of its own headline. */
.ann {
  max-width: 68ch;
  margin: 0;
}

/* Announcement heroes carry no photograph. `.hero--short` reserves 70vh, which on a
   text-only page opens a dead band between the title and the first paragraph.
   Let the block size to its content instead. */
.hero--doc {
  min-height: 0;
  padding-bottom: clamp(22px, 2.6vw, 38px);
}
.ann__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ann__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.ann__body {
  margin-top: 1.5rem;
  max-width: 68ch;
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.ann__body p + p { margin-top: 1.1rem; }
.ann__body strong { color: var(--ink); font-weight: 600; }
.ann__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ann__body a:hover { color: var(--accent-2); }
.ann__body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.5rem 0 0.6rem;
  line-height: 1.15;
}
/* The global reset kills list markers — restore them inside prose. */
.ann__body ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 1.1rem 0;
}
.ann__body ol {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 1.1rem 0;
}
.ann__body li { margin-top: 0.45rem; }
.ann__body li::marker { color: var(--accent); }

.ann__actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Live CTA labels ("Apply to be Safeguarding Officer") are wider than a 390px column;
   let them wrap rather than push the page sideways. */
.ann__actions .btn { max-width: 100%; }
@media (max-width: 560px) {
  .ann__actions .btn { white-space: normal; text-align: center; }
}
.ann__questions {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.ann__questions a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Key dates ---------- */
.keydates {
  margin-top: 1.6rem;
  border-top: 1px solid var(--line-strong);
}
.keydates__row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .keydates__row {
    flex-direction: row;
    align-items: baseline;
    gap: 1.5rem;
  }
  .keydates__label { flex: 0 0 210px; }
}
.keydates__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.keydates__value {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Pickup: standing details ---------- */
.pickup-standing {
  margin-top: 1.6rem;
  border-top: 1px solid var(--line-strong);
}
.pickup-standing__row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .pickup-standing__row {
    flex-direction: row;
    align-items: baseline;
    gap: 1.5rem;
  }
  .pickup-standing__key { flex: 0 0 140px; }
}
.pickup-standing__key {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pickup-standing__val {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
}
.maps-link:hover { color: var(--accent-2); }
.maps-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Pickup: home card ---------- */
.pickup-card {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 860px) {
  .pickup-card { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}
.pickup-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
/* The session photograph is whatever shape the phone took it in — 001 is
   765×1040 portrait. `height: 100%` on an auto-sized grid row resolves to
   the image's own intrinsic height, so a portrait frame drove the card to
   667px against 229px of body copy and made the section the tallest on the
   page. Taking the image out of flow lets the row size to the body, and the
   min-height gives the photograph a landscape rail of its own. */
@media (min-width: 860px) {
  .pickup-card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 250px;
  }
}
.pickup-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.pickup-card__body {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 860px) { .pickup-card__body { padding: 2.25rem 2rem; } }
.pickup-card__facts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pickup-card__facts li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.pickup-card__facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.pickup-card__facts li:first-child { color: var(--ink); font-weight: 600; }
.pickup-card .ann__actions { margin-top: 1.75rem; }

/* ---------- Pickup: session log ---------- */
.log {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.log-entry {
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.log-entry__date {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.log-entry__note {
  margin-top: 0.7rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---------- Photo strip ---------- */
.photo-strip {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 600px)  { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .photo-strip { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } }
.photo-strip__item { display: block; }
.photo-strip__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
  transition: transform 0.4s var(--ease-out), border-color 0.25s var(--ease);
}
.photo-strip__btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 214, 10, 0.4);
}
.photo-strip__btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 56px);
  background: rgba(5, 8, 15, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9);
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lightbox__close:hover { background: var(--accent); color: var(--bg); }

/* ---------- Shared empty / fallback notice ---------- */
/* Empty states never reserve height — they collapse to their content. */
.empty-note {
  margin-top: 1.1rem;
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink-3);
}
.empty-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.empty-note a:hover { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  .acard, .photo-strip__btn { transition: none; }
  .acard:hover, .photo-strip__btn:hover { transform: none; }
}

/* =============================================================
   v2.1 — HOME HERO (photo 070)
   Focal point 50% / 45%, biased up onto the band of faces. The
   squad's faces run roughly 35–55% of frame height. A 3:2 source
   in a portrait viewport crops the sides, so at 390px the centre
   of the group and the trophy survive and the outermost players
   do not — inherent to the crop, not to the focal point.
   ============================================================= */
.hero--home .hero__bg img { object-position: 50% 45%; }
@media (max-width: 600px) {
  /* Note: at 390px a 3:2 source in a portrait hero box scales to fit the HEIGHT, so the full
     image height is always visible and only the sides are cropped. object-position's Y has no
     effect here — the sponsor backdrop band cannot be moved out of the text zone, which is why
     the scrim below carries the legibility on mobile. Only the X value does anything. */
  .hero--home .hero__bg img { object-position: 50% 42%; }
}
/* An extra floor of darkness at the bottom so the headline holds
   over the pale stadium seating in the upper half of the frame. */
.hero--home .hero__overlay {
  background:
    linear-gradient(180deg, rgba(10,14,26,0.5) 0%, rgba(10,14,26,0.22) 34%, rgba(10,14,26,0.96) 100%),
    linear-gradient(90deg, rgba(10,14,26,0.72) 0%, rgba(10,14,26,0.3) 62%, rgba(10,14,26,0) 100%);
}
/* .display--xxl is 152px at 1440px, which on its own is a third of
   the hero. Scoped to the home hero only — the bare class is locked
   and the frozen pages keep it. */
.hero--home .display--xxl { font-size: clamp(2.6rem, 7.4vw, 6rem); }
.hero--home .hero__subhead { margin-top: 1rem; max-width: 60ch; }
.hero--home .hero__actions { margin-top: 1.5rem; }

/* Narrow screens. A 3:2 source in a portrait viewport crops the sides,
   so the copy sits over the middle of the group with nowhere clean to
   put it — the scrim does the work instead of the composition.
   And "Bessy Monday Pickup" is far too long for styles.css's
   `.hero__actions .btn { flex: 1 }` at ≤480px: the two pills overlapped.
   Stack them. */
@media (max-width: 700px) {
  .hero--home .hero__overlay {
    background: linear-gradient(180deg,
      rgba(10,14,26,0.58) 0%,
      rgba(10,14,26,0.44) 18%,
      rgba(10,14,26,0.86) 38%,
      rgba(10,14,26,0.97) 100%);
  }
  .hero--home .eyebrow { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); }
}
@media (max-width: 560px) {
  .hero--home .hero__actions { flex-direction: column; align-items: stretch; }
  .hero--home .hero__actions .btn { flex: 0 0 auto; width: 100%; justify-content: center; }
}

/* =============================================================
   v2.1 — PHOTO STRIPS (home, archive landing)
   Four thumbs in a row, linking into the gallery. Every image
   carries width/height so nothing reflows as the lazy loads land.
   ============================================================= */
.strip-head {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.strip-head__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.link-more svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.link-more:hover { color: var(--accent-2); }
.link-more:hover svg { transform: translateX(4px); }

.photo-strip { margin-top: 0.85rem; }
.photo-strip--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .photo-strip--4 { grid-template-columns: repeat(4, 1fr); } }
.photo-strip__link {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  transition: transform 0.4s var(--ease-out), border-color 0.25s var(--ease);
}
.photo-strip__link:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 214, 10, 0.4);
}
.photo-strip__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* =============================================================
   v2.1 — GALLERY INDEX
   ============================================================= */
/* The track count follows the item count. A 380px floor means three sets
   land 3-up on desktop, two go half and half, and one takes the full width
   — where the :only-child rule below turns it into a landscape feature
   rather than a lone third of a row that reads as two missing cards. */
.gset-grid {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 1rem;
}
@media (min-width: 1000px) { .gset-grid { gap: 1.15rem; } }

/* 760px is where the grid stops being able to hold two 380px tracks, so it
   is also where a single set stops being a card and becomes the banner. */
@media (min-width: 760px) {
  .gset-card:only-child { flex-direction: row; align-items: stretch; }
  .gset-card:only-child .gset-card__media {
    position: relative;
    flex: 0 0 52%;
    min-height: 300px;
  }
  .gset-card:only-child .gset-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .gset-card:only-child .gset-card__body {
    justify-content: center;
    padding: 2.25rem 2.5rem;
  }
  .gset-card:only-child .gset-card__title { font-size: clamp(2rem, 3vw, 2.8rem); }
}
.gset-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.gset-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 214, 10, 0.35);
  background: var(--surface-2);
}
.gset-card__media { background: var(--surface-2); }
.gset-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
}
.gset-card__body {
  padding: 1.25rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gset-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.gset-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gset-card__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: 0 0 4px; }
.gset-card__desc {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 48ch;
}
.gset-card__count {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gset-card .acard__cta { margin-top: 1.1rem; padding-top: 0; }
.gset-card:hover .acard__cta svg { transform: translateX(4px); }

/* =============================================================
   v2.1 — GALLERY GRID
   Masonry by CSS columns: no JS, no layout pass, and because every
   <img> carries width/height the column heights are known before a
   single byte of image arrives. 131 thumbs, all lazy.
   ============================================================= */
.gal-grid { margin-top: 1.5rem; }
.gal-grid__list {
  columns: 2;
  column-gap: 8px;
}
@media (min-width: 640px)  { .gal-grid__list { columns: 3; column-gap: 10px; } }
@media (min-width: 1000px) { .gal-grid__list { columns: 4; column-gap: 12px; } }
@media (min-width: 1400px) { .gal-grid__list { columns: 5; } }
.gal-item {
  break-inside: avoid;
  margin: 0 0 8px;
}
@media (min-width: 640px)  { .gal-item { margin-bottom: 10px; } }
@media (min-width: 1000px) { .gal-item { margin-bottom: 12px; } }
.gal-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
  transition: transform 0.4s var(--ease-out), border-color 0.25s var(--ease);
}
.gal-btn:hover,
.gal-btn:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 214, 10, 0.45);
}
.gal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gal-btn img {
  display: block;
  width: 100%;
  height: auto;
}
.gal-count {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =============================================================
   v2.1 — GALLERY LIGHTBOX (/assets/js/gallery.js)
   Separate from the one-shot pickup lightbox in data.js: this one
   has prev/next, keyboard control, a focus trap and a full-size link.
   ============================================================= */
.glb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: rgba(5, 8, 15, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.glb[hidden] { display: none; }
.glb__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}
.glb__count {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.glb__actions { display: flex; align-items: center; gap: 10px; }
.glb__full {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
}
.glb__full:hover { border-color: var(--accent); background: rgba(255, 214, 10, 0.08); }
.glb__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5vw, 28px);
  min-height: 0;
}
.glb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9);
}
.glb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.glb__btn:hover { background: var(--accent); color: var(--bg); }
.glb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.glb__btn svg { width: 20px; height: 20px; }
.glb__btn[disabled] { opacity: 0.3; cursor: default; }
.glb__btn[disabled]:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.glb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.glb__nav--prev { left: clamp(8px, 2vw, 24px); }
.glb__nav--prev svg { transform: rotate(180deg); }
.glb__nav--next { right: clamp(8px, 2vw, 24px); }

@media (prefers-reduced-motion: reduce) {
  .photo-strip__link, .gset-card, .gal-btn { transition: none; }
  .photo-strip__link:hover, .gset-card:hover, .gal-btn:hover { transform: none; }
}

/* --- Header legibility over photographic heroes ------------------------------------------
   The site header is position:fixed and fully transparent, so it sits directly on the hero
   photograph. v2.1 swapped the heroes for real match photographs, and two of them are bright
   exactly where the nav sits: the home hero's sponsor backdrop and the archive hero's stadium
   concrete. White nav text was washing out against both — "Bessy Monday Pickup" ran straight
   across a white sponsor panel. `.hero__overlay`'s own top stop is only 0.45 and fades to 0.2
   by 40%, which is nowhere near enough.
   A short scrim across the top of every hero keeps the nav legible whatever photograph is used
   here later, rather than tuning object-position per image and hoping the next one behaves. */
.hero .hero__overlay::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  background: linear-gradient(180deg,
    rgba(10, 14, 26, 0.88) 0%,
    rgba(10, 14, 26, 0.62) 42%,
    rgba(10, 14, 26, 0) 100%);
  pointer-events: none;
}
@media (max-width: 860px) {
  /* The mobile header is shorter, but the hero eyebrow sits just below it at ~123px and was
     landing on the white sponsor panels, so the scrim runs further down than the header alone
     would need. */
  .hero .hero__overlay::before {
    height: 260px;
    background: linear-gradient(180deg,
      rgba(10, 14, 26, 0.94) 0%,
      rgba(10, 14, 26, 0.86) 38%,
      rgba(10, 14, 26, 0.6) 66%,
      rgba(10, 14, 26, 0) 100%);
  }
}