/* =========================================================================
   Stamford Italian Soccer League
   Design system. Deep-navy stadium night, Azzurri blue identity,
   gold reserved for season and championship markers, tricolore as hairline only.
   ========================================================================= */

:root {
  /* Identity */
  --azzurri-blue: #1769AA;
  --bright-blue: #2389D7;
  --deep-navy: #07182B;
  --graphite: #15181D;
  --warm-white: #EDF1F7;   /* cool near-white; page ground and text on dark */
  --italian-green: #178447;
  --italian-red: #C83332;
  --muted-gold: #C2A24A;

  /* Derived surfaces */
  --navy-raised: #0C2440;
  --navy-line: #16324F;
  --paper: #FFFFFF;
  --paper-sunk: #E1E8F2;
  --ink: #10151C;
  --ink-soft: #45505E;
  --ink-faint: #5E6875;
  --gold-on-light: #7A6115;
  --hairline: #D3DCE7;
  --on-navy: #E8EEF5;
  --on-navy-soft: #A6BACE;

  /* Focus */
  --focus: #7FC4F5;        /* links + focus ring on dark surfaces */
  --focus-light: #0A5A96;  /* focus ring on light surfaces */

  /* Type */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heritage: "Lora", Georgia, "Times New Roman", serif;

  /* Scale */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.45rem);
  --step-2: clamp(1.55rem, 1.40rem + 0.75vw, 2.1rem);
  --step-3: clamp(1.85rem, 1.6rem + 1.1vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.8rem + 2vw, 3.5rem);

  /* Rhythm */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(2.5rem, 5vw, 4.25rem);
  --measure: 68ch;
  --radius: 3px;
  --shell: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  overflow-x: clip;
  max-width: 100vw;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Accessibility utilities ---------- */
.skip-link {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--deep-navy); color: var(--warm-white);
  padding: 0.7rem 1.2rem; z-index: 200;
  font-family: var(--display); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:target, [id] { scroll-margin-top: 96px; }

:focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Brighter ring where the surface is dark */
.masthead :focus-visible,
.site-footer :focus-visible,
.hero-bar :focus-visible,
.page-head :focus-visible,
.stat-band :focus-visible,
.section--navy :focus-visible,
.section--graphite :focus-visible,
.club-card--panel:focus-visible,
.feature-card :focus-visible,
.lineage :focus-visible,
.memoriam :focus-visible,
.nav-drawer :focus-visible { outline-color: var(--focus); }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 860px; }
.shell--wide { max-width: 1320px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(1.8rem, 3.5vw, 2.8rem); }
.section--navy { background: var(--deep-navy); color: var(--on-navy); }
.section--graphite { background: #0E1B2B; color: var(--on-navy); }
.section--sunk { background: var(--paper-sunk); }
.section--paper { background: var(--paper); }

/* Soft stadium light on dark sections. No pattern, no stripes. */
.section--pitch {
  position: relative;
  overflow: hidden;
}
.section--pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% -15%, rgba(35,137,215,0.20), transparent 70%);
  pointer-events: none;
}
.section--pitch > * { position: relative; z-index: 1; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); }
p + p { margin-top: 1em; }

a { color: var(--azzurri-blue); text-underline-offset: 0.18em; }
.section--navy a, .section--graphite a { color: var(--focus); }

/* SIGNATURE: the province eyebrow.
   Every club, section and matchday carries its Italian place-name above the name. */
.eyebrow {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: none;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow--plain::before { display: none; }

/* Bright gold is legible only on the dark surfaces. */
.hero .eyebrow,
.page-head .eyebrow,
.section--navy .eyebrow,
.section--graphite .eyebrow,
.feature-card .eyebrow,
.stat-band .eyebrow,
.pathway--partner .eyebrow { color: var(--muted-gold); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.section--navy .lede, .section--graphite .lede { color: var(--on-navy-soft); }

.heritage-quote {
  font-family: var(--heritage);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 3px solid var(--muted-gold);
  padding-left: 1.4rem;
  max-width: 56ch;
}
.section--navy .heritage-quote { color: var(--on-navy-soft); }

/* Tricolore hairline. The only place green and red appear as blocks,
   and never adjacent at any meaningful size. */
.tricolore {
  height: 3px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    var(--italian-green) 0 33.33%,
    var(--warm-white) 33.33% 66.66%,
    var(--italian-red) 66.66% 100%
  );
}

.rule-gold { height: 2px; border: 0; background: var(--muted-gold); width: 4rem; margin: 0 0 1.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  max-width: 100%; /* a button can never force its container (and therefore the page) wider —
    long unbreakable labels (e.g. an @handle with no spaces) break instead of overflowing */
  min-width: 0; /* overrides the flex/grid-item default of min-width:auto, which otherwise refuses
    to shrink below an unbreakable label's intrinsic width even when max-width is set */
  overflow-wrap: break-word;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn--primary { background: var(--azzurri-blue); color: #fff; }
.btn--primary:hover { background: var(--bright-blue); }
.btn--ghost {
  border-color: currentColor; color: inherit;
  background: rgba(255,255,255,0.06);
}
.btn--ghost:hover { background: rgba(255,255,255,0.16); }
.section--navy .btn--ghost,
.section--graphite .btn--ghost,
.hero-bar .btn--ghost,
.page-head .btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,0.65); }
.section--navy .btn--ghost:hover,
.section--graphite .btn--ghost:hover,
.hero-bar .btn--ghost:hover { background: rgba(255,255,255,0.2); border-color: #fff; }
.section--paper .btn--ghost:hover, .section--sunk .btn--ghost:hover { background: rgba(23,105,170,0.09); }
.btn--gold {
  background: var(--muted-gold);
  color: var(--deep-navy);
  border-color: var(--muted-gold);
  font-weight: 700;
}
.btn--gold:visited, .btn--gold:hover, .btn--gold:focus,
.section--navy .btn--gold, .section--graphite .btn--gold,
.hero-bar .btn--gold, .page-head .btn--gold, .feature-card .btn--gold {
  color: var(--deep-navy);
}
.btn--gold:hover { background: #D4B45E; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; min-width: 0; }

.ext::after {
  content: "↗";
  font-size: 0.85em;
  line-height: 1;
}

/* ---------- Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--deep-navy);
  border-bottom: 1px solid var(--navy-line);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--warm-white);
  padding-block: 0.5rem;
}
.brand__crest { width: auto; height: 68px; object-fit: contain; flex: none; }
.brand__crest--fallback {
  display: grid; place-items: center;
  background: var(--azzurri-blue);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.02em; color: #fff; border-radius: var(--radius);
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display); font-weight: 600; font-size: 1.24rem;
  letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.02;
}
.brand__tournament {
  font-family: var(--display); font-weight: 500; font-size: 0.86rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted-gold); margin-top: 0.2rem;
}
.brand__sub {
  font-size: 0.64rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--on-navy-soft); margin-top: 0.22rem;
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent; border: 2px solid var(--navy-line);
  color: var(--warm-white); padding: 0.55rem 0.9rem;
  border-radius: var(--radius); cursor: pointer;
  font-family: var(--display); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.92rem;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 17px; height: 2px; background: currentColor; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; }
.nav__link {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-navy);
  text-decoration: none;
  padding: 0.55rem 0.6rem;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: #fff; border-bottom-color: var(--bright-blue); }
.nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--muted-gold); }
.nav__cta { margin-left: 0.6rem; }
.nav__cta .btn { padding: 0.6rem 1.1rem; font-size: 0.95rem; }

@media (min-width: 1180px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.nav-drawer {
  background: var(--deep-navy);
  border-top: 1px solid var(--navy-line);
}
.nav-drawer[hidden] { display: none; }
.nav-drawer__list { padding: 0.75rem 0 1.5rem; }
.nav-drawer__link {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-navy);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--navy-line);
}
.nav-drawer__link[aria-current="page"] { color: var(--muted-gold); }
.nav-drawer .btn { margin-top: 1.2rem; width: 100%; justify-content: center; }
@media (min-width: 1180px) { .nav-drawer { display: none !important; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--deep-navy);
  color: var(--on-navy);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 60% at 50% 0%, rgba(35,137,215,0.24), transparent 72%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__crest { width: clamp(78px, 12vw, 116px); height: auto; margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 0.5rem; text-transform: uppercase; }
.hero__motto {
  font-family: var(--heritage);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--muted-gold);
  margin-bottom: 1.4rem;
}
.hero__statement { color: var(--on-navy-soft); font-size: var(--step-1); line-height: 1.55; }

.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--navy-line);
}
.hero__figure figcaption {
  font-size: var(--step--1);
  color: var(--on-navy-soft);
  margin-top: 0.7rem;
  letter-spacing: 0.02em;
}

/* Placeholder used when a photograph has not been installed yet */
.img-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--navy-raised);
  border: 1px dashed var(--navy-line);
  border-radius: var(--radius);
  color: var(--on-navy-soft);
  font-family: var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}

/* ---------- Stat band ---------- */
.stat-band {
  background: linear-gradient(180deg, #0A1F38 0%, var(--deep-navy) 100%);
  color: var(--on-navy);
  position: relative;
}
.stat-band::before,
.stat-band::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(194,162,74,0.55), transparent);
}
.stat-band::before { top: 0; }
.stat-band::after { bottom: 0; }
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .stat-band__grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(1.8rem, 4vw, 2.8rem) 1rem;
  text-align: center;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(255,255,255,0.13);
}
@media (max-width: 759px) { .stat:nth-child(3)::before { display: none; } }
.stat__value {
  font-family: var(--display); font-weight: 600;
  /* subtle reduction only: was clamp(2.3rem, 5.5vw, 3.4rem) */
  font-size: clamp(2.05rem, 4.9vw, 3.0rem); line-height: 1;
  color: var(--muted-gold);
  letter-spacing: -0.01em;
}
.stat__label {
  font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-navy-soft); margin-top: 0.7rem;
}

/* ---------- Section headings ---------- */
.section-head { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); max-width: 60ch; }
.section-head p { color: var(--ink-soft); margin-top: 0.9rem; }
.section--navy .section-head p, .section--graphite .section-head p { color: var(--on-navy-soft); }

/* ---------- Club grid ---------- */
.club-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 620px) { .club-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .club-grid { grid-template-columns: repeat(3, 1fr); } }

.club-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--paper);
  border: 1px solid #D3DCE7;
  border-top: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
