/* ==========================================================================
   Halifax Tars RFC — Site stylesheet
   Palette: Tars black, Tars sky blue, white. Gold reserved for the 50th year.
   Type:    Barlow Condensed (display) + Inter (body)
   ========================================================================== */

:root {
  --black: #0b0e12;
  --ink: #141920;
  --ink-2: #1c232c;
  --ink-3: #2a333e;
  --white: #ffffff;
  --paper: #f6f8fa;
  --paper-2: #eaf0f5;
  --line: #d8dfe6;
  --line-dark: rgba(255, 255, 255, 0.12);
  --text: #1a2028;
  --text-muted: #5c6875;
  --text-on-dark: #eef2f6;
  --text-on-dark-muted: #a7b3bf;

  --blue: #5ab7e6;         /* Tars sky blue, jersey hoops */
  --blue-deep: #1e8fc9;    /* darker blue for links on light bg */
  --blue-soft: #d5edf9;
  --blue-glow: rgba(90, 183, 230, 0.35);
  --gold: #d9a93c;         /* 50th anniversary accent */

  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 6px;
  --radius-lg: 14px;
  --shadow: 0 10px 30px rgba(11, 14, 18, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 14, 18, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.2em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 0.4em;
  color: inherit;
}
h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h4 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--text-muted); max-width: 62ch; }
.on-dark .lead { color: var(--text-on-dark-muted); }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.on-dark { background: var(--ink); color: var(--text-on-dark); }
.on-black { background: var(--black); color: var(--text-on-dark); }
.on-paper { background: var(--paper); }
.on-blue { background: var(--blue); color: var(--black); }
.on-dark a:not(.btn), .on-black a:not(.btn) { color: var(--blue); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 14px;
}
.on-dark .eyebrow, .on-black .eyebrow { color: var(--blue); }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: currentColor; }
.eyebrow--gold { color: var(--gold) !important; }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--split {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.section-head--split > div { max-width: 700px; }

/* ---------- Hoops (jersey stripe motif) ---------- */
.hoops {
  height: 14px;
  background: repeating-linear-gradient(
    90deg, var(--blue) 0 48px, var(--black) 48px 96px
  );
}
.hoops--thin { height: 6px; }
.hoops--v {
  background: repeating-linear-gradient(180deg, var(--blue) 0 22px, var(--black) 22px 44px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.2s, color 0.2s, box-shadow 0.25s, border-color 0.2s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--blue); color: var(--black); }
.btn--primary:hover { background: #7cc8ec; box-shadow: 0 10px 30px var(--blue-glow); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--ink-3); }
.btn--white { background: var(--white); color: var(--black); }
.btn--white:hover { background: var(--paper-2); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.on-paper .btn--ghost:hover, .on-white .btn--ghost:hover { background: rgba(0, 0, 0, 0.05); }
.btn--sm { padding: 11px 18px; font-size: 1rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-deep);
}
.link-arrow::after { content: "→"; transition: transform 0.2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(5px); }
.on-dark .link-arrow, .on-black .link-arrow { color: var(--blue); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 14, 18, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--white); }
.brand:hover { text-decoration: none; }
.brand img { height: 52px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: 0.06em; text-transform: uppercase; }
.brand__sub { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 13px;
  border-radius: var(--radius);
  position: relative;
  white-space: nowrap; /* two-word labels were stacking, and Minis & Youth went to three lines */
}
.nav a:not(.btn):hover { text-decoration: none; color: var(--white); background: rgba(255, 255, 255, 0.06); }
.nav a:not(.btn)[aria-current="page"] { color: var(--blue); }
.nav a:not(.btn)[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--blue);
}
.nav .btn { margin-left: 12px; }
.nav-toggle {
  display: none;
  width: 46px; height: 46px; border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: transparent; color: var(--white); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: 0.25s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: 0.25s;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1279px) {
  .nav a:not(.btn) { font-size: 1rem; padding: 10px 10px; letter-spacing: 0.06em; }
}
@media (max-width: 1080px) {
  .brand__text { display: none; }
}
@media (max-width: 900px) {
  /* backdrop-filter would make the header the containing block for the fixed nav panel */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 14, 18, 0.97); }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 78px 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black);
    padding: 16px var(--gutter) 40px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    overflow-y: auto;
  }
  .nav-open .nav { transform: none; }
  .nav a:not(.btn) { font-size: 1.6rem; padding: 16px 8px; border-bottom: 1px solid var(--line-dark); border-radius: 0; }
  .nav a:not(.btn)[aria-current="page"]::after { display: none; }
  .nav .btn { margin: 24px 0 0; justify-content: center; border-bottom: 0; }
  .brand__text { display: flex; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid; align-items: end;
  color: var(--white);
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 30%;
  transform: scale(1.06);
  animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  /* an even tint across the full width, rather than a 90deg wash that faded out
     at 60% and left the right of the photo noticeably lighter than the left */
  background:
    linear-gradient(180deg, rgba(11, 14, 18, 0.55) 0%, rgba(11, 14, 18, 0.15) 35%, rgba(11, 14, 18, 0.85) 100%),
    rgba(11, 14, 18, 0.5);
}
.hero__inner { padding-block: clamp(80px, 12vw, 140px) clamp(56px, 8vw, 96px); }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
}
.hero__kicker .pill {
  background: var(--gold); color: var(--black); padding: 4px 10px; border-radius: 3px; letter-spacing: 0.12em; font-size: 0.9rem; white-space: nowrap;
}
@media (max-width: 560px) { .hero__kicker { font-size: 0.85rem; letter-spacing: 0.16em; flex-wrap: wrap; } }
.hero h1 { max-width: 14ch; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.4); }
.hero h1 .accent { color: var(--blue); }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 56ch; color: var(--text-on-dark); opacity: 0.92; margin-bottom: 32px; }
.hero__meta {
  display: flex; gap: 32px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9rem; color: var(--text-on-dark-muted);
}
.hero__meta strong { display: block; color: var(--white); font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Fade-up entrance */
/* Scoped to .js, which the inline head script sets and drops again if main.js
   never reports in. Unscoped, a blocked or failed script left the page blank:
   the reveal blocks hold most of the copy, including the home page h1. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.1s; }
.js .reveal[data-delay="2"] { transition-delay: 0.2s; }
.js .reveal[data-delay="3"] { transition-delay: 0.3s; }
.js .reveal[data-delay="4"] { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero__bg { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; background: var(--black); color: var(--white); overflow: hidden; isolation: isolate;
  padding-block: clamp(72px, 10vw, 120px) clamp(48px, 7vw, 80px);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: 0.45; }
.page-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,14,18,0.95) 0%, rgba(11,14,18,0.6) 55%, rgba(11,14,18,0.3) 100%); }
.page-hero h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); max-width: 16ch; }
.page-hero .lead { color: var(--text-on-dark-muted); font-size: 1.15rem; }
.breadcrumbs { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 20px; }
.breadcrumbs a { color: var(--blue); }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 2px; background: var(--line-dark); }
.stat { background: var(--ink); padding: 34px 28px; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1; color: var(--blue); letter-spacing: 0.02em; }
.stat__num sup { font-size: 0.45em; vertical-align: top; top: 0.4em; position: relative; }
.stat__label { margin-top: 6px; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-muted); }
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 20px; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat__label { font-size: 0.75rem; letter-spacing: 0.1em; }
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(18px, 2.5vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__body h3 { margin: 0; }
.card__body p { color: var(--text-muted); margin: 0; }
.card__body .link-arrow { margin-top: auto; padding-top: 10px; }
.card--dark { background: var(--ink-2); border-color: var(--line-dark); color: var(--text-on-dark); }
.card--dark .card__body p { color: var(--text-on-dark-muted); }

/* Team tile — big image with overlay text */
.tile {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden;
  color: var(--white); background: var(--black);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease), filter 0.5s; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,18,0.05) 0%, rgba(11,14,18,0.25) 40%, rgba(11,14,18,0.95) 100%); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 1; }
