/* ==========================================================================
   FALCONS RFC — style.css
   Design system: see design.md
   Structure:
     1. Fonts             6. Menu overlay      11. Sponsors
     2. Tokens & reset    7. Hero              12. The Club
     3. Utilities         8. Marquee           13. Banner
     4. Buttons           9. Fixtures (gold)   14. Footer
     5. Header / Nav     10. Stats             15. Motion & a11y
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS (self-hosted, WOFF2, swap so text is never invisible)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("../assets/fonts/glacial-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("../assets/fonts/glacial-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS & RESET
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours — gold sampled from the official Falcons logo (#FDB915) */
  --gold:        #FDB915;
  --gold-bright: #FFC531;
  --gold-deep:   #D99C00;

  /* Blacks & surfaces */
  --black:   #0A0A0B;
  --ink-900: #101014;
  --ink-800: #17171D;
  --ink-700: #202028;

  /* Text on dark */
  --text:       #F4F1E9;
  --text-muted: #ABA79D;
  --text-faint: #8F8B81;

  /* Text on the gold field */
  --on-gold:       #0A0A0B;
  --on-gold-muted: rgba(10, 10, 11, 0.66);
  --on-gold-line:  rgba(10, 10, 11, 0.22);

  /* Lines & glows */
  --line:      rgba(255, 255, 255, 0.09);
  --line-gold: rgba(253, 185, 21, 0.35);
  --glow-gold: 0 0 0 1px rgba(253, 185, 21, 0.55), 0 12px 40px -12px rgba(253, 185, 21, 0.35);

  /* Type */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Glacial Indifference", "Helvetica Neue", Arial, sans-serif;

  /* Spacing — 8px scale */
  --s-1: 0.5rem;   /* 8  */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 8rem;     /* 128 */

  /* Layout */
  --container: 1240px;
  --gutter: 1rem;
  --header-h: 4rem;

  /* Card corner notch — the triangle motif, cut into corners */
  --notch: 16px;

  /* Motion — strong custom curves; built-in CSS easings are too weak.
     UI transitions stay under 300ms so the site always feels responsive. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrances, hovers, releases */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --t-press: 140ms;  /* button press feedback */
  --t-fast: 200ms;   /* hovers, small state changes */
  --t-move: 380ms;   /* larger movement */
}

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

html {
  scroll-behavior: smooth;
  /* Fixed header height — keeps anchor targets clear of the nav */
  scroll-padding-top: 4.75rem;
  /* Lock horizontal panning — clip beats hidden because it can't become
     a scroll container (iOS Safari respects it on both roots) */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* The hidden attribute always wins, even over display:flex components */
[hidden] {
  display: none !important;
}

a {
  color: var(--gold);
  text-decoration: none;
}

/* Kill the legacy 300ms tap delay on touch browsers */
a,
button {
  touch-action: manipulation;
}

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

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

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-2);
  z-index: 400;
  padding: var(--s-1) var(--s-2);
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--s-2);
}

/* Section rhythm */
.section {
  padding-block: var(--s-6) var(--s-7);
}
@media (min-width: 768px) {
  .section { padding-block: var(--s-7) var(--s-8); }
}

/* Section headers — editorial: numbered eyebrow, huge left-set display title */
.section-head {
  margin-bottom: var(--s-5);
}
.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}
.section-head__eyebrow {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 5rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.section-head__sub {
  margin-top: var(--s-3);
  color: var(--text-muted);
  max-width: 52ch;
}

/* Line-mask reveal for display titles: the text slides up from behind
   its own baseline. Transition (not keyframes) so it stays interruptible.
   Hidden states are scoped to .js (set by an inline <head> script) so
   nothing is ever invisible when JavaScript doesn't run. */
.t-line {
  display: block;
  overflow: hidden;
  padding-block-end: 0.08em; /* keep descenders un-clipped */
}
.t-line > span {
  display: block;
  transition: transform 700ms var(--ease-out);
}
.js .t-line > span {
  transform: translateY(112%);
}
.js .t-line.is-visible > span {
  transform: translateY(0);
}

/* Scroll-reveal — animation (not transition) so it can never fight the
   hover/press transitions that live on the same elements. JS staggers
   siblings via --reveal-delay (45ms steps). Runs once per element. */
.js .reveal {
  opacity: 0;
}
.reveal.is-visible {
  opacity: 1;
  animation: reveal-in 500ms var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image clip reveal — the photo wipes up from its bottom edge */
.reveal--clip.is-visible {
  animation: reveal-clip 800ms var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-clip {
  from {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
    transform: none;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-fast) ease,
              color var(--t-fast) ease,
              border-color var(--t-fast) ease;
  /* Notched top-right corner — brand triangle motif */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
/* Press feedback: the interface confirms it heard you */
.btn:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn:active {
    transform: translateY(0) scale(0.97);
  }
}

.btn--gold {
  background: var(--gold);
  color: var(--black);
}
.btn--gold:hover {
  background: var(--gold-bright);
}

.btn--ghost {
  border-color: rgba(244, 241, 233, 0.4);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn--dark {
  background: var(--black);
  border-color: var(--gold);
  color: var(--gold);
}
.btn--dark:hover {
  background: var(--gold);
  color: var(--black);
}

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-fast) ease,
              border-color var(--t-fast) ease;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 11, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}


.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--header-h);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
}
.nav-brand img {
  width: 2.375rem;
}
.nav-brand__word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.nav-brand__word em {
  font-style: normal;
  color: var(--gold);
}

