/* =============================================
   WORCESTER PARK FC — ENHANCED STYLESHEET
   Colours: Navy #1B2F6E | Gold var(--gold) | White
   Fonts: Anton (display) + Archivo (body)
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #1B2F6E;
  --navy-dark:  #111f4d;
  --navy-deep:  #0a1230;
  --navy-mid:   #16285c;
  /* Royal is the 26/27 shirt blue — it ties the site to the kit. */
  --royal:      #2b5fd9;
  --royal-deep: #1d43a8;
  --gold:       #C8A84B;
  --gold-light: #e6cd80;
  --gold-bright:#ffe39a;
  --white:      #FFFFFF;
  --off-white:  #F4F5F8;
  --text:       #14162a;
  --text-muted: #5a6080;
  --border:     rgba(var(--navy-rgb),0.12);

  /* Radii: one step per surface size, so cards never disagree. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --radius: var(--r-sm);

  /* Shadows carry an offset and a soft blur — never a flat halo. */
  --sh-sm:   0 2px 6px rgba(var(--navy-deep-rgb),0.06), 0 1px 2px rgba(var(--navy-deep-rgb),0.04);
  --sh-md:   0 10px 24px rgba(var(--navy-deep-rgb),0.10), 0 3px 8px rgba(var(--navy-deep-rgb),0.06);
  --sh-lg:   0 22px 48px rgba(var(--navy-deep-rgb),0.16), 0 8px 16px rgba(var(--navy-deep-rgb),0.08);
  --sh-dark: 0 24px 56px rgba(0,0,0,0.42), 0 8px 18px rgba(0,0,0,0.28);
  --sh-gold: 0 12px 30px rgba(var(--gold-rgb),0.32), 0 4px 10px rgba(var(--gold-rgb),0.20);

  /* Motion: fast feedback, deliberate arrivals, one shared curve. */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:     0.14s var(--ease-out);
  --t-base:     0.24s var(--ease-out);
  --t-slow:     0.42s var(--ease-out);
  --transition: var(--t-base);

  /* The kit's chevron angle, reused by every flash accent. */
  --flash: 18deg;

  /* RGB triplets so translucent brand colours are themeable too. Without
     these, switching team only repaints the few values that already went
     through var(--gold) — every rgba() stayed the first team's gold. */
  --gold-rgb:        200, 168, 75;
  --gold-light-rgb:  230, 205, 128;
  --gold-bright-rgb: 255, 227, 154;
  --navy-rgb:        27, 47, 110;
  --navy-deep-rgb:   10, 18, 48;
  --royal-rgb:       43, 95, 217;

  /* Brand gold is a 2.3:1 text colour on white — fine as a graphic accent,
     unreadable as a label. This is the darkened version used wherever the
     accent carries actual words on a light surface. */
  --gold-on-light: #7A611A;

  /* ── SEMANTIC THEME LAYER ──────────────────
     Components reference these, never the raw brand colours, so a team switch
     is a token swap rather than a per-component override. The First Team
     values below are simply aliases of the club's existing palette above —
     nothing about the current Worcester Park FC appearance changes. */
  --surface-1:     var(--white);        /* about, contact, sponsors        */
  --surface-2:     var(--off-white);    /* squad, shop                     */
  --surface-card:  var(--white);        /* product, player, sponsor cards  */
  --surface-card-2:var(--off-white);    /* stat cards, contact form        */
  --surface-input: var(--white);

  --ink:           var(--text);         /* body copy on light surfaces     */
  --ink-strong:    var(--navy);         /* headings and figures            */
  --ink-muted:     var(--text-muted);
  --line:          var(--border);

  --accent:        var(--gold);         /* fills, rules, glows             */
  --accent-soft:   var(--gold-light);
  --accent-bright: var(--gold-bright);
  --accent-ink:    var(--navy-deep);    /* text sitting on an accent fill  */
  --accent-text:   var(--gold-on-light);/* accent used as words on light   */
  --card-sheen:    rgba(255,255,255,0.7); /* inner top highlight on cards  */
  --num-hover:     var(--royal);        /* squad number on hover           */
}

/* =============================================
   RESERVES THEME
   Same design system, yellow-led. Only the tokens above are reassigned: the
   reserves run yellow on navy, so surfaces take the kit's dark blue and the
   accent becomes the shirt yellow. Structure, type, spacing and every
   component rule stay exactly as the first team's.
   ============================================= */
[data-team="reserves"] {
  /* The reserves' club colour is #E5CB36 — a warm golden yellow (hue 51).
     Every tone below is that same hue at a different lightness, so the whole
     reserves side of the site reads as one colour rather than a yellow accent
     dropped onto a differently-hued base. Text on the accent is BLACK
     (10.8:1); white on it fails at 1.6:1, so white type only ever sits on the
     dark tones. */
  --gold:        #E5CB36;
  --gold-light:  #ECDA6E;
  --gold-bright: #F0E5A8;
  --gold-rgb:        229, 203, 54;
  --gold-light-rgb:  236, 218, 110;
  --gold-bright-rgb: 240, 229, 168;

  /* The dark side is the same golden hue taken almost to black, so even the
     dark sections belong to the colour. White on --navy holds 12.9:1. */
  --navy:       #393209;
  --navy-dark:  #2A2506;
  --navy-deep:  #1D1904;
  --navy-mid:   #483F0D;
  --navy-rgb:      57, 50, 9;
  --navy-deep-rgb: 29, 25, 4;
  --royal:      #A08C18;
  --royal-rgb:  160, 140, 24;

  /* Light sections ARE the club colour — one flat #E5CB36, with no darker or
     paler variants of it anywhere (Will, 2026-08-21). Both surface slots hold
     the same value: no two light sections sit next to each other (they are
     always separated by a dark or green band), so nothing needs a deeper cut
     to stay legible. Cards are plain white on top. Ink on #E5CB36 is 10.8:1. */
  --surface-1:     #E5CB36;
  --surface-2:     #E5CB36;
  --surface-card:  #FFFFFF;
  --surface-card-2:#FFFFFF;
  --surface-input: #FFFFFF;

  /* Text is strong near-black or pure white only — no muted in-betweens. */
  --ink:           #17150A;
  --ink-strong:    #17150A;
  --ink-muted:     #2A250C;
  --line:          rgba(29, 25, 4, 0.30);

  --accent-text:   #17150A;
  --gold-on-light: #17150A;
  --card-sheen:    rgba(255,255,255,0.85);
  --num-hover:     #1D1904;
  --sh-gold: 0 12px 30px rgba(29,25,4,0.30), 0 4px 10px rgba(29,25,4,0.18);
}

/* With the surfaces at full #E5CB36, anything painted in the accent would
   vanish yellow-on-yellow. On the light sections those elements flip to the
   dark ink instead — the inverse of the first team's gold-on-navy. */
[data-team="reserves"] .btn--primary {
  background: var(--navy-deep); color: var(--gold);
  box-shadow: 0 8px 24px rgba(29,25,4,0.30);
}
[data-team="reserves"] .btn--primary::before { background: var(--navy-mid); }
[data-team="reserves"] .btn--primary:hover { box-shadow: 0 14px 36px rgba(29,25,4,0.40); }
[data-team="reserves"] .section-label::before { background: var(--accent-text); }
[data-team="reserves"] .shop-filter.is-active {
  background: var(--navy-deep); color: var(--gold); border-color: var(--navy-deep);
}
[data-team="reserves"] .shop-filter:hover { border-color: var(--navy-deep); }
[data-team="reserves"] .stat-card::before { background: var(--navy-deep); }
[data-team="reserves"] .squad-group__count { background: var(--navy-deep); color: var(--gold); }
[data-team="reserves"] .player-card:hover .player-card__number { color: var(--num-hover); }
/* Cards are white on white here (no cream tint left), so the group-head hover
   reads as a faint darkening rather than another yellow. Staff cards keep
   their definition from the existing dark hairline border. */
[data-team="reserves"] .squad-group__head:hover { background: rgba(29,25,4,0.05); }

/* The only per-component exceptions: two surfaces that must stay white in both
   themes because of what sits on them. Product shots are photographed on white,
   and several sponsor logos ship with a white background baked into the file —
   a dark tile puts a box around them. Butler's is the reverse: their mark is
   white-on-transparent, so that one tile stays dark in both themes. */
.shop-card__media,
.sponsor-card:not(.sponsor-card--dark) { background: #fff; }
.sponsor-card--dark { background: var(--navy); }

/* ── Theme transition ──────────────────────
   Colour properties only, applied for the length of the switch and then
   removed, so the site is not carrying a transition on every element for the
   rest of the session. */
html.is-theming,
html.is-theming *,
html.is-theming *::before,
html.is-theming *::after {
  transition: background-color 0.45s var(--ease-out),
              background-image 0.45s var(--ease-out),
              color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out),
              fill 0.45s var(--ease-out),
              opacity 0.45s var(--ease-out) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after {
    transition: none !important;
  }
}

/* Only one team's variant of a block is ever in the document flow. */
[data-team="first"]    [data-team-only="reserves"],
[data-team="reserves"] [data-team-only="first"] { display: none !important; }

/* Sponsors and all first-team match data are first-team only. The reserves
   have no published fixture list or results, and their own section in the
   league-table block says so. The shop runs in both themes — reserves get the
   away-kit launch panel instead of the product grid. */
[data-team="reserves"] #sponsors,
[data-team="reserves"] #results,
[data-team="reserves"] #matchday,
[data-team="reserves"] #nextFixture { display: none !important; }

/* Numerals are data — never let them wobble between rows. */
.league-table__table td, .scoreboard__score, .stat-card__num,
.player-card__number, .next-fixture__day, .match-card__day, .shop-card__price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

html { scroll-behavior: smooth; }
/* Mid-section anchor: clear the fixed nav bar when jumped to. */
#upcoming { scroll-margin-top: 96px; }

body {
  font-family: 'Archivo', sans-serif;
  color: var(--ink);
  background: var(--surface-1);
  overflow-x: hidden;
  cursor: auto;
}

::selection { background: var(--gold); color: var(--navy-deep); }


/* ── SCROLL PROGRESS ───────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 9998; box-shadow: 0 0 12px rgba(var(--gold-rgb),0.6);
}

/* ── UTILITIES ─────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }

.section-label {
  font: 700 0.8rem/1 'Archivo', sans-serif;
  letter-spacing: 0.28em; text-transform: uppercase;
  /* Kickers are read, not decoration, so on light surfaces they use the
     darkened accent: brand gold itself only manages 2.3:1 on white. */
  color: var(--gold-on-light); margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
/* The rule beside it is graphic, so it keeps the full-strength accent. */
.section-label::before { content: ''; width: 28px; height: 2px; background: var(--gold); display: inline-block; }
/* On dark sections the light gold already clears 8:1, so it stays. */
.section-label--light { color: var(--gold-light); }