.tile__body .eyebrow { color: var(--blue); margin-bottom: 8px; }
.tile__body h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin: 0 0 6px; }
.tile__body p { color: var(--text-on-dark-muted); margin: 0; font-size: 0.95rem; }
.tile__body .link-arrow { margin-top: 12px; color: var(--white); }
.tile:hover { text-decoration: none; }
.tile:hover img { transform: scale(1.06); }

/* Instagram feed on /news — square tiles, reusing the .tile treatment */
.tile--ig { aspect-ratio: 1 / 1; }
.tile--ig .tile__body { padding: 20px; }
.tile--ig .tile__body p { font-size: 0.9rem; }
.tile__badge {
  position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px;
  background: rgba(11,14,18,0.62); color: var(--white);
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.ig-skeleton {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--line);
  animation: ig-pulse 1.6s ease-in-out infinite;
}
@keyframes ig-pulse { 50% { opacity: 0.4; } }
.ig-feed--fallback { display: block; text-align: center; }
.ig-feed--fallback .btn-row { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ig-skeleton { animation: none; } }

/* landscape variant: suits the club's wide team photos, used on the teams hub */
/* min-height, not a pure ratio: the tile has to clear its overlaid heading and
   paragraph, which need about 250px at the narrowest. That means the crop does
   move a little between widths, unlike the galleries below. */