.nav-links {
  display: flex;
  gap: var(--s-4);
}
.nav-links a {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  /* ≥44px tap target inside the 64px bar */
  padding: 0.875rem 0.375rem;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
}
/* Scrollspy marks the section in view; team.html marks itself as page */
.nav-links a[aria-current] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.nav-cta {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

/* Burger — mobile only. Own translucent chip (not transparent) so it stays
   legible against any hero backdrop — photo, canvas or gold — since the
   header itself has no background until the page is scrolled. */
.nav-burger {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 241, 233, 0.3);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-fast) ease,
              background-color var(--t-fast) ease;
}
.nav-burger:active {
  transform: scale(0.94);
}
.nav-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25rem;
  height: 2px;
  background: var(--text);
  transition: transform 280ms var(--ease-out), background-color var(--t-fast) ease;
}
.nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.nav-burger span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.nav-burger[aria-expanded="true"] {
  border-color: var(--line-gold);
}
.nav-burger[aria-expanded="true"] span {
  background: var(--gold);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-links,
  .nav-cta { display: none; }
  .nav-burger { display: block; }
}

/* --------------------------------------------------------------------------
   6. MENU OVERLAY (mobile)
   -------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 3rem) var(--gutter) var(--s-5);
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.96), rgba(10, 10, 11, 0.99)),
    url("../assets/img/pattern-hero.jpg") center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease-out);
}

.menu-overlay__links li {
  border-bottom: 1px solid var(--line);
}
.menu-overlay__links a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: var(--s-2);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t-fast) ease;
}
.menu-overlay__links a:active {
  color: var(--gold);
}

.menu-overlay__foot {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.menu-overlay__foot p {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Staggered entrance for the overlay content */
.menu-overlay li,
.menu-overlay__foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.menu-overlay.is-open li,
.menu-overlay.is-open .menu-overlay__foot {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(60ms + var(--i, 0) * 55ms);
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--black);
}

/* Living background: the canvas triangle field over a gradient floor
   (the floor is all a no-JS visitor sees, and it still reads on-brand) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(110% 50% at 78% 100%,
      rgba(253, 185, 21, 0.14) 0%,
      rgba(253, 185, 21, 0) 60%),
    linear-gradient(160deg, #101014 0%, #0A0A0B 55%, #0D0C09 100%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Giant kinetic wordmark — slides with the scroll behind the content */
.hero__watermark {
  position: absolute;
  z-index: 0;
  left: -0.04em;
  bottom: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(7rem, 24vw, 21rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 233, 0.14);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .hero__watermark { color: rgba(244, 241, 233, 0.05); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  align-content: center;
  gap: var(--s-5);
  padding-block: calc(var(--header-h) + 4.5rem) var(--s-6);
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--s-6);
  }
}

/* One-time entrance. Title lines slide out of clipped masks (print-press
   feel); the rest fades up. Last element settles ~800ms. */
.hero__eyebrow,
.hero__tagline,
.hero__actions,
.hero-card {
  animation: reveal-in 600ms var(--ease-out) both;
}
.hero__mask {
  display: block;
  overflow: hidden;
  padding-block-end: 0.06em;
}
.hero__mask .hero__line {
  animation: line-up 750ms var(--ease-out) both;
}
.hero__mask:nth-child(1) .hero__line { animation-delay: 80ms; }
.hero__mask:nth-child(2) .hero__line { animation-delay: 170ms; }
.hero__tagline  { animation-delay: 300ms; }
.hero__actions  { animation-delay: 370ms; }
.hero-card      { animation-delay: 440ms; }
@keyframes line-up {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 13.5vw, 8.25rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hero__line {
  display: block;
}
/* Outlined first line — print-poster contrast against the solid second line */
.hero__line--outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(244, 241, 233, 0.9);
}
@supports not (-webkit-text-stroke: 2px #fff) {
  .hero__line--outline { color: var(--text); }
}
.hero__title .gold {
  font-style: normal;
  color: var(--gold);
}
.hero__title .amp {
  font-style: normal;
  color: var(--text-faint);
}

.hero__tagline {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
  max-width: 44ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* ---- Next-match card (docked right on desktop) ---- */
.hero-card {
  justify-self: start;
  width: min(100%, 400px);
  padding: var(--s-3);
  background: rgba(16, 16, 20, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
@media (min-width: 1024px) {
  .hero-card { justify-self: end; }
}
.hero-card__label {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: var(--s-2);
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.hero-card__label--today {
  animation: badge-pulse 2s ease infinite;
}
.hero-card__comp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-1);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}
.hero-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-2);
}
.hero-card__meta {
  display: grid;
  gap: 0.375rem;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.hero-card__meta strong {
  color: var(--text);
}
.hero-card__link {
  display: inline-block;
  margin-top: var(--s-2);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
  .hero-card__link:hover { color: var(--gold-bright); }
}

/* Compact team treatment inside the hero card */
.hero-card .match-team__logo { height: 3rem; }
.hero-card .match-team__initials {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
}
.hero-card .match-team__name { font-size: 0.875rem; }
.hero-card .match-ko {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

/* Live countdown to kick-off — ticks every second */
.hero-card__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding-block: var(--s-2) 0.25rem;
}
.hero-card__count-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.hero-card__count-num i {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-left: 0.125rem;
}
.hero-card__count-label {
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   8. MARQUEE — shared ticker mechanics
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
}
/* Spacing comes from per-item margins, not flex gap: the track is two
   identical halves, and only uniform per-item spacing keeps the -50%
   loop point invisible. */
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-roll var(--marquee-speed, 30s) linear infinite;
}
.marquee__track > * {
  margin-right: var(--s-4);
}
/* Hold the rail still while the visitor reads it */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
@keyframes marquee-roll {
  to { transform: translateX(-50%); }
}