.section-title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 0.95;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--ink-strong); margin-bottom: 2.5rem;
}
.section-title--light { color: var(--white); }

/* buttons */
.btn {
  position: relative; display: inline-block;
  padding: 0.95rem 2.2rem; border-radius: var(--radius);
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), color var(--transition);
  z-index: 1;
}
.btn span { position: relative; z-index: 2; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: 1; transform: translateY(100%); transition: transform 0.4s var(--ease-out); }
.btn:hover { transform: translateY(-3px); }
.btn--primary { background: var(--gold); color: var(--navy-deep); box-shadow: 0 8px 24px rgba(var(--gold-rgb),0.28); }
.btn--primary::before { background: var(--gold-bright); }
.btn--primary:hover { box-shadow: 0 14px 36px rgba(var(--gold-rgb),0.45); }
.btn--primary:hover::before { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.4); padding: calc(0.95rem - 2px) calc(2.2rem - 2px); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--navy-deep); border-color: var(--white); }
.btn--ghost:hover::before { transform: translateY(0); }
.btn--full { width: 100%; text-align: center; }

.hero__story-link {
  color: var(--gold-light);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--transition), transform var(--transition);
  margin-top: 1.5rem;
}
.hero__story-link:hover {
  color: var(--gold-bright);
  transform: translateX(4px);
}


/* reveal-on-scroll — hiding is gated on html.js so content is only ever
   hidden when the script that reveals it is confirmed to be running. */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── NAV ───────────────────────────────────── */
/* The bar condenses on scroll by scaling its brand mark, not by animating
   padding — same read, no layout pass on every scroll frame. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.05rem 0;
  transition: background var(--t-base), box-shadow var(--t-base), backdrop-filter var(--t-base);
}
.nav.is-scrolled {
  background: rgba(var(--navy-deep-rgb),0.82);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.2);
}
/* A hairline of club gold that only exists once you've left the hero. */
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.5), transparent);
  opacity: 0; transition: opacity var(--t-base);
}
.nav.is-scrolled::after { opacity: 1; }
.nav__inner { max-width: 1180px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; }
.nav__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }

/* Social tiles — each in its network's own colour. Lives in the footer. */
.footer__social { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; }
/* Partner marks under the social tiles. Supplied logos are a mix of dark-on-
   white and white-on-transparent, so each sits on its own small white chip
   rather than being dropped straight onto the navy. */
.footer__sponsors-label {
  margin-top: 1.6rem; margin-bottom: 0.7rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.footer__sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.footer__sponsor {
  display: grid; place-items: center;
  width: 62px; height: 34px; padding: 4px 6px;
  background: #fff; border-radius: 6px;
  text-decoration: none;
  transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}
.footer__sponsor img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Butler's mark is white-on-transparent, so its chip is navy rather than
   inverting artwork that was drawn to sit on a dark ground. */
.footer__sponsor--dark { background: var(--navy); }
.footer__sponsor--mind {
  width: auto; padding: 0 0.85rem;
  background: #fff; color: var(--navy-deep);
  font-family: 'Anton', sans-serif; font-size: 0.95rem; letter-spacing: 0.03em;
}
.footer__sponsor:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.35); }
.footer__sponsor:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.social-link {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: #fff;
  transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}
.social-link svg { width: 20px; height: 20px; display: block; }
.social-link--x { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,0.22); }
.social-link--ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-link--fb { background: #1877F2; }
.social-link:hover { transform: translateY(-3px); filter: brightness(1.12); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
/* The crest is a shield, not a roundel — never crop or ring it. */
.nav__logo { width: 46px; height: 46px; object-fit: contain; transition: transform var(--t-base); transform-origin: left center; }
.nav.is-scrolled .nav__logo { transform: scale(0.84); }
.nav__brand:hover .nav__logo { transform: rotate(-8deg) scale(1.08); }
.nav.is-scrolled .nav__brand:hover .nav__logo { transform: rotate(-8deg) scale(0.92); }
.nav__name { font-family: 'Anton', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; color: var(--white); text-transform: uppercase; }
.nav__name strong { color: var(--gold); }
.nav__links { display: flex; align-items: center; gap: 1.45rem; }
.nav__links a { position: relative; text-decoration: none; color: rgba(255,255,255,0.82); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em; transition: color var(--t-fast); }
/* Underline grows on scaleX so it never triggers layout, and it leans to the
   kit's chevron angle so even the nav carries the flash. */
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-base);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--white); }
.nav__links a:focus-visible, .nav__mobile a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; border-radius: 3px; }
/* -- Nav dropdown (Fixtures) ---------------- */
.navdrop { position: relative; display: flex; align-items: center; }
.navdrop__btn {
  display: inline-flex; align-items: center; gap: 0.32rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; color: rgba(255,255,255,0.82);
  font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em;
  transition: color var(--t-fast);
}
.navdrop__btn:hover, .navdrop.is-open .navdrop__btn { color: var(--white); }
.navdrop__btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; border-radius: 3px; }
/* Same growing underline as the sibling links, so the button reads as one of them. */
.navdrop__btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-base);
}
.navdrop__btn:hover::after, .navdrop.is-open .navdrop__btn::after,
.navdrop.is-active .navdrop__btn::after { transform: scaleX(1); }
.navdrop.is-active .navdrop__btn { color: var(--white); }
.navdrop__chev { width: 14px; height: 14px; transition: transform var(--t-base); }
.navdrop.is-open .navdrop__chev { transform: rotate(180deg); }
.navdrop__menu {
  /* The links row is only ~19px tall inside an 80px bar, so the panel is
     pushed clear of the header edge rather than starting inside it. */
  position: absolute; top: calc(100% + 50px); left: 50%; transform: translateX(-50%);
  min-width: 168px; padding: 0.5rem;
  display: flex; flex-direction: column;
  background: var(--navy-deep);
  border: 1px solid rgba(var(--gold-rgb),0.28); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  z-index: 1001;
}
.navdrop__menu[hidden] { display: none; }
/* A small pointer tying the panel to its button. */
.navdrop__menu::before {
  content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px;
  margin-left: -4.5px; transform: rotate(45deg);
  background: var(--navy-deep);
  border-left: 1px solid rgba(var(--gold-rgb),0.28);
  border-top: 1px solid rgba(var(--gold-rgb),0.28);
}
.nav__links .navdrop__menu a {
  padding: 0.6rem 0.8rem; border-radius: 8px;
  font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.82);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__links .navdrop__menu a::after { display: none; }
.nav__links .navdrop__menu a:hover { background: rgba(var(--gold-rgb),0.16); color: var(--white); }
html.js .navdrop.is-open .navdrop__menu { animation: navdropIn 0.2s var(--ease-out) both; }
@keyframes navdropIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html.js .navdrop.is-open .navdrop__menu { animation: none; }
  .navdrop__chev { transition: none; }
}

.nav__cta { background: var(--gold); color: var(--navy-deep) !important; padding: 0.55rem 1.3rem; border-radius: var(--radius); font-weight: 700 !important; transition: transform var(--transition), box-shadow var(--transition); }
.nav__cta::after { display: none; }
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--gold-rgb),0.4); }

/* Team toggle in nav */
.nav__team-toggle {
  display: flex;
  gap: 0.3rem;
  background: rgba(255,255,255,0.08);
  padding: 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--gold-rgb),0.25);
}
.nav__team-toggle--mobile { display: none; }
.nav__team-btn {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: none;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.nav__team-btn:hover {
  color: var(--white);
  background: rgba(255,255,255,0.05);
}
.nav__team-btn.is-active {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 4px 12px rgba(var(--gold-rgb),0.3);
}
.nav__team-btn.is-active:hover {
  box-shadow: 0 6px 16px rgba(var(--gold-rgb),0.4);
  transform: translateY(-2px);
}
.nav__team-short { display: none; }

@media (max-width: 860px) {
  .nav__team-toggle { display: none; }
  /* In the burger menu the toggle becomes a full pill, same look as the hero's. */
  .nav__team-toggle--mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: min(320px, 84vw);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(var(--gold-rgb),0.35);
    border-radius: var(--r-lg);
    padding: 0.45rem;
    margin-top: 1.4rem;
  }
  .nav__team-toggle--mobile .nav__team-btn {
    padding: 0.95rem 0.6rem;
    font-size: 0.85rem;
    text-align: center;
    border-radius: var(--r-md);
  }
  .nav__team-toggle--mobile .nav__team-btn.is-active {
    background: var(--gold);
    color: var(--navy-deep);
  }
}

@media (max-width: 920px) {
  .nav__team-label { display: none; }
  .nav__team-short {
    display: inline;
  }
}
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 1001; }
.nav__burger span { width: 26px; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.menu-open .nav__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Sits just under the nav bar (999 vs 1000) so the brand and the burger's
   close state stay visible and tappable above the open menu. */
/* safe center: on short phones the list is taller than the screen, and plain
   centring would push the first item up behind the fixed bar, unreachable. */
.nav__mobile { position: fixed; inset: 0; background: var(--navy-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 1.15rem; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 999; overflow-y: auto; padding: 5.5rem 1.5rem 2.5rem; }
.nav__mobile a { color: var(--white); font-family: 'Anton', sans-serif; font-size: 1.72rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0; transform: translateY(20px); transition: color var(--transition); }
/* Fixtures group inside the burger menu: same disclosure, sized for touch. */
.navdrop--mobile { flex-direction: column; align-items: center; gap: 0.9rem; opacity: 0; transform: translateY(20px); }
.navdrop--mobile .navdrop__btn {
  font-family: 'Anton', sans-serif; font-size: 1.72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); gap: 0.5rem;
}
.navdrop--mobile .navdrop__btn::after { display: none; }
.navdrop--mobile .navdrop__chev { width: 20px; height: 20px; color: var(--gold); }
.navdrop--mobile .navdrop__menu {
  position: static; transform: none; min-width: 0; padding: 0.7rem 1.6rem;
  gap: 0.7rem; align-items: center; box-shadow: none;
  background: rgba(255,255,255,0.05); border-color: rgba(var(--gold-rgb),0.22);
}
.navdrop--mobile .navdrop__menu::before { display: none; }
.navdrop--mobile .navdrop__menu a { font-size: 1.15rem; opacity: 1; transform: none; color: rgba(255,255,255,0.85); }
.navdrop--mobile .navdrop__menu a:hover { color: var(--gold); }
html.js .navdrop--mobile.is-open .navdrop__menu { animation: none; }
.nav__mobile a:hover { color: var(--gold); }
/* While the menu is open the page behind it must not scroll. */
body.menu-open { overflow: hidden; }
.menu-open .nav__mobile { opacity: 1; visibility: visible; }
.menu-open .nav__mobile > a,
.menu-open .nav__mobile > .navdrop { animation: mobileIn 0.5s var(--ease-out) forwards; }
.menu-open .nav__mobile > :nth-child(1) { animation-delay: 0.08s; }
.menu-open .nav__mobile > :nth-child(2) { animation-delay: 0.13s; }
.menu-open .nav__mobile > :nth-child(3) { animation-delay: 0.18s; }
.menu-open .nav__mobile > :nth-child(4) { animation-delay: 0.23s; }
.menu-open .nav__mobile > :nth-child(5) { animation-delay: 0.28s; }
.menu-open .nav__mobile > :nth-child(6) { animation-delay: 0.33s; }
.menu-open .nav__mobile > :nth-child(7) { animation-delay: 0.38s; }
.menu-open .nav__mobile > :nth-child(8) { animation-delay: 0.43s; }
.menu-open .nav__mobile > :nth-child(9) { animation-delay: 0.48s; }
.menu-open .nav__mobile > :nth-child(10) { animation-delay: 0.53s; }
@keyframes mobileIn { to { opacity: 1; transform: none; } }

/* ── HERO ──────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0 2rem; background: var(--navy-deep); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* The CSS pitch is now just the night sky the 3D pitch sits under — the mown
   stripes and markings are drawn in WebGL, so this stops competing with them. */
.hero__pitch {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 118%, var(--navy-mid) 0%, var(--navy-deep) 68%);
}
/* Floodlight spill from the far corners, above the pitch, below the text. */
.hero__pitch::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 30% at 18% 34%, rgba(var(--gold-bright-rgb),0.14), transparent 70%),
    radial-gradient(ellipse 42% 30% at 82% 34%, rgba(var(--gold-bright-rgb),0.12), transparent 70%);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.hero__glow--1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(var(--gold-rgb),0.5), transparent 70%); top: -120px; right: -80px; animation: floatGlow 9s ease-in-out infinite; }