.tile--wide { aspect-ratio: 16 / 9; min-height: 300px; max-width: 100%; } /* max-width: the min-height would otherwise widen the box via the ratio */
.tile--wide .tile__body { padding: 32px; }
.tile--wide::after { background: linear-gradient(180deg, rgba(11,14,18,0.1) 0%, rgba(11,14,18,0.5) 38%, rgba(11,14,18,0.95) 100%); }
.tile--wide .tile__body p { max-width: 46ch; }
@media (max-width: 600px) { .tile--wide { aspect-ratio: 4 / 3; min-height: 260px; } }
/* a tile spanning the pair grid: wider than 16/9 so a full width tile is not
   also twice the height of its neighbours. Only above the pair breakpoint,
   since below it the grid is one column and this would crop the sides. */
@media (min-width: 900px) { .grid--pair .tile--banner { grid-column: 1 / -1; aspect-ratio: 21 / 10; } }
@media (max-width: 400px) { .tile--wide { aspect-ratio: 5 / 4; } }

/* exactly two across once there is room; auto-fit would creep to three and
   shrink the tiles back towards square */
.grid--pair { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid--pair { grid-template-columns: 1fr 1fr; } }

/* ---------- Split / feature layouts ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.split__media--stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__media--stack img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; object-fit: cover; }
.split__media--stack img { aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow); }

/* media column matches the text column's full height, heading top to last button */
@media (min-width: 861px) {
  /* give the media column the larger share so the photo runs bigger at the same ratio */
  .split--stretch { grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 4vw, 64px); }
  .split--stretch .split__media { display: flex; align-items: center; }
  .split--stretch .split__media img {
    width: 100%; height: auto; aspect-ratio: 16 / 10;
    object-fit: cover; object-position: var(--focal, 50% 50%);
  }
}
.split__badge {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--blue); color: var(--black); padding: 18px 22px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1;
  box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 2.4rem; line-height: 1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .split__badge { left: 12px; bottom: 12px; }
}

/* ---------- Checklist / info lists ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li::before {
  content: ""; flex: 0 0 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0e12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.info-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: flex-start; }
.info-list .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; }
.on-dark .info-list .ico, .on-black .info-list .ico { background: rgba(90,183,230,0.15); color: var(--blue); }
.info-list .ico svg { width: 22px; height: 22px; }
.info-list strong { display: block; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
.info-list span { color: var(--text-muted); }
.on-dark .info-list span, .on-black .info-list span { color: var(--text-on-dark-muted); }

/* ---------- Quote block ---------- */
.quote {
  position: relative; padding: clamp(32px, 5vw, 56px); border-radius: var(--radius-lg);
  background: var(--ink-2); color: var(--white); border-left: 6px solid var(--blue);
}
.quote p { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.15; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.01em; }
.quote cite { font-style: normal; color: var(--text-on-dark-muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; }

/* ---------- Sponsors ---------- */
.sponsor-strip { overflow: hidden; position: relative; padding-block: 8px; }
.sponsor-strip::before, .sponsor-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none;
}
/* the fades have to match whatever the strip sits on, or they show as grey smears */
.sponsor-strip { --strip-fade: var(--white); }
.on-paper .sponsor-strip { --strip-fade: var(--paper); }
.sponsor-strip::before { left: 0; background: linear-gradient(90deg, var(--strip-fade), transparent); }
.sponsor-strip::after { right: 0; background: linear-gradient(270deg, var(--strip-fade), transparent); }
.sponsor-track { display: flex; gap: 64px; width: max-content; animation: marquee 34s linear infinite; }
.sponsor-track:hover { animation-play-state: paused; }
.sponsor-track img { height: 64px; width: auto; max-width: 220px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.75; transition: 0.3s; }
.sponsor-track img:hover { filter: none; opacity: 1; }
/* touch devices never hover, so without this every sponsor logo stays
   desaturated on a phone, which is where most of the traffic is */