/* Gold diamond separator */
.marquee i {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Hero ticker flavour */
.hero__marquee {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  --marquee-speed: 32s;
}
.hero__marquee span {
  padding-block: 0.875rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. FIXTURES — the gold field
   -------------------------------------------------------------------------- */
.section--matches {
  background:
    linear-gradient(180deg, rgba(253, 185, 21, 0.94), rgba(253, 185, 21, 0.9)),
    url("../assets/img/jersey-gold.jpg") center / cover no-repeat;
  color: var(--on-gold);
}
.section--matches .section-head__eyebrow { color: var(--on-gold); }
.section--matches .section-head__sub { color: var(--on-gold-muted); }
.section--matches :focus-visible {
  outline-color: var(--black);
}
.section--matches ::selection {
  background: var(--black);
  color: var(--gold);
}

/* Rail arrows — flank the rail itself, vertically centred over the cards */
.rail-btn {
  position: absolute;
  top: calc(50% - var(--s-1));
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--black);
  border: 1px solid rgba(253, 185, 21, 0.4);
  color: var(--gold);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform var(--t-press) var(--ease-out),
              opacity var(--t-fast) ease,
              background-color var(--t-fast) ease,
              color var(--t-fast) ease;
}
.rail-btn--prev { left: 0.375rem; }
.rail-btn--next { right: 0.375rem; }
@media (min-width: 1360px) {
  /* Room outside the container: let the arrows sit beside the cards */
  .rail-btn--prev { left: -0.75rem; }
  .rail-btn--next { right: -0.75rem; }
}
@media (hover: hover) and (pointer: fine) {
  .rail-btn:hover {
    background: var(--ink-800);
    color: var(--gold-bright);
  }
}
.rail-btn:active {
  transform: translateY(-50%) scale(0.94);
}
.rail-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* ---- Featured match: the next fixture, full-width panel ---- */
.match-featured {
  /* Reserve space so the panel arriving after fetch doesn't shift the page */
  min-height: 280px;
  margin-bottom: var(--s-4);
}
.featured-card {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-3);
  background:
    linear-gradient(120deg, rgba(23, 23, 29, 0.55), rgba(10, 10, 11, 0) 55%),
    linear-gradient(160deg, var(--ink-800), var(--black));
  color: var(--text);
  box-shadow: 0 24px 60px -30px rgba(10, 10, 11, 0.55);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
  /* Pointer tilt (fine pointers only; vars driven by JS) */
  transform: perspective(1100px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  transition: transform 300ms var(--ease-out);
}
.featured-card.is-tilting {
  transition: none;
}
@media (min-width: 768px) {
  .featured-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    padding: var(--s-5) var(--s-4);
  }
}

.featured-card__badge {
  display: inline-block;
  width: fit-content;
  padding: 0.3125rem 0.875rem;
  margin-bottom: var(--s-2);
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.featured-card--today .featured-card__badge {
  animation: badge-pulse 2s ease infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 185, 21, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(253, 185, 21, 0); }
}

.featured-card__comp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Home / Away tag beside the competition line */
.match-side {
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px);
}
.featured-card__date {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-block: 0.375rem var(--s-2);
}
.featured-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--s-3);
  font-size: 1rem;
  color: var(--text-muted);
}
.featured-card__meta svg {
  flex-shrink: 0;
  color: var(--gold);
}
.featured-card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.featured-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
}
@media (min-width: 768px) {
  .featured-card__teams { gap: var(--s-4); }
}

.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.match-team__logo {
  height: 4rem;
  width: auto;
  object-fit: contain;
}
.featured-card .match-team__logo { height: 5rem; }
@media (min-width: 768px) {
  .featured-card .match-team__logo { height: 6.5rem; }
}
/* Text fallback when an opponent has no logo file */
.match-team__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  border: 1px solid var(--line-gold);
  background: rgba(253, 185, 21, 0.08);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.featured-card .match-team__initials {
  width: 5rem;
  height: 5rem;
  font-size: 1.75rem;
}
@media (min-width: 768px) {
  .featured-card .match-team__initials {
    width: 6.5rem;
    height: 6.5rem;
    font-size: 2.25rem;
  }
}
.match-team__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  /* .match-team is a column flexbox with align-items: center, so without
     an explicit width its children size to their own content instead of
     stretching — max-width: 100% was a no-op, since "100% of an
     auto-sized box" constrains nothing. This is what let names overflow
     their column and get force-truncated instead of wrapping. */
  width: 100%;
  /* Wrap to 2 lines instead of truncating mid-word: real names like
     "UM Wolves" and "Overseas" were ellipsizing on cramped phones even
     though they fit fine over two lines. text-overflow stays as a
     fallback for the rare browser without line-clamp support. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* "Overseas"/"Kavallieri" are single words with no space to wrap at;
     without this the browser has no legal break point and falls back
     to the ellipsis on line one instead of ever reaching line two */
  overflow-wrap: break-word;
}
.featured-card .match-team__name {
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
}