.hero__glow--2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(var(--royal-rgb),0.55), transparent 70%); bottom: -140px; left: -100px; animation: floatGlow 11s ease-in-out infinite reverse; }
/* Vignette keeps the wordmark legible over the brightest part of the pitch. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(var(--navy-deep-rgb),0.82) 0%, rgba(var(--navy-deep-rgb),0.45) 42%, transparent 68%);
}
@media (max-width: 900px) {
  .hero::after { background: linear-gradient(180deg, rgba(var(--navy-deep-rgb),0.5) 0%, rgba(var(--navy-deep-rgb),0.15) 40%, rgba(var(--navy-deep-rgb),0.8) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hero__glow { animation: none; } }
@keyframes floatGlow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-30px) scale(1.12); } }
.hero__noise { position: absolute; inset: 0; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }

.hero__giant { position: absolute; bottom: -3vw; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; width: 100%; text-align: center; }
.hero__giant span { font-family: 'Anton', sans-serif; font-size: clamp(7rem, 26vw, 24rem); line-height: 0.8; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.06); text-stroke: 2px rgba(255,255,255,0.06); user-select: none; }

.hero__content { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; width: 100%; padding-top: 5rem; }
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; color: var(--gold-light); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.82rem; margin-bottom: 1.6rem; }
.hero__eyebrow-line { width: 50px; height: 2px; background: var(--gold); }
.hero__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(3.4rem, 12.5vw, 9rem); line-height: 0.84;
  letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--white); margin-bottom: 1.8rem; text-wrap: balance;
}
.hero__line { display: block; overflow: hidden; position: relative; }

/* THE FOCAL MOMENT — the wordmark is cut in by a diagonal wipe at the kit's
   chevron angle, with a gold flash riding the leading edge. Runs once, on load.
   The default state is fully visible, so a failed script never hides the name. */
.hero__line > span { display: block; }
.hero__line > span { animation: flashWipe 0.72s var(--ease-out) both; }
.hero__line:nth-child(1) > span { animation-delay: 0.15s; }
.hero__line:nth-child(2) > span { animation-delay: 0.31s; }
.hero__line:nth-child(3) > span { animation-delay: 0.47s; }

@keyframes flashWipe {
  from { clip-path: polygon(0 0, 0 0, -9% 100%, -9% 100%); }
  to   { clip-path: polygon(0 0, 114% 0, 105% 100%, -9% 100%); }
}

/* The flash itself: a thin gold blade skewed to the shirt's chevron. */
.hero__line::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0;
  width: 4px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--gold-bright) 22%, var(--white) 50%, var(--gold-bright) 78%, transparent);
  box-shadow: 0 0 22px 6px rgba(var(--gold-bright-rgb),0.55);
  transform: translateX(-8vw) skewX(calc(var(--flash) * -1));
  opacity: 0;
  animation: flashRide 0.72s var(--ease-out) both;
}
.hero__line:nth-child(1)::after { animation-delay: 0.15s; }
.hero__line:nth-child(2)::after { animation-delay: 0.31s; }
.hero__line:nth-child(3)::after { animation-delay: 0.47s; }

@keyframes flashRide {
  0%   { transform: translateX(-8vw) skewX(calc(var(--flash) * -1)); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(min(78vw, 980px)) skewX(calc(var(--flash) * -1)); opacity: 0; }
}

.hero__title em { font-style: normal; color: var(--gold); position: relative; }

/* The slogan runs three long lines rather than two short ones, so it is set
   smaller than the old wordmark and sized off the longest line. */
.hero__title--slogan {
  font-size: clamp(2.35rem, 11.6vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin-bottom: 2.6rem;
  /* Each clause is one line by design; never let "One Community." break. */
  text-wrap: nowrap; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero__line > span { animation: none; clip-path: none; }
  .hero__line::after { display: none; }
}
@keyframes heroLineUp { to { transform: translateY(0); } }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; transition-delay: 0.7s; }

.hero__scoreboard { position: absolute; right: max(2rem, calc((100vw - 1180px)/2 + 2rem)); top: 50%; transform: translateY(-50%); z-index: 3; transition-delay: 0.9s; }
.scoreboard { background: rgba(var(--navy-deep-rgb),0.6); backdrop-filter: blur(12px); border: 1px solid rgba(var(--gold-rgb),0.3); border-radius: 14px; padding: 1.4rem 1.8rem; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.scoreboard__label { display: block; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.8rem; }
.scoreboard__row { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.scoreboard__team { font-family: 'Anton', sans-serif; font-size: 1.4rem; color: var(--white); letter-spacing: 0.04em; }
.scoreboard__team--away { color: rgba(255,255,255,0.5); }
.scoreboard__score { font-family: 'Anton', sans-serif; font-size: 2.6rem; color: var(--gold); letter-spacing: 0.05em; }
.scoreboard__score b { color: var(--gold-bright); }
.scoreboard__comp { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 0.7rem; }

.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.hero__scroll span { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hero__scroll-line { width: 1px; height: 50px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: var(--gold-bright); animation: scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

/* ── NEXT FIXTURE ──────────────────────────── */
.next-fixture { padding: 5rem 0; background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%); position: relative; overflow: hidden; }
.next-fixture__bg { position: absolute; inset: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M20,20 L80,20 L80,80 L20,80 Z' fill='none' stroke='%23C8A84B' stroke-width='1'/%3E%3C/svg%3E"); }
.next-fixture__content { position: relative; z-index: 1; }
.next-fixture__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.5rem; display: inline-block; }
.next-fixture__card { background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(var(--gold-rgb),0.3); border-radius: 16px; padding: 2.5rem; backdrop-filter: blur(10px); min-height: 220px; display: flex; align-items: center; justify-content: center; }
.next-fixture__placeholder { text-align: center; color: rgba(255,255,255,0.6); font-size: 0.95rem; max-width: 44ch; line-height: 1.6; }
.next-fixture__empty-title { font-family: 'Anton', sans-serif; font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.6rem; }
.next-fixture--empty .next-fixture__card { border-style: dashed; border-color: rgba(var(--gold-rgb),0.22); }
.next-fixture__date { text-align: center; min-width: 70px; }
.next-fixture__day { display: block; font-family: 'Anton', sans-serif; font-size: 2.8rem; color: var(--gold); line-height: 1; font-weight: 700; }
.next-fixture__mon { display: block; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 0.4rem; }
.next-fixture__match { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 0.8rem; margin: 0 2rem; }
.next-fixture__team { font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--white); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; max-width: 200px; word-break: break-word; }
.next-fixture__team--wp { color: var(--gold-bright); font-size: 1.7rem; font-weight: 700; }
.next-fixture__vs { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 700; }
.next-fixture__info { text-align: right; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.next-fixture__badge { align-self: flex-end; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 99px; }
.next-fixture__badge--home { background: var(--gold); color: var(--navy-deep); }
.next-fixture__badge--away { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.next-fixture__comp { display: block; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-light); }
.next-fixture__time { display: block; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.8); }
.next-fixture__venue { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.55); max-width: 26ch; line-height: 1.4; }

@media (max-width: 768px) {
  .next-fixture { padding: 4rem 0; }
  .next-fixture__card { padding: 1.8rem; min-height: auto; flex-direction: column; gap: 1.2rem; }
  .next-fixture__match { flex-direction: column; margin: 0; gap: 0.6rem; }
  .next-fixture__team { font-size: 1.3rem; }
  .next-fixture__team--wp { font-size: 1.5rem; }
  .next-fixture__info { align-items: center; text-align: center; }
}

/* ── HERO TEAM SWITCHER ────────────────────
   The main call to action: pick your team, right under the headline. */
.hero__team-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  background: rgba(var(--navy-deep-rgb),0.55); backdrop-filter: blur(12px);
  padding: 0.5rem;
  border: 1px solid rgba(var(--gold-rgb),0.35); border-radius: var(--r-xl);
  width: min(560px, 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.hero__team-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 1.1rem 1.4rem; cursor: pointer;
  background: transparent; border: none; border-radius: var(--r-lg);
  color: rgba(255,255,255,0.65); font-family: 'Archivo', sans-serif;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.hero__team-btn:hover { color: var(--white); background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.hero__team-btn.is-active {
  background: var(--gold); color: var(--navy-deep);
  box-shadow: var(--sh-gold);
}
.hero__team-btn.is-active:hover { background: var(--gold-light); transform: translateY(-2px); }
.hero__team-name { font-family: 'Anton', sans-serif; font-size: 1.45rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; }
.hero__team-sub { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
.hero__team-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

@media (max-width: 520px) {
  .hero__team-toggle { grid-template-columns: 1fr; }
  .hero__team-name { font-size: 1.2rem; }
}

/* ── RESERVES: no data yet ─────────────────── */
.reserves-notice__panel {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(239,201,59,0.32);
  border-radius: var(--r-lg);
  padding: 2.6rem 2.4rem;
  max-width: 62ch;
}
.reserves-notice__title { font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.7rem; }
.reserves-notice__panel p { color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 1.6rem; }
.reserves-notice__panel .btn { margin-top: 0.2rem; }

/* Reserves kit: the squad shot leads, with two detail crops beneath it. */
.shirt__figure--stack { background: transparent; border: none; }
.shirt__figure--stack .shirt__img { border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.1); width: 100%; height: auto; }
.shirt__detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.shirt__detail-row img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.1); }

/* ── TICKER ────────────────────────────────── */
.ticker { background: var(--gold); overflow: hidden; padding: 1.1rem 0; position: relative; }
.ticker__track { display: inline-flex; align-items: center; gap: 2rem; white-space: nowrap; animation: tickerScroll 28s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { font-family: 'Anton', sans-serif; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-deep); }
.ticker__dot { font-size: 0.85rem !important; opacity: 0.6; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── ABOUT ─────────────────────────────────── */
.about { padding: 7rem 0; background: var(--surface-1); position: relative; }
.about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.about__text p { color: var(--ink-muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.2rem; max-width: 480px; }

/* Club story disclosure — the rest of the history behind a native <details>,
   so the About section reads short and the full text is one click away. */
.story { max-width: 68ch; margin: 0.4rem 0 1.2rem; }
.story__toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 0;
  cursor: pointer; user-select: none; list-style: none;
  font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-on-light);
  transition: color var(--t-base);
}
.story__toggle::-webkit-details-marker { display: none; }
.story__toggle:hover { color: var(--ink-strong); }
.story__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.story__chev { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--t-base); }
.story[open] .story__chev { transform: rotate(180deg); }
/* Label flips to "Show less" once open, without touching JS. */
.story[open] .story__toggle-label { font-size: 0; }
.story[open] .story__toggle-label::after {
  content: attr(data-open);
  font-size: 0.78rem; letter-spacing: 0.14em;
}
.story__body { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.story__body p {
  color: var(--ink-muted); font-size: 1.05rem; line-height: 1.75;
  margin-bottom: 1.2rem; max-width: 68ch;
}
.story__body p:last-child { margin-bottom: 0; }
.about__text .story__sign { color: var(--ink-strong); font-weight: 700; }
html.js .story[open] .story__body { animation: story-in 0.42s var(--ease-out) both; }
@keyframes story-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .story[open] .story__body { animation: none; }
  .story__chev { transition: none; }
}
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat-card { background: var(--surface-card-2); border: 1px solid var(--border); border-radius: 14px; padding: 2rem 1.6rem; text-align: center; position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.stat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(var(--navy-rgb),0.12); border-color: transparent; }
.stat-card:hover::before { transform: scaleX(1); }
.stat-card__num { display: block; font-family: 'Anton', sans-serif; font-size: 2.6rem; color: var(--ink-strong); line-height: 1; margin-bottom: 0.5rem; }
.stat-card__label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.stat-card:nth-child(2) { transition-delay: 0.08s; }
.stat-card:nth-child(3) { transition-delay: 0.16s; }
.stat-card:nth-child(4) { transition-delay: 0.24s; }