@media (hover: none) { .sponsor-track img { filter: none; opacity: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sponsor-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* flex rather than grid so a short final row centres instead of hugging the left */
.sponsor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sponsor-grid > .sponsor-card { flex: 1 1 190px; max-width: 250px; }
.sponsor-card {
  display: grid; place-items: center; padding: 34px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  min-height: 150px; transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
a.sponsor-card { text-decoration: none; }
.sponsor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
a.sponsor-card:hover { text-decoration: none; border-color: var(--blue); }
.sponsor-card img { max-height: 80px; width: auto; max-width: 100%; object-fit: contain; }
.sponsor-grid > .sponsor-card--title { flex: 0 0 100%; max-width: none; }
/* a very wide logo lockup needs a wider cell to stay legible */
.sponsor-grid > .sponsor-card--wide { flex: 1 1 340px; max-width: 420px; }
.sponsor-card--title { min-height: 220px; background: var(--ink); border-color: var(--ink); position: relative; }
.sponsor-card--title img { max-height: 110px; margin-top: 26px; } /* clear the title-sponsor tag above it */
.sponsor-card--title .tag { position: absolute; top: 16px; left: 16px; }
.tag {
  display: inline-block; padding: 5px 10px; border-radius: 3px; background: var(--blue); color: var(--black);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.tag--gold { background: var(--gold); }
.tag--outline { background: transparent; border: 1px solid currentColor; color: inherit; }

/* ---------- Pricing (membership) ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.price {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px 30px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price--featured { background: var(--ink); color: var(--white); border-color: var(--ink); }
.price--featured .price__note { color: var(--text-on-dark-muted); }
.price__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; }
.price__amount { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--blue-deep); }
.price--featured .price__amount { color: var(--blue); }
.price__amount small { font-size: 0.4em; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; }
.price--featured .price__amount small { color: var(--text-on-dark-muted); }
.price__note { font-size: 0.92rem; color: var(--text-muted); flex: 1; }
.price .tag { position: absolute; top: 16px; right: 16px; }

/* ---------- Age groups (minis) ---------- */
.age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.age {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; text-align: center;
}
.age strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--black); }
.age em { display: block; font-style: normal; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; color: var(--blue-deep); margin: 4px 0 6px; }
.age span { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Honours (history) ---------- */
.honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.honour {
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 28px 26px;
  border-top: 5px solid var(--blue);
}
.honour--gold { border-top-color: var(--gold); }
.honour h3 { font-size: 1.6rem; margin-bottom: 2px; color: var(--white); } /* card is always dark, even on light sections */
.honour .sub { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 16px; }
.honour .count { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--blue); margin-bottom: 14px; }
.honour--gold .count { color: var(--gold); }
.years { display: flex; flex-wrap: wrap; gap: 6px; }
.years span { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 3px; background: rgba(255,255,255,0.07); }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: 36px; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: -36px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 4px solid var(--white); box-shadow: 0 0 0 2px var(--blue); }
.timeline__year { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--blue-deep); }
.timeline__item h3 { font-size: 1.5rem; margin: 6px 0 8px; }
.timeline__item p { color: var(--text-muted); margin: 0; }

/* ---------- People ---------- */
/* flex rather than grid so a short final row centres instead of hugging the left */
.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.people > .person { flex: 1 1 245px; max-width: 320px; }
.person { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; }
.person__role { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 4px; }
.person__name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.03em; text-transform: uppercase; }
.person--photo { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; }
.person--photo img { flex: none; }
.person--photo .person__name { line-height: 1.05; }
.person--photo img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }

.presidents { columns: 3; column-gap: 32px; list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.presidents li { break-inside: avoid; display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.presidents li span:first-child { font-family: var(--font-display); font-weight: 700; color: var(--blue-deep); min-width: 48px; letter-spacing: 0.04em; }
@media (max-width: 900px) { .presidents { columns: 2; } }
@media (max-width: 560px) { .presidents { columns: 1; } }

/* ---------- News ---------- */
.news-list { display: grid; gap: 0; }
.news-item {
  display: grid; grid-template-columns: 140px 1fr auto; gap: 24px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.news-item:first-child { border-top: 1px solid var(--line); }
.news-item__date { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-size: 0.95rem; }
.news-item h3 { font-size: 1.5rem; margin: 0 0 4px; }
.news-item p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 700px) { .news-item { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Gallery ---------- */
/* Row height is derived from the column width rather than fixed in pixels, so a
   cell keeps the same shape at every screen size and each photo gets the same
   crop on a phone as on a desktop. The query unit has to resolve against the
   gallery's parent, because an element cannot query itself. Scoped with :has
   so the header's container is left alone: .nav is position:fixed inside it,
   and containment would make the container its containing block. */
:has(> .gallery) { container-type: inline-size; }
.gallery {
  --cols: 4; --gap: 12px; --cell: 1.455; /* --cell is width:height of one cell */
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap);
  grid-auto-rows: 200px; /* fallback for browsers without container query units */
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) / var(--cell));
}
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.gallery .wide { grid-column: span 2; }
.gallery .tall { grid-row: span 2; }
.gallery .big { grid-column: span 2; grid-row: span 2; }
.gallery.gallery--tall { --cell: 1.058; }
@media (max-width: 760px) { .gallery { --cols: 2; } }

/* ---------- Content prose ---------- */
.prose p { font-size: 1.05rem; }
.prose h3 { margin-top: 2em; }
.prose img { border-radius: var(--radius-lg); margin-block: 1.5em; }
.prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 4px solid var(--blue); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; text-transform: uppercase; font-weight: 600; }
.figure { margin: 0; }
.figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.figure figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 10px; letter-spacing: 0.04em; }