/* Kick-off chip between the crests */
.match-ko {
  justify-self: center;
  padding: 0.4375rem 0.875rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}

/* ---- Fixture rail ---- */
.rail {
  /* Bleed to the viewport edge on the right — the cut-off card says "scroll me" */
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.rail__track {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-2);
  scrollbar-width: none;
  cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.rail__track > li {
  flex: 0 0 min(78vw, 300px);
  scroll-snap-align: start;
  display: flex;
}

/* ---- Rail match card: black on gold ---- */
.match-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3);
  background: linear-gradient(160deg, var(--ink-800), var(--black));
  color: var(--text);
  box-shadow: 0 16px 40px -24px rgba(10, 10, 11, 0.5);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
  /* Composed: --rail-skew leans the cards with scroll velocity (set on the
     track by JS), --card-lift carries the hover raise */
  transform: skewX(var(--rail-skew, 0deg)) translateY(var(--card-lift, 0));
  transition: transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .match-card:hover {
    --card-lift: -4px;
  }
}

.match-card__comp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-1);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.match-card__date {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.match-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-1);
  padding-block: var(--s-2);
  border-block: 1px solid var(--line);
}
/* The rail card's columns are the narrowest on the whole site; a touch
   smaller than the base size lets 8-letter names like "Overseas" sit on
   one line instead of breaking mid-word */
.match-card .match-team__name {
  font-size: 0.875rem;
}
.match-card__venue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.match-card__venue svg {
  flex-shrink: 0;
  color: var(--gold);
}

.matches-note {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  color: var(--on-gold-muted);
}

/* Empty state (no upcoming fixtures) */
.matches-empty {
  padding: var(--s-6) var(--s-3);
  text-align: center;
  background: var(--black);
  color: var(--text-muted);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
.matches-empty strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--s-1);
}

/* --------------------------------------------------------------------------
   9b. CLUB STANDINGS — the league table
   -------------------------------------------------------------------------- */
.standings {
  overflow-x: auto;
}
.standings__table {
  width: 100%;
  border-collapse: collapse;
}
.standings__table th {
  padding: 0.75rem 0.75rem;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
.standings__table th.standings__club-h {
  text-align: left;
}
.standings__table td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  color: var(--text-muted);
}
.standings__pos {
  width: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-align: center;
  color: var(--text-faint);
}
.standings__club {
  min-width: 11rem;
}
.standings__club img {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  margin-right: 0.75rem;
  vertical-align: middle;
}
.standings__club span {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  vertical-align: middle;
}
.standings__num {
  width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.standings__pts {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text);
}
.ptable__yc { color: var(--gold); }
.ptable__rc { color: #E0766A; }

.standings__table tr.is-falcons {
  background: rgba(253, 185, 21, 0.07);
}
.standings__table tr.is-falcons .standings__pts {
  color: var(--gold);
}
.standings__note {
  margin-top: var(--s-3);
  font-size: 0.875rem;
  color: var(--text-faint);
}
/* On narrow screens the wrapper scrolls sideways as a last resort. The
   standings table is now just P/W/D/L/PTS, so no columns need hiding. */
@media (max-width: 560px) {
  .col-min { display: none; }
  .ptable__player { min-width: 8.5rem; }
  /* Player name + P + Pts are the columns fans actually check on a
     phone; YC/RC were overflowing the viewport at this width instead
     of either fitting or being reachable, since nothing hid them */
  .col-yc, .col-rc { display: none; }

  /* Standings: tighten the numeric columns so the club column has room to
     keep the logo and full name on ONE line (e.g. "UM WOLVES"). */
  .standings__table th, .standings__table td { padding: 0.8rem 0.3rem; }
  .standings__pos { width: 1.4rem; }
  .standings__num { width: 1.55rem; }
  .standings__club { min-width: 0; white-space: nowrap; }
  .standings__club img { width: 1.6rem; height: 1.6rem; margin-right: 0.4rem; }
  .standings__club span { font-size: 0.95rem; letter-spacing: 0.01em; white-space: nowrap; }
  .standings__pts { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   9c. PLAYER STANDINGS — season leader boards
   -------------------------------------------------------------------------- */
.section--players {
  border-top: 1px solid var(--line);
}
.leaders {
  /* Hosts the full squad stats table (shares .standings__table styling) */
  overflow-x: auto;
}
.ptable__player {
  min-width: 11rem;
}
.ptable__name {
  display: block;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.ptable__position {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.ptable .standings__pts {
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   10. STATS — the club in numbers
   -------------------------------------------------------------------------- */
.stats {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.95), rgba(10, 10, 11, 0.92)),
    url("../assets/img/pattern-dark.jpg") center / cover no-repeat;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-3);
}
@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  padding-top: var(--s-1);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat__num em {
  font-style: normal;
  color: var(--gold);
}
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. SPONSORS
   -------------------------------------------------------------------------- */
.sponsor-spotlight {
  margin-bottom: var(--s-6);
}
.spotlight-card {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  background:
    linear-gradient(120deg, rgba(16, 16, 20, 0.94), rgba(16, 16, 20, 0.86)),
    url("../assets/img/banner-split.jpg") center / cover no-repeat;
  border: 1px solid var(--line);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
@media (min-width: 768px) {
  .spotlight-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--s-5);
    padding: var(--s-5) var(--s-4);
  }
}
.spotlight-card__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--gold);
  background: rgba(253, 185, 21, 0.08);
  border: 1px solid var(--line-gold);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.spotlight-card img {
  max-height: 6rem;
  width: auto;
}
.spotlight-card__label {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.375rem;
}
.spotlight-card__name {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.spotlight-card__tag {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 1rem;
}
/* When the spotlight is a link (main sponsor has a website) */
a.spotlight-card {
  transition: border-color var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  a.spotlight-card:hover { border-color: var(--line-gold); }
}

/* Partner marquee — full-bleed, always rolling */
.marquee--sponsors {
  border-block: 1px solid var(--line);
  --marquee-speed: 38s;
}
.marquee--sponsors .marquee__track {
  padding-block: var(--s-4);
}
.marquee--sponsors .marquee__track > * {
  margin-right: 0; /* the item's own padding carries the rhythm */
}
.sponsor-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: calc(var(--s-5) * 2);
  white-space: nowrap;
}
.sponsor-item__link {
  display: flex;
  align-items: center;
}
.sponsor-item__logo {
  /* Uniform bounding box: wide wordmarks scale down, tall marks cap at the
     box height, so every partner reads at the same visual weight */
  width: 8.5rem;
  height: 3.5rem;
  object-fit: contain;
}
/* Gold diamond separator, centred in the item's trailing space */
.sponsor-item::after {
  content: "";
  position: absolute;
  right: calc(var(--s-5) - 4px);
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.sponsor-item__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .sponsor-item:hover .sponsor-item__name {
    color: var(--gold);
  }
}


/* --------------------------------------------------------------------------
   12. THE CLUB
   -------------------------------------------------------------------------- */
.club-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .club-grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--s-7);
    align-items: start;
  }
}

