/* ==========================================================================
   EDSC — Erith & District Swimming Club
   Design system: club red & white, modernised. Mobile-first.
   ========================================================================== */

:root {
  --red:        #C8102E;
  --red-dark:   #97091F;
  --red-bright: #E8173B;
  --navy:       #0B1B2B;
  --ink:        #18242F;
  --slate:      #51606D;
  --mist:       #F4F6F9;
  --line:       #E3E8EE;
  --white:      #FFFFFF;
  --grad-hero:  linear-gradient(115deg, rgba(11,27,43,.92) 0%, rgba(11,27,43,.55) 45%, rgba(200,16,46,.55) 100%);
  --grad-red:   linear-gradient(120deg, var(--red-dark), var(--red) 55%, var(--red-bright));
  --shadow-1:   0 2px 10px rgba(11,27,43,.08);
  --shadow-2:   0 14px 40px rgba(11,27,43,.16);
  --radius:     16px;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 92px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.container { width: min(1180px, 92vw); margin-inline: auto; }
.section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: #C6D2DD; }

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .8rem;
}
.section--navy .kicker { color: #FF6B81; }

.lead { font-size: 1.13rem; color: var(--slate); max-width: 46rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-red);
  color: var(--white) !important;
  box-shadow: 0 6px 18px rgba(200,16,46,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,16,46,.45); }
.btn-ghost { border-color: var(--navy); color: var(--navy) !important; background: transparent; }
.btn-ghost:hover { background: var(--navy); color: var(--white) !important; }
.btn-ghost--light { border-color: rgba(255,255,255,.85); color: var(--white) !important; }
.btn-ghost--light:hover { background: var(--white); color: var(--navy) !important; }
.btn-lg { font-size: 1.1rem; padding: 1rem 2.1rem; }

/* --- Header / nav ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { display: flex; align-items: center; gap: .8rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand img { width: 76px; height: auto; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.15;
  color: var(--navy);
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--red); display: block; }
/* Home page gets a larger, bolder crest — only where the full horizontal nav is shown, so it never affects the mobile/burger header. */
@media (min-width: 1264px) { .page-home .brand img { width: 96px; } }

/* Auto margins on the NAV, so the links sit centred in the space between the crest and the actions instead of
   crowding up against "Member Login". Putting the auto margin on .brand instead would push everything right. */
.site-nav { margin: 0 auto; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .1rem; align-items: center; }
.site-nav a, .sub-toggle {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .94rem;
  color: var(--navy);
  padding: .55rem .45rem;
  border-radius: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav a:hover, .sub-toggle:hover, .site-nav a.active { color: var(--red); background: #FBEAED; }
.sub-toggle::after { content: " ▾"; font-size: .72em; }

.has-sub { position: relative; }
.sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: .45rem;
  margin: 0;
  list-style: none;
  flex-direction: column;
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { display: flex; }
.sub a { padding: .6rem .8rem; border-radius: 10px; font-weight: 600; }
/* Club Life gathers three kinds of page — the squads, the club itself and the records boards — so each group is
   labelled; unlabelled, ten links in one column read as a list of everything rather than a menu. */
.sub-head {
  padding: .5rem .8rem .25rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}
.sub li + .sub-head { margin-top: .35rem; border-top: 1px solid var(--line); padding-top: .6rem; }

.nav-actions { display: flex; align-items: center; gap: .7rem; }
.login-link { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--slate); white-space: nowrap; }
.login-link:hover { color: var(--navy); }

.nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .4rem;
  margin-left: .2rem;
}
.nav-burger span { display: block; width: 26px; height: 3px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .2s; }

@media (max-width: 1120px) {
  /* the full horizontal nav (7 items + Member Login + enlarged badge) collapses to the burger below this width. It was measured with a "Book a Trial" button beside Member Login; without it the bar needs less, so this is now generous rather than tight. */
  /* backdrop-filter makes the header the containing block for the fixed nav — drop it here */
  .site-header { backdrop-filter: none; background: var(--white); }
  .nav-burger { display: block; }
  .login-link { display: none; }
  /* The nav is taken out of the flow here, so its auto margins no longer hold the row apart — the burger and the
     trial button would sit tucked against the crest without this. */
  .nav-actions { margin-left: auto; }
  .site-nav {
    margin: 0;
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--white);
    padding: 1rem 4vw 6rem;
    overflow-y: auto;
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .site-nav a, .sub-toggle { font-size: 1.15rem; padding: .85rem .6rem; width: 100%; text-align: left; }
  .sub { position: static; display: none; box-shadow: none; border: 0; padding-left: 1.1rem; }
  .sub-head { font-size: .82rem; padding: .8rem .6rem .3rem; }
  .has-sub:hover .sub { display: none; }
  .has-sub.open .sub { display: flex; }
}