/* ---------- Anniversary band ---------- */
.anniv {
  position: relative; overflow: hidden; background: var(--black); color: var(--white);
}
.anniv::before {
  content: "50"; position: absolute; right: -0.05em; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(14rem, 34vw, 30rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.08); pointer-events: none;
}
.anniv__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; position: relative; }
.anniv__badge {
  width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; color: var(--gold); text-align: center; line-height: 0.9;
}
.anniv__badge strong { font-size: 3.2rem; display: block; }
.anniv__badge small { font-size: 0.8rem; letter-spacing: 0.2em; }
.anniv h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 8px; }
.anniv p { color: var(--text-on-dark-muted); margin: 0; max-width: 60ch; }
@media (max-width: 860px) { .anniv__inner { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- CTA band ---------- */
.cta {
  position: relative; background: var(--blue); color: var(--black); overflow: hidden; isolation: isolate;
}
.cta__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0.12; mix-blend-mode: multiply; filter: grayscale(1); }
.cta__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta h2 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); max-width: 14ch; margin: 0; }
.cta p { margin: 12px 0 0; font-size: 1.1rem; max-width: 50ch; color: rgba(11,14,18,0.8); }
.cta .btn-row { justify-content: flex-end; }
@media (max-width: 860px) { .cta__inner { grid-template-columns: 1fr; } .cta .btn-row { justify-content: flex-start; } }

/* ---------- Map / contact ---------- */
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.contact-panel { background: var(--ink); color: var(--white); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); }
.contact-panel h3 { color: var(--blue); }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
.form input, .form select, .form textarea {
  font: inherit; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-glow); }
.form textarea { min-height: 140px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__hint { font-size: 0.85rem; color: var(--text-muted); }
.form__success { display: none; padding: 20px; border-radius: var(--radius); background: var(--blue-soft); color: var(--black); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--text-on-dark-muted); font-size: 0.95rem; }
.site-footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(48px, 7vw, 80px) 40px;
}
.site-footer h4 { color: var(--white); font-size: 1.05rem; letter-spacing: 0.18em; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
/* roomier tap targets on touch screens */
.site-footer ul a { display: inline-block; padding: 7px 0; min-height: 24px; }
@media (max-width: 700px) { .site-footer ul a { padding: 10px 0; } }
.site-footer a { color: var(--text-on-dark-muted); }
.site-footer a:hover { color: var(--blue); text-decoration: none; }
.site-footer .brand { margin-bottom: 18px; }
.site-footer .brand img { height: 64px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-block: 22px; border-top: 1px solid var(--line-dark); font-size: 0.82rem;
}
.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--white);
  transition: 0.25s;
}
.socials a:hover { background: var(--blue); border-color: var(--blue); color: var(--black); text-decoration: none; transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 24px; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.on-dark .muted, .on-black .muted { color: var(--text-on-dark-muted); }
.small { font-size: 0.9rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.notice {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--blue-soft); color: var(--black); border-left: 5px solid var(--blue);
}
.notice strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; }

/* ---------- Narrow-screen overflow guards ----------
   Grid/flex children default to min-width:auto, so a long unbreakable string
   (an email address, a wide button label) can blow out a column on small phones. */
body { overflow-wrap: break-word; }
.split > *, .grid > *, .pricing > *, .honours > *, .people > *,
.age-grid > *, .sponsor-grid > *, .stats > *, .news-item > *,
.info-list li, .info-list li > div, .card, .card__body, .contact-panel, .quote { min-width: 0; }
a[href^="mailto:"], a[href^="tel:"], .info-list span, .site-footer address { overflow-wrap: anywhere; }

@media (max-width: 460px) {
  .btn { white-space: normal; text-align: center; padding-inline: 20px; }
  .btn-row > .btn { width: 100%; }
  .news-item__date { font-size: 0.85rem; }
  .quote p { font-size: 1.5rem; }
}

@media (max-width: 400px) {
  .brand img { height: 42px; }
  .brand__name { font-size: 1.25rem; }
  .brand__sub { display: none; }
  .site-header__inner { gap: 12px; }
}