.club-about p {
  color: var(--text-muted);
  margin-bottom: var(--s-2);
  max-width: 58ch;
}
.club-about p:first-child {
  font-size: 1.125rem;
  color: var(--text);
}


.club-social__lead {
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
  color: var(--text-muted);
}
.club-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform var(--t-press) var(--ease-out),
              border-color var(--t-fast) ease,
              color var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .social-link:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
  }
}
.social-link:active {
  transform: scale(0.97);
}
.social-link svg {
  flex-shrink: 0;
}

.club-photo {
  overflow: hidden;
  background: var(--ink-900);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
.club-photo img {
  width: 100%;
  transition: transform 600ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
  .club-photo:hover img {
    transform: scale(1.03);
  }
}
.club-photo figcaption {
  padding: var(--s-2);
  font-size: 0.875rem;
  color: var(--text-faint);
}

.club-side__label {
  margin-block: var(--s-4) var(--s-2);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Honours — a numbered index, editorial style */
.honours {
  border-top: 1px solid var(--line);
  list-style: none;
  padding: 0;
  margin: 0;
}
.honour-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) ease,
              transform var(--t-fast) var(--ease-out);
}
/* Triangle bullet (brand motif) instead of a rank number, so no honour
   reads as "more important" than the next */
.honour-row::before {
  content: "\25B8";
  flex-shrink: 0;
  color: var(--gold);
  font-size: 0.9rem;
}
@media (hover: hover) and (pointer: fine) {
  .honour-row:hover {
    transform: translateX(6px);
  }
}
.honour-row__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.honour-row__detail {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13a. PHOTO HERO — shared banner for team.html and about.html, each with
   its own reserved photo slot (falls back to the jersey pattern until the
   file exists; the "coming soon" note text is set per page via data-attr)
   -------------------------------------------------------------------------- */
.photo-hero {
  position: relative;
  min-height: 40svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0.9)),
    url("../assets/img/pattern-hero.jpg") center / cover no-repeat;
}
.photo-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.photo-hero::after {
  /* Readability floor over the photo */
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, 0.88));
}
.photo-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-h) + 2.5rem) var(--s-4);
}
@media (min-width: 768px) {
  .photo-hero { min-height: 58svh; }
  .photo-hero__inner {
    padding-block: calc(var(--header-h) + 5rem) var(--s-5);
  }
}
.photo-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 0.94;
  text-transform: uppercase;
}
.photo-hero__sub {
  margin-top: var(--s-2);
  color: var(--text-muted);
  max-width: 44ch;
}
/* Until the photo file exists, say so quietly */
.photo-hero.no-photo .photo-hero__sub::after {
  content: " " attr(data-photo-note);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   13a2. GALLERY — through the years (about.html), drag/swipe stage +
   widening filmstrip. Real club photos, not stock: no invented captions,
   only what is plainly true of each picture.
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--s-2);
}
.gallery__stage {
  position: relative;
}
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  background: var(--ink-900);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 10;
}
.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .gallery__slide { aspect-ratio: 16 / 8; }
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(10, 10, 11, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 241, 233, 0.3);
  color: var(--gold);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.gallery__arrow--prev { left: 0.75rem; }