@media (max-width: 640px) {
  /* keep the header to one 76px line so the fixed nav lines up beneath it */
  .nav-wrap { gap: .6rem; }
  .brand { gap: .5rem; }
  .brand img { width: 52px; }
  .brand-name { font-size: .76rem; }
  .nav-actions { gap: .5rem; }
  .nav-actions .btn { padding: .55rem 1rem; font-size: .88rem; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  color: var(--white);
  display: grid;
  align-items: end;
  min-height: clamp(540px, 78vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img) center/cover no-repeat;
  z-index: -2;
}
.hero::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero); z-index: -1; }
/* Red club crest centred along the top of the hero, above the swimmer, blended into the water (screen reads as a red glow; soft-light is a subtler alternative). */
.hero-crest {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(180px, 20vw, 280px);
  height: auto;
  opacity: .6;
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Hero text sits centred low in the hero, under the swimmer's head; it deliberately drops into the band between the two corner buttons. Text shadow lifts it off the water. */
.hero > .container {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: clamp(10px, 2vh, 22px);
  text-shadow: 0 1px 10px rgba(11, 27, 43, .6), 0 1px 3px rgba(11, 27, 43, .55);
}
.hero h1 { color: var(--white); max-width: 24ch; margin-inline: auto; }
.hero .hero-est, .hero .lead { margin-inline: auto; }
/* The two CTAs anchor to the bottom corners, flanking the centred text. */
.hero-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 4vh, 36px);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-inline: clamp(20px, 4vw, 56px);
  z-index: 2;
}
.hero h1 em { font-style: normal; color: #FF8093; }
.hero .lead { color: #DFE7EE; font-size: 1.2rem; }
.hero-est {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .8rem;
  color: #FF8093;
  margin-bottom: 1.1rem;
}
/* On narrow screens the two full-size buttons can't sit in opposite corners, so stack the hero into a centred bottom column with the buttons wrapping centred under the text. */
@media (max-width: 640px) {
  .hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
  .hero > .container { padding-bottom: 1.5rem; }
  .hero-cta {
    position: static;
    justify-content: center;
    flex-wrap: wrap;
    padding-inline: 0;
    margin-bottom: 2rem;
  }
}

/* Page hero (subpages) */
.page-hero {
  position: relative;
  color: var(--white);
  padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(2.6rem, 6vw, 4rem);
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-img, none) center/cover no-repeat; z-index: -2; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: var(--grad-hero); z-index: -1; }
.page-hero.no-img { background: var(--grad-red); }
.page-hero.no-img::after { display: none; }
.page-hero h1 { color: var(--white); }
.page-hero .lead { color: #F2D8DD; }
.page-hero .kicker { color: #FFD7DE; }

/* --- Cards ------------------------------------------------------------------ */
.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card-img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card-body p { color: var(--slate); flex: 1; }
.card-link { font-family: var(--font-display); font-weight: 700; }
.card-link::after { content: " →"; }

.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-1);
}
.tile h3 { display: flex; align-items: center; gap: .55rem; }
.tile p { color: var(--slate); margin-bottom: .4em; }
.tile-ico { font-size: 1.25rem; }

/* --- Stats strip -------------------------------------------------------------- */
.stats { background: var(--grad-red); color: var(--white); padding: 2.2rem 0; }
.stats .grid { gap: 1rem; }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; line-height: 1.1; }
.stat span { font-size: .92rem; opacity: .92; }

/* --- CTA band ------------------------------------------------------------------ */
.cta-band {
  background: var(--grad-red);
  color: var(--white);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(2.2rem, 5vw, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  box-shadow: var(--shadow-2);
}
.cta-band h2 { color: var(--white); margin: 0 0 .3em; }
.cta-band p { color: #FFE0E5; margin: 0; max-width: 44rem; }
.cta-band > div:first-child { flex: 1 1 380px; }
.cta-band .btn-primary { background: var(--white); color: var(--red) !important; box-shadow: 0 8px 22px rgba(0,0,0,.25); }

/* --- Tables -------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .97rem; min-width: 560px; }
th { font-family: var(--font-display); text-align: left; background: var(--navy); color: var(--white); padding: .85rem 1.1rem; }
td { padding: .8rem 1.1rem; border-top: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--mist); }

/* --- Pathway / steps ------------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.4rem 1.4rem; box-shadow: var(--shadow-1); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -1.1rem;
  left: 1.2rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--grad-red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 14px rgba(200,16,46,.4);
}
.step h3 { font-size: 1.08rem; margin-top: .2rem; }
.step p { color: var(--slate); font-size: .95rem; margin: 0; }

.pathway { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.pathway span {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
}
.pathway span.hot { background: var(--grad-red); color: var(--white); border-color: transparent; }
.pathway i { color: var(--red); font-style: normal; font-weight: 800; }

/* --- Chips / badges ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.chips li {
  background: #FBEAED;
  color: var(--red-dark);
  border-radius: 999px;
  padding: .35rem .95rem;
  font-weight: 600;
  font-size: .9rem;
}
.chips a { color: inherit; text-decoration: none; }
.chips a:hover { text-decoration: underline; }

/* --- People ----------------------------------------------------------------------- */
.person { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-1); }
.person b { font-family: var(--font-display); color: var(--navy); display: block; }
.person span { color: var(--slate); font-size: .92rem; }

/* --- FAQ ---------------------------------------------------------------------------- */
details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.3rem;
  margin-bottom: .8rem;
  box-shadow: var(--shadow-1);
}
summary { font-family: var(--font-display); font-weight: 700; color: var(--navy); cursor: pointer; }
details[open] summary { color: var(--red); margin-bottom: .5rem; }
details p { color: var(--slate); margin: 0 0 .5em; }