a.club-card:hover { border-top-color: var(--muted-gold); transform: translateY(-2px); }
.section--navy .club-card, .section--graphite .club-card {
  background: var(--navy-raised);
  border-color: var(--navy-line);
  border-top-color: var(--azzurri-blue);
}

.club-card__crest {
  width: 74px; height: 74px; object-fit: contain;
}
/* Typographic fallback when no authentic crest file is installed.
   Deliberately abstract: initials only, never an invented emblem. */
.crest-fallback {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border: 2px solid var(--azzurri-blue);
  border-radius: var(--radius);
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: 0.02em;
  color: var(--azzurri-blue);
  background: rgba(23,105,170,0.06);
}
.section--navy .crest-fallback { color: var(--focus); border-color: var(--navy-line); background: rgba(35,137,215,0.10); }
.club-card__name { font-size: var(--step-2); }
.club-card__desc { font-size: 0.96rem; color: var(--ink-soft); max-width: none; }
.section--navy .club-card__desc { color: var(--on-navy-soft); }
.club-card__meta {
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid #DDE4EE;
  font-size: var(--step--1); color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.section--navy .club-card__meta { border-top-color: var(--navy-line); color: var(--on-navy-soft); }

/* ---------- Feature / matchday card ---------- */
.feature-card {
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-left: 4px solid var(--muted-gold);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--on-navy);
}
.feature-card h3 { font-size: var(--step-2); margin-bottom: 0.8rem; }
.feature-card p { color: var(--on-navy-soft); }
.feature-card__meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin: 1.3rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--navy-line);
}
.feature-card__meta div { min-width: 0; }
.feature-card__meta dt {
  font-family: var(--display); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-gold);
}
.feature-card__meta dd { margin: 0.2rem 0 0; font-size: 1.08rem; }

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* prevents a long unbreakable child (e.g. a link) from
    stretching the single mobile column — and therefore the whole page — wider than the viewport */
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.split--wide-left { }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); } }
.split img { border-radius: var(--radius); }

/* ---------- Prose ---------- */
.prose p { margin-bottom: 1.1em; }
.prose h3 { margin: 2.2rem 0 0.8rem; }
.prose ul { padding-left: 1.2rem; margin-bottom: 1.1em; max-width: var(--measure); }
.prose ul li { margin-bottom: 0.45em; }

/* ---------- Schedule ---------- */
.schedule-graphic { margin: 0 auto 2rem; max-width: 620px; }
.schedule-graphic figcaption { text-align: center; }
.schedule-graphic a.zoom { display: block; }
.schedule-graphic img {
  width: 100%; height: auto;
  border: 1px solid #D3DCE7; border-radius: var(--radius);
  background: var(--paper);
}
.schedule-graphic figcaption {
  font-size: var(--step--1); color: var(--ink-faint); margin-top: 0.6rem;
}

.notice {
  border-left: 4px solid var(--azzurri-blue);
  background: rgba(23,105,170,0.07);
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.notice strong {
  font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  font-size: var(--step--1); color: var(--azzurri-blue); display: block; margin-bottom: 0.3rem;
}
.notice p { margin: 0; font-size: 0.98rem; }
.section--navy .notice { background: rgba(35,137,215,0.14); border-left-color: var(--bright-blue); }
.section--navy .notice strong { color: var(--focus); }

/* ---------- Schedule status: minor disclaimer, not a feature notice ---------- */
.schedule-status {
  max-width: 100%; /* wide horizontal notice bar spanning nearly the full content width */
  margin: 0 auto;
  padding: 0.65rem 1.2rem;
  background: rgba(23,105,170,0.06);
  border-radius: var(--radius);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
}
.schedule-status strong {
  flex: none;
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.schedule-status p {
  margin: 0;
  max-width: none;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
  flex: 1 1 40ch;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; contain: layout; }
table.data {
  width: 100%; border-collapse: collapse; min-width: 520px;
  font-size: 0.97rem;
}
table.data caption {
  text-align: left; font-family: var(--display);
  font-size: var(--step-1); margin-bottom: 0.8rem;
}
table.data th, table.data td {
  text-align: left; padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #DCE3EC;
}
table.data thead th {
  font-family: var(--display); font-weight: 600;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 2px solid var(--deep-navy);
}
table.data tbody tr:nth-child(even) { background: rgba(23,105,170,0.045); }
.tbd { color: var(--ink-faint); font-style: italic; }

/* Compact standings table: fixed layout with explicit column widths so it always fits the viewport width and never triggers horizontal scroll, even with long club names */
table.data--standings {
  min-width: 0;
  table-layout: fixed;
}
table.data--standings th:nth-child(1), table.data--standings td:nth-child(1) { width: 20%; }
table.data--standings th:nth-child(2), table.data--standings td:nth-child(2) { width: 41%; }
table.data--standings th:nth-child(3), table.data--standings td:nth-child(3) { width: 19.5%; }
table.data--standings th:nth-child(4), table.data--standings td:nth-child(4) { width: 19.5%; }
table.data--standings th.num, table.data--standings td.num { text-align: center; white-space: normal; }
table.data--standings caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 480px) {
  table.data--standings th, table.data--standings td { padding: 0.6rem 0.4rem; font-size: 0.86rem; }
  table.data--standings thead th { font-size: 0.56rem; letter-spacing: 0.03em; }
}

.status-badge {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(23,105,170,0.09);
  color: var(--azzurri-blue);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.empty-state {
  border: 1px dashed #C6D1DF;
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
  background: rgba(255,255,255,0.5);
}
.empty-state h3 { margin-bottom: 0.6rem; }
.empty-state p { margin-inline: auto; color: var(--ink-soft); }

/* ---------- Sponsors ---------- */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #D3DCE7;
  border: 1px solid #D3DCE7;
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 560px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .sponsor-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .sponsor-grid { grid-template-columns: repeat(5, 1fr); } }

.sponsor {
  background: var(--paper);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.7rem;
  padding: 1.4rem 1rem;
  min-height: 140px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.16s ease;
}
a.sponsor:hover { background: #F4F8FD; }
.sponsor__logo { max-height: 58px; width: auto; object-fit: contain; }
.sponsor__name {
  font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
/* Tasteful text treatment where no logo file exists */
.sponsor--text .sponsor__wordmark {
  font-family: var(--display); font-weight: 600;
  font-size: 1.18rem; line-height: 1.15; letter-spacing: 0.03em;
  color: var(--deep-navy); text-transform: uppercase;
}
.sponsor--text .sponsor__wordmark::after {
  content: ""; display: block; width: 2rem; height: 2px;
  background: var(--muted-gold); margin: 0.6rem auto 0;
}

.sponsor-strip {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem;
  align-items: center; justify-content: center;
}
.sponsor-strip .sponsor { min-height: 0; padding: 0.6rem 0.4rem; background: transparent; }
.sponsor-strip .sponsor__name { font-size: 0.9rem; }

/* Sponsorship levels */
.level-grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .level-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .level-grid { grid-template-columns: repeat(3, 1fr); } }
.level {
  background: var(--paper);
  border: 1px solid #D3DCE7;
  border-top: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column;
}
.level--exclusive { border-top-color: var(--muted-gold); }
.level__name { font-size: var(--step-2); }
.level__sub { font-size: 0.92rem; color: var(--ink-faint); margin-top: 0.15rem; }
.level__price {
  font-family: var(--display); font-weight: 600; font-size: 1.6rem;
  color: var(--deep-navy); margin: 0.9rem 0 0.15rem; line-height: 1;
}
.level__avail {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--italian-green); font-weight: 600;
}
.level ul { margin: 1.1rem 0 1.4rem; padding-left: 1.1rem; font-size: 1.08rem; color: var(--ink-soft); }
.level ul li { margin-bottom: 0.4rem; }
.level .btn { margin-top: auto; align-self: flex-start; }
.level__tag {
  display: inline-block; font-family: var(--display);
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--muted-gold); color: var(--deep-navy);
  padding: 0.15rem 0.55rem; border-radius: 2px; margin-bottom: 0.6rem;
}

/* ---------- Gallery ---------- */
.gallery-cat + .gallery-cat { margin-top: clamp(2.5rem, 5vw, 4rem); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.9rem;
}
.gallery-item {
  margin: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.3s ease;
  background: var(--paper-sunk);
}
.gallery-item:hover img { transform: scale(1.03); }

dialog.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: min(94vw, 1200px); max-height: 94vh;
  overflow: visible;
}
.lightbox__bar { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
dialog.lightbox::backdrop { background: rgba(7,24,43,0.92); }
.lightbox__img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__cap {
  color: var(--on-navy); font-size: 0.95rem; text-align: center;
  margin-top: 0.9rem; max-width: 70ch; margin-inline: auto;
}
.lightbox__close {
  background: transparent; border: 2px solid var(--on-navy-soft);
  color: var(--warm-white); border-radius: var(--radius);
  padding: 0.35rem 0.8rem; cursor: pointer;
  font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- Cards / steps ---------- */
.card-grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper);
  border: 1px solid #D3DCE7;
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex; flex-direction: column;
}
.section--navy .card, .section--graphite .card {
  background: var(--navy-raised); border-color: var(--navy-line);
}
.card h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.card p { font-size: 1.02rem; color: var(--ink-soft); max-width: none; }
.section--navy .card, .section--graphite .card { background: #12233A; border-color: #24405F; }
.section--navy .card h3, .section--graphite .card h3 { color: #FFFFFF; }
.section--navy .card p, .section--graphite .card p { color: #D5E2EF; font-size: 1.05rem; }
.card .btn { margin-top: 1.3rem; align-self: flex-start; }

/* ---------- People ---------- */
.people-grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
.person {
  border: 1px solid #D3DCE7; border-left: 3px solid var(--azzurri-blue);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; background: var(--paper);
}
.person__name { font-family: var(--display); font-size: var(--step-1); font-weight: 600; }
.person__role {
  font-size: var(--step--1); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted-gold); margin-top: 0.2rem;
}
.section--navy .person__role, .section--graphite .person__role { color: var(--muted-gold); }
.person__detail { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.5rem; }
.section--navy .person, .section--graphite .person { background: #12233A; border-color: #24405F; }
.section--navy .person__name, .section--graphite .person__name { color: #FFFFFF; }
.section--navy .person__detail, .section--graphite .person__detail { color: #D5E2EF; }

/* ---------- Partner note ---------- */
.partner-note {
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(255,255,255,0.03);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-navy); color: var(--on-navy); }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid {
  display: grid; gap: 1.8rem;
  padding-block: clamp(2rem, 4vw, 2.8rem);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.footer__crest { width: auto; height: 76px; object-fit: contain; }
.footer__name {
  font-family: var(--display); font-weight: 600; font-size: 1.4rem;
  text-transform: uppercase; line-height: 1.05;
}
.footer__loc { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-navy-soft); }
.footer p { color: var(--on-navy-soft); font-size: 0.95rem; }
.footer__col h2 {
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-gold); margin-bottom: 0.9rem;
}
.footer__col li { margin-bottom: 0.5rem; font-size: 0.97rem; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--navy-line); border-radius: var(--radius);
}
.footer__social a:hover { background: var(--azzurri-blue); border-color: var(--azzurri-blue); }
.footer__social svg { width: 19px; height: 19px; fill: currentColor; }
.footer__legal {
  border-top: 1px solid var(--navy-line);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.88rem; color: var(--on-navy-soft);
}
.footer__legal p { font-size: 0.88rem; max-width: 62ch; }

/* ---------- Breadcrumb ---------- */
.crumb {
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-navy-soft); padding-top: 1.6rem;
}
.crumb a { color: var(--on-navy-soft); }
.crumb span { color: var(--muted-gold); }

/* ---------- Page header ---------- */
.page-head {
  background: var(--deep-navy); color: var(--on-navy);
  position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 15% -20%, rgba(35,137,215,0.28), transparent 70%);
  pointer-events: none;
}
.page-head__inner { position: relative; z-index: 1; padding-block: clamp(1.8rem, 3.5vw, 2.8rem); }
.page-head h1 { text-transform: uppercase; margin-bottom: 0.8rem; }
.page-head p { color: var(--on-navy-soft); font-size: var(--step-1); }
.page-head--tight .crumb { padding-bottom: 1.6rem; }