/* ── FIXTURES ──────────────────────────────── */
.fixtures { padding: 7rem 0; background: var(--navy); position: relative; overflow: hidden; }
.fixtures::before { content: ''; position: absolute; top: -10%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--gold-rgb),0.12), transparent 70%); border-radius: 50%; }
.fixtures__list { display: flex; flex-direction: column; gap: 0; }
.fixture-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 2rem; align-items: center; padding: 1.7rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; transition: background var(--t-base); }
.fixture-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform var(--t-base); }
/* Row content slides on transform rather than growing padding-left. */
.fixture-row > * { transition: transform var(--t-base); }
.fixture-row:hover { background: rgba(255,255,255,0.04); }
.fixture-row:hover > * { transform: translateX(10px); }
.fixture-row:hover::before { transform: scaleY(1); }
.fixture-row__date { text-align: center; }
.fixture-row__day { display: block; font-family: 'Anton', sans-serif; font-size: 2.2rem; color: var(--gold); line-height: 1; }
.fixture-row__month { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.fixture-row__comp { display: block; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.4rem; }
.fixture-row__teams { font-family: 'Anton', sans-serif; font-size: 1.3rem; color: var(--white); letter-spacing: 0.02em; }
.fixture-row__teams em { font-style: normal; color: rgba(255,255,255,0.4); font-size: 0.9rem; margin: 0 0.5rem; }
.fixture-row__meta { text-align: right; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.fixture-row__meta > span:first-child { color: rgba(255,255,255,0.85); font-weight: 600; }
.fixture-row__venue { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.22rem 0.7rem; border-radius: 99px; font-weight: 700; }
.fixture-row__venue--home { background: var(--gold); color: var(--navy-deep); }
.fixture-row__venue--away { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }

/* ── LEAGUE TABLE ─────────────────────────── */
.league-table__season {
  color: var(--gold-light); font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0.08em; margin-top: -1.5rem; margin-bottom: 2rem;
}
.league-table {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--gold-rgb),0.2);
  border-radius: 16px; overflow: hidden;
}
.league-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.league-table__table {
  width: 100%; border-collapse: collapse; min-width: 520px;
}
/* FA's accessible standings snapshot carries no F/A columns; live-data.js
   sets this class so the empty columns disappear instead of rendering blank. */
.league-table__table--no-fa .league-table__hide-sm { display: none; }
.league-table__table--no-fa { min-width: 420px; }
.league-table__table thead { background: rgba(var(--gold-rgb),0.12); }
.league-table__table th {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light); padding: 1rem 0.7rem; text-align: center;
  border-bottom: 2px solid rgba(var(--gold-rgb),0.25);
}
.league-table__table th.league-table__team { text-align: left; }
.league-table__table td {
  padding: 0.85rem 0.7rem; text-align: center;
  font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.75);
  font-variant-numeric: tabular-nums;
}
.league-table__table td.league-table__team {
  text-align: left; font-weight: 600; color: var(--white);
  white-space: nowrap; display: flex; align-items: center; gap: 0.6rem;
}
/* Club crests in the table sit on a small white tile, like the match cards —
   several clubs' marks are black line art and would vanish on the navy. */
.league-table__crest {
  flex: 0 0 auto; width: 26px; height: 26px;
  background: #fff; border-radius: 6px; padding: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.league-table__crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.league-table__crest--none { background: rgba(255,255,255,0.08); box-shadow: none; }
.league-table__pos {
  font-family: 'Anton', sans-serif; font-size: 1.05rem !important;
  color: var(--gold) !important; width: 42px; min-width: 42px;
}
th.league-table__pos { font-size: 0.68rem !important; color: var(--gold-light) !important; }
.league-table__pts {
  font-family: 'Anton', sans-serif; font-size: 1.15rem !important;
  color: var(--white) !important; font-weight: 400 !important;
}
th.league-table__pts { font-size: 0.68rem !important; color: var(--gold-light) !important; }
.league-table__row { border-bottom: 1px solid rgba(255,255,255,0.06); transition: background var(--transition); }
.league-table__row:last-child { border-bottom: none; }
.league-table__row:hover { background: rgba(255,255,255,0.05); }
/* The club's own row is marked by filling its position chip and lifting the
   name, the way a real league table calls out your team — not by a side stripe. */
.league-table__row--highlight {
  background: linear-gradient(90deg, rgba(var(--gold-rgb),0.15), rgba(var(--gold-rgb),0.05));
  box-shadow: inset 1px 0 0 var(--gold);
}
/* The chip is painted as the cell's own background rather than a pseudo-element
   behind it — a negative z-index would sit under the row's background and the
   number would be dark navy on dark blue. */
.league-table__row--highlight .league-table__pos {
  color: var(--navy-deep) !important;
  background-image: radial-gradient(circle at center, var(--gold) 0 14px, transparent 15px);
  background-repeat: no-repeat;
  background-position: center;
}
.league-table__row--highlight:hover { background: linear-gradient(90deg, rgba(var(--gold-rgb),0.22), rgba(var(--gold-rgb),0.08)); }
.league-table__row--highlight td.league-table__team { color: var(--gold-bright); }
.league-table__row--highlight .league-table__pts { color: var(--gold-bright) !important; }
.league-table__divider {
  width: 60px; height: 2px; background: rgba(var(--gold-rgb),0.3);
  margin: 4rem auto; border-radius: 2px;
}

/* ── AWARDS NIGHT ──────────────────────────── */
.awards-night { background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--gold-rgb),0.3); border-radius: 20px; padding: 2.8rem 3rem; display: flex; align-items: center; gap: 2.5rem; position: relative; overflow: hidden; transition: background var(--transition), transform var(--transition); }
.awards-night::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent); }
.awards-night::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(var(--gold-rgb),0.1), transparent 70%); border-radius: 50%; pointer-events: none; }
.awards-night:hover { background: rgba(255,255,255,0.07); transform: translateY(-4px); }
.awards-night__trophy { font-size: 4rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 20px rgba(var(--gold-rgb),0.5)); }
.awards-night__content { display: flex; align-items: center; gap: 2rem; flex: 1; }
.awards-night__date-block { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.awards-night__day { font-family: 'Anton', sans-serif; font-size: 3.8rem; color: var(--gold); line-height: 1; }
.awards-night__month { display: block; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 0.2rem; }
.awards-night__kickoff { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.awards-night__vr { width: 1px; height: 80px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.awards-night__info { flex: 1; }
.awards-night__comp { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.5rem; }
.awards-night__name { display: block; font-family: 'Anton', sans-serif; font-size: 1.6rem; color: var(--white); letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 0.7rem; }
.awards-night__desc { color: rgba(255,255,255,0.6); font-size: 0.9rem; line-height: 1.65; max-width: 420px; }
.awards-night__venue { display: flex; flex-direction: column; gap: 0.45rem; flex-shrink: 0; background: rgba(var(--gold-rgb),0.1); border: 1px solid rgba(var(--gold-rgb),0.25); border-radius: 14px; padding: 1.2rem 1.6rem; }
.awards-night__venue-icon { font-size: 1.2rem; }
.awards-night__venue-name { color: var(--white); font-weight: 700; font-size: 1rem; }
.awards-night__venue-time { color: var(--gold-light); font-size: 0.88rem; font-weight: 600; }

/* ── SQUAD ─────────────────────────────────── */
.squad { padding: 7rem 0; background: var(--surface-2); }
.squad__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; }

/* Collapsible groups keep the section tidy: management open by default,
   the full player list a click away. */
.squad-group {
  margin-bottom: 1.1rem;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.squad-group__head {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.25rem 1.6rem;
  cursor: pointer; user-select: none;
  list-style: none;
  transition: background var(--t-base);
}
.squad-group__head::-webkit-details-marker { display: none; }
.squad-group__head:hover { background: var(--surface-card-2); }
.squad-group__head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.squad-group__title {
  font-family: 'Anton', sans-serif; font-size: 1.35rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-strong); line-height: 1;
}
.squad-group__count {
  margin-left: auto;
  background: var(--gold); color: var(--navy-deep);
  font-weight: 700; font-size: 0.78rem;
  padding: 0.28rem 0.75rem; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.squad-group__chev { width: 22px; height: 22px; color: var(--gold-on-light); transition: transform var(--t-base); flex-shrink: 0; }
.squad-group[open] .squad-group__chev { transform: rotate(180deg); }
.squad-group__body { padding: 0.4rem 1.6rem 1.6rem; }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.staff-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--surface-card-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
}
.staff-card__role {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-on-light);
}
.staff-card__name { font-weight: 700; font-size: 1.02rem; color: var(--ink); }

@media (max-width: 560px) {
  .squad-group__body { padding: 0.3rem 1rem 1.1rem; }
  .squad-group__head { padding: 1.05rem 1.1rem; }
  .staff-grid { grid-template-columns: 1fr; gap: 0.7rem; }
}
.player-card { display: flex; align-items: center; gap: 1.3rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.6rem; position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.player-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(var(--gold-rgb),0.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease-out); }
.player-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(var(--navy-rgb),0.14); }
.player-card:hover::after { transform: translateX(120%); }
.player-card__number { font-family: 'Anton', sans-serif; font-size: 2.8rem; color: var(--navy); line-height: 1; min-width: 52px; transition: color var(--transition); }
.player-card:hover .player-card__number { color: var(--gold); }
.player-card__name { display: block; font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.2rem; }
.player-card__pos { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.player-card--captain { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); border-color: var(--gold); }
.player-card--captain .player-card__number { color: var(--gold); }
.player-card--captain .player-card__name { color: var(--white); }
.player-card--captain .player-card__pos { color: var(--gold-light); }
.player-card__cap { color: var(--gold); font-size: 0.85rem; }