/* --- Split media sections -------------------------------------------------------------- */
.split { display: grid; gap: 2.4rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .split { grid-template-columns: 1.05fr .95fr; } .split.flip > .split-media { order: -1; } }
.split-media img { border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-2); width: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* --- Footer ------------------------------------------------------------------------------ */
.site-footer { background: var(--navy); color: #B9C6D2; font-size: .95rem; }
/* The footer lays its own blocks out so the accreditation and partner strips can share one row —
   affiliations left, partners right — instead of stacking into two ragged lines. */
.site-footer > .container { display: flex; flex-wrap: wrap; align-items: center; }
.footer-grid { display: grid; gap: 1.6rem 2.2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 2.6rem 0 1.8rem; flex: 1 0 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
.site-footer h4 { color: var(--white); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #B9C6D2; }
.site-footer a:hover { color: var(--white); }
.footer-brand img { width: 76px; margin-bottom: .9rem; }
.footer-brand p { font-size: .92rem; }

.socials { display: flex; gap: .7rem; margin-top: .4rem; }
.socials a {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  transition: background .15s;
}
.socials a:hover { background: var(--red); color: var(--white); }

.sponsor-strip { flex: 0 1 auto; padding: 1.2rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem 1.4rem; }
.sponsor-strip span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
/* Partner artwork comes in wildly different aspect ratios — cap the width so one wide banner cannot
   dominate the row, and let the height settle to keep every logo optically the same size. */
.sponsor-strip img { height: 30px; width: auto; max-width: 132px; object-fit: contain; background: var(--white); border-radius: 8px; padding: .3rem .55rem; }
.footer-bottom { flex: 1 0 100%; border-top: 1px solid rgba(255,255,255,.1); padding: 1.1rem 0 3.6rem; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: space-between; align-items: center; }
.footer-bottom-end { display: inline-flex; align-items: center; gap: .6rem; }
.footer-bottom a { color: #fff; text-decoration: underline; }

/* Accreditation logos (footer strip) — shares its row with .sponsor-strip; the divider above the row
   is .footer-grid's bottom border, so this block carries no border of its own. */
.accred-strip { flex: 1 1 auto; padding: 1.2rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.accred-strip span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.accred-strip a { display: inline-flex; }
.accred-strip img { height: 34px; width: auto; background: var(--white); border-radius: 8px; padding: .3rem .6rem; transition: transform .2s ease, box-shadow .2s ease; }
.accred-strip a:hover img { transform: translateY(-2px); box-shadow: var(--shadow-1); }
/* Too narrow for two groups side by side: give each the full width and align them left. */
@media (max-width: 760px) {
  .accred-strip, .sponsor-strip { flex: 1 0 100%; justify-content: flex-start; }
  .accred-strip { padding-bottom: 0; }
}

/* Accreditation logos (welfare page card grid) */
.accred-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: stretch; }
.accred-card { display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease; }
.accred-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.accred-card img { max-height: 80px; width: auto; }

/* --- Trial bar (slim, dismissible) ---------------------------------------------------------- */
.trial-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .6rem 3rem .6rem 1rem;
  font-size: .95rem;
  box-shadow: 0 -6px 22px rgba(11,27,43,.3);
}
.trial-bar b { font-family: var(--font-display); }
.trial-bar .btn { padding: .42rem 1.1rem; font-size: .9rem; }
.trial-bar-close {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #B9C6D2;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: .3rem;
}
.trial-bar-close:hover { color: var(--white); }
@media (max-width: 640px) { .trial-bar span.hide-sm { display: none; } }

/* --- Reveal animations -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Notice / info boxes -------------------------------------------------------------------------- */
.notice {
  border-left: 5px solid var(--red);
  background: #FBEAED;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem;
  color: var(--red-dark);
  margin: 1.4rem 0;
}
.notice b { font-family: var(--font-display); }

/* --- Centenary banner gallery ------------------------------------------------------------------------ */
.banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.banner-card { margin: 0; }
.banner-card img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.banner-card a:hover img { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.banner-card figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  color: var(--slate);
  text-align: center;
  margin-top: .45rem;
}

/* --- Wave divider ----------------------------------------------------------------------------------- */
.wave { display: block; width: 100%; height: 64px; margin-bottom: -1px; }

/* --- Records grids (short / long course) ---------------------------------------------------------- */
.rec-filters { margin: 1.8rem 0 .4rem; display: grid; gap: .9rem; }
.rec-filter-row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline; }
.rec-filter-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  flex: 0 0 4rem;
}
.rec-filter-inline { align-items: center; gap: .7rem 1.8rem; }
.rec-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rec-group > .rec-filter-label { flex: 0 0 auto; }
.rec-group-find { flex: 1 1 auto; }
.rec-date { font: inherit; padding: .45rem .7rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); }
.rec-date:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.date-sep { color: var(--slate); font-size: .9rem; }
.chipset { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  padding: .35rem .9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.on { background: var(--grad-red); color: var(--white); border-color: transparent; box-shadow: 0 4px 12px rgba(200,16,46,.3); }
.chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rec-search {
  font: inherit;
  padding: .5rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  min-width: 15rem;
}
.rec-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.rec-reset { font-family: var(--font-display); font-weight: 600; font-size: .88rem; background: none; border: 0; color: var(--red); cursor: pointer; padding: .5rem .2rem; }

.rec-grid { margin-top: 1.6rem; }
.rec-grid-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .7rem; }
.rec-grid-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.rec-count { font-size: .9rem; color: var(--slate); margin: 0; }