/* =========================================================================
   Revision components
   ========================================================================= */

/* ---------- Banner hero ---------- */
.hero-banner {
  background: var(--deep-navy);
  padding: 0;
}
.hero-banner__img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .hero-banner { padding: .6rem 0; }
  .hero-banner__img {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}
.hero-bar {
  background: var(--deep-navy);
  border-top: 1px solid var(--navy-line);
  color: var(--on-navy);
}
.hero-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
}
.hero-bar__motto {
  font-family: var(--heritage);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--muted-gold);
  margin: 0;
  max-width: 40ch;
}
.hero-bar .btn-row { margin-top: 0; }

/* ---------- Club cards with kit panels ---------- */
.club-card__panel {
  display: block;
  width: 100%;
  height: clamp(230px, 25vw, 310px);
  object-fit: contain;          /* keep the whole crest-and-kit panel visible */
  object-position: center;
  background: var(--deep-navy);
  padding-top: 0.6rem;
}
.club-card--panel {
  padding: 0;
  overflow: hidden;
  background: var(--navy-raised);
  border-color: var(--navy-line);
}
.club-card--panel .club-card__body { padding: 1.35rem 1.4rem 1.6rem; }
.club-card--panel .club-card__name { color: #fff; }
.club-card--panel .club-card__desc { color: var(--on-navy-soft); }
.club-card--panel .club-card__meta { border-top-color: var(--navy-line); color: var(--on-navy-soft); }
.club-card--panel .eyebrow { color: var(--muted-gold); }
a.club-card--panel:hover { border-top-color: var(--muted-gold); }
.kit-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-navy-soft);
}
.kit-chip i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35); flex: none;
}

/* ---------- Roll of honour ---------- */
table.honors th.num, table.honors td.num { text-align: center; width: 1%; white-space: nowrap; }
table.honors td.club { font-family: var(--display); font-size: 1.22rem; font-weight: 600; white-space: nowrap; }
table.honors tr.is-inactive td.club { color: var(--ink-faint); font-weight: 500; }
table.honors td.note { color: var(--ink-soft); font-size: 0.93rem; }
table.honors td.titles { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--gold-on-light); }
.legend {
  font-size: var(--step--1); color: var(--ink-faint); margin-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 1.4rem;
}

/* ---------- Lineage feature ---------- */
.lineage {
  background: linear-gradient(135deg, #08203A 0%, var(--deep-navy) 70%);
  color: var(--on-navy);
  border-left: 4px solid var(--muted-gold);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 5vw, 3.2rem);
}
.lineage h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.lineage p {
  font-family: var(--heritage);
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--on-navy);
  max-width: 62ch;
}

/* ---------- Lineage pairs ---------- */
.lineage-list { display: grid; gap: 0.65rem; }
.lineage-row {
  display: grid; gap: 0.3rem 1rem;
  grid-template-columns: 1fr;
  padding: 1rem 1.2rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  background: var(--paper);
}
@media (min-width: 720px) {
  .lineage-row { grid-template-columns: 1.1fr auto 1.1fr; align-items: center; }
}
.lineage-row--historical { border-left-color: var(--muted-gold); }
.lineage-row__society { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.lineage-row__arrow { color: var(--ink-faint); font-size: 1.1rem; }
.lineage-row__club { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--azzurri-blue); }
.lineage-row__note {
  grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-soft); margin: 0.35rem 0 0; max-width: none;
}
.tag-historical {
  display: inline-block; font-family: var(--display); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-on-light); border: 1px solid currentColor;
  padding: 0.05rem 0.45rem; border-radius: 2px; margin-left: 0.5rem; vertical-align: 0.12em;
}

/* ---------- Heritage entries ---------- */
.heritage-list { display: grid; gap: 1rem; }
@media (min-width: 780px) { .heritage-list { grid-template-columns: repeat(2, 1fr); } }
.heritage-entry {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.heritage-entry--past { border-top-color: var(--muted-gold); background: transparent; }
.heritage-entry h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.heritage-entry__addr {
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-on-light); margin-bottom: 0.8rem;
}
.heritage-entry p { font-size: 0.96rem; color: var(--ink-soft); max-width: none; }
.heritage-entry__link {
  display: inline-block; margin-top: 0.9rem; font-size: 0.9rem;
  font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- People with portraits ---------- */
.person { display: flex; gap: 1.1rem; align-items: flex-start; }
.person__photo {
  flex: none; border-radius: 6px; object-fit: cover;
  object-position: center 22%;
  background: var(--paper-sunk);
}
.person__mono {
  flex: none; border-radius: 6px; display: grid; place-items: center;
  background: rgba(23,105,170,0.09);
  border: 1px solid var(--hairline);
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--azzurri-blue); letter-spacing: 0.02em;
}
.person__text { min-width: 0; }
.club-board + .club-board { margin-top: 2.4rem; }
.club-board__head {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding-bottom: 0.7rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--hairline);
}
.club-board__head h3 { font-size: var(--step-2); }
.club-board__count {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- In memoriam ---------- */
.memoriam {
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--muted-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-raised);
  color: var(--on-navy);
}
.memoriam img { width: 100%; height: auto; display: block; }
.memoriam__body { padding: clamp(1.5rem, 4vw, 2.4rem); }
.memoriam__name { font-size: var(--step-2); margin-bottom: 0.5rem; }
.memoriam p { color: var(--on-navy-soft); font-family: var(--heritage); font-style: italic; }

/* ---------- Knockout ---------- */
.knockout { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .knockout { grid-template-columns: repeat(2, 1fr); } }
.knockout__card {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--muted-gold);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.5rem;
}
.knockout__when {
  font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-on-light); margin-bottom: 0.9rem;
}
.knockout__ties { margin: 0 0 1rem; padding: 0; list-style: none; }
.knockout__ties li {
  padding: 0.55rem 0; border-bottom: 1px solid var(--hairline);
  font-family: var(--display); font-size: 1.15rem;
}
.knockout__note { font-size: 0.9rem; color: var(--ink-faint); margin: 0; }

/* ---------- Sponsor rail: manual scroll, swipeable, with controls ---------- */
.rail { position: relative; }
.rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--azzurri-blue) transparent;
  padding-block: 0.5rem 1.4rem;
}
.rail__viewport::-webkit-scrollbar { height: 8px; }
.rail__viewport::-webkit-scrollbar-track { background: rgba(23,105,170,0.10); border-radius: 4px; }
.rail__viewport::-webkit-scrollbar-thumb { background: var(--azzurri-blue); border-radius: 4px; }
.rail__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding-inline: 2px;
}
.rail__item {
  scroll-snap-align: start;
  flex: none;
  width: 210px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  padding: 1.4rem 1rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
a.rail__item:hover { border-top-color: var(--muted-gold); transform: translateY(-2px); }
.rail__logo {
  height: 92px; width: 100%;
  object-fit: contain;
}
.rail__wordmark {
  height: 92px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--deep-navy);
}
.rail__name {
  font-size: 0.95rem; line-height: 1.35; font-weight: 600;
  color: var(--ink); margin: 0; max-width: none;
}
a.rail__item:hover .rail__name { color: var(--azzurri-blue); text-decoration: underline; }

.rail__controls {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  margin-bottom: 0.9rem;
}
.rail__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--azzurri-blue);
  cursor: pointer;
  font-size: 1.3rem; line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.rail__btn:hover:not(:disabled) { background: var(--azzurri-blue); color: #fff; border-color: var(--azzurri-blue); }
.rail__btn:disabled { opacity: 0.35; cursor: default; }
.rail__hint {
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: auto; align-self: center;
}
@media (max-width: 700px) { .rail__item { width: 168px; min-height: 170px; } .rail__logo, .rail__wordmark { height: 72px; } }

/* ---------- Officer & representative cards, rebuilt ---------- */
.people-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }

.person {
  display: flex; gap: 1.1rem; align-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.person--officer { border-left-color: var(--muted-gold); }
.person__photo, .person__mono { width: 66px; height: 66px; }
.person__name {
  font-family: var(--display); font-size: 1.32rem; font-weight: 600;
  line-height: 1.1; color: var(--ink);
}
.person__role {
  font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold-on-light); margin-top: 0.25rem; font-weight: 600;
}
.person__meta {
  font-size: 0.88rem; color: var(--ink-faint); margin-top: 0.35rem; max-width: none;
}
.person__office {
  display: inline-block; font-family: var(--display); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--muted-gold); color: var(--deep-navy);
  padding: 0.08rem 0.5rem; border-radius: 2px; margin-bottom: 0.4rem;
}
.club-board__head { border-bottom: 2px solid var(--hairline); }