/* ── NEWS ──────────────────────────────────── */
.news { padding: 7rem 0; background: var(--navy); }
/* Magazine block: the lead story takes two columns and both rows, the two
   shorter items stack beside it, so the section ends on a straight edge. */
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.5rem; align-items: stretch; }
/* Compact cards: photo + headline only, the story itself lives on its own
   page. Equal rows so three summaries scan as one band. */
.news__grid--compact { grid-auto-rows: auto; }
.news-card { text-decoration: none; color: inherit; }
.news-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.news-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 2rem; transition: transform var(--transition), background var(--transition), border-color var(--transition); display: flex; flex-direction: column; }
.news-card:nth-child(2) { transition-delay: 0.1s; }
.news-card:nth-child(3) { transition-delay: 0.2s; }
.news-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.07); border-color: rgba(var(--gold-rgb),0.4); }
.news-card--featured { grid-row: span 2; grid-column: span 2; background: linear-gradient(160deg, rgba(var(--gold-rgb),0.14), rgba(255,255,255,0.04)); border-color: rgba(var(--gold-rgb),0.25); justify-content: flex-end; }
/* The lead card is deliberately tall, so its content anchors to the bottom
   like a poster instead of floating with dead space beneath it. */
.news-card--featured .news-card__excerpt { max-width: 52ch; flex-grow: 0; }
.news-card--featured .news-card__tag { margin-top: auto; }
.news-card__tag { display: inline-block; align-self: flex-start; background: var(--gold); color: var(--navy-deep); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 99px; margin-bottom: 1.2rem; }
.news-card__title { font-family: 'Anton', sans-serif; font-weight: 400; color: var(--white); font-size: 1.4rem; line-height: 1.1; letter-spacing: 0.01em; margin-bottom: 0.9rem; }
.news-card--featured .news-card__title { font-size: 2rem; }
.news-card__excerpt { color: rgba(255,255,255,0.65); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.4rem; flex-grow: 1; }
.news-card__link { color: var(--gold); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-decoration: none; align-self: flex-start; transition: gap var(--transition); }
.news-card__link:hover { color: var(--gold-bright); }

/* ── CONTACT ───────────────────────────────── */
.contact { padding: 7rem 0; background: var(--surface-1); }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact__text p { color: var(--ink-muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.8rem; max-width: 420px; }
.contact__detail { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; color: var(--ink); font-weight: 500; }
.contact__icon { font-size: 1.3rem; }
.contact__form { background: var(--surface-card-2); border: 1px solid var(--border); border-radius: 18px; padding: 2.5rem; }
.form-group { margin-bottom: 1.3rem; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.5rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); font-family: 'Archivo', sans-serif; font-size: 0.95rem; color: var(--ink); background: var(--surface-input); transition: border-color var(--transition), box-shadow var(--transition); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb),0.15); }
.form-group textarea { resize: vertical; }
.contact__hp { position: absolute; left: -9999px; }
.contact__form-msg { margin-top: 1rem; font-size: 0.9rem; font-weight: 600; min-height: 1.2em; }
.contact__form-msg.is-success { color: #1f7a44; }
.contact__form-msg.is-error { color: #b23a3a; }
.contact__form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── FOOTER ────────────────────────────────── */
.footer { background: var(--navy-deep); padding: 4.5rem 0 2rem; position: relative; }
/* A thin gold seam ties the footer to the ticker and the nav underline. */
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.45), transparent);
}
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
.footer__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.2rem; }
.footer__logo { width: 52px; height: 52px; object-fit: contain; }
.footer__name { font-family: 'Anton', sans-serif; font-size: 1.35rem; color: var(--white); letter-spacing: 0.03em; text-transform: uppercase; }
.footer__name strong { color: var(--gold); }
.footer__tagline { color: rgba(255,255,255,0.72); font-size: 0.98rem; line-height: 1.6; margin-bottom: 0.5rem; max-width: 34ch; }
.footer__est { color: rgba(255,255,255,0.42); font-size: 0.8rem; letter-spacing: 0.04em; }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.footer__heading {
  font-family: 'Archivo', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer__heading--gap { margin-top: 1.8rem; }
.footer__col a {
  color: rgba(255,255,255,0.66); text-decoration: none; font-size: 0.9rem;
  padding: 0.28rem 0; transition: color var(--t-fast), transform var(--t-fast);
}
.footer__col a:hover { color: var(--gold-light); transform: translateX(3px); }
.footer__line { color: rgba(255,255,255,0.78); font-size: 0.9rem; line-height: 1.6; }
.footer__line--muted { color: rgba(255,255,255,0.45); margin-top: 0.2rem; }
.footer__mail { color: var(--gold-light) !important; font-weight: 600; }
.footer__involved { margin-top: 0.9rem; font-weight: 700 !important; color: var(--white) !important; letter-spacing: 0.02em; }
.footer__involved span { display: inline-block; transition: transform var(--t-base); }
.footer__involved:hover span { transform: translateX(4px); }

.footer__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__copy { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
.footer__motto { color: rgba(255,255,255,0.35); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }
.footer a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 3px; }

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .footer__identity { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer { padding-top: 3.5rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bar { justify-content: center; text-align: center; }
}

/* =============================================
   SYSTEM HARMONISATION
   One radius ramp, one shadow ramp, one focus ring and one typographic scale
   across every surface, so fixtures, shop, squad, news and sponsors read as
   parts of the same club rather than separately styled pages.
   ============================================= */

/* ── Typography ─────────────────────────────── */
.section-title { letter-spacing: -0.02em; text-wrap: balance; }
.section-title + .section-label { margin-top: 2rem; }
h1, h2, h3, .news-card__title, .shirt__lead { text-wrap: pretty; }

/* Body copy holds a readable measure instead of running the container width. */
.about__text p, .shop__intro, .sponsors__intro, .contact__text p,
.news-card__excerpt, .shirt__lead { max-width: 68ch; }

/* Section headings get more air above than below — the craft floor rule that
   makes a long page scan as sections rather than one continuous column. */
.section-label { margin-bottom: 1rem; }
.section-title { margin-bottom: 2.25rem; }

/* ── Cards: one ramp, applied everywhere ────── */
.stat-card, .player-card, .news-card,
.shop-card, .sponsor-card, .contact__form, .league-table,
.next-fixture__card, .shirt__figure {
  border-radius: var(--r-lg);
}
.match-card, .shop-filter, .news-card__tag { border-radius: var(--r-md); }

.stat-card { box-shadow: var(--sh-sm); }
.stat-card:hover  { box-shadow: var(--sh-md); }
.player-card:hover { box-shadow: var(--sh-md); }
.shop-card:hover  { box-shadow: var(--sh-md); }
.news-card:hover  { box-shadow: var(--sh-dark); }
.contact__form    { box-shadow: var(--sh-sm); }

/* The stat card's top rule was the only 4px accent left; 2px reads as a
   deliberate underline rather than a slab. */
.stat-card::before { height: 2px; }

/* ── Focus: one visible ring on every interactive thing ── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .shop-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.shop-card:focus-visible { outline-offset: 4px; }
/* Dark surfaces need the brighter gold to clear 3:1 against navy. */
.hero a:focus-visible, .news a:focus-visible, .fixtures a:focus-visible,
.shirt a:focus-visible, .footer a:focus-visible {
  outline-color: var(--gold-bright);
}

/* ── Micro-interactions ─────────────────────── */
.btn:active, .nav__cta:active { transform: translateY(-1px); }
.shop-card:active { transform: translateY(-2px); }
.news-card__link { display: inline-flex; align-items: center; gap: 0.4rem; }
.news-card__link::after { content: '\2192'; transition: transform var(--t-base); }
.news-card__link:hover::after { transform: translateX(4px); }

/* The ticker is decorative; it should not fight a screen reader or a scroll. */
.ticker { user-select: none; }

/* ── Section rhythm ─────────────────────────── */
@media (max-width: 900px) {
  .about, .squad, .news, .contact, .fixtures { padding: 4.5rem 0; }
  .news__grid, .contact__inner, .about__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .news-card--featured { grid-row: auto; grid-column: auto; }
  .news-card--featured .news-card__title { font-size: 1.5rem; }
}
@media (max-width: 560px) {
  .container { padding: 0 1.25rem; }
  .section-title { margin-bottom: 1.75rem; }
  .squad__grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .player-card { padding: 1rem; gap: 0.8rem; flex-direction: column; align-items: flex-start; }
  .player-card__number { font-size: 2rem; min-width: 0; }
}

/* ── Motion preference ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none !important; }
}


/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 980px) {
  .about__grid, .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .news__grid { grid-template-columns: 1fr 1fr; }
  .news-card--featured { grid-row: auto; grid-column: span 2; }
  .hero__scoreboard { display: none; }
  .awards-night { flex-wrap: wrap; }
  .awards-night__vr--hide-sm { display: none; }
}
/* Nine links plus the crest and the team toggle stop fitting well before the
   old 860px hand-off, so the burger takes over earlier. */
@media (max-width: 1100px) and (min-width: 1041px) {
  .nav__links { gap: 1.05rem; }
  .nav__links a, .navdrop__btn { font-size: 0.82rem; }
}
@media (max-width: 1040px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .awards-night__content { flex-wrap: wrap; gap: 1.5rem; }
}
@media (max-width: 600px) {
  .container { padding: 0 1.3rem; }
  .nav__inner { padding: 0 1.3rem; }
  .nav__name { font-size: 1rem; }
  .news__grid { grid-template-columns: 1fr; }
  .news-card--featured { grid-column: auto; }
  .fixture-row { grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.3rem 0.8rem; }
  .fixture-row__meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; margin-top: 0.5rem; }
  .fixture-row__teams { font-size: 1.05rem; }
  .hero { padding-top: 6rem; padding-bottom: 6.5rem; }
  .hero__actions { flex-direction: column; }
  .squad__grid { grid-template-columns: 1fr; }
  .awards-night { padding: 2rem 1.5rem; gap: 1.5rem; flex-direction: column; text-align: center; align-items: center; }
  .awards-night__content { flex-direction: column; align-items: center; gap: 1.2rem; }
  .awards-night__vr { display: none; }
  .awards-night__trophy { font-size: 3rem; }
  .awards-night__desc { max-width: none; }
  .league-table__hide-sm { display: none; }
  .league-table__table { min-width: 380px; }
  .league-table__table th, .league-table__table td { padding: 0.7rem 0.45rem; font-size: 0.82rem; }
}

/* ── 26/27 HOME SHIRT ──────────────────────── */
.shirt { padding: 7rem 0; background: var(--navy-deep); position: relative; overflow: hidden; }
.shirt::before { content: ''; position: absolute; top: -20%; left: -10%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(43,79,180,0.35), transparent 70%); border-radius: 50%; }
.shirt .container { position: relative; z-index: 1; }
.shirt__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; }
.shirt__figure { margin: 0; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.shirt__img { display: block; width: 100%; height: auto; }
.shirt__lead { color: rgba(255,255,255,0.78); font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; max-width: 46ch; }
.shirt__specs { list-style: none; margin: 0 0 2.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.shirt__specs li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.shirt__spec-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.shirt__spec-value { font-weight: 600; color: var(--white); text-align: right; }
.shirt__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.shirt__note { margin-top: 1.4rem; font-size: 0.85rem; color: rgba(255,255,255,0.45); }

/* Coming-soon button: reads as a button but is deliberately inert. */
.btn--soon {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.6rem; border-radius: var(--radius);
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  cursor: not-allowed; user-select: none;
}
.btn__tag { font-size: 0.62rem; letter-spacing: 0.14em; padding: 0.26rem 0.6rem; border-radius: 99px; background: var(--gold); color: var(--navy-deep); }

@media (max-width: 900px) {
  .shirt { padding: 5rem 0; }
  .shirt__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .shirt__specs li { font-size: 0.92rem; }
}

/* ── CLUB SHOP ─────────────────────────────── */
.shop { padding: 7rem 0; background: var(--surface-2); }
.shop__intro { color: var(--ink-muted); max-width: 60ch; margin-bottom: 2.2rem; line-height: 1.7; }
.shop__filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.shop-filter {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1.2rem; border-radius: 99px; cursor: pointer;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--line);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.shop-filter:hover { color: var(--accent-text); border-color: var(--accent); }
.shop-filter.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem; }
.shop__empty { color: var(--ink-muted); padding: 2rem 0; }

.shop-card {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.shop-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(var(--navy-rgb),0.14); border-color: transparent; }
.shop-card__media { display: block; aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; padding: 0.9rem; }
.shop-card__media img { width: 100%; height: 100%; object-fit: contain; }
.shop-card__noimg { font-size: 2.4rem; opacity: 0.25; }
.shop-card__body { display: block; padding: 0 1.1rem 0.4rem; flex: 1; }
.shop-card__name { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.35; color: var(--ink); margin-bottom: 0.35rem; }
.shop-card__price { display: block; font-size: 0.82rem; color: var(--ink-muted); }
.shop-card__go {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.85rem 1.1rem 1.1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}
.shop-card__arrow { transition: transform var(--transition); }
.shop-card:hover .shop-card__arrow { transform: translate(3px, -3px); }

.shop__footer { margin-top: 3rem; text-align: center; }
.shop__disclaimer { margin-top: 1.1rem; font-size: 0.82rem; color: var(--ink-muted); }

/* ── WHATSAPP SUPPORTERS GROUP ─────────────── */
.whatsapp {
  position: relative; overflow: hidden;
  padding: 6rem 0;
  background: linear-gradient(135deg, #075E54 0%, #128C7E 55%, #0b6e5f 100%);
}
.whatsapp__glow {
  position: absolute; top: -180px; right: -120px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,211,102,0.35), transparent 70%);
  pointer-events: none;
}
.whatsapp__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 3.5rem;
}
/* The big mark: white glyph on WhatsApp green, floating gently. */
.whatsapp__badge {
  flex-shrink: 0;
  width: 180px; height: 180px; border-radius: 44px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #25D366, #1eb857);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35), 0 0 0 10px rgba(255,255,255,0.08);
  color: #fff;
  animation: waFloat 5s ease-in-out infinite;
}
.whatsapp__badge svg { width: 104px; height: 104px; }
@keyframes waFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .whatsapp__badge { animation: none; } }