.gallery__arrow--next { right: 0.75rem; }
@media (hover: hover) and (pointer: fine) {
  .gallery__arrow:hover { background: rgba(10, 10, 11, 0.85); }
}
.gallery__arrow:active { transform: translateY(-50%) scale(0.92); }

.gallery__strip {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.25rem;
}
/* At >=768px the full 11-thumbnail strip is narrower than the container
   (fits well under 700px even fully widened), so centre it instead of
   leaving it flush left. If the photo count grows enough to overflow at
   this breakpoint, drop this rule first — centring an overflowing
   scroll container can hide its start. */
@media (min-width: 768px) {
  .gallery__strip {
    justify-content: center;
  }
}
.gallery__strip::-webkit-scrollbar { display: none; }
.gallery__thumb {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 3.25rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--ink-800);
  cursor: pointer;
  opacity: 0.6;
  /* Only opacity transitions; the size change is instant to avoid
     animating layout (flex-basis/width) which thrashes on scroll */
  transition: opacity var(--t-fast) ease;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb.is-active {
  flex-basis: 5.5rem;
  width: 5.5rem;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .gallery__thumb:not(.is-active):hover { opacity: 0.9; }
}

/* --------------------------------------------------------------------------
   13b. HISTORY — the club story (about.html), segmented by era. Each block
   has room to take a photo alongside the text later without restructuring.
   -------------------------------------------------------------------------- */
/* About history — scroll timeline: sticky era labels, dot nodes and a gold
   progress rail that fills as the section scrolls through the viewport. */
.timeline {
  position: relative;
}
.timeline__line {
  position: absolute;
  left: 0.6875rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.timeline__progress {
  position: absolute;
  inset: 0 0 auto 0;
  width: 2px;
  height: 0;
  background: linear-gradient(to top, var(--gold-bright), var(--gold) 45%, transparent);
}

.timeline__row {
  position: relative;
  padding: var(--s-4) 0 var(--s-5) 2.75rem;
}
@media (min-width: 900px) {
  .timeline__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s-6);
    padding: var(--s-6) 0 var(--s-6) 3rem;
  }
}
.timeline__head {
  position: relative;
  margin-bottom: var(--s-2);
}
@media (min-width: 900px) {
  .timeline__head {
    position: sticky;
    top: calc(var(--header-h) + 1.75rem);
    align-self: start;
    margin-bottom: 0;
  }
}
.timeline__dot {
  position: absolute;
  top: 0.55rem;
  left: -2.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--black);
  box-shadow: 0 0 0 2px var(--line-gold);
}
@media (min-width: 900px) {
  .timeline__dot { left: -2.75rem; }
}
.timeline__year {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1;
  color: var(--gold);
}
.timeline__heading {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.timeline__body {
  max-width: 62ch;
}
.timeline__body p {
  color: var(--text-muted);
  line-height: 1.7;
}

/* Closing note under the rail */
.timeline__thanks {
  position: relative;
  margin-top: var(--s-3);
  padding: var(--s-5) 0 0 2.75rem;
  border-top: 1px solid var(--line-gold);
  color: var(--text-muted);
  max-width: 62ch;
}
@media (min-width: 900px) {
  .timeline__thanks { padding-left: 3rem; }
}

/* --------------------------------------------------------------------------
   13b2. LEGAL PAGES — privacy.html, terms.html. Plain prose, no photo hero:
   these pages exist to be read, not to sell the club.
   -------------------------------------------------------------------------- */
.legal-top {
  padding-block: calc(var(--header-h) + 3rem) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.legal-top__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
}
.legal-top__updated {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  color: var(--text-faint);
}

.legal {
  display: grid;
  gap: var(--s-5);
  max-width: 70ch;
}
.legal__section {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.legal__section:first-child {
  padding-top: 0;
  border-top: 0;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: var(--s-1);
}
.legal p,
.legal li {
  color: var(--text-muted);
}
.legal p strong {
  color: var(--text);
}
.legal ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
}
.legal li {
  list-style: disc;
}
.legal a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.legal__note {
  padding: var(--s-3);
  background: var(--ink-900);
  border: 1px solid var(--line-gold);
  font-size: 1rem;
}
.legal__note p {
  color: var(--text-muted);
}

.squad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.squad-unit__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.squad-pos {
  min-width: 0;                  /* let the rail's overflow scroll, not blow out the grid */
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}
.squad-pos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.squad-pos__label {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pos-arrows {
  display: flex;
  gap: 0.5rem;
}
.pos-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--ink-900);
  border: 1px solid var(--line-gold);
  color: var(--gold);
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-fast) ease, color var(--t-fast) ease,
              opacity var(--t-fast) ease;
}
.pos-arrow:active { transform: scale(0.94); }
.pos-arrow[disabled] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pos-arrow:not([disabled]):hover {
    background: var(--gold);
    color: var(--on-gold);
  }
}