/* ---------- Tournament imagery ---------- */
.figure-grid { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .figure-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .figure-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.figure-card { margin: 0; background: var(--navy-raised); border: 1px solid var(--navy-line); border-radius: var(--radius); overflow: hidden; }
.figure-card img { width: 100%; display: block; }
.figure-card--wide img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }
.figure-card--tall img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; }
.champions-photo { max-width: 460px; margin-inline: auto; }
.figure-card figcaption {
  padding: 0.85rem 1.1rem; font-size: 0.92rem; color: #D5E2EF;
}

/* ---------- Jersey sponsor pair ---------- */
.jersey-sponsors { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.2rem; }
.jersey-sponsor {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 0.8rem 1.1rem;
  text-decoration: none; color: var(--ink);
}
.jersey-sponsor:hover { border-color: var(--azzurri-blue); }
.jersey-sponsor img { height: 46px; width: auto; object-fit: contain; }
.jersey-sponsor span { font-weight: 600; font-size: 0.95rem; }
.jersey-sponsor:hover span { color: var(--azzurri-blue); text-decoration: underline; }

/* ---------- Venue links ---------- */
.venue-list { display: grid; gap: 0.7rem; margin-top: 1.3rem; }
.venue-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--hairline); border-left: 3px solid var(--azzurri-blue);
  border-radius: var(--radius); background: var(--paper);
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.02em;
}
.venue-link:hover { border-color: var(--azzurri-blue); color: var(--azzurri-blue); }
.venue-link small {
  font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- Club card facts ---------- */
.club-card__panel--crest {
  object-fit: contain;
  padding: 1.2rem 1rem 0.4rem;
  background: linear-gradient(180deg, #10233C 0%, var(--navy-raised) 100%);
}
.club-facts {
  margin: 1.1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--navy-line);
  display: grid; gap: 0.55rem;
}
.club-facts div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.club-facts dt {
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-gold); flex: none;
}
.club-facts dd { margin: 0; font-size: 0.95rem; color: #E2EAF3; text-align: right; }
.club-facts .kit-chip { color: #E2EAF3; letter-spacing: 0.08em; }

/* ---------- Club cards, restructured ---------- */
.club-card {
  display: flex; flex-direction: column;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--azzurri-blue);
  border-radius: var(--radius);
  padding: 0; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
a.club-card:hover { border-top-color: var(--muted-gold); transform: translateY(-2px); }
.club-card__art {
  display: grid; place-items: center;
  height: 176px; padding: 0.9rem;
  background: linear-gradient(180deg, #0F2340 0%, var(--navy-raised) 100%);
  border-bottom: 1px solid var(--navy-line);
}
.club-card__art img {
  max-height: 100%; max-width: 82%; width: auto; height: auto;
  object-fit: contain;
}
@media (max-width: 620px) { .club-card__art { height: 150px; } }
.club-card__body { padding: 0.95rem 1.05rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.club-card__name { font-size: 1.35rem; color: #fff; margin-bottom: 0.4rem; line-height: 1.05; }
.club-card__rule { height: 1px; background: var(--navy-line); margin: 0.75rem 0 0.65rem; }
.club-card__society-label {
  font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-gold); margin-bottom: 0.2rem;
}
.club-card__society { font-size: 0.88rem; color: #E2EAF3; margin: 0; max-width: none; line-height: 1.3; }
.club-card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem; margin-top: auto; padding-top: 0.8rem;
}
.club-card__stats div { text-align: center; padding-top: 0.7rem; border-top: 1px solid var(--navy-line); }
.club-card__stats span {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.4rem; line-height: 1; color: var(--muted-gold);
}
.club-card__stats small {
  display: block; margin-top: 0.35rem; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-soft);
}
.club-card .kit-chip { color: #E2EAF3; }

/* ---------- Person cards, equal height ---------- */
.person {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--paper); border: 1px solid var(--hairline);
  border-top: 3px solid var(--azzurri-blue); border-left: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 1.3rem; height: 100%;
}
.person--officer { border-top-color: var(--muted-gold); }
.person__head { display: flex; gap: 1.05rem; align-items: center; }
.person__photo, .person__mono { width: 96px; height: 118px; flex: none; }
.person__id { min-width: 0; }
.person__name { font-size: 1.3rem; }
.person__facts {
  margin: 1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  display: grid; gap: 0.4rem;
}
.person__facts div { display: flex; justify-content: space-between; gap: 0.9rem; }
.person__facts dt {
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); font-family: var(--display); flex: none;
}
.person__facts dd { margin: 0; font-size: 0.9rem; color: var(--ink); text-align: right; }
.people-grid { align-items: stretch; }

/* ---------- Rail: auto crawl + drag ---------- */
.rail__viewport { cursor: grab; }
.rail__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.rail__controls { justify-content: center; margin: 1rem 0 0; }
.rail__btn { width: auto; min-width: 46px; padding-inline: 0.9rem; font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.95rem; }
.rail__item { user-select: none; }
.rail__item img { pointer-events: none; }

/* ---------- Carousel ---------- */
.carousel .rail__track { gap: 0.9rem; }
.carousel__item {
  flex: none; width: 340px; margin: 0;
  background: var(--navy-raised); border: 1px solid var(--navy-line);
  border-radius: var(--radius); overflow: hidden; scroll-snap-align: start;
}
.carousel__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; display: block; }
.carousel__item figcaption { padding: 0.75rem 0.95rem; font-size: 0.88rem; color: #D5E2EF; }
@media (max-width: 700px) { .carousel__item { width: 260px; } }

/* ---------- Video ---------- */
.video-figure { margin: 0; }
.video-figure video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); background: #000;
  border: 1px solid var(--navy-line);
}
.video-figure figcaption { margin-top: 0.7rem; font-size: 0.92rem; color: var(--ink-soft); }
.section--navy .video-figure figcaption { color: var(--on-navy-soft); }
.video-grid { display: grid; gap: 1.4rem; }
/* Reserve the video box at the poster's real aspect ratio so it doesn't resize (and shift the
   page) once the poster image finishes loading in. Scoped to .video-grid only — the Sponsors
   page's approved video uses the shared .video-figure rule elsewhere and is left untouched. */
.video-grid .video-figure video { aspect-ratio: 0.562; height: auto; }
@media (min-width: 760px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
.video-figure--portrait video { max-height: 70vh; width: auto; margin-inline: auto; }

/* ---------- Schedule graphic: expandable ---------- */
.schedule-graphic { max-width: 620px; } /* fits fully within a normal desktop viewport without scrolling, while staying large enough to read */
.schedule-graphic button {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%;
}
.schedule-graphic img { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper); width: 100%; height: auto; }
.schedule-graphic .zoom-hint {
  display: inline-block; margin-top: 0.5rem; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--azzurri-blue);
}

/* ---------- Story card (Minturnese) ---------- */
.story-card {
  background: var(--paper); border: 1px solid var(--hairline);
  border-left: 3px solid var(--muted-gold); border-radius: var(--radius);
  padding: 1.5rem;
}
.story-card h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.story-card p { font-size: 0.97rem; color: var(--ink-soft); }

/* ---------- Historical society cards: larger, higher contrast ---------- */
.heritage-entry--past { background: var(--paper); border-top-color: var(--muted-gold); }
.heritage-entry--past h3 { font-size: var(--step-2); color: var(--ink); }
.heritage-entry--past p { font-size: 1.02rem; color: var(--ink); }

/* ---------- Roll of honor: table on desktop, cards on mobile ---------- */
.honor-cards { display: none; }
@media (max-width: 780px) {
  .honors-table { display: none; }
  .honor-cards { display: grid; gap: 0.8rem; }
  .honor-card {
    background: var(--paper); border: 1px solid var(--hairline);
    border-left: 3px solid var(--azzurri-blue); border-radius: var(--radius);
    padding: 1rem 1.1rem;
  }
  .honor-card.is-inactive { border-left-color: var(--muted-gold); }
  .honor-card h3 { font-size: 1.25rem; margin-bottom: 0.7rem; }
  .honor-card__stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem; margin: 0 0 0.8rem;
    padding: 0.7rem 0; border-block: 1px solid var(--hairline);
  }
  .honor-card__stats div { text-align: center; }
  .honor-card__stats dt {
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-faint); font-family: var(--display);
  }
  .honor-card__stats dd {
    margin: 0.2rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.35rem;
  }
  .honor-card__stats dd.titles { color: var(--gold-on-light); }
  .honor-card__note { font-size: 0.9rem; color: var(--ink-soft); margin: 0; max-width: none; }
}

/* ---------- Jersey sponsors: equal cards ---------- */
.jersey-sponsors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 0.9rem; }
@media (max-width: 560px) { .jersey-sponsors { grid-template-columns: 1fr; } }
.jersey-sponsor {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  background: var(--paper); border: 1px solid var(--hairline);
  border-top: 3px solid var(--azzurri-blue); border-radius: var(--radius);
  padding: 1.1rem 1rem; text-decoration: none; color: var(--ink); text-align: center;
}
.jersey-sponsor:hover { border-top-color: var(--muted-gold); }
.jersey-sponsor__logo { display: grid; place-items: center; height: 76px; width: 100%; }
.jersey-sponsor__logo img { max-height: 76px; max-width: 100%; width: auto; object-fit: contain; }
.jersey-sponsor__name { font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.jersey-sponsor:hover .jersey-sponsor__name { color: var(--azzurri-blue); text-decoration: underline; }

/* ---------- Video captions ---------- */
.video-grid { align-items: start; }
.video-figure video { max-height: 62vh; width: 100%; object-fit: contain; }
.video-figure figcaption {
  margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem;
  max-width: 46ch;
}
.video-figure figcaption strong {
  font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.02em; color: var(--ink);
}
.video-figure figcaption span { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.45; }
.section--navy .video-figure figcaption strong { color: #fff; }
.section--navy .video-figure figcaption span { color: var(--on-navy-soft); }

/* ---------- Festival note ---------- */
.fest-note {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--hairline);
  border-left: 4px solid var(--italian-green); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-top: 1.6rem;
}
.fest-note__logo { flex: none; display: block; }
.fest-note__logo img { height: 78px; width: auto; }
.fest-note__body { flex: 1; min-width: 240px; }
.fest-note__body p { margin: 0 0 0.5rem; font-size: 0.98rem; color: var(--ink); max-width: none; }

/* ---------- Carousel orientation ---------- */
.carousel__item--portrait { width: 260px; }
.carousel__item--portrait img { aspect-ratio: 2 / 3; object-position: center 25%; }
.carousel__item--landscape { width: 360px; }
.carousel__item--landscape img { aspect-ratio: 3 / 2; object-position: center 40%; }
@media (max-width: 700px) {
  .carousel__item--portrait { width: 200px; }
  .carousel__item--landscape { width: 280px; }
}

/* ---------- Evenly framed feature graphic ---------- */
.framed { border: 2px solid var(--navy-line); border-radius: var(--radius); display: block; }
.framed img { display: block; width: 100%; }

/* ---------- Fixture dates: hide the year on mobile ---------- */
@media (max-width: 620px) { .date-year { display: none; } }

/* ---------- 2025 result block ---------- */
.result-line {
  font-family: var(--display); font-size: 1.45rem; font-weight: 600;
  color: var(--ink); margin: 0.9rem 0 0; letter-spacing: 0.01em;
}
.result-line--shootout { color: var(--gold-on-light); font-size: 1.2rem; margin-top: 0.3rem; }
.scoresheet {
  display: grid; gap: 0.9rem; margin-top: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .scoresheet { grid-template-columns: repeat(3, 1fr); } }
.scoresheet > div {
  background: var(--paper); border: 1px solid var(--hairline);
  border-top: 3px solid var(--azzurri-blue); border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.scoresheet h3 {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-on-light); margin-bottom: 0.6rem;
}
.scoresheet ul { list-style: none; padding: 0; margin: 0; }
.scoresheet li {
  font-size: 0.95rem; color: var(--ink); padding: 0.35rem 0;
  border-bottom: 1px solid var(--hairline);
}
.scoresheet li:last-child { border-bottom: 0; }

/* ===================== Unified club card system ("club-tile") =====================
   Shared by the homepage (simple cards) and the League page (detailed cards).
   Same typography, crest treatment, spacing logic, corner radius, and card language;
   the League-page variant simply adds the society + stats zones. */

.club-tile-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 620px) { .club-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .club-tile-grid { grid-template-columns: repeat(3, 1fr); } }