.whatsapp__kicker {
  font: 700 0.8rem/1 'Archivo', sans-serif;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #7CF5B0; margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.whatsapp__kicker::before { content: ''; width: 28px; height: 2px; background: #25D366; display: inline-block; }
.whatsapp__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 0.98;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.2rem; text-wrap: balance;
}
.whatsapp__sub { color: rgba(255,255,255,0.82); font-size: 1.05rem; line-height: 1.7; max-width: 52ch; margin-bottom: 2rem; }

.btn--whatsapp {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: #25D366; color: #06341c;
  padding: 1.15rem 2.6rem; font-size: 0.95rem;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(37,211,102,0.4), 0 4px 12px rgba(0,0,0,0.25);
}
.btn--whatsapp svg { width: 22px; height: 22px; position: relative; z-index: 2; }
.btn--whatsapp::before { background: #4ce788; }
.btn--whatsapp:hover { transform: translateY(-5px); box-shadow: 0 18px 50px rgba(37,211,102,0.5), 0 6px 16px rgba(0,0,0,0.3); }
.btn--whatsapp:hover::before { transform: translateY(0); }

@media (max-width: 800px) {
  .whatsapp { padding: 4.5rem 0; }
  .whatsapp__inner { flex-direction: column; text-align: center; gap: 2.2rem; }
  .whatsapp__badge { width: 130px; height: 130px; border-radius: 32px; }
  .whatsapp__badge svg { width: 74px; height: 74px; }
  .whatsapp__kicker { justify-content: center; }
  .whatsapp__sub { margin-left: auto; margin-right: auto; }
}

/* ── SCATTERED CLUB PHOTOGRAPHY ────────────
   The gallery grid is gone; the strongest shots now sit inside the sections
   they belong to, so the photography supports the content instead of being
   parked in a wall of thumbnails. */
.about__side { display: flex; flex-direction: column; gap: 1.2rem; }
.about__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.about__photo img { display: block; width: 100%; height: 240px; object-fit: cover; transition: transform var(--t-slow); }
.about__photo:hover img { transform: scale(1.04); }

/* Under-16 note: a quiet aside in the contact column, not a second CTA. */
.contact__note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  margin-top: 1.4rem; padding: 0.9rem 1.1rem;
  background: rgba(var(--navy-rgb),0.04);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-muted); font-size: 0.92rem; line-height: 1.6;
}
.contact__note-label {
  flex: 0 0 auto;
  background: var(--gold); color: var(--navy-deep);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: 99px;
}
.contact__note a { color: var(--accent-text); font-weight: 700; }
.contact__note a:hover { text-decoration: underline; }

.contact__mail { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--navy-rgb),0.25); text-underline-offset: 2px; transition: color var(--t-fast); }
.contact__mail:hover { color: var(--accent-text); }

.contact__form-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.contact__photo { margin: 2rem 0 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); max-width: 420px; }
.contact__photo img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform var(--t-slow); }
.contact__photo:hover img { transform: scale(1.04); }

/* News cards lead with the photograph, so the lead story stops being a wall of
   text and the shorter items gain something to hold. */