.rec-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.rec-table th .dir { opacity: .7; font-size: .8em; }
.rec-table td.t-time { font-family: var(--font-display); font-weight: 700; color: var(--red-dark); white-space: nowrap; }
.rec-table td.t-venue { color: var(--slate); font-size: .9rem; }
.rec-empty { padding: 2rem; text-align: center; color: var(--slate); }
.rec-asof { margin-top: .7rem; color: var(--slate); font-size: .88rem; }
.rec-hide { display: none !important; }
.rec-table tr.is-new td { background: #FFF4F1; }
.rec-new {
  display: inline-block;
  background: var(--grad-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1rem .42rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: .35rem;
}
.latest-card { position: relative; }
.latest-card .latest-time { font-family: var(--font-display); font-weight: 800; color: var(--red-dark); font-size: 1.7rem; line-height: 1; margin: .1rem 0 .3rem; }
.latest-card .latest-meta { color: var(--slate); font-size: .9rem; margin: 0 0 .2rem; }
.latest-card .latest-name { font-weight: 600; color: var(--navy); }
.latest-card .latest-venue { color: var(--slate); font-size: .82rem; }

/* --- Meet calendar (events list) ------------------------------------------------------------------ */
.cal { display: grid; gap: .9rem; margin-top: 1.6rem; }
.cal-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1rem 1.3rem;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cal-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #F3C7CE; color: var(--ink); }
.cal-date {
  flex: 0 0 auto;
  width: 76px;
  text-align: center;
  background: var(--grad-red);
  color: var(--white);
  border-radius: 12px;
  padding: .55rem 0;
  font-family: var(--font-display);
  line-height: 1.05;
  box-shadow: 0 5px 14px rgba(200,16,46,.3);
}
.cal-date .d { display: block; font-size: 1.45rem; font-weight: 800; }
.cal-date .d.range { font-size: 1.05rem; }
.cal-date .m { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; }
.cal-date .y { display: block; font-size: .64rem; letter-spacing: .1em; opacity: .82; margin-top: .15rem; }
.cal-body { flex: 1 1 auto; }
.cal-body h3 { margin: 0 0 .15rem; }
.cal-body p { margin: 0; color: var(--slate); font-size: .94rem; }
.cal-body .cal-deadline { font-size: .85rem; color: var(--red-dark); font-weight: 600; margin-top: .15rem; }
.cal-go { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: 1.3rem; }
@media (max-width: 520px) { .cal-go { display: none; } .cal-item { gap: .9rem; padding: .9rem 1rem; } }

/* --- Club news (loaded from SwimClub Manager via /api/news) ---------------------------------------- */
/* Each item is a card whose header is a button; the panel below holds the article body. The date
   block reuses .cal-date from the meet calendar, so news and meets read as the same kind of thing. */
.news-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.news-item:hover { box-shadow: var(--shadow-2); border-color: #F3C7CE; }
.news-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 1rem 1.3rem;
  background: none;
  border: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.news-head:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.news-head-text { flex: 1 1 auto; min-width: 0; }
.news-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--navy); line-height: 1.3; }
.news-teaser { display: block; color: var(--slate); font-size: .94rem; margin-top: .2rem; }
.news-toggle { flex: 0 0 auto; color: var(--red); font-size: 1.2rem; transition: transform .2s ease; }
.news-head[aria-expanded="true"] .news-toggle { transform: rotate(180deg); }
/* The row expands on click, but that is not discoverable on its own — so a strip item also carries a
   plain link through to the article on the news page. */
.news-more { margin: 0; padding: 0 1.3rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.news-more a::after { content: " →"; }
.news-panel { padding: 0 1.3rem 1.2rem; border-top: 1px solid var(--line); }
.news-panel[hidden] { display: none; }
.news-loading { color: var(--slate); font-size: .94rem; padding-top: 1rem; margin: 0; }

/* Prose scope for the sanitised SCM article body. Third-party markup lands here, so everything is
   sized and spaced from this block rather than trusting whatever the article carried with it. */
.news-body { padding-top: 1rem; font-size: .97rem; overflow-wrap: anywhere; }
.news-body > :first-child { margin-top: 0; }
.news-body p, .news-body ul, .news-body ol, .news-body blockquote { margin: 0 0 .9em; color: var(--ink); }
.news-body h2, .news-body h3, .news-body h4 { margin: 1.4em 0 .4em; color: var(--navy); }
.news-body h2 { font-size: 1.2rem; }
.news-body h3 { font-size: 1.08rem; }
.news-body h4 { font-size: 1rem; }
.news-body ul, .news-body ol { padding-left: 1.3rem; }
.news-body li { margin-bottom: .3em; }
.news-body img { max-width: 100%; height: auto; border-radius: 10px; }
.news-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
.news-body blockquote { border-left: 3px solid var(--red); padding-left: 1rem; color: var(--slate); }
/* Articles paste in wide timing tables; let them scroll rather than stretch the page. */
.news-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: .9rem; }
.news-body th, .news-body td { border: 1px solid var(--line); padding: .45rem .6rem; vertical-align: top; text-align: left; }
.news-body th { background: var(--mist); font-family: var(--font-display); }
.news-body a.scm-doc::before { content: "📄 "; }
.news-body a.scm-mail { color: var(--red-dark); }

.news-docs { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .4rem; }
.news-docs h4 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin: 0 0 .5rem; }
.news-docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.news-docs a { font-weight: 600; overflow-wrap: anywhere; }
.news-docs a::before { content: "📄 "; }