.club-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(7,24,43,0.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.club-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(7,24,43,0.32); }
.club-tile--historic { background: var(--paper-sunk); }

/* Zone 1: hometown / region, with an optional status badge on detailed cards */
.club-tile__place {
  min-height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .9rem;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--hairline);
}
.club-tile__status {
  font-family: var(--display); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .12rem .45rem; border-radius: 2px; white-space: nowrap;
  flex: none;
}
.club-tile__status--current { background: var(--italian-green); color: #fff; }
.club-tile__status--historic { background: var(--muted-gold); color: var(--deep-navy); }

/* Zone 2: coat of arms — one shared crest treatment for both card variants.
   Fixed pixel ceilings (not percentages) so the crest can never overflow its zone
   or overlap the zones below it, regardless of a given crest's native proportions. */
.club-tile__crest {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .9rem;
  background: linear-gradient(180deg, #F7FAFD 0%, #E9EFF7 100%);
  overflow: hidden;
}
.club-tile__crest img {
  display: block;
  max-width: 235px;
  max-height: 116px; /* fills most of the 132px content area available inside the 150px crest zone */
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Optical sizing: narrower or visually simpler crests (Vibo, Bari, Gravina, Napoli, Cosenza)
   are scaled up slightly beyond the shared baseline so every crest reads as equally prominent,
   rather than forcing one identical dimension onto every asset. object-fit:contain guarantees
   this never crops or distorts the artwork — it only changes the ceiling it can scale up to. */
.club-tile__crest--boost img {
  max-width: 250px;
  max-height: 128px;
}
.club-tile__crest-missing {
  font-family: var(--display); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center; line-height: 1.5;
}
@media (max-width: 520px) {
  .club-tile__crest { height: 128px; padding: .5rem .7rem; }
  .club-tile__crest img { max-height: 98px; }
  .club-tile__crest--boost img { max-height: 108px; }
}

/* Zone 3: club name — shared sizing across both variants */
.club-tile__name { font-size: 1.16rem; line-height: 1.15; margin: 0; }
@media (max-width: 520px) { .club-tile__name { font-size: 1.05rem; } }

/* ---- Simple (homepage) content: one identity line + a View Club action ---- */
.club-tile__body { padding: .7rem .9rem 0; border-top: 1px solid var(--hairline); }
.club-tile__tagline {
  margin: .3rem 0 0;
  min-height: 2.35rem;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.club-tile__cta {
  margin-top: auto;
  display: flex; align-items: center; gap: .4rem;
  padding: .65rem .9rem;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--azzurri-blue);
}
a.club-tile:hover .club-tile__cta { color: var(--bright-blue); }

/* ---- Detailed (League page) content: society block + three-column stats ---- */
.club-tile__id { padding: .7rem .9rem .45rem; border-top: 1px solid var(--hairline); }
.club-tile__id .club-tile__name { margin-bottom: .35rem; }
.club-tile__society { margin: 0; font-size: .84rem; color: var(--ink-soft); max-width: none; line-height: 1.3; }
.club-tile__society span {
  display: block; font-family: var(--display); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .12rem;
}
.club-tile__stats {
  margin-top: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
.club-tile__stats div { text-align: center; padding: .5rem .3rem .65rem; }
.club-tile__stats div + div { border-left: 1px solid var(--hairline); }
.club-tile__stats dt {
  margin: 0; font-family: var(--display); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.club-tile__stats dd {
  margin: .2rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: 1.25rem; color: var(--azzurri-blue); line-height: 1;
}

/* ===================== Current club cards (rebuilt) ===================== */
.section--azzurri { background: var(--azzurri-blue); color: var(--on-navy); }
.section--azzurri .eyebrow { color: var(--muted-gold); }
.section--azzurri .section-head p { color: var(--on-navy-soft); }
.section--azzurri a.btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.section--azzurri a.btn--ghost:hover { border-color: #fff; }


/* ===================== Result strip ===================== */
.result-strip {
  background: linear-gradient(135deg, #0A2440 0%, var(--deep-navy) 75%);
  border: 1px solid var(--navy-line); border-left: 4px solid var(--muted-gold);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; color: var(--on-navy);
}
.result-strip__label {
  font-family: var(--display); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-gold); margin: 0;
}
.result-strip__champ { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: #fff; margin: .25rem 0 0; }
.result-strip__score {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--navy-line);
}
.result-strip__team { font-family: var(--display); font-size: 1.15rem; color: #E2EAF3; }
.result-strip__num { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--muted-gold); line-height: 1; }
.result-strip__sep { color: var(--on-navy-soft); }
.result-strip__pens { margin: .6rem 0 0; font-size: .95rem; color: var(--on-navy-soft); }

/* ===================== Pathway cards ===================== */
.pathways { display: grid; gap: 1.1rem; }
@media (min-width: 820px) { .pathways { grid-template-columns: 1fr 1fr; } }
.pathway {
  border-radius: var(--radius); padding: 1.6rem 1.7rem;
  border: 1px solid var(--hairline); background: var(--paper); order: 2;
}
.pathway h3 { font-size: var(--step-2); margin-bottom: .2rem; }
.pathway__lede { font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 1rem; }
.pathway ul { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.pathway li { padding: .38rem 0; border-bottom: 1px solid var(--hairline); font-size: .95rem; }
.pathway--partner {
  order: 1; background: linear-gradient(135deg, #0A2440 0%, var(--deep-navy) 78%);
  border-color: var(--navy-line); border-top: 3px solid var(--muted-gold); color: var(--on-navy);
}
.pathway--partner h3 { color: #fff; }
.pathway--partner .pathway__lede { color: var(--muted-gold); }
.pathway--partner li { border-bottom-color: var(--navy-line); color: #DCE6F1; }
@media (min-width: 820px) { .pathway--play { order: 1; } .pathway--partner { order: 2; } }
@media (max-width: 819px) {
  /* Center only the sponsorship CTA on mobile; desktop position is unchanged.
     An explicit max-width (rather than relying on fit-content, which was resolving
     to the full available width once the label wrapped to two lines and left no
     room for the centering margin to do anything) guarantees a visibly narrower,
     genuinely centered button regardless of label length. */
  .pathway--partner .btn--gold {
    display: block;
    width: auto;
    max-width: 82%;
    margin-inline: auto;
    text-align: center;
    justify-content: center;
  }
}

/* ===================== Slideshow ===================== */
.slideshow { --stage-bg: #0A1724; overflow-anchor: none; }
.slideshow__stage {
  position: relative; background: var(--stage-bg);
  border: 1px solid var(--navy-line); border-radius: var(--radius);
  min-height: 320px; display: grid; place-items: center; padding: .8rem;
  touch-action: pan-y;
}
.slideshow__slide { display: none; margin: 0; width: 100%; }
.slideshow__slide.is-active { display: block; }
.slideshow__slide img {
  display: block; width: 100%;
  height: clamp(240px, 44vw, 460px); /* fixed per-viewport height (not per-image), so portrait and
    landscape photos never change the stage's size as slides change — object-fit:contain letterboxes
    each image within this constant box instead of cropping or stretching it */
  max-height: 62vh; object-fit: contain; margin-inline: auto;
}
.slideshow__slide figcaption {
  margin-top: .8rem; text-align: center; font-size: .93rem; color: #D5E2EF;
  max-width: 62ch; margin-inline: auto; min-height: 2.7rem; /* reserves room for a two-line caption
    so shorter captions don't shrink the stage relative to longer ones */
}
.slideshow__controls {
  display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem;
}
.slideshow__count {
  font-family: var(--display); letter-spacing: .1em; font-size: .9rem; color: var(--ink-faint);
}
.section--navy .slideshow__count { color: var(--on-navy-soft); }
.slideshow__thumbs {
  display: flex; gap: .5rem; overflow-x: auto; padding: .9rem .1rem .3rem;
  scrollbar-width: thin;
}
.slideshow__thumb {
  flex: none; width: 74px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: var(--stage-bg);
}
.slideshow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }
.slideshow__thumb.is-active { border-color: var(--muted-gold); }
.slideshow__thumb.is-active img, .slideshow__thumb:hover img { opacity: 1; }

/* ===================== Match reports ===================== */
.report-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .report-grid { grid-template-columns: repeat(3, 1fr); } }
.report-card {
  background: var(--paper); border: 1px solid var(--hairline);
  border-top: 3px solid var(--azzurri-blue); border-radius: var(--radius); padding: 1.2rem;
}
.report-card h3 { font-size: 1.25rem; margin: .2rem 0 .5rem; }
.report-card__score { font-family: var(--display); font-size: 1.8rem; font-weight: 700; color: var(--gold-on-light); margin: 0 0 .7rem; }
.report-card__scorers { list-style: none; padding: 0; margin: 0 0 .8rem; }
.report-card__scorers li { font-size: .92rem; padding: .3rem 0; border-bottom: 1px solid var(--hairline); }
.report-card__scorers span { color: var(--ink-faint); }
.report-card__note { font-size: .88rem; color: var(--ink-soft); margin: 0; max-width: none; }

/* ===================== Results archive ===================== */
.archive__filters { display: grid; gap: .8rem; margin-bottom: 1.4rem; }
@media (min-width: 760px) { .archive__filters { grid-template-columns: 2fr 1fr 1.4fr 1fr; } }
.archive__filters label {
  display: flex; flex-direction: column; gap: .3rem;
  font-family: var(--display); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.archive__filters input, .archive__filters select {
  padding: .6rem .7rem; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper); font-family: var(--body); font-size: .95rem; color: var(--ink);
  letter-spacing: normal; text-transform: none;
}
.archive__count { font-size: .88rem; color: var(--ink-faint); margin-bottom: .8rem; }
.archive__list { display: grid; gap: .7rem; }
.archive-row {
  display: grid; gap: .5rem 1.2rem; align-items: center;
  grid-template-columns: 1fr; padding: 1rem 1.15rem;
  background: var(--paper); border: 1px solid var(--hairline);
  border-left: 3px solid var(--azzurri-blue); border-radius: var(--radius);
}
@media (min-width: 820px) { .archive-row { grid-template-columns: 130px 1fr 130px 1.2fr; } }
.archive-row__meta { display: flex; flex-direction: column; gap: .15rem; }
.archive-row__season { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.archive-row__stage { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.archive-row__teams { font-family: var(--display); font-size: 1.15rem; margin: 0; max-width: none; }
.archive-row__teams span { color: var(--ink-faint); font-size: .85rem; }
.archive-row__date { font-size: .85rem; color: var(--ink-faint); margin: .15rem 0 0; }
.archive-row__score { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--gold-on-light); margin: 0; }
.archive-row__detail p { font-size: .85rem; color: var(--ink-soft); margin: 0; max-width: none; }
.archive-row[hidden] { display: none; }

/* ===================== Reversed premium card ===================== */
.card--premium {
  background: linear-gradient(135deg, #0A2440 0%, var(--deep-navy) 78%);
  border-color: var(--navy-line); border-top: 3px solid var(--muted-gold); color: var(--on-navy);
}
.card--premium h3, .card--premium .level__name { color: #fff; }
.card--premium p, .card--premium li, .card--premium .level__sub { color: #DCE6F1; }
.card--premium .level__price { color: var(--muted-gold); }
.card--premium .level__avail { color: #8FE0AE; }
.btn--reverse { background: #FFFFFF; color: var(--deep-navy); border-color: #FFFFFF; font-weight: 700; }
.btn--reverse:hover { background: #E8EEF5; color: var(--deep-navy); }

/* ===================== Hero text block ===================== */
.hero-intro { text-align: center; padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.hero-intro h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: #fff;
  text-transform: uppercase; letter-spacing: .01em;
}
.hero-intro p { font-family: var(--heritage); font-style: italic; font-size: var(--step-1); color: var(--muted-gold); margin: .5rem auto 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.4rem; }
.hero-cta .btn--gold { font-size: 1.2rem; padding: 1.05rem 2.1rem; }
.hero-cta .btn--primary, .hero-cta .btn--ghost { margin-top: .6rem; } /* nudged slightly lower per request; sponsor CTA position unchanged */
.hero-cta .btn--primary { font-size: 1.02rem; }
.hero-cta .btn--ghost { font-size: .95rem; padding: .8rem 1.3rem; }

/* ===================== Framed graphic ===================== */
.framed {
  display: block; border: 3px solid var(--navy-line); border-radius: var(--radius);
  padding: 12px; background: var(--navy-raised);
}
.framed img { display: block; width: 100%; height: auto; }

/* ===================== Stat sub-label ===================== */
.stat__sub {
  display: block; margin-top: .4rem; font-size: .68rem; line-height: 1.35;
  color: var(--on-navy-soft); max-width: 22ch; margin-inline: auto;
}

/* ===================== Season info strip ===================== */
.info-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 760px) { .info-strip { grid-template-columns: repeat(4, 1fr); } }
.info-strip div { background: var(--paper); padding: 1.05rem 1rem; text-align: center; }
.info-strip dt {
  font-family: var(--display); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.info-strip dd {
  margin: .35rem 0 0; font-family: var(--display); font-size: 1.16rem;
  font-weight: 600; color: var(--ink); line-height: 1.2;
}
.benefit-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .benefit-grid { grid-template-columns: repeat(4, 1fr); } }
.benefit {
  background: var(--paper); border: 1px solid var(--hairline);
  border-left: 3px solid var(--italian-green); border-radius: var(--radius);
  padding: .9rem 1rem; font-family: var(--display); font-size: 1.02rem; letter-spacing: .02em;
}
.footer-note {
  font-size: .86rem; color: var(--ink-faint); line-height: 1.6;
  padding-top: 1.2rem; border-top: 1px solid var(--hairline); max-width: none;
}

/* ===================== Sponsors page: unified opening (hero + proof points + bullets + video) ===================== */
.sponsor-hero-grid {
  display: grid;
  gap: 1.3rem;
  grid-template-areas: "intro" "video" "bullets";
}
.sponsor-hero__intro { grid-area: intro; }
.sponsor-hero__video { grid-area: video; margin: 0; }
.sponsor-hero__bullets-cta { grid-area: bullets; }
@media (min-width: 900px) {
  .sponsor-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "intro video"
      "bullets video";
    align-items: start;
    gap: 0.65rem 3rem;
  }
  .sponsor-hero__video { align-self: start; }
}
.sponsor-hero__intro .lede { color: var(--ink-soft); margin-top: 0.7rem; max-width: 46ch; }

.proof-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 1rem;
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 480px) { .proof-points { grid-template-columns: repeat(4, 1fr); } }
.proof-point__value {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem); line-height: 1;
  color: var(--azzurri-blue);
}
.proof-point__label {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 0.4rem;
}

.sponsor-hero__bullets {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem 1.5rem;
}
@media (min-width: 480px) { .sponsor-hero__bullets { grid-template-columns: repeat(2, 1fr); } }
.sponsor-hero__bullets li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.sponsor-hero__bullets li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--azzurri-blue);
}

/* ===================== Sponsors page: visual benefit panels ===================== */
.benefit-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}
@media (min-width: 620px) { .benefit-panels { grid-template-columns: repeat(2, 1fr); } }
.benefit-panel {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.benefit-panel__image {
  /* Square box: the sponsor-benefit graphics are portrait 4:5 posters with fine
     print in their footers. A 4/3 landscape box letterboxed them down to ~60%
     of the card width and the small type became unreadable. A square box keeps
     all four cards identically sized while rendering the artwork ~33% larger.
     object-fit stays "contain" so no artwork is ever cropped. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-sunk);
  padding: .7rem;
}
.benefit-panel__image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.benefit-panel__body { padding: 1.15rem 1.25rem 1.35rem; }
.benefit-panel__body h3 { font-size: 1.14rem; margin: 0 0 0.45rem; }
.benefit-panel__body p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.42; max-width: none; }

/* Wear the Brand: the only benefit panel that cycles through multiple images.
   Same aspect-ratio box as its sibling static cards, so all four cards keep
   identical, stable dimensions — only small overlay controls are added. */
.benefit-panel__image--slideshow { position: relative; }
.benefit-panel__stage { width: 100%; height: 100%; }
/* The slide <figure> must have a definite height, otherwise the img's height:100%
   resolves to auto, the image sizes itself from its width, and the taller portrait
   artwork overflows and is clipped by the panel's overflow:hidden. Scoped to the
   benefit panels so the Finals slideshow is unaffected. */
.benefit-panel__image--slideshow .slideshow__slide.is-active { height: 100%; }
.benefit-panel__image--slideshow .slideshow__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.benefit-panel__nav, .benefit-panel__pause {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(7,24,43,0.55); color: #fff;
  cursor: pointer; transition: background-color .15s ease;
}
.benefit-panel__nav:hover, .benefit-panel__pause:hover { background: rgba(7,24,43,0.82); }
.benefit-panel__nav { top: 50%; width: 34px; height: 34px; font-size: 1rem; transform: translateY(-50%); }
.benefit-panel__nav--prev { left: .6rem; }
.benefit-panel__nav--next { right: .6rem; }
.benefit-panel__pause { bottom: .6rem; right: .6rem; width: 28px; height: 28px; font-size: .68rem; }

/* ===================== Sponsors page: mobile-only refinements (≈375–430px) ===================== */
/* Everything below is scoped to .sponsors-page so no other page is affected, and only applies under
   the 700px breakpoint already used by this page's desktop grids — desktop is untouched. */
@media (max-width: 699px) {

  /* --- Opening: headline focal point, readable copy, tighter proof points & bullets, full-width CTA --- */
  .sponsors-page .sponsor-hero-grid { gap: 1.8rem; }
  .sponsors-page .sponsor-hero__intro h1 { font-size: 2.35rem; line-height: 1.05; }
  .sponsors-page .sponsor-hero__intro .lede { font-size: 1.05rem; line-height: 1.5; }

  .sponsors-page .proof-points {
    gap: 0.9rem 0.7rem;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
  }
  .sponsors-page .proof-point__value { font-size: 1.95rem; }
  .sponsors-page .proof-point__label { font-size: 0.72rem; letter-spacing: 0.08em; margin-top: 0.3rem; }

  .sponsors-page .sponsor-hero__bullets { gap: 0.5rem 1.1rem; margin-bottom: 1.3rem; }
  .sponsors-page .sponsor-hero__bullets li { font-size: 0.93rem; }

  .sponsors-page .sponsor-hero__bullets-cta .btn-row { flex-direction: column; align-items: stretch; }
  .sponsors-page .sponsor-hero__bullets-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-block: 1rem;
    font-size: 1rem;
  }

  /* --- Video: full width, no excess surrounding space, caption preserved --- */
  .sponsors-page .sponsor-hero__video { margin: 0; }
  .sponsors-page .sponsor-hero__video figcaption { margin-top: 0.6rem; }

  /* --- Sponsorship levels: tighter internal spacing, obvious name/price, full-width tap-friendly CTA --- */
  .sponsors-page .level-grid { gap: 0.9rem; }
  .sponsors-page .level { padding: 1.15rem 1.2rem; }
  .sponsors-page .level__tag { margin-bottom: 0.5rem; }
  .sponsors-page .level__name { font-size: 1.5rem; }
  .sponsors-page .level__sub { margin-top: 0.1rem; }
  .sponsors-page .level__price { font-size: 1.45rem; margin: 0.65rem 0 0.1rem; }
  .sponsors-page .level ul { margin: 0.75rem 0 1rem; font-size: 1.04rem; }
  .sponsors-page .level ul li { margin-bottom: 0.32rem; }
  .sponsors-page .level .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    align-self: stretch;
  }

  /* --- Sponsor benefits: keep image-led, tighten body padding only --- */
  .sponsors-page .benefit-panels { gap: 1.1rem; }
  .sponsors-page .benefit-panel__body { padding: 1rem 1.1rem 1.25rem; }
  .sponsors-page .benefit-panel__body h3 { font-size: 1.18rem; }

  /* --- Backed by Stamford: recognizable logos, less empty space around each, scoped so index.html's rail is untouched --- */
  .sponsors-page .rail--sponsors .rail__item {
    width: 176px;
    min-height: 156px;
    padding: 1.15rem 0.85rem;
    gap: 0.7rem;
  }
  .sponsors-page .rail--sponsors .rail__logo,
  .sponsors-page .rail--sponsors .rail__wordmark { height: 84px; }
  .sponsors-page .rail--sponsors .rail__name { font-size: 0.88rem; }
  .sponsors-page .rail--sponsors .rail__btn { width: 44px; height: 44px; }

  /* --- How Sponsorship Works: readable line length, natural spacing, meaning preserved --- */
  .sponsors-page #how-it-works p { font-size: 0.98rem; line-height: 1.55; max-width: 40ch; }

  /* --- Direct Partnership Contact: prominent, tappable final CTA --- */
  .sponsors-page #contact .btn { width: 100%; justify-content: center; }
}

/* ===================== Finals Celebration page: Championship Partners (large cards) ===================== */
.championship-partners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: 620px;
}
@media (min-width: 640px) { .championship-partners { grid-template-columns: repeat(2, 1fr); } }
.championship-partner {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(7,24,43,0.09); /* raised, dimensional at rest — inspired by, not copied from, the TPFF impact cards */
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.championship-partner:hover { border-color: var(--azzurri-blue); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(7,24,43,0.2); }
.championship-partner__logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 108px;
  padding: 1rem 1.2rem;
  background: var(--paper-sunk);
}
.championship-partner__logo img { width: 100%; max-width: 210px; height: auto; object-fit: contain; }
.championship-partner__body { padding: .7rem 1.1rem .95rem; text-align: center; }
.championship-partner__label {
  display: block; font-family: var(--display); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-on-light); margin-bottom: .3rem;
}
.championship-partner__name { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.championship-partner:hover .championship-partner__name { color: var(--azzurri-blue); text-decoration: underline; }

/* ===================== Finals Celebration page: event partner logos (blended, no boxes) ===================== */
/* Let each of the three cards size to its own content instead of stretching to match the
   tallest — a modest height difference between cards is preferable to empty space. */
.card-grid--3 { align-items: start; }

.card-grid--3 .card { padding-bottom: .6rem; } /* event-partner cards only: less wasted space below the logo row */
.partner-logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* every group stays on one row, desktop and mobile alike */
  justify-content: flex-start;
  gap: 1.4rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid #24405F;
}
.partner-logos img {
  display: block;
  height: 86px;      /* a shared height (not a shared width) so each logo keeps its natural
                         aspect ratio and proportion relative to the others — object-fit:contain,
                         no background tile, no border, no forced square */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex: none;
}
@media (max-width: 480px) {
  .partner-logos { gap: 1rem; }
  .partner-logos img { height: 64px; }
}
.partner-logos--spread { justify-content: space-between; }
.partner-logos--triple img { height: 60px; } /* three logos in one row need a smaller shared ceiling than a two-logo row to fit without overflow */
@media (max-width: 480px) { .partner-logos--triple img { height: 48px; } }

/* ===================== Finals Celebration page: 2025 Integrità event credit ===================== */
.powered-by-credit {
  font-family: var(--display); font-size: .78rem; letter-spacing: .05em;
  color: var(--muted-gold); margin: .5rem 0 0; max-width: none;
}
.powered-by-credit--tight { margin-top: .8rem; }
.powered-by-credit--hero { margin: .7rem 0 1.1rem; font-size: .82rem; }

/* ===================== Sponsors page: How Sponsorship Works — logo beside paragraph ===================== */
#how-it-works .section-head { margin-bottom: 1.2rem; }
#how-it-works.section { padding-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.how-it-works-media {
  display: flex;
  align-items: center;
  gap: 1.7rem;
}
.how-it-works-media__logo {
  height: 82px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  flex: none;
}
.how-it-works-media__text { margin: 0; max-width: 56ch; }
@media (max-width: 560px) {
  .how-it-works-media { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .how-it-works-media__logo { height: 60px; }
}

/* ===================== Sponsors page: What Sponsors Get carousel ===================== */
/* Reuses the proven .slideshow component (no page-jump bug, stable height, autoplay/pause/
   prev/next/swipe/keyboard already correct) with a larger, wider presentation for this
   premium placement — scoped to .wsg-slideshow only, so the Finals Celebration gallery is untouched. */
.wsg-slideshow {
  max-width: 620px;
  margin-inline: auto;
}
.wsg-slideshow .slideshow__slide img {
  height: clamp(320px, 52vw, 640px);
  max-height: 72vh;
}
@media (max-width: 560px) {
  .wsg-slideshow { max-width: 100%; }
  .wsg-slideshow .slideshow__slide img { height: clamp(260px, 88vw, 460px); }
}








/* ===================== Clubs: shared navy card system =====================
   One visual language for two sections:
     - Homepage "Our Clubs": featured card + selectable list (.clubs-picker)
     - League "The Clubs That Shaped the League": flat equal-weight grid
   Colours are drawn only from existing tokens (--deep-navy / --navy-raised /
   --navy-line / --muted-gold / --on-navy / --on-navy-soft). No new blues.
   ========================================================================= */

/* ---- club-tile restyled for navy sections (no geometry changes) ---- */
.section--navy .club-tile {
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  color: var(--on-navy);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.section--navy a.club-tile:hover {
  border-color: var(--muted-gold);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
.section--navy .club-tile--historic { background: #0A1E36; }
.section--navy .club-tile__place {
  color: var(--muted-gold);
  background: rgba(255,255,255,0.04);
  border-bottom-color: var(--navy-line);
}
.section--navy .club-tile__crest {
  background: #FFFFFF; /* crests are civic arms on white; keep them legible */
}
.section--navy .club-tile__body,
.section--navy .club-tile__id { border-top-color: var(--navy-line); }
.section--navy .club-tile__name { color: #FFFFFF; }
.section--navy .club-tile__tagline,
.section--navy .club-tile__society { color: var(--on-navy-soft); }
.section--navy .club-tile__society span { color: var(--muted-gold); }
.section--navy .club-tile__stats { border-top-color: var(--navy-line); }
.section--navy .club-tile__stats div + div { border-left-color: var(--navy-line); }
.section--navy .club-tile__stats dt { color: var(--on-navy-soft); }
.section--navy .club-tile__stats dd { color: var(--muted-gold); }
.section--navy .club-tile__cta { color: var(--muted-gold); }
.section--navy a.club-tile:hover .club-tile__cta { color: #FFFFFF; }
.section--navy .club-tile__crest-missing { color: var(--ink-faint); }
.section--navy .clubs-subhead {
  font-family: var(--display); color: #FFFFFF;
}

/* ---- Featured card + list picker (homepage) ---- */
.clubs-picker { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: stretch; }
/* featured card fills the column so it never leaves dead space beside the list */
.clubs-featured { height: 100%; align-content: center; }

.clubs-featured {
  background: var(--navy-raised);
  border: 1px solid var(--muted-gold);
  border-radius: var(--radius);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}
.clubs-featured__crest {
  background: #FFFFFF;
  border-radius: var(--radius);
  padding: .9rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 170px;
}
.clubs-featured__crest img {
  display: block; max-width: 100%; max-height: 190px;
  width: auto; height: auto; object-fit: contain;
}
.clubs-featured__place {
  margin: 0 0 .3rem;
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-gold);
}
.clubs-featured__name {
  margin: 0 0 .5rem; color: #FFFFFF; line-height: 1.08;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
}
.clubs-featured__tagline {
  margin: 0 0 1rem; color: var(--on-navy-soft);
  font-size: .98rem; line-height: 1.4; max-width: 46ch;
}
.clubs-featured__meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-end;
  margin: 0 0 1.1rem; padding: 0;
}
.clubs-featured__meta div { margin: 0; }
.clubs-featured__meta dt {
  margin: 0; font-family: var(--display); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-navy-soft);
}
.clubs-featured__meta dd {
  margin: .18rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: 1.35rem; line-height: 1; color: var(--muted-gold);
}
.clubs-featured__cta { margin: 0; }

/* list of the remaining clubs */
.clubs-list { display: flex; flex-direction: column; gap: .5rem; }
.clubs-list__row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: .85rem;
  width: 100%;
  text-align: left;
  padding: .6rem .8rem;
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  color: var(--on-navy);
  font: inherit;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.clubs-list__row:hover {
  transform: translateY(-2px);
  border-color: var(--muted-gold);
  background: #102A48;
}
.clubs-list__row[aria-current="true"] {
  border-color: var(--muted-gold);
  background: #102A48;
}
.clubs-list__crest {
  width: 46px; height: 46px; background: #FFFFFF; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; padding: 3px;
}
.clubs-list__crest img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; display: block; }
.clubs-list__text { min-width: 0; }
.clubs-list__name {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1rem; letter-spacing: .02em; color: #FFFFFF; line-height: 1.15;
}
.clubs-list__place {
  display: block; font-family: var(--display); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-gold);
  margin-top: .15rem;
}
.clubs-list__arrow { color: var(--on-navy-soft); font-size: 1.05rem; line-height: 1; }
.clubs-list__row:hover .clubs-list__arrow,
.clubs-list__row[aria-current="true"] .clubs-list__arrow { color: var(--muted-gold); }

@media (min-width: 620px) {
  .clubs-featured { grid-template-columns: 220px 1fr; gap: 1.4rem; padding: 1.4rem; }
}
@media (min-width: 1000px) {
  .clubs-picker { grid-template-columns: 1.25fr 1fr; gap: 1.4rem; }
  .clubs-featured { grid-template-columns: 240px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .clubs-list__row { transition: none; }
  .clubs-list__row:hover { transform: none; }
}

/* ===================== Pass 1 additions ===================== */

/* ---- ITEM 5: mobile-only Read More on the Finals intro ----
   Desktop keeps the full introduction visible and the control hidden. On mobile
   the remainder collapses. Uses [hidden] on the rest + a real <button>, so the
   state is exposed via aria-expanded and there is no hash or scroll change. */
.readmore__toggle { display: none; }
@media (max-width: 719px) {
  .readmore__rest[hidden] { display: none; }
  .readmore__toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .5rem; padding: .45rem .85rem;
    background: transparent; border: 1px solid var(--hairline);
    border-radius: var(--radius); cursor: pointer;
    font-family: var(--display); font-size: .82rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--azzurri-blue);
  }
  .readmore__toggle:hover { background: var(--paper-sunk); }
}

/* ---- ITEM 7: subtle light border + caption on the grant photograph ---- */
.photo-figure img {
  border: 1px solid var(--hairline);
  box-sizing: border-box;
}
.photo-figure__caption {
  margin-top: .6rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---- ITEM 8: taller mobile hero ----
   The banner artwork is a single ultra-wide (2.29:1) lockup whose six kit panels
   run edge to edge, so scaling it up to gain height would crop the outer clubs.
   Instead the band itself gains height around the image, giving the hero more
   vertical presence with nothing cropped. Desktop is untouched. */
@media (max-width: 719px) {
  .hero-banner {
    padding-block: clamp(1.6rem, 7vw, 2.9rem);
    display: flex;
    align-items: center;
    min-height: 46vw;
  }
}

/* ---- ITEM 11: three match-report slots ---- */
.report-grid--three { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .report-grid--three { grid-template-columns: repeat(3, 1fr); }
}
.report-card--empty { border-style: dashed; }
.report-card__placeholder-title {
  font-size: var(--step-1); color: var(--ink-soft); margin-bottom: .3rem;
}
.report-card__score--empty { color: var(--ink-faint); }
.report-card__cta { margin: .9rem 0 0; }
.btn--sm { padding: .5rem .9rem; font-size: .82rem; }
.btn.is-disabled { opacity: .45; pointer-events: none; }
.placeholder-note {
  margin-top: .7rem; font-size: var(--step--1); color: var(--ink-faint);
}

/* ---- ITEM 12: sponsors proof-point separators ----
   Mirrors the homepage .stat divider (1px, low-opacity, inset vertically)
   rather than boxing each stat. */
.proof-point { position: relative; }
.proof-point + .proof-point::before {
  content: "";
  position: absolute; left: -0.35rem; top: 12%; bottom: 12%;
  width: 1px; background: var(--hairline);
}
/* the 2-up mobile grid wraps, so drop the divider at the start of row 2 */
@media (max-width: 719px) {
  .proof-point:nth-child(3)::before { display: none; }
}

/* ---- ITEM 15: center the Partner CTA on desktop ----
   Centers the element itself, not just its text. */
@media (min-width: 720px) {
  .pathway--partner .btn--gold {
    display: block;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
  }
}

/* ===================== Pass 2 ===================== */

/* ---- ITEM 2: schedule graphic -- reclaim the wasted space ----
   The graphic is square (1254x1254). It was pinned to 620px inside a 1200px
   shell, leaving ~250px empty on each side, and the section keeps full section
   padding even though the schedule is now the only thing in it.
   Desktop: widen, but cap against viewport height so the whole square stays
   visible in one screen -- deliberately NOT the full shell width, which would
   make it ~1200px tall and require scrolling to see the bottom.
   Mobile: bleed to the full viewport width by cancelling the shell gutter.
   The aspect ratio is untouched in both cases (width set, height:auto). */
.section--schedule { padding-block: clamp(1.1rem, 2.4vw, 1.9rem); }
.schedule-graphic { margin: 0 auto 0.6rem; max-width: min(900px, 82vh); }
.schedule-graphic .zoom-hint { margin-top: 0.35rem; }

@media (max-width: 719px) {
  .schedule-graphic {
    max-width: none;
    /* cancel the shell gutter so the image uses the full width, no page scroll */
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: 0.4rem;
  }
  .schedule-graphic img { border-radius: 0; border-left: 0; border-right: 0; }
}

/* ===================== Targeted correction pass ===================== */

/* ---- ITEM 5: How It Started photograph ----
   The image carried width/height attributes AND width:100% with no height:auto,
   so it was being stretched vertically to 681px (ratio 0.66 against a true
   2.35:1 panorama). height:auto restores the real aspect ratio; the whole
   photograph is shown, nothing is cropped. */
.history-photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper-sunk);
  box-sizing: border-box;
}
@media (max-width: 719px) {
  /* full-width on mobile rather than a scaled-down desktop column crop */
  .history-photo { border-radius: 0; border-left: 0; border-right: 0; }
  .split .history-photo { margin-inline: calc(-1 * var(--gutter)); width: calc(100% + var(--gutter) + var(--gutter)); max-width: none; }
}

/* ---- ITEM 2: Match of the Week emphasis ---- */
.report-card--featured { border-color: var(--muted-gold); }
.motw-badge {
  display: inline-block; margin: 0 0 .4rem;
  font-family: var(--display); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #4A3A08; background: var(--muted-gold);
  padding: .2rem .5rem; border-radius: 2px;
}

/* ---- ITEM 4: centre the direct-email line on desktop ---- */
@media (min-width: 720px) {
  .contact-email-line { width: fit-content; margin-inline: auto; text-align: center; }
}

/* ---- ITEM 6: Media Archive -- stop destroying the photographs ----
   Every thumbnail shared one 4/3 landscape box with object-fit:cover. For the
   twelve portrait photographs (ratio ~0.67) cover discarded roughly half the
   frame vertically -- heads and trophies cut off -- and the wider landscape
   shots lost their edges. The card system stays identical; only the image
   treatment inside changes: a square box with object-fit:contain shows every
   photograph complete, in its own orientation, with balanced letterboxing and
   no crop, no stretch, no distortion. */
.gallery-item img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: var(--paper-sunk);
}
@media (max-width: 719px) {
  /* wider box on mobile where the column is narrow, so portraits stay large */
  .gallery-item img { aspect-ratio: 4 / 5; }
}

/* ===================== Results Archive: historical additions ===================== */
.archive-row__md {
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft, #5A6473);
}
.archive-row__note { margin: 0; font-size: .95rem; color: var(--ink, #1B2430); }
.archive-row__flag {
  margin: .25rem 0 0; font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #8A6A1F;
}
.archive-standings-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.archive-standings {
  background: var(--paper-sunk, #F3F1EC); border: 1px solid var(--hairline, #DFDAD1);
  border-radius: var(--radius, 6px); padding: 1rem 1.1rem; min-width: 0;
}
.archive-standings h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.archive-standings__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.archive-standings__table th {
  text-align: left; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft, #5A6473); border-bottom: 1px solid var(--hairline, #DFDAD1);
  padding: 0 .5rem .35rem 0; font-weight: 600;
}
.archive-standings__table td { padding: .32rem .5rem .32rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.archive-standings__table td:first-child { width: 1.8rem; color: var(--ink-soft, #5A6473); }
.archive-standings__note { margin: .6rem 0 0; font-size: .82rem; color: var(--ink-soft, #5A6473); }
.archive-open { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.archive-open li {
  background: var(--paper, #FBFAF7); border: 1px solid var(--hairline, #DFDAD1);
  border-left: 3px solid var(--muted-gold, #B08D3C);
  border-radius: var(--radius, 6px); padding: .8rem 1rem; min-width: 0;
}
.archive-open strong { display: block; font-size: .96rem; margin-bottom: .2rem; }
.archive-open span { display: block; font-size: .9rem; color: var(--ink-soft, #5A6473); }

/* ===================== Media Archive: grouped viewer ===================== */
/* Replaces the long vertical photo grid. One stable stage per group, with a
   thumbnail rail, counter and prev/next, so many images can be browsed without
   scrolling past every photograph. */
.media-viewer { display: grid; gap: .7rem; min-width: 0; }
.media-viewer__stage {
  position: relative; width: 100%;
  height: clamp(240px, 46vw, 470px);           /* stable: never jumps between slides */
  background: var(--paper-sunk, #F3F1EC);
  border: 1px solid var(--hairline, #DFDAD1);
  border-radius: var(--radius, 6px); overflow: hidden;
}
.media-viewer__frame {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%;
  background: transparent; cursor: zoom-in;
  opacity: 0; visibility: hidden; transition: opacity .32s ease;
}
.media-viewer__frame.is-active { opacity: 1; visibility: visible; }
.media-viewer__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-viewer__bar { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.media-viewer__nav {
  width: 2.3rem; height: 2.3rem; flex: none; cursor: pointer;
  border: 1px solid var(--hairline, #DFDAD1); border-radius: 50%;
  background: var(--paper, #FBFAF7); color: var(--ink, #1B2430); font-size: 1rem; line-height: 1;
}
.media-viewer__nav:hover { background: var(--paper-sunk, #F3F1EC); }
.media-viewer__count {
  margin: 0; min-width: 5.2rem; text-align: center;
  font-size: .84rem; letter-spacing: .05em; color: var(--ink-soft, #5A6473);
  font-variant-numeric: tabular-nums;
}
.media-viewer__thumbs {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: thin; scroll-behavior: smooth;
}
.media-viewer__thumb {
  flex: none; width: 74px; height: 56px; padding: 0; cursor: pointer;
  border: 1px solid var(--hairline, #DFDAD1); border-radius: 4px;
  background: var(--paper-sunk, #F3F1EC); overflow: hidden; opacity: .62;
  transition: opacity .2s ease, border-color .2s ease;
}
.media-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-viewer__thumb.is-active { opacity: 1; border-color: var(--muted-gold, #B08D3C); }
.media-viewer__thumb:hover { opacity: 1; }
@media (max-width: 719px) {
  .media-viewer__stage { height: clamp(210px, 62vw, 330px); }
  .media-viewer__thumb { width: 60px; height: 46px; }
}


/* Community Partners carries six logos, so this one group is allowed to wrap
   inside the original partner-logos component. Nothing else about the component
   changes: same shared height, same natural proportions, same card styling. */
.partner-logos--wrap { flex-wrap: wrap; gap: 1.1rem 1.5rem; }
.partner-logos__lead { display: inline-flex; align-items: center; gap: .55rem; }
.partner-logos__role {
  font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft, #5A6473); white-space: nowrap;
}