/* Player card carousel — one rail per position */
.pcard-rail {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 2px 2px var(--s-1);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pcard-rail::-webkit-scrollbar { display: none; }
.pcard-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }

.pcard {
  flex: 0 0 44%;                 /* phone: two per row, next card peeking */
  scroll-snap-align: start;
}
@media (min-width: 520px)  { .pcard { flex-basis: 30.5%; } }   /* ~3 up */
@media (min-width: 820px)  { .pcard { flex-basis: 22.5%; } }   /* ~4 up */
@media (min-width: 1100px) { .pcard { flex-basis: calc((100% - 4rem) / 5); } } /* 5 up */

.pcard__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: border-color var(--t-fast) ease;
}
.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Branded fallback shown when a player has no headshot yet */
.pcard__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 3.75rem);
  letter-spacing: 0.06em;
  color: rgba(253, 185, 21, 0.85);
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(253, 185, 21, 0.12), transparent 62%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
}
.pcard__name {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__photo { border-color: var(--line-gold); }
}

/* --------------------------------------------------------------------------
   13a-ii. INSTAGRAM — follow grid + CTA (homepage)
   -------------------------------------------------------------------------- */
.section--instagram {
  border-top: 1px solid var(--line);
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: var(--s-4);
}
@media (min-width: 768px) {
  .ig-grid { grid-template-columns: repeat(6, 1fr); }
}
.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-800);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-fast) var(--ease-out);
}
.ig-tile__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(10, 10, 11, 0.4);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.ig-tile:focus-visible .ig-tile__icon { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ig-tile:hover img { transform: scale(1.06); }
  .ig-tile:hover .ig-tile__icon { opacity: 1; }
}
.ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   13a-iii. BLOG — post grid + empty state (blog.html)
   -------------------------------------------------------------------------- */
.section--blog {
  border-top: 1px solid var(--line);
}
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(253, 185, 21, 0.08), transparent 60%),
    var(--ink-800);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.blog-card__mark {
  display: block;
  width: 100%;
  height: 100%;
  background:
    url("../assets/img/falcons-mark.png") center / 34% no-repeat,
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
  opacity: 0.5;
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: var(--s-3);
}
.blog-card__date {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.blog-card__excerpt {
  color: var(--text-muted);
  font-size: 1rem;
}
.blog-card__more {
  margin-top: auto;
  padding-top: var(--s-1);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover { border-color: var(--line-gold); transform: translateY(-4px); }
}
.blog-empty {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.blog-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.blog-empty p {
  max-width: 46ch;
  margin: 0 auto var(--s-4);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13a-iv. BLOG POST — single article (post.html)
   -------------------------------------------------------------------------- */
.section--post { border-top: 1px solid var(--line); }
.post { max-width: 68ch; }
.post__back {
  display: inline-block;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--t-fast) ease;
}
.post__back:hover { color: var(--gold); }
.post__kicker {
  margin-top: var(--s-4);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.post__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: var(--s-1);
  color: var(--text);
}
.post__date {
  margin-top: var(--s-2);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.post__figure {
  margin: var(--s-5) 0 0;
  max-width: 420px;
  border: 1px solid var(--line-gold);
  overflow: hidden;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.post__figure img { display: block; width: 100%; height: auto; }
.post__body { margin-top: var(--s-4); }
.post__body p {
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: var(--s-3);
}
.post__body p:first-child {
  color: var(--text);
  font-size: 1.375rem;
  line-height: 1.5;
}
.post__back--foot {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  width: 100%;
}
.post__missing { margin-top: var(--s-5); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13b. JOIN — training application form
   -------------------------------------------------------------------------- */
.section--join {
  border-top: 1px solid var(--line);
}
.join-grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 1024px) {
  .join-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--s-7);
    align-items: start;
  }
}
.join-copy .section-head {
  margin-bottom: var(--s-3);
}
.join-points {
  display: grid;
  gap: var(--s-2);
}
.join-points li {
  position: relative;
  padding-left: 1.375rem;
  color: var(--text-muted);
  max-width: 44ch;
}
.join-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

.join-form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3);
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
@media (min-width: 768px) {
  .join-form { padding: var(--s-4); }
}
.join-form__row {
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 640px) {
  .join-form__row { grid-template-columns: 1fr 1fr; }
}

.field {
  display: grid;
  gap: 0.5rem;
  /* Top-align: a neighbour's hint text must never stretch this field's input */
  align-content: start;
}
.field label {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}
.field input,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px floor stops iOS zooming the page on focus */
  color: var(--text);
  background: rgba(10, 10, 11, 0.6);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.field input:focus,
.field select:focus {
  border-color: var(--gold);
  outline: none;
  background: rgba(10, 10, 11, 0.85);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FDB915' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}
.field select:invalid {
  color: var(--text-faint);
}
/* Hide the number spinners — they read as clutter on a one-shot form */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.phone-wrap {
  display: flex;
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.6);
  transition: border-color var(--t-fast) ease;
}
.phone-wrap:focus-within {
  border-color: var(--gold);
}
.phone-prefix {
  display: flex;
  align-items: center;
  padding-inline: 0.875rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold);
  border-right: 1px solid var(--line);
  background: rgba(253, 185, 21, 0.06);
}
.phone-wrap input {
  border: 0;
  background: transparent;
}
.phone-wrap input:focus {
  background: transparent;
}