.news-card { padding: 0; overflow: hidden; }
.news-card__media { display: block; width: 100%; height: 190px; object-fit: cover; transition: transform var(--t-slow); }
.news-card--featured .news-card__media { height: 300px; }
.news-card:hover .news-card__media { transform: scale(1.05); }
.news-card__body { padding: 1.6rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.news__grid--compact .news-card__media { height: 168px; }
.news__grid--compact .news-card__body { padding: 1.15rem 1.35rem 1.35rem; gap: 0; }
.news__grid--compact .news-card__tag { margin-bottom: 0.75rem; font-size: 0.6rem; padding: 0.3rem 0.75rem; }
.news__grid--compact .news-card__title { font-size: 1.12rem; margin-bottom: 0.9rem; }
.news__grid--compact .news-card__link { margin-top: auto; font-size: 0.78rem; }
.news-card__link::after { content: '\2192'; }
.news-card:hover .news-card__link::after { transform: translateX(4px); }
.news-card--featured .news-card__body { padding: 2rem 2.4rem 2.4rem; }
.news-card--featured { justify-content: flex-start; }
.news-card--featured .news-card__tag { margin-top: 0; }

@media (max-width: 900px) {
  .about__photo img { height: 200px; }
  .news-card--featured .news-card__media { height: 220px; }
}

/* ── SPONSORS ──────────────────────────────── */
.sponsors { padding: 7rem 0; background: var(--surface-1); }

.sponsors__intro { color: var(--ink-muted); max-width: 58ch; margin-bottom: 2.6rem; line-height: 1.7; }
/* Three across so six partners balance as two full rows rather than 5 + 1. */
.sponsors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.sponsor-card {
  text-decoration: none; color: inherit;
  display: grid; place-items: center; align-content: center; gap: 0.35rem;
  min-height: 150px; padding: 2rem 2.4rem;
  /* Several supplied logos carry a baked-in white background, so the tile is
     white too — otherwise each one shows as a pale rectangle on a grey card. */
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.sponsor-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(var(--navy-rgb),0.2); }
.sponsor-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Optical sizing, not mechanical sizing. Each supplied file bakes in a
   different amount of internal whitespace, so a single max-height leaves the
   padded ones looking tiny next to the tightly-cropped ones. These are tuned
   per mark so all six read at the same visual weight. */
.sponsor-card img { max-width: 82%; max-height: 52px; width: auto; object-fit: contain; }
.sponsor-card img[src*="thackray"]    { max-height: 118px; max-width: 96%; }
.sponsor-card img[src*="rein"]        { max-height: 108px; }
.sponsor-card img[src*="envirecycle"] { max-height: 58px; }
.sponsor-card img[src*="butlers"]     { max-height: 56px; }
.sponsor-card img[src*="smile"]       { max-height: 44px; }
/* Butler's supply a white-on-transparent logo, so it needs a dark tile. */
.sponsor-card--dark { background: var(--navy); border-color: transparent; }
.sponsor-card--dark:hover { border-color: transparent; box-shadow: var(--sh-lg); }
.sponsor-card--text { text-align: center; }
.sponsor-card__name { font-family: 'Anton', sans-serif; font-size: 1.75rem; color: var(--ink-strong); letter-spacing: 0.02em; line-height: 1; }
.sponsor-card__role { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }

@media (max-width: 860px) { .sponsors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sponsors__grid { grid-template-columns: 1fr; } .sponsor-card { min-height: 120px; } }
.sponsors__cta { margin-top: 2.4rem; color: var(--ink-muted); }
.sponsors__cta a { color: var(--accent-text); font-weight: 600; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .shop, .sponsors { padding: 5rem 0; }
  .shop__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
}

/* ── ENHANCEMENTS: tilt, magnetic, back-to-top ───────── */

/* 3D tilt on cards — transform is applied inline by JS so it beats the
   existing :hover translateY rules; CSS just smooths the return. */
.player-card, .news-card, .stat-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Magnetic buttons keep their label centred while the button shifts */
.btn[data-magnetic] { will-change: transform; }

/* Back to top */
.to-top {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 8000;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(var(--navy-rgb),0.28);
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.to-top svg { width: 22px; height: 22px; }
.to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { background: var(--gold-bright); transform: translateY(-3px) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .player-card, .news-card, .stat-card { transform: none !important; }
  .to-top { transition: opacity var(--transition); }
}
@media (max-width: 860px) {
  .player-card, .news-card, .stat-card { transform: none !important; }
  .to-top { right: 1rem; bottom: 1rem; width: 46px; height: 46px; }
}

/* ============================================================
   PREMIUM POLISH PASS — texture, depth, refined surfaces
   ============================================================ */

/* Site-wide film grain: subtle tactile texture that ties the whole page
   together. Fixed, non-interactive, sits above content but below the cursor. */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Primary CTA: brushed-gold gradient, inner highlight, deeper glow */
.btn--primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 52%, #b8923a);
  box-shadow: 0 10px 30px rgba(var(--gold-rgb),0.30), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--primary::before { background: linear-gradient(135deg, var(--gold-bright), var(--gold-light)); }
.btn--primary:hover { box-shadow: 0 16px 40px rgba(var(--gold-rgb),0.48), inset 0 1px 0 rgba(255,255,255,0.5); }
.nav__cta { background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }

/* Section cards: faint top-down gradient, accent hairline, layered shadow.
   Both stops come from the surface tokens, so this reads as a light card in
   the first team's theme and a navy one in the reserves' without a second rule. */
.stat-card, .player-card:not(.player-card--captain) {
  background: linear-gradient(168deg, var(--surface-card), var(--surface-card-2));
  box-shadow: inset 0 1px 0 var(--card-sheen), 0 12px 30px -20px rgba(var(--navy-deep-rgb),0.45);
}
.stat-card { border-color: rgba(var(--gold-rgb),0.20); }
/* Numerals earn emphasis from weight, size and colour — not a gradient fill,
   which washes out the low-contrast end of the ramp and reads as decoration. */
.stat-card__num, .player-card:not(.player-card--captain) .player-card__number {
  color: var(--ink-strong);
}
.player-card:hover:not(.player-card--captain) .player-card__number { color: var(--num-hover); }

/* Depth on otherwise-flat light sections: a soft off-screen gold bloom */
.about, .squad { position: relative; overflow: hidden; }
.about::before, .squad::before {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb),0.10), transparent 70%);
}
.about::before { top: -180px; right: -160px; }
.squad::before { bottom: -220px; left: -180px; }
.about .container, .squad .container { position: relative; z-index: 1; }

/* League leader row: a hairline edge plus a soft glow. The club's row is
   identified by its filled gold position chip, not by a heavy side stripe. */
.league-table__row--highlight { box-shadow: inset 1px 0 0 var(--gold), -2px 0 16px -6px rgba(var(--gold-rgb),0.5); }

/* Scoreboard: crisper glass + gold rim light */
.scoreboard { box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }

/* Hero giant watermark: faint gold tint over the stroke */
.hero__giant span { -webkit-text-stroke: 2px rgba(var(--gold-rgb),0.08); }

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
}

/* ============================================================
   LIVE DATA — match centre (fixtures & results), live badge
   ============================================================ */

.live-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: 0.8rem; padding: 0.2rem 0.7rem; border-radius: 99px;
  background: rgba(80,200,120,0.12); border: 1px solid rgba(80,200,120,0.4);
  color: #6fdc98; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; vertical-align: middle;
}
.live-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 0 0 rgba(95,208,138,0.6); animation: livePulse 2s infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(95,208,138,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(95,208,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,208,138,0); }
}

.matches { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1rem; }
.matches__heading {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.5rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); margin-bottom: 1.4rem;
}
.matches__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb),0.7); }
.matches__dot--up { background: #6fa8ff; box-shadow: 0 0 12px rgba(111,168,255,0.7); }
.matches__list { display: flex; flex-direction: column; gap: 0.7rem; }
.matches__empty { color: rgba(255,255,255,0.5); font-size: 0.92rem; padding: 1rem 0; }

.match-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 0.9rem 1.1rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.match-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(var(--gold-rgb),0.35); transform: translateX(3px); }
.match-card--wp { border-color: rgba(var(--gold-rgb),0.4); background: linear-gradient(90deg, rgba(var(--gold-rgb),0.10), rgba(255,255,255,0.04)); }
.match-card__date { text-align: center; min-width: 52px; }
.match-card__day { display: block; font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--gold); line-height: 1; }
.match-card__mon { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.match-card__teams { min-width: 0; }
.match-card__row { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: rgba(255,255,255,0.9); font-size: 0.92rem; line-height: 1.5; }
.match-card__row--muted { color: rgba(255,255,255,0.55); }
.match-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-card__name--wp { color: var(--gold-bright); font-weight: 700; }
.match-card__comp { display: block; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin-top: 0.4rem; opacity: 0.8; }
.match-card__score { font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--white); letter-spacing: 0.04em; padding: 0.2rem 0.7rem; background: rgba(0,0,0,0.25); border-radius: 8px; }
.match-card__time { font-family: 'Anton', sans-serif; font-size: 1.1rem; color: var(--gold-light); }
.match-card__note { font-size: 0.62rem; color: rgba(255,255,255,0.5); display: block; text-align: center; margin-top: 0.2rem; }