.news-truncated { font-size: .9rem; color: var(--slate); margin: .6rem 0 0; }
.news-page-source { margin-top: 1.6rem; color: var(--slate); font-size: .9rem; }
/* Always present, never shouting: the native copy is the point, this is the way back to the source. */
.news-source { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .84rem; }
.news-source a { color: var(--slate); }
.news-source a:hover { color: var(--red); }

/* --- Club news announcement strip ------------------------------------------------------------------ */
/* Sits above the sticky header in normal flow: it scrolls away, and the header still sticks. */
.news-alert { background: var(--grad-red); color: var(--white); font-size: .95rem; }
.news-alert-inner { display: flex; align-items: center; gap: .4rem 1rem; padding: .6rem 0; position: relative; }
.news-alert b { font-family: var(--font-display); flex: 0 0 auto; letter-spacing: .02em; }
.news-alert-link { color: var(--white); font-weight: 600; flex: 1 1 auto; min-width: 0; text-decoration: underline; text-underline-offset: 3px; }
.news-alert-link:hover { color: var(--white); text-decoration-thickness: 2px; }
.news-alert-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: rgba(255,255,255,.8);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .3rem;
}
.news-alert-close:hover { color: var(--white); }
@media (max-width: 560px) { .news-alert { font-size: .88rem; } .news-alert b { display: none; } }