.field__hint {
  font-size: 0.75rem;
  color: var(--text-faint);
}
.field__error {
  font-size: 0.875rem;
  font-weight: 700;
  color: #E0766A;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid .phone-wrap {
  border-color: #E0766A;
}

.join-form__submit {
  justify-self: start;
}
.join-form__note {
  font-size: 0.875rem;
  color: var(--text-faint);
  max-width: 44ch;
}
.join-form__status {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  min-height: 1.5em;
}
.join-form__status a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.97), rgba(10, 10, 11, 0.93)),
    url("../assets/img/pattern-dark.jpg") center / cover no-repeat;
  border-top: 1px solid var(--line);
}

/* The send-off — kept tight, especially on phones */
.footer-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .footer-hero { padding-block: var(--s-6) var(--s-5); }
}
.footer-hero__line {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.footer-hero__line span {
  color: var(--gold);
}
.footer-hero__mark {
  width: clamp(72px, 12vw, 120px);
  margin-bottom: 0.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding-block: var(--s-4);
}
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-4);
    padding-block: var(--s-5);
  }
  .footer-brand { grid-column: auto; }
}

.footer-brand__mark {
  width: 3.5rem;
  height: auto;
  opacity: 0.9;
}

.footer-col h3 {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.footer-col li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--text-muted);
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.375rem;
  margin-block: -0.375rem;
  color: var(--text-muted);
  transition: color 150ms ease;
}
.footer-col a svg {
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover {
    color: var(--gold);
  }
}

.footer-legal {
  border-top: 1px solid var(--line);
}
.footer-legal__inner {
  padding-block: var(--s-3);
  font-size: 0.875rem;
  color: var(--text-faint);
  text-align: center;
}
.footer-legal__inner a {
  color: var(--text-muted);
  transition: color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-legal__inner a:hover { color: var(--gold); }
}
.footer-legal__sep {
  margin-inline: 0.375rem;
  color: var(--text-faint);
}
/* Each legal half stays intact; narrow screens wrap between them */
.footer-legal__part {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .footer-legal__sep { display: none; }
}

/* Novum wordmark, centred just under the credit line */
.footer-novum {
  display: inline-block;
  margin-top: var(--s-2);
  opacity: 0.7;
  transition: opacity 150ms ease;
}
.footer-novum img {
  height: 1.125rem;
  width: auto;
}
@media (hover: hover) and (pointer: fine) {
  .footer-novum:hover { opacity: 1; }
}

/* Privacy/Terms now live in their own "Legal" footer-col (next to
   Explore), styled by the existing .footer-col rules — not down here
   under the copyright line. */

.noscript-note {
  padding: var(--s-3);
  background: var(--gold);
  color: var(--black);
  text-align: center;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   16. 404 PAGE — full-screen, centred, no chrome
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.82), rgba(10, 10, 11, 0.94)),
    url("../assets/img/pattern-hero.jpg") center / cover no-repeat;
}
.error-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-page__mark {
  width: clamp(72px, 12vw, 108px);
  margin-bottom: var(--s-3);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.error-page__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 6vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: var(--s-1);
}
.error-page__text {
  margin-top: var(--s-2);
  color: var(--text-muted);
  max-width: 42ch;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   15. MOTION & ACCESSIBILITY
   Reduced motion means fewer and gentler animations, not zero: gentle
   opacity fades stay (they aid comprehension), movement goes.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Reveals and hero entrance become plain fades — no translation */
  .reveal.is-visible,
  .reveal--clip.is-visible,
  .hero__eyebrow,
  .hero__title .hero__line,
  .hero__tagline,
  .hero__actions,
  .hero-card {
    animation: reveal-fade 200ms ease both;
    animation-delay: 0ms;
  }

  /* Display titles: no slide, just appear */
  .t-line > span {
    transform: none;
    transition: none;
  }

  /* Marquees stop rolling and wrap into a static row instead */
  .marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero__marquee {
    display: none;
  }

  /* No movement: lifts, presses, slides, pulses, tilts, skews, photo zoom */
  .btn,
  .btn:hover,
  .btn:active,
  .match-card,
  .match-card:hover,
  .featured-card,
  .featured-card.is-tilting,
  .honour-row:hover,
  .rail-btn:active,
  .nav-burger:active,
  .social-link:hover,
  .social-link:active,
  .club-photo img,
  .club-photo:hover img,
  .gallery__arrow:active,
  .gallery__thumb {
    transform: none;
    transition-property: background-color, color, border-color, opacity;
  }
  .gallery__track {
    scroll-behavior: auto;
  }
  .gallery__thumb {
    transition-duration: 0.01ms;
  }
  .hero__watermark {
    transform: none !important;
  }
  .menu-overlay li,
  .menu-overlay__foot {
    transform: none;
    transition-delay: 0ms;
  }
  /* The rail arrows still need their vertical centring transform */
  .rail-btn,
  .rail-btn:active {
    transform: translateY(-50%);
  }
  .featured-card__badge,
  .hero-card__label--today {
    animation: none;
  }
  .rail__track {
    scroll-behavior: auto;
  }
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}