@media (max-width: 860px) {
  .matches { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =============================================
   RESERVES MODE
   The reserves are the club's louder younger side: golden #E5CB36, black and
   white only for words, sticker-style imagery and a harder typographic voice.
   Everything below is scoped to [data-team="reserves"] or to reserves-only
   markup, so the first team renders byte-for-byte as before.
   ============================================= */

/* First-team-only blocks that have no reserves counterpart. Shirt is no
   longer a top-nav item (removed from both menus), so only the section
   itself and the ticker need hiding here. */
[data-team="reserves"] #shirt,
[data-team="reserves"] .ticker { display: none !important; }

/* ── Words must pop: black on light, pure white on dark ── */
[data-team="reserves"] .hero__eyebrow,
[data-team="reserves"] .reserves-notice__panel p,
[data-team="reserves"] .matches__empty,
[data-team="reserves"] .news-card__excerpt,
[data-team="reserves"] .match-card__row,
[data-team="reserves"] .match-card__row--muted,
[data-team="reserves"] .footer__tagline,
[data-team="reserves"] .footer__est,
[data-team="reserves"] .footer__line,
[data-team="reserves"] .footer__line--muted,
[data-team="reserves"] .footer__col a,
[data-team="reserves"] .footer__copy,
[data-team="reserves"] .footer__motto,
[data-team="reserves"] .teamswitch__label,
[data-team="reserves"] .teamswitch__btn:not(.is-active) { color: #FFFFFF; }
/* On the accent fill, text is black — white on #E5CB36 fails at 1.6:1. */
[data-team="reserves"] .teamswitch__btn.is-active { color: #0A0B04; }
[data-team="reserves"] .section-label { color: #0A0B04; }
[data-team="reserves"] .section-label--light { color: var(--gold-bright); }
[data-team="reserves"] .reserves-notice__title { color: var(--gold); }
[data-team="reserves"] .footer__mail { color: var(--gold-bright) !important; }

/* ── Harder display voice for the reserves ── */
[data-team="reserves"] .section-title {
  font-size: clamp(2.7rem, 6.8vw, 5rem);
  letter-spacing: -0.02em;
}
[data-team="reserves"] .section-label { font-weight: 800; }
[data-team="reserves"] .section-label::before { background: var(--ink); }
[data-team="reserves"] .section-label--light::before { background: var(--gold); }

/* ── Reserves hero: black, acid, and marked ── */
[data-team="reserves"] .hero__giant span {
  -webkit-text-stroke: 2px rgba(229,203,54,0.20);
  text-stroke: 2px rgba(229,203,54,0.20);
}
[data-team="reserves"] .hero__scoreboard { display: none; }
[data-team="reserves"] .hero__eyebrow-line { background: var(--gold); }

.hero__reserves-mark {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: max(1.2rem, calc((100vw - 1180px)/2));
  z-index: 3; pointer-events: none; user-select: none;
  writing-mode: vertical-rl;
  font-family: 'Anton', sans-serif;
  font-size: clamp(4rem, 11vh, 8.5rem);
  letter-spacing: 0.06em; line-height: 1; text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  text-stroke: 2px var(--gold);
  filter: drop-shadow(0 0 18px rgba(229,203,54,0.35));
}
@media (max-width: 900px) { .hero__reserves-mark { display: none; } }

/* ── RESERVES KIT — the featured block directly under the hero ── */
.reskit {
  position: relative; overflow: hidden;
  background: var(--gold);
  padding: 6rem 0 7rem;
}
/* Two oversized flash blades cut across the band at the kit's chevron angle. */
.reskit__bg { position: absolute; inset: 0; pointer-events: none; }
.reskit__bg::before, .reskit__bg::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 22vw;
  transform: skewX(calc(var(--flash) * -1));
  background: rgba(10,11,4,0.08);
}
.reskit__bg::before { left: 6%; }
.reskit__bg::after { right: -4%; width: 34vw; background: rgba(255,255,255,0.16); }

.reskit .container { position: relative; z-index: 1; }
.reskit__kicker {
  display: inline-block; background: #0A0B04; color: #FFFFFF;
  font: 800 0.78rem/1 'Archivo', sans-serif;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 0.7rem 1.3rem; border-radius: 99px; margin-bottom: 1.6rem;
}
.reskit__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: clamp(3.4rem, 9.5vw, 7.5rem);
  line-height: 0.85; letter-spacing: -0.015em; text-transform: uppercase;
  color: #0A0B04; margin-bottom: 3rem; text-wrap: balance;
}
.reskit__title em { font-style: normal; color: #FFFFFF; text-shadow: 0 3px 0 rgba(10,11,4,0.35); }

.reskit__stage {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 560px) 1fr; gap: 1.4rem;
  align-items: end; max-width: 900px;
}
.reskit__stage figure { margin: 0; }
.reskit__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reskit__main {
  border: 5px solid #0A0B04; border-radius: var(--r-lg);
  overflow: hidden; background: #0A0B04;
  box-shadow: 14px 14px 0 rgba(10,11,4,0.9), 0 30px 60px -20px rgba(10,11,4,0.5);
  transform: rotate(-1.2deg);
  transition: transform var(--t-slow), box-shadow var(--t-slow);
}
.reskit__main:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 10px 18px 0 rgba(10,11,4,0.9), 0 36px 70px -18px rgba(10,11,4,0.55); }
.reskit__crops { display: grid; gap: 1.4rem; align-content: end; }
.reskit__crop {
  border: 4px solid #0A0B04; border-radius: var(--r-md);
  overflow: hidden; aspect-ratio: 1 / 1; max-width: 240px;
  box-shadow: 8px 8px 0 rgba(10,11,4,0.9);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.reskit__crop--crest { transform: rotate(2deg); }
.reskit__crop--sleeve { transform: rotate(-2.4deg); justify-self: end; }
.reskit__crop:hover { transform: rotate(0deg) translateY(-5px); }
.reskit__note {
  margin-top: 2.6rem; max-width: 52ch;
  font-weight: 700; font-size: 1.05rem; line-height: 1.6; color: #0A0B04;
}
@media (max-width: 760px) {
  .reskit { padding: 4.5rem 0 5rem; }
  .reskit__stage { grid-template-columns: 1fr; }
  .reskit__crops { grid-template-columns: 1fr 1fr; }
  .reskit__crop--sleeve { justify-self: start; }
  .reskit__main { box-shadow: 8px 8px 0 rgba(10,11,4,0.9); }
}

/* ── Reserves dark sections: olive-black with acid edges ── */
[data-team="reserves"] .news-card { background: rgba(229,203,54,0.06); border-color: rgba(229,203,54,0.30); }
[data-team="reserves"] .news-card:hover { background: rgba(229,203,54,0.11); border-color: rgba(229,203,54,0.55); }
[data-team="reserves"] .news-card--featured { background: linear-gradient(160deg, rgba(229,203,54,0.16), rgba(229,203,54,0.05)); }
[data-team="reserves"] .reserves-notice__panel { border-color: rgba(229,203,54,0.45); background: rgba(229,203,54,0.07); }
[data-team="reserves"] .footer::before,
[data-team="reserves"] .nav::after,
[data-team="reserves"] .teamswitch::before {
  background: linear-gradient(90deg, transparent, rgba(229,203,54,0.65), transparent);
}

/* ── TEAM WIPE — full-screen swipe when switching sides ── */
.team-wipe {
  position: fixed; inset: 0; z-index: 11000;
  pointer-events: none; overflow: hidden; visibility: hidden;
}
.team-wipe.is-running { visibility: visible; }
/* Two-phase sweep: the lead panel slides IN and parks covering the screen,
   the theme swaps underneath (any recalc jank is invisible behind a solid
   panel), then everything slides OUT to reveal the new colours. */
.team-wipe__panel {
  position: absolute; top: -14%; bottom: -14%; left: -45%; width: 190%;
  transform: translateX(-120%) skewX(calc(var(--flash) * -1));
  transition: transform 0.34s cubic-bezier(0.83, 0, 0.17, 1);
}
.team-wipe.is-running .team-wipe__panel { will-change: transform; }
.team-wipe.is-in .team-wipe__panel { transform: translateX(0) skewX(calc(var(--flash) * -1)); }
.team-wipe.is-in .team-wipe__panel--b { transition-delay: 0.06s; }
.team-wipe.is-in .team-wipe__panel--c { transition-delay: 0.12s; }
.team-wipe.is-out .team-wipe__panel {
  transform: translateX(120%) skewX(calc(var(--flash) * -1));
  transition-duration: 0.4s;
}
.team-wipe.is-out .team-wipe__panel--b { transition-delay: 0.05s; }
.team-wipe.is-out .team-wipe__panel--c { transition-delay: 0.1s; }
/* Phones composite one big layer far better than three. */
@media (max-width: 760px) {
  .team-wipe__panel--b, .team-wipe__panel--c { display: none; }
}
/* Panel colours belong to the DESTINATION theme, so the sweep announces it. */
.team-wipe[data-to="reserves"] .team-wipe__panel--a { background: #E5CB36; }
.team-wipe[data-to="reserves"] .team-wipe__panel--b { background: #1D1904; }
.team-wipe[data-to="reserves"] .team-wipe__panel--c { background: #FFFFFF; width: 40%; left: 30%; }
.team-wipe[data-to="first"] .team-wipe__panel--a { background: #C8A84B; }
.team-wipe[data-to="first"] .team-wipe__panel--b { background: #0a1230; }
.team-wipe[data-to="first"] .team-wipe__panel--c { background: #FFFFFF; width: 40%; left: 30%; }
@media (prefers-reduced-motion: reduce) {
  .team-wipe { display: none !important; }
}

/* ── Card life (both themes): sheen sweep + staged entrance ── */
.shop-card { position: relative; }
.shop-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, transparent 32%, rgba(var(--gold-bright-rgb),0.28) 50%, transparent 68%);
  transform: translateX(-135%) skewX(calc(var(--flash) * -1));
  transition: transform 0.7s var(--ease-out);
}
.shop-card:hover::after { transform: translateX(135%) skewX(calc(var(--flash) * -1)); }
.shop-card__media img { transition: transform var(--t-slow); }
.shop-card:hover .shop-card__media img { transform: scale(1.07) rotate(-1.2deg); }

@media (prefers-reduced-motion: no-preference) {
  .shop-card { animation: cardRise 0.5s var(--ease-out) both; }
  .shop-card:nth-child(2) { animation-delay: 0.05s; }
  .shop-card:nth-child(3) { animation-delay: 0.10s; }
  .shop-card:nth-child(4) { animation-delay: 0.15s; }
  .shop-card:nth-child(5) { animation-delay: 0.20s; }
  .shop-card:nth-child(6) { animation-delay: 0.25s; }
  .shop-card:nth-child(7) { animation-delay: 0.30s; }
  .shop-card:nth-child(8) { animation-delay: 0.35s; }
  .sponsor-card { animation: cardRise 0.55s var(--ease-out) both; }
  .sponsor-card:nth-child(2) { animation-delay: 0.06s; }
  .sponsor-card:nth-child(3) { animation-delay: 0.12s; }
  .sponsor-card:nth-child(4) { animation-delay: 0.18s; }
  .sponsor-card:nth-child(5) { animation-delay: 0.24s; }
  .sponsor-card:nth-child(6) { animation-delay: 0.30s; }
}
@keyframes cardRise {
  from { opacity: 0; transform: translateY(24px); }
}

/* The reserves-kit heading accent is white, but that section is #E5CB36, so
   "Lightning." rendered at 1.6:1. Independent of the dark-section experiment
   that was reverted, so it stays fixed. */
[data-team="reserves"] .reskit__title em { color: var(--navy-deep); text-shadow: none; }


/* =============================================
   NEWS ARTICLE PAGES (news/*.html)
   A slim header, one hero image and a single measured column. Shares every
   token with the main page so the two never drift apart.
   ============================================= */
.article-page { background: var(--navy-deep); }
.article-nav { position: sticky; }
.article-nav .nav__inner { justify-content: space-between; }
.article-nav__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: rgba(255,255,255,0.82); text-decoration: none;
  font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em;
  transition: color var(--t-fast);
}
.article-nav__back svg { width: 18px; height: 18px; transition: transform var(--t-base); }
.article-nav__back:hover { color: var(--white); }
.article-nav__back:hover svg { transform: translateX(-3px); }
.article-nav__back:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; border-radius: 3px; }

.article { padding-top: 80px; }
.article__hero { width: 100%; max-width: 1180px; margin: 2.5rem auto 0; padding: 0 2rem; }
.article__hero-img {
  display: block; width: 100%; height: clamp(240px, 42vw, 460px);
  object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
/* The kit shot is artwork on its own background, so it is shown whole. */
.article__hero-img--contain { object-fit: contain; background: var(--navy); height: auto; max-height: 520px; }

.article__wrap { max-width: 720px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.article__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 1.4rem;
}
.article__tag {
  background: var(--gold); color: var(--navy-deep);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 0.35rem 0.9rem; border-radius: 99px;
}
.article__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  color: var(--white); font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.04; letter-spacing: 0.005em; text-wrap: balance;
  margin-bottom: 1.3rem;
}
.article__standfirst {
  color: rgba(255,255,255,0.8); font-size: 1.16rem; line-height: 1.6;
  padding-bottom: 2rem; margin-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.article__body h2 {
  font-family: 'Anton', sans-serif; font-weight: 400;
  color: var(--white); font-size: 1.5rem; line-height: 1.15;
  letter-spacing: 0.01em; margin: 2.6rem 0 1rem;
}
.article__body h2:first-child { margin-top: 0; }
.article__body p { color: rgba(255,255,255,0.72); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.3rem; }

.article__specs { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: 0.5rem; }
.article__specs li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
}
.article__spec-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.article__spec-value { color: var(--white); font-weight: 600; }

.article__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.7rem; margin: 1.6rem 0 2.2rem; }
.article__stat {
  display: grid; gap: 0.25rem; place-items: center; text-align: center;
  padding: 1.1rem 0.6rem;
  background: rgba(var(--gold-rgb),0.1); border: 1px solid rgba(var(--gold-rgb),0.22);
  border-radius: var(--r-md);
}
.article__stat-num { font-family: 'Anton', sans-serif; font-size: 1.7rem; color: var(--gold-bright); line-height: 1; }
.article__stat-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

.article__cta { margin: 2.2rem 0 0; }

.article__more { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.12); }
.article__more-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1.2rem; }
.article__more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.article__more-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md); overflow: hidden; text-decoration: none;
  transition: transform var(--t-base), background var(--t-base), border-color var(--t-base);
}
.article__more-card img { width: 100%; height: 108px; object-fit: cover; display: block; }
.article__more-tag { margin: 0.9rem 1rem 0.4rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.article__more-title { margin: 0 1rem 1.1rem; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 0.98rem; line-height: 1.2; color: var(--white); }
.article__more-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); border-color: rgba(var(--gold-rgb),0.4); }
.article__more-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.article-footer { padding-top: 0; }
.article-footer .footer__bar { border-top: 1px solid rgba(255,255,255,0.1); }

@media (max-width: 600px) {
  .article__hero { padding: 0 1.3rem; margin-top: 1.5rem; }
  .article__wrap { padding: 2.2rem 1.3rem 3.5rem; }
  .article__more-grid { grid-template-columns: 1fr; }
}