/* Utility */
.mt-2 { margin-top: 2rem; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* --- Header: the dropdown that holds the current page ---------------------------------------------- */
.site-nav .has-sub.current > .sub-toggle { color: var(--red); background: #FBEAED; }

/* --- Home hero: the squads link, now that both corners hold buttons ---------------------------------- */
.hero-scroll { display: inline-block; margin-top: .4rem; font-family: var(--font-display); font-weight: 700; color: var(--white); opacity: .9; text-decoration: underline; text-underline-offset: 4px; }
.hero-scroll:hover { color: var(--white); opacity: 1; }

/* --- Squad pathway (swimming.html): milestones are buttons once the criteria load -------------------- */
.pathway button {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
}
.pathway button.hot { background: var(--grad-red); color: var(--white); border-color: transparent; }
.pathway button:disabled { cursor: default; opacity: 1; }
.pathway.is-live button { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pathway.is-live button:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: 0 6px 16px rgba(200,16,46,.2); }
.pathway.is-live button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.pathway.is-live button:not(.hot)::after { content: " ›"; color: var(--red); font-weight: 800; }
.pathway-notes .tile h3 { font-size: 1.05rem; }
.pathway-notes .tile p { font-size: .94rem; }

/* --- Modal dialogs (squad details, calendar events) ------------------------------------------------ */
.modal {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 30px 80px rgba(11,27,43,.4);
  color: var(--ink);
}
.modal::backdrop { background: rgba(11,27,43,.55); backdrop-filter: blur(3px); }
.modal-inner { position: relative; padding: clamp(1.4rem, 4vw, 2.2rem); max-height: calc(100vh - 2rem); overflow-y: auto; }
.modal-inner h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; margin-bottom: .3em; padding-right: 2.5rem; }
.modal-inner h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 1.4rem 0 .6rem; }
.modal-inner .lead { font-size: 1.05rem; }
.modal-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 0; background: var(--mist); color: var(--navy);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: #FBEAED; color: var(--red); }
.modal-facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 1rem 0; }
.modal-facts dt { font-family: var(--font-display); font-weight: 700; color: var(--slate); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .15rem; }
.modal-facts dd { margin: 0; }
.modal-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1.4rem; }
.modal-steps { display: flex; justify-content: space-between; gap: .7rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.modal-source { margin: 1rem 0 0; font-size: .82rem; color: var(--slate); }
@media (max-width: 520px) { .modal-actions .btn, .modal-steps .btn { white-space: normal; text-align: center; } }

.squad-facts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 1.2rem; }
.squad-fact { background: var(--mist); border-radius: 12px; padding: .7rem .9rem; }
.squad-fact span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.squad-fact b { font-family: var(--font-display); color: var(--navy); font-size: 1.02rem; }
.squad-week { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.squad-day { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; }
.squad-day > span { display: block; font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.squad-day ul { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .35rem; }
.squad-day b { display: block; font-size: .92rem; color: var(--navy); }
.squad-day li span { display: block; font-size: .78rem; color: var(--slate); line-height: 1.3; }
.squad-sections { display: grid; gap: 0 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.squad-section--promo h4 { color: var(--red); }

/* --- Tick lists (codes of conduct, squad criteria, selection policy) -------------------------------- */
.tick-list { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: .45rem; }
.tick-list li { position: relative; padding-left: 1.6rem; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--red); }
.tick-list--warn li::before { content: "✕"; }
.tile .tick-list li { color: var(--slate); font-size: .96rem; }
@media (min-width: 760px) { .tick-list--cols { grid-template-columns: 1fr 1fr; gap: .45rem 2rem; } }

/* --- Tabbed documents (codes of conduct) ------------------------------------------------------------ */
.doc-tabs { display: none; }
.tabs-on .doc-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; position: sticky; top: 76px; z-index: 5; background: var(--white); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.doc-panel + .doc-panel { margin-top: 3.5rem; }
.tabs-on .doc-panel + .doc-panel { margin-top: 0; }
.doc-panel[hidden] { display: none; }
.code-cols { margin-top: .6rem; }
.code-cols h4 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: .8rem; }

/* A whole tile that is a link (welfare → codes of conduct). */
.tile-link { display: block; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tile-link:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #F3C7CE; }
.tile-link .card-link { color: var(--red); }

/* --- Guide to leagues ------------------------------------------------------------------------------- */
.league-table th a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.league-table tbody th { background: var(--white); color: var(--navy); border-top: 1px solid var(--line); }
.league-table tbody th a { color: var(--red); }
.league-table tbody tr:nth-child(even) th { background: var(--mist); }

/* --- Calendar events (meet calendar, guide to leagues, club calendar) ------------------------------- */
.cal-item--static:hover { transform: none; }
.cal-item--static .cal-body h3 a { color: var(--navy); }
.cal-item--static .cal-body h3 a:hover { color: var(--red); }
.cal-badge { display: inline-block; vertical-align: middle; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #FBEAED; color: var(--red-dark); border-radius: 999px; padding: .12rem .5rem; margin-left: .3rem; }
.cal-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.cal-more { font-family: var(--font-display); font-weight: 700; font-size: .88rem; }
.cal-more::after { content: " →"; }
.cal-empty { color: var(--slate); margin: 0; }
.cal-kind-league .cal-date { background: linear-gradient(120deg, #2F6F1E, #4E9A2E); box-shadow: 0 5px 14px rgba(78,154,46,.3); }
.cal-kind-social .cal-date, .cal-kind-camp .cal-date, .cal-kind-meeting .cal-date { background: linear-gradient(120deg, var(--navy), #24476B); box-shadow: 0 5px 14px rgba(11,27,43,.25); }
details.cal-add { position: relative; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
details.cal-add summary {
  list-style: none;
  font-size: .85rem; font-weight: 700;
  color: var(--red); border: 1.5px solid #F3C7CE; border-radius: 999px; padding: .3rem .8rem; white-space: nowrap;
}
details.cal-add summary::-webkit-details-marker { display: none; }
details.cal-add summary::before { content: "＋ "; }
details.cal-add[open] summary { margin: 0; background: #FBEAED; }
.cal-add-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: .35rem; min-width: 200px; display: grid; }
.cal-add-menu a { padding: .5rem .7rem; border-radius: 8px; font-weight: 600; font-size: .92rem; color: var(--navy); }
.cal-add-menu a:hover { background: #FBEAED; color: var(--red); }
@media (max-width: 640px) {
  .cal-item--static { flex-wrap: wrap; }
  .cal-item--static .cal-body { flex: 1 1 60%; }
  .cal-actions { flex: 1 0 100%; flex-direction: row; justify-content: flex-start; align-items: center; padding-left: calc(76px + .9rem); }
  .cal-add-menu { left: 0; right: auto; }
}

/* --- Club calendar (club-calendar.html) ------------------------------------------------------------- */
.calx-toolbar { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; }
.calx-search { flex: 0 1 18rem; min-width: 12rem; }
.calx-filters { display: grid; gap: .8rem; margin: 1.2rem 0 1.4rem; padding: 1rem 1.2rem; background: var(--mist); border-radius: var(--radius); }
.calx-filter-row { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: flex-start; }
.calx-filter-row > .rec-filter-label { flex: 0 0 5.5rem; padding-top: .45rem; }
.calx-squads { flex: 1 1 0; display: grid; gap: .45rem; }
.calx-squad-group { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.calx-group-label { font-size: .78rem; font-weight: 700; color: var(--slate); min-width: 6.5rem; }
.calx-squad::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--squad); border: 1px solid rgba(11,27,43,.25); margin-right: .4rem; vertical-align: middle; }
.calx-clear.on { color: var(--slate); }
.calx-hint { margin: 0; font-size: .88rem; color: var(--slate); }
.calx-hint:empty { display: none; }
.calx-month-head { margin: 1.8rem 0 -.3rem; font-size: 1.05rem; color: var(--slate); letter-spacing: .04em; text-transform: uppercase; }
.calx-month-head:first-child { margin-top: 0; }
.calx-note { color: var(--slate); font-size: .92rem; }

.calx-monthbar { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.calx-monthbar h3 { margin: 0; min-width: 11rem; text-align: center; }
.calx-nav { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--navy); }
.calx-nav:hover { border-color: var(--red); color: var(--red); }
.calx-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
.calx-dow { background: var(--navy); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-align: center; padding: .45rem 0; }
.calx-cell { background: var(--white); min-height: 7.2rem; padding: .3rem; display: flex; flex-direction: column; gap: .2rem; cursor: pointer; }
.calx-cell.is-out { background: #FAFBFC; }
.calx-cell.is-out .calx-daynum { color: #A9B4BF; }
.calx-cell.is-picked { box-shadow: inset 0 0 0 2px var(--red); }
.calx-daynum { align-self: flex-start; border: 0; background: none; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--navy); width: 1.7rem; height: 1.7rem; border-radius: 50%; cursor: pointer; padding: 0; }
.calx-cell.is-today .calx-daynum { background: var(--grad-red); color: var(--white); }
.calx-cell-items { display: grid; gap: .15rem; min-width: 0; }
.calx-pill { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: .12rem .35rem; font: 600 .72rem/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background: #FBEAED; color: var(--red-dark); }
.calx-pill--league { background: #E7F3E1; color: #2F6F1E; }
.calx-pill--social, .calx-pill--camp, .calx-pill--meeting { background: #E6ECF3; color: var(--navy); }
.calx-pill--session { background: var(--white); color: var(--ink); border-left: 4px solid var(--squad); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.calx-pill:hover { filter: brightness(.96); }
.calx-dots { display: none; color: var(--red); font-size: 1rem; line-height: 1; letter-spacing: .05em; text-align: center; }
.calx-daypanel { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-1); }
.calx-daypanel h4 { margin: 0 0 .6rem; }
.calx-dayrow { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .8rem; width: 100%; text-align: left; align-items: baseline; border: 0; border-top: 1px solid var(--line); background: none; padding: .6rem .2rem; font: inherit; color: var(--ink); cursor: pointer; border-left: 4px solid var(--squad, transparent); padding-left: .6rem; }
.calx-dayrow:first-of-type { border-top: 0; }
.calx-dayrow:hover { background: var(--mist); }
.calx-dayrow b { font-family: var(--font-display); color: var(--navy); }
.calx-dayrow em { font-style: normal; color: var(--slate); font-size: .88rem; }
@media (max-width: 760px) {
  .calx-cell { min-height: 3.4rem; align-items: center; }
  .calx-daynum { align-self: center; }
  .calx-cell-items { display: none; }
  .calx-dots { display: block; }
  .calx-dayrow { grid-template-columns: 6rem 1fr; }
  .calx-dayrow em { grid-column: 2; }
  .calx-filter-row > .rec-filter-label { flex-basis: 100%; padding-top: 0; }
  .calx-group-label { min-width: 100%; }
}

.calx-week { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.calx-weekday h4 { margin: 0 0 .5rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.calx-weekday .cal-empty { font-size: .88rem; }
.calx-slot { display: grid; width: 100%; text-align: left; gap: .05rem; background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--squad); border-radius: 10px; padding: .5rem .65rem; margin-bottom: .45rem; font: inherit; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1); }
.calx-slot:hover { border-color: #F3C7CE; border-left-color: var(--squad); }
.calx-slot b { font-family: var(--font-display); color: var(--navy); font-size: .95rem; }
.calx-slot span { font-weight: 600; font-size: .92rem; }
.calx-slot em { font-style: normal; color: var(--slate); font-size: .8rem; line-height: 1.3; }

.calx-subscribe { margin-top: 2rem; background: linear-gradient(120deg, #FFF5F6, var(--white)); }
.calx-sub-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.calx-sub-note { font-size: .88rem; }

/* --- Club documents (documents.html) ---------------------------------------------------------------- */
.doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.doc-search { flex: 1 1 22rem; max-width: 34rem; }
.doc-result { color: var(--slate); font-size: .9rem; }
.doc-folders { display: grid; gap: .8rem; }
details.doc-folder { padding: 0; margin: 0; overflow: hidden; }
details.doc-folder > summary { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; list-style: none; }
details.doc-folder > summary::-webkit-details-marker { display: none; }
details.doc-folder > summary::after { content: "▾"; margin-left: .2rem; color: var(--red); transition: transform .2s ease; }
details.doc-folder[open] > summary { margin: 0; border-bottom: 1px solid var(--line); color: var(--navy); }
details.doc-folder[open] > summary::after { transform: rotate(180deg); }
.doc-folder-ico { font-size: 1.5rem; }
.doc-folder-text { flex: 1 1 auto; min-width: 0; }
.doc-folder-text b { display: block; font-size: 1.08rem; }
.doc-folder-text em { display: block; font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--slate); }
.doc-count { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--slate); background: var(--mist); border-radius: 999px; padding: .15rem .6rem; }
.doc-folder-body { padding: .6rem 1.2rem 1rem; }
details.doc-folder.doc-depth-1 { box-shadow: none; margin: .6rem 0 0; background: var(--mist); }
details.doc-folder.doc-depth-1 > summary { padding: .7rem 1rem; }
.doc-files { list-style: none; margin: 0; padding: 0; display: grid; }
.doc-file { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .55rem .2rem; border-top: 1px solid var(--line); }
.doc-files > .doc-file:first-child { border-top: 0; }
.doc-file[hidden] { display: none; }
.doc-ico { flex: 0 0 auto; }
.doc-name { flex: 1 1 14rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.doc-name:hover { color: var(--red); }
.doc-ext { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; }
.doc-native { font-family: var(--font-display); font-weight: 700; font-size: .85rem; background: #FBEAED; border-radius: 999px; padding: .2rem .7rem; }
.doc-native::after { content: " →"; }
.doc-note { color: var(--slate); font-size: .92rem; }
.doc-decades { margin: .4rem 0 1rem; }
.doc-decades small { opacity: .7; margin-left: .2rem; }
.news-archive { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.news-archive .doc-file { border: 0; padding: 0; }
.news-issue { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; background: var(--white); color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.news-issue:hover { border-color: var(--red); transform: translateY(-2px); color: var(--ink); }
.news-issue b { display: block; font-family: var(--font-display); color: var(--red); font-size: .8rem; letter-spacing: .06em; }
.news-issue span { font-weight: 600; font-size: .92rem; }
.is-searching [data-decade] { display: none; }
.doc-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.doc-gallery .doc-file { border: 0; padding: 0; }
.doc-gallery a { display: block; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: .6rem; background: var(--white); color: var(--ink); text-align: center; }
.doc-gallery a:hover { border-color: var(--red); color: var(--ink); }
.doc-gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--mist); border-radius: 8px; margin-bottom: .45rem; }
.doc-gallery b { display: block; font-size: .85rem; line-height: 1.3; color: var(--navy); }
.doc-gallery span { display: block; font-size: .78rem; color: var(--slate); line-height: 1.3; margin-top: .15rem; }

/* --- Converted documents: source line, newer-edition notice, policy text --------------------------- */
.doc-source { font-size: .9rem; color: var(--slate); margin: -.2rem 0 1.4rem; }
.doc-source a { font-weight: 600; }
.doc-source a::before { content: "📕 "; }
.doc-newer { margin-top: 0; }
.policy-text { max-width: 52rem; }
.policy-text h3 { margin-top: 1.8rem; }
.policy-text .grid { margin: 1rem 0; }
.policy-text .tile h3 { margin-top: 0; font-size: 1.05rem; }
.policy-sign { font-style: italic; color: var(--slate); }
[data-tab-panel] [id] { scroll-margin-top: 160px; }
.is-target { animation: doc-flash 2.4s ease; }
@keyframes doc-flash { 0%, 40% { background: #FFF2C6; } 100% { background: transparent; } }

/* The constitution: numbered clauses, indented by depth, with a contents strip. */
.clause-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; }
.clause-toc a { font-size: .82rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .65rem; color: var(--navy); }
.clause-toc a:hover { border-color: var(--red); color: var(--red); }
.clause-head { margin: 2rem 0 .7rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: 1.2rem; }
.clause-head span { color: var(--red); }
.clause { max-width: 52rem; margin: 0 0 .7rem; display: grid; grid-template-columns: 3.4rem 1fr; gap: .6rem; border-radius: 6px; }
.clause-2 { padding-left: 2rem; }
.clause-no { font-family: var(--font-display); font-weight: 700; color: var(--slate); font-size: .9rem; padding-top: .1rem; }
.clause-quote { max-width: 50rem; margin: .4rem 0 1rem 4rem; border-left: 4px solid var(--red); background: var(--mist); padding: .8rem 1.1rem; border-radius: 0 10px 10px 0; font-style: italic; }
.bylaws { max-width: 52rem; padding-left: 1.4rem; display: grid; gap: .8rem; }
.bylaws li::marker { font-family: var(--font-display); font-weight: 800; color: var(--red); }
.bylaws ul { margin: .5rem 0; }
@media (max-width: 560px) {
  .clause { grid-template-columns: 1fr; gap: 0; }
  .clause-2 { padding-left: 1rem; }
  .clause-quote { margin-left: 0; }
}
@media (max-width: 760px) {
  /* One swipeable row, so the sticky tabs never eat a third of a phone screen. */
  .tabs-on .doc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs-on .doc-tabs::-webkit-scrollbar { display: none; }
  .tabs-on .doc-tabs .chip { flex: 0 0 auto; }
  [data-tab-panel] [id] { scroll-margin-top: 140px; }
}
.doc-gallery .doc-file { align-items: stretch; }
.doc-gallery a { height: 100%; }
.doc-folder { scroll-margin-top: 90px; }