/* ============================================================
   MISC CLUB — Traditional club design
   Light "paper" theme by default; the original dark palette is
   kept behind html[data-theme="dark"] (user toggle, persisted
   in localStorage by /js/theme.js and the React ThemeToggle).
   Historical token names (--jet/--ink/--char) are kept so the
   1300+ component rules below need no renaming:
     --jet  = page background   --ink = alternate section
     --char = raised card/panel --line = hairlines
   Type:   Inter (body) + Spectral (display serif)
   ============================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  /* surfaces */
  --jet:      #faf9f6;
  --ink:      #f2efe7;
  --char:     #ffffff;
  --line:     #e3ddd0;
  /* brand accents — brass & club crimson, darkened for contrast on paper */
  --gold:     #8a6b2d;
  --gold-2:   #6f5624;
  --crimson:  #a3122c;
  /* text */
  --text:     #24313f;
  --muted:    #55606c;
  /* #5f6a77 — darkened from #75808d, which failed WCAG AA (~3.5–4.0:1
     across jet/ink/char); this clears 4.5:1 against all three (verified). */
  --dim:      #5f6a77;
  /* derived component tokens */
  --text-body:       rgba(36,49,63,.88);
  --text-soft:       rgba(36,49,63,.74);
  --accent-contrast: #ffffff;            /* text on solid gold */
  --topbar-bg:       rgba(250,249,246,.72);
  --topbar-bg-solid: rgba(250,249,246,.95);
  --menu-bg:         rgba(255,255,255,.98);
  --hover-tint:      rgba(36,49,63,.035);
  --track-bg:        rgba(36,49,63,.08);
  --ghost-border:    rgba(36,49,63,.35);
  --backdrop:        rgba(36,42,52,.5);
  --shadow-col:      rgba(36,49,63,.16);
  /* status foregrounds (AA on light surfaces) */
  --ok-fg:   #1e7a40;
  --warn-fg: #8a5f00;
  --bad-fg:  #b01226;
  /* Aliases for token names used by some React admin components
     (--fg/--bg/--bg-dark/--bg-alt/--border/--border-faint) that were never
     declared here — they previously fell back to hardcoded dark hex values,
     which rendered near-black panels/borders on the light theme. Aliasing
     them to the real tokens makes them track light/dark automatically. */
  --fg:           var(--text);
  --bg:           var(--jet);
  --bg-dark:      var(--ink);
  --bg-alt:       var(--ink);
  --border:       var(--line);
  --border-faint: var(--line);
  --max-w:    1240px;
  --pad-x:    clamp(20px, 5vw, 64px);
  --display:  'Spectral', Georgia, 'Times New Roman', serif;
  --body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --jet:      #0a0a0a;
  --ink:      #141414;
  --char:     #1c1c1c;
  --line:     #2a2a2a;
  --gold:     #C9A84C;
  --gold-2:   #E5C66A;
  --crimson:  #C8102E;
  --text:     #EDEDED;
  --muted:    #9A9A9A;
  /* #868686 — lightened from #6A6A6A, which failed WCAG AA (~3.1–3.7:1
     across jet/ink/char); this clears 4.5:1 against all three (verified). */
  --dim:      #868686;
  --text-body:       rgba(237,237,237,.82);
  --text-soft:       rgba(237,237,237,.7);
  --accent-contrast: #111111;
  --topbar-bg:       rgba(10,10,10,.55);
  --topbar-bg-solid: rgba(10,10,10,.92);
  --menu-bg:         rgba(10,10,10,.98);
  --hover-tint:      rgba(255,255,255,.025);
  --track-bg:        rgba(255,255,255,.05);
  --ghost-border:    rgba(255,255,255,.25);
  --backdrop:        rgba(5,5,5,.88);
  --shadow-col:      rgba(0,0,0,.6);
  --ok-fg:   #74e29a;
  --warn-fg: #f0c674;
  --bad-fg:  #ff8b95;
  --fg:           var(--text);
  --bg:           var(--jet);
  --bg-dark:      var(--ink);
  --bg-alt:       var(--ink);
  --border:       var(--line);
  --border-faint: var(--line);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--jet); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ── reveal animation ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .5s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; transform: none; opacity: 1; } }

/* ── buttons ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border: 1.5px solid transparent; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 0.9rem; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; }
.btn-sm { padding: 8px 16px; font-size: 0.82rem; }
.btn-lg { padding: 15px 30px; font-size: 0.95rem; }
.btn-gold { background: var(--gold); color: var(--accent-contrast); }
.btn-gold:hover { background: var(--gold-2); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--ghost-border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn span { transition: transform .25s ease; }
.btn:hover span { transform: translateX(4px); }

/* ── affiliation strip ───────────────────────────────── */
.topstrip { background: var(--char); border-bottom: 1px solid var(--line); padding: 7px var(--pad-x); text-align: center; font-family: var(--display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.topstrip a { color: var(--muted); transition: color .2s; }
.topstrip a:hover { color: var(--gold); }
@media (max-width: 640px) { .topstrip { font-size: 0.66rem; padding: 6px var(--pad-x); } }

/* ── topbar ──────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 16px var(--pad-x); background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, padding .3s ease; }
.topbar.scrolled { background: var(--topbar-bg-solid); border-bottom-color: var(--line); padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--text); }
.logo img { width: 42px; height: 42px; object-fit: contain; }
.logo span { display: flex; flex-direction: column; line-height: 1.05; }
.logo strong { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text); }
.logo em { font-style: normal; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; white-space: nowrap; }
@media (max-width: 480px) { .logo em { display: none; } }
.topnav { display: flex; gap: 20px; margin-left: 28px; }
.topnav a { font-size: 0.83rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; transition: color .2s; white-space: nowrap; }
.topnav a:hover { color: var(--gold); }

/* Right-side action cluster — secondary links + tools + Apply Now, pushed
   to the far right so they float together next to the Apply Now button. */
.topbar-right { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.topnav-secondary { display: flex; align-items: center; gap: 20px; }
.topnav-secondary a { font-size: 0.83rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; transition: color .2s; white-space: nowrap; }
.topnav-secondary a:hover { color: var(--gold); }
/* Search + theme toggle grouped tightly together, left of Apply Now. */
.topbar-tools { display: flex; align-items: center; gap: 6px; }
/* Desktop: hide the mobile-only duplicate secondary links inside .topnav, and
   lay the bar out as three columns so the primary nav is centred between the
   logo (left) and the action cluster (right). */
@media (min-width: 1281px) {
  .topnav-m-only { display: none; }
  .topbar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .logo { justify-self: start; }
  .topnav { justify-self: center; margin-left: 0; }
  .topbar-right { justify-self: end; }
}
.nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 0; }
.nav-toggle svg { display: block; }
/* Breakpoint is 1280px (was 900px): the serif logo + sentence-case
   nav + search + theme toggle need more room before collapsing. */
@media (max-width: 1280px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  /* Secondary links move into the hamburger dropdown; hide the desktop copies. */
  .topnav-secondary { display: none; }
  .topbar-right { gap: 10px; }
  .topnav {
    margin-left: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--menu-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 6px 0;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .topnav.open { opacity: 1; transform: none; pointer-events: auto; }
  .topnav a { display: flex; align-items: center; min-height: 44px; padding: 4px var(--pad-x); width: 100%; }
}

/* Wide data tables: scroll horizontally on mobile instead of breaking layout
   (ui-ux-pro-max ux/Responsive: "Tables can overflow on mobile → overflow-x-auto") */
@media (max-width: 640px) {
  .lrd-class-table, .scores-table, .data-table, .lrd-rules-table, .year-match-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .lrd-class-table thead, .scores-table thead, .data-table thead,
  .lrd-rules-table thead, .year-match-table thead { white-space: nowrap; }
}

/* Keyboard focus rings (WIG / ui-ux-pro-max §1: 2-4px visible focus) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 2px;
}

/* ── Navbar dropdown — matches .topnav a exactly ─────── */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-btn {
  background: none; border: none; cursor: pointer;
  /* Mirror .topnav a exactly */
  font-size: 0.83rem; color: var(--muted); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
  font-family: inherit;
  padding: 0; margin: 0;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .2s;
  white-space: nowrap;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn[aria-expanded="true"] { color: var(--gold); }
.nav-dropdown-arrow { font-size: 0.7em; transition: transform .2s; pointer-events: none; line-height: 1; }
.nav-dropdown-btn[aria-expanded="true"] .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 210px; z-index: 999;
  background: var(--menu-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line, #2a2a2a);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px var(--shadow-col);
  padding: 6px 0;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 10px 20px;
  color: var(--muted); text-decoration: none;
  font-size: 0.83rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap; transition: color .15s, background .15s;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus {
  color: var(--gold); background: rgba(201,168,76,.07); outline: none;
}
/* Mobile — match .topnav a mobile styles (same 1280px breakpoint) */
@media (max-width: 1280px) {
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-btn {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 4px var(--pad-x, 20px); width: 100%;
  }
  .nav-dropdown-menu {
    position: static; border: none; border-left: 2px solid var(--gold);
    margin-left: calc(var(--pad-x, 20px) + 8px);
    padding: 0; box-shadow: none; background: transparent;
    backdrop-filter: none;
  }
  .nav-dropdown-menu.open { display: block; }
  .nav-dropdown-menu a { padding: 8px 12px; }
  .nav-dropdown-menu a:hover { background: transparent; }
}

/* ── HERO ───────────────────────────────────────────── */
.hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: center; padding: 64px var(--pad-x) 88px; overflow: hidden; isolation: isolate; }
/* The hero and join banners sit on dark photography in BOTH themes —
   pin their local palette to the dark values so text stays readable. */
.hero, .join-section {
  --text:   #EDEDED;
  --muted:  #c2c5c9;
  --dim:    #9aa0a6;
  --gold:   #C9A84C;
  --gold-2: #E5C66A;
  --ghost-border: rgba(255,255,255,.4);
  --accent-contrast: #111111;
  --text-soft: rgba(237,237,237,.78);
  /* re-declare so descendants inherit the pinned value, not body's */
  color: var(--text);
}

/* ── Crossfading Ken-Burns slideshow ─────────────────────────────────────
   Admin-managed image count (see /admin/hero-images) — each frame plays for
   --hero-total / N seconds. Duration and per-frame delay are supplied as
   inline custom properties by HeroSlideshow (Home.tsx) so the rotation
   works for any number of active photos, not just a fixed count.
   Reduced-motion users see only the first frame with no animation.
   ──────────────────────────────────────────────────────────────────────── */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) saturate(1.05);
  opacity: 0;
  transform: scale(1.02);
  animation-name: heroCrossfade, heroKenBurns;
  animation-duration: var(--hero-total, 133s);
  animation-timing-function: cubic-bezier(.4,0,.2,1), linear;
  animation-iteration-count: infinite;
  animation-delay: var(--hero-delay, 0s);
}
/* GPU layer promotion is capped to a fixed number of frames (see HeroSlideshow
   in Home.tsx) rather than applied to every photo — the rotation can now hold
   an admin-managed, effectively unbounded number of images. */
.hero-bg-frame.will-animate { will-change: opacity, transform; }
/* First frame needs its own crossfade so it's visible at page load and loops back at end. */
.hero-bg-frame.is-first {
  animation-name: heroCrossfadeFirst, heroKenBurns;
}

/* 7 of 133s = 5.26%; fade in ~0.8%, hold to ~4.5%, fade out by 5.26% */
@keyframes heroCrossfade {
  0%    { opacity: 0; }
  0.8%  { opacity: 1; }
  4.5%  { opacity: 1; }
  5.3%  { opacity: 0; }
  100%  { opacity: 0; }
}
/* Frame 1: visible at load, fades out ~4.5%, fades back in 97.5-100% */
@keyframes heroCrossfadeFirst {
  0%    { opacity: 1; }
  4%    { opacity: 1; }
  4.5%  { opacity: 0; }
  97.5% { opacity: 0; }
  100%  { opacity: 1; }
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.02); }
  5.3% { transform: scale(1.08); }
  100% { transform: scale(1.08); }
}

.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.45) 45%, rgba(10,10,10,.25) 75%, rgba(10,10,10,.55) 100%), linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,.7) 100%); }
.hero-grain { position: absolute; inset: 0; z-index: 1; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }

/* ── Progress dots ──────────────────────────────────── */
.hero-dots { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; }
@media (max-width: 640px) { .hero-dots { display: none; } }
.hero-dots span { width: 14px; height: 2px; background: rgba(255,255,255,.18); border-radius: 1px; overflow: hidden; position: relative; }
.hero-dots span::after {
  content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-100%);
  animation: dotFill var(--hero-total, 133s) linear infinite;
  animation-delay: var(--hero-delay, 0s);
}
/* Fill/hold percentages are generated per-count by HeroSlideshow (Home.tsx)
   and injected as an override @keyframes dotFill — this is the static fallback. */
@keyframes dotFill {
  0%       { transform: translateX(-100%); }
  5.26%    { transform: translateX(0%); }
  6%, 100% { transform: translateX(100%); }
}
@media (max-width: 640px) { .hero-dots { bottom: 96px; } .hero-dots span { width: 8px; } }

/* Reduced motion: show only the first frame, no animation, no Ken Burns */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-frame { animation: none; transform: none; }
  .hero-bg-frame.is-first { opacity: 1; }
  .hero-dots { display: none; }
}

.hero-content { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; width: 100%; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3); border-radius: 100px; color: var(--gold-2); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 28px; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.hero-headline { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.92; letter-spacing: -0.02em; margin-bottom: 28px; max-width: 18ch; text-transform: uppercase; }
.gold { color: var(--gold); }
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(237,237,237,.78); max-width: 560px; margin-bottom: 40px; line-height: 1.55; font-weight: 300; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 720px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 28px; }
.hero-stats > div { display: flex; flex-direction: column; padding-right: 24px; border-right: 1px solid rgba(255,255,255,.1); }
.hero-stats > div:last-child { border-right: 0; }
.hero-stats strong { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
.hero-stats span { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; } .hero-stats > div { border-right: 0; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); } }

.scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3; width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-cue span { width: 2px; height: 8px; background: var(--gold); border-radius: 1px; animation: scrollPulse 1.6s infinite; }
@keyframes scrollPulse { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ── discipline strip (formerly an animated marquee — now a calm,
      static, wrapping list) ─────────────────────────────── */
.marquee { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 16px var(--pad-x); }
.marquee-track { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; row-gap: 6px; font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.marquee-track span:nth-child(2n) { color: var(--gold); }

/* ── sections ───────────────────────────────────────── */
.section { padding: clamp(52px, 8vh, 88px) 0; background: var(--jet); }
.section-dark { background: var(--ink); }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-eyebrow { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 700; display: inline-block; margin-bottom: 14px; }
.gold-text { color: var(--gold); }
.section-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase; margin-bottom: 18px; }
.section-sub { font-size: 1.08rem; color: var(--text-soft); max-width: 60ch; line-height: 1.65; font-weight: 400; }

/* ── discipline grid ────────────────────────────────── */
.discipline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.discipline-card { position: relative; display: block; background: var(--char); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.discipline-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 30px 60px -20px var(--shadow-col); }
.discipline-num { position: absolute; top: 18px; left: 22px; z-index: 2; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--gold); font-weight: 700; }
.discipline-img { aspect-ratio: 16/10; background-size: cover; background-position: center; transition: transform .8s ease, filter .35s ease; filter: brightness(.7) saturate(.9); }
.discipline-card:hover .discipline-img { transform: scale(1.06); filter: brightness(.85) saturate(1); }
.discipline-body { padding: 26px 28px 28px; }
.discipline-body h3 { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 8px; }
.discipline-body p { font-size: 0.96rem; color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.arrow { color: var(--gold); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; transition: letter-spacing .25s; }
.discipline-card:hover .arrow { letter-spacing: 0.18em; }

/* ── timeline ───────────────────────────────────────── */
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.timeline-item { display: flex; gap: 24px; padding: 22px 0; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -36px; top: 32px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,168,76,.15); }
.t-year { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--gold); min-width: 100px; letter-spacing: 0.02em; }
.t-body h4 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 6px; }
.t-body p { color: var(--muted); font-size: 0.96rem; line-height: 1.55; max-width: 50ch; }
.legacy-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 56px; justify-content: center; }

/* ── facilities ─────────────────────────────────────── */
.facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 28px; }
.facility-card { padding: 32px 28px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; transition: border-color .3s, transform .3s; }
.facility-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.facility-num { font-family: var(--display); font-size: 3rem; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; line-height: 1; margin-bottom: 14px; }
.facility-card h4 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 8px; }
.facility-card p { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

/* ── combined range + club-history section ───────────── */
.range-history-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .range-history-grid { grid-template-columns: 1fr; } }
.range-history-grid .section-head { margin-bottom: 28px; }
.history-brief { padding: 28px 30px; background: var(--char); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; }
.history-brief > p { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin: 10px 0 18px; }
.history-list { list-style: none; margin: 0 0 20px; padding: 0; }
.history-list li { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.history-list li:last-child { border-bottom: 0; }
.history-list strong { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--gold); min-width: 52px; flex-shrink: 0; }
.history-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.range-location-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.94rem; }

.facilities-location { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; padding: 56px 0 0; border-top: 1px solid var(--line); margin-top: 32px; }
.facilities-location h3 { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin: 8px 0 14px; }
.facilities-location p { color: var(--muted); margin-bottom: 22px; }
.facilities-location img { max-width: 280px; margin-left: auto; opacity: 0.55; filter: grayscale(1); }
@media (max-width: 800px) { .facilities-location { grid-template-columns: 1fr; gap: 32px; text-align: center; } .facilities-location img { margin: 0 auto; } }

/* ── join / CTA ─────────────────────────────────────── */
.join-section { position: relative; overflow: hidden; padding-top: 0; padding-bottom: 0; }
.join-section .container { padding-top: clamp(52px, 8vh, 88px); padding-bottom: clamp(52px, 8vh, 88px); position: relative; z-index: 2; }
.join-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.25) saturate(.7); }
/* Dark photographic band in both themes (matches the pinned palette above) */
.join-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.85) 30%, rgba(10,10,10,.85) 70%, rgba(10,10,10,.92) 100%); }
.join-content { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .join-content { grid-template-columns: 1fr; } }
.join-cards { display: flex; flex-direction: column; gap: 14px; }
.join-card { display: block; padding: 22px 26px; background: rgba(20,20,20,.7); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(8px); transition: all .3s; }
.join-card:hover { background: rgba(28,28,28,.85); border-color: var(--gold); transform: translateX(6px); }
.jc-icon { display: inline-block; color: var(--gold); font-size: 1.4rem; margin-bottom: 8px; }
.join-card h4 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; }
.join-card p { color: var(--muted); font-size: 0.88rem; }

/* ── Members portal ─────────────────────────────────── */
.members-page { background: var(--jet); }
.members-main { padding: 60px 0 0; }
.members-page .topnav a.active { color: var(--gold); }

/* Login / change-password card */
.auth-container { display: flex; justify-content: center; padding: 40px 0 80px; }
.auth-card { max-width: 480px; width: 100%; padding: 40px 36px; background: var(--char); border: 1px solid var(--line); border-radius: 6px; }
.auth-title { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; margin: 10px 0 14px; }
.auth-sub { color: var(--muted); font-size: 0.94rem; line-height: 1.6; margin-bottom: 24px; }
.auth-sub code { background: var(--ink); padding: 1px 6px; border-radius: 2px; color: var(--gold); font-size: 0.85rem; }
.auth-form label { display: block; margin-bottom: 14px; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.auth-form input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; background: var(--ink); border: 1px solid var(--line); color: var(--text); border-radius: 3px; font-size: 1rem; }
.auth-form input:focus { outline: none; border-color: var(--gold); }
.auth-form button { width: 100%; margin-top: 12px; }
.auth-err { background: rgba(200,16,46,.12); border: 1px solid rgba(200,16,46,.35); padding: 10px 14px; color: var(--bad-fg); border-radius: 3px; margin-bottom: 18px; font-size: 0.9rem; }
.auth-help { font-size: 0.82rem; color: var(--dim); margin-top: 18px; line-height: 1.5; }
.auth-help a { color: var(--gold); }

/* Members hero / page intros */
.members-hero { padding: 30px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.members-hero h1 { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; margin: 8px 0; }
.members-hero-sub { color: var(--muted); font-size: 1rem; }

/* Dashboard tiles */
.members-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 40px; }
.members-tile { display: block; padding: 26px 28px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; transition: border-color .3s, transform .3s; }
.members-tile:hover { border-color: var(--gold); transform: translateY(-4px); }
.tile-eyebrow { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.members-tile h3 { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin: 8px 0 6px; line-height: 1.1; }
.members-tile h3 small { font-size: 0.7rem; color: var(--muted); font-weight: 600; letter-spacing: 0.16em; display: block; margin-top: 2px; }
.members-tile p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 14px; }
.tile-arrow { color: var(--gold); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.members-section-h { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 36px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ── Status pills (green / amber / red / missing) ────────── */
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.status-pill-lg { padding: 8px 16px; font-size: 0.82rem; letter-spacing: 0.14em; }
.status-green   { background: rgba(72,187,120,.14); color: var(--ok-fg); }
.status-amber   { background: rgba(232,168,56,.14); color: var(--warn-fg); }
.status-red     { background: rgba(232,73,73,.16);  color: var(--bad-fg); }
.status-missing { background: rgba(154,154,154,.14); color: var(--muted); }
.status-na      { background: rgba(154,154,154,.10); color: var(--dim); }

/* LRD: status legend + class checks + away form */
.lrd-row-na { opacity: 0.6; }
.lrd-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 18px 0 10px; padding: 14px 16px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; font-size: 0.82rem; color: var(--muted); }
.lrd-legend > strong { color: var(--text); width: 100%; margin-bottom: 4px; font-size: 0.8rem; }
.lrd-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lrd-overall-help { font-size: 0.8rem; color: var(--muted); line-height: 1.9; margin: 8px 0 4px; }
.lrd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lrd-away-note { font-size: 0.78rem; color: var(--dim); flex: 1 1 200px; }
.lrd-class-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px; }
.lrd-check-label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--jet); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.lrd-check-label input { margin-top: 3px; }
.lrd-check-label span { display: flex; flex-direction: column; gap: 2px; }
.lrd-check-label strong { font-size: 0.92rem; color: var(--text); }
.lrd-check-label small { font-size: 0.76rem; color: var(--dim); }
.away-form { margin-bottom: 32px; }

/* LRD: official requirements explainer (collapsible) */
.lrd-rules { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--ink); }
.lrd-rules > summary { cursor: pointer; padding: 12px 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); list-style: none; }
.lrd-rules > summary::-webkit-details-marker { display: none; }
.lrd-rules > summary::before { content: '▸ '; color: var(--muted); }
.lrd-rules[open] > summary::before { content: '▾ '; }
.lrd-rules-body { padding: 4px 18px 18px; }
.lrd-rules-body p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 8px 0; }
.lrd-rules-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 10px 0; }
.lrd-rules-table th { padding: 7px 10px; background: var(--char); color: var(--gold); font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--line); }
.lrd-rules-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--text); }
.lrd-rules-table td:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.lrd-rules-note { font-size: 0.8rem; }
.lrd-rules-note strong { color: var(--text); }
.lrd-rules-src { font-size: 0.76rem; }
.lrd-rules-src a { color: var(--gold); }

/* ── Licence countdown cards ─────────────────────────────── */
.licence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 700px) { .licence-grid { grid-template-columns: 1fr; } }
.licence-card { padding: 22px 26px; background: var(--char); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 4px; }
.licence-green   { border-left-color: var(--ok-fg); }
.licence-amber   { border-left-color: var(--warn-fg); }
.licence-red     { border-left-color: var(--bad-fg); }
.licence-missing { border-left-color: var(--dim); }
.licence-eyebrow { font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.licence-status-row { display: flex; align-items: baseline; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.licence-days { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--text); line-height: 1; }
.licence-days-unit { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.licence-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 8px; }
.licence-card small { color: var(--dim); font-size: 0.78rem; }
.licence-card small a { color: var(--gold); }

/* ── LRD compliance panel ────────────────────────────────── */
.lrd-panel { background: var(--char); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 4px; padding: 26px 30px; margin-bottom: 32px; }
.lrd-green { border-left-color: var(--ok-fg); }
.lrd-amber { border-left-color: var(--warn-fg); }
.lrd-red   { border-left-color: var(--bad-fg); }
.lrd-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.lrd-eyebrow { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; font-weight: 700; }
.lrd-header h4 { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; margin: 8px 0 6px; }
.lrd-sub { color: var(--muted); font-size: 0.88rem; }
.lrd-sub strong { color: var(--text); }

.lrd-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 700px) { .lrd-checks { grid-template-columns: 1fr; } }
.lrd-check { padding: 18px 20px; background: var(--ink); border: 1px solid var(--line); border-radius: 3px; border-left: 3px solid var(--line); }
.lrd-check-green { border-left-color: var(--ok-fg); }
.lrd-check-amber { border-left-color: var(--warn-fg); }
.lrd-check-red   { border-left-color: var(--bad-fg); }
.lrd-check-eyebrow { font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.lrd-check-num { font-family: var(--display); font-weight: 700; margin: 6px 0 10px; line-height: 1; display: flex; align-items: baseline; gap: 4px; }
.lrd-check-num strong { font-size: 2rem; color: var(--text); }
.lrd-check-num span { font-size: 1rem; color: var(--muted); }
.lrd-progress { width: 100%; height: 6px; background: var(--track-bg); border-radius: 100px; overflow: hidden; }
.lrd-progress-sm { width: 90px; }
.lrd-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .4s ease; }
.lrd-check-green .lrd-progress-bar { background: var(--ok-fg); }
.lrd-check-amber .lrd-progress-bar { background: var(--warn-fg); }
.lrd-check-red .lrd-progress-bar   { background: var(--bad-fg); }

.lrd-section-h { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 12px; }
.lrd-section-h small { color: var(--dim); font-weight: 400; letter-spacing: 0.08em; text-transform: none; font-size: 0.78rem; }
.lrd-class-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.lrd-class-table thead th { padding: 10px 14px; background: var(--ink); font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); }
.lrd-class-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lrd-class-table tbody tr:last-child td { border-bottom: 0; }
/* Club/Away/Total/Needs/Best numeric columns (3-7): centre + tabular figures */
.lrd-class-table tbody td:nth-child(n+2):nth-child(-n+7) { text-align: center; font-variant-numeric: tabular-nums; }
.lrd-class-table tbody td:first-child { text-align: left; }
.lrd-empty { color: var(--muted); padding: 18px 0; font-size: 0.92rem; }
.members-latest { display: flex; align-items: center; gap: 32px; padding: 28px 32px; background: var(--char); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; margin-bottom: 16px; }
.latest-score { font-family: var(--display); font-size: 3.4rem; font-weight: 700; color: var(--gold); line-height: 1; min-width: 100px; text-align: center; }
.latest-body h4 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; }
.latest-body p { color: var(--muted); font-size: 0.92rem; }
.members-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Flash messages */
.flash-ok   { background: rgba(90,171,106,.12); border: 1px solid rgba(90,171,106,.4); color: var(--ok-fg); padding: 12px 16px; border-radius: 3px; margin-bottom: 24px; }
.flash-warn { background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.4); color: var(--gold-2); padding: 12px 16px; border-radius: 3px; margin-bottom: 24px; }
.flash-warn a, .flash-ok a { color: inherit; text-decoration: underline; }

/* Profile form */
.profile-form { max-width: 760px; }
.profile-section { border: 1px solid var(--line); border-radius: 4px; padding: 20px 26px 8px; margin-bottom: 20px; background: var(--char); }
.profile-section legend { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; font-weight: 700; padding: 0 8px; }
.profile-section label { display: block; margin-bottom: 14px; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.profile-section input, .profile-section select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); color: var(--text); border-radius: 3px; font-size: 0.95rem; }
.profile-section input:focus { outline: none; border-color: var(--gold); }
.profile-section input:disabled { color: var(--dim); cursor: not-allowed; }
.profile-section .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .profile-section .row { grid-template-columns: 1fr; } }
.profile-help { color: var(--dim); font-size: 0.82rem; padding: 0 8px 8px; }
.form-actions { display: flex; gap: 12px; margin-top: 20px; }

/* Scores page */
.score-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 700px) { .score-stats { grid-template-columns: repeat(2, 1fr); } }
.score-stats > div { padding: 22px 24px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; }
.score-stats strong { display: block; font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.score-stats span { display: block; font-size: 0.74rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; }
.score-chart-wrap { padding: 20px 24px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 24px; height: 260px; }
.scores-table { font-size: 0.9rem; }
.scores-table th { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }

/* Year × Competition breakdown */
.year-breakdown { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.year-card { background: var(--char); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.year-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(201,168,76,.04), transparent); }
.year-card-head h4 { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--gold); letter-spacing: -0.01em; line-height: 1; }
.year-card-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.year-card-stats span { display: flex; flex-direction: column; align-items: flex-start; }
.year-card-stats strong { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; }
.year-card-stats em { font-style: normal; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.year-match-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.year-match-table thead th { padding: 12px 18px; background: var(--ink); font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); }
.year-match-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text); }
.year-match-table tbody tr:last-child td { border-bottom: 0; }
.year-match-table tbody tr:hover { background: var(--hover-tint); }
.year-match-table td:first-child { font-weight: 600; }
.year-match-table td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* Pill counters used in breakdown table */
.pill { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; text-align: center; letter-spacing: 0.04em; }
.pill-comp     { background: rgba(201,168,76,.18); color: var(--gold); }
.pill-practice { background: rgba(154,154,154,.12); color: var(--muted); }

/* Comp / Practice / All filter tabs */
.type-filter { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.type-filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; border-right: 1px solid var(--line); transition: background .2s, color .2s; }
.type-filter a:last-child { border-right: 0; }
.type-filter a:hover { color: var(--gold); }
.type-filter a.active { background: var(--gold); color: var(--accent-contrast); }

/* Documents */
.doc-section { margin-bottom: 36px; }
.doc-section h3 { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.doc-section h3 small { color: var(--dim); font-weight: 400; letter-spacing: 0.1em; font-size: 0.7rem; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.doc-card { display: block; padding: 22px 24px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; transition: border-color .25s, transform .25s; }
.doc-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.doc-icon { font-size: 1.6rem; }
.doc-card h4 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin: 8px 0 6px; }
.doc-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin-bottom: 10px; }
.doc-meta { color: var(--dim); font-size: 0.75rem; }

.empty-state { padding: 60px 24px; text-align: center; color: var(--muted); background: var(--char); border: 1px dashed var(--line); border-radius: 4px; }
.empty-state p { margin-bottom: 16px; }

/* ── homepage upcoming-events widget ─────────────────── */
.upcoming-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.upcoming-item { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.upcoming-item:first-child { border-top: 1px solid var(--line); }
.upcoming-date { min-width: 54px; text-align: center; flex-shrink: 0; }
.upcoming-date strong { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--gold); line-height: 1; }
.upcoming-date span { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.upcoming-body { flex: 1; }
.upcoming-body h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; }
.upcoming-body p { font-size: 0.85rem; color: var(--muted); }
.upcoming-cat { display: inline-block; padding: 1px 7px; border-radius: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.upcoming-placeholder { color: var(--dim); font-size: 0.9rem; padding: 24px 0; text-align: center; }

/* ── full calendar page ──────────────────────────────── */
.calendar-page { background: var(--jet); }
.cal-page-wrap { padding: clamp(40px,8vh,100px) 0 0; }
.cal-page-header { margin-bottom: 28px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.cal-nav-btn { min-width: 130px; text-align: center; }
.cal-month-title { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; flex: 1; }
.cal-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 48px; }
.cal-dow { background: var(--char); padding: 10px 8px; text-align: center; font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 700; min-width: 0; overflow: hidden; }
.cal-cell { background: var(--ink); min-height: 100px; padding: 9px 8px 8px; vertical-align: top; min-width: 0; overflow: hidden; }
.cal-cell.empty { background: var(--jet); }
.cal-cell.today { background: rgba(201,168,76,.06); outline: 1px inset var(--gold); }
.cal-cell.weekend { background: var(--hover-tint); }
.cal-num { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--dim); line-height: 1; display: block; margin-bottom: 5px; }
.cal-cell.today .cal-num { color: var(--gold); }

/* Event chips inside the grid cells — colour driven by CSS custom property --cat */
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.cal-chip {
  display: block;
  padding: 2px 5px 2px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
  border-left: 2px solid var(--cat, #C9A84C);
  background: color-mix(in srgb, var(--cat, #C9A84C) 12%, transparent);
  color: var(--cat, #C9A84C);
  border-radius: 1px;
  cursor: default;
  transition: opacity .2s;
}
.cal-chip:hover { opacity: 0.8; }
/* Mobile: shrink chips to compact coloured tags, still readable */
@media (max-width: 600px) {
  .cal-cell { min-height: 60px; padding: 6px 4px; }
  .cal-num { font-size: 0.82rem; }
  .cal-chips { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .cal-chip { font-size: 0; padding: 0; width: 9px; height: 9px; border-radius: 50%; border-left: none; background: var(--cat, #C9A84C); flex-shrink: 0; }
}
.cal-events-heading { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cal-events-list { display: flex; flex-direction: column; gap: 12px; }
.cal-event-item { display: flex; gap: 24px; align-items: flex-start; padding: 22px 26px; background: var(--char); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; transition: transform .25s, box-shadow .25s; }
.cal-event-item:hover { transform: translateX(4px); box-shadow: -6px 0 24px -8px rgba(201,168,76,.3); }
.cal-event-date { min-width: 64px; text-align: center; flex-shrink: 0; }
.cal-event-date strong { display: block; font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.cal-event-date span, .cal-event-to { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.cal-event-body { flex: 1; }
.cal-cat-badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.cal-event-body h4 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; }
.cal-event-body p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 8px; }
.cal-event-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: var(--dim); }
.cal-event-meta a { color: var(--gold); }
.cal-empty-msg { text-align: center; color: var(--dim); padding: 56px 0; font-size: 1rem; }
.cal-feed-note { font-size: 0.78rem; color: var(--dim); margin: -28px 0 20px; text-align: right; }
.cal-feed-note a { color: var(--gold); }
.cal-chip-db { font-style: italic; }
.cal-event-db { }  /* DB admin events — distinguished by gold dot source */
@media (max-width: 640px) { .cal-event-item { flex-direction: column; gap: 12px; } .cal-event-date { text-align: left; display: flex; gap: 10px; align-items: baseline; } .cal-event-date strong { font-size: 1.4rem; } }

/* Filters — category + discipline toggle chips above the agenda */
.cal-filters { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.cal-filter-set { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cal-filter-chip { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 6px 13px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.cal-filter-chip:hover { border-color: var(--cat, var(--gold)); color: var(--text); }
.cal-filter-chip.active { background: var(--cat, var(--gold)); border-color: var(--cat, var(--gold)); color: #fff; }
.cal-filter-clear { background: none; border: none; color: var(--muted); font-size: 0.78rem; cursor: pointer; text-decoration: underline; padding: 6px 4px; }
.cal-filter-clear:hover { color: var(--gold); }

/* Discipline focus banner — shown when the calendar is deep-linked from a
   discipline page (/calendar?discipline=…). */
.cal-focus-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 18px; border: 1px solid var(--gold); border-left-width: 3px; border-radius: 4px; background: color-mix(in srgb, var(--gold) 8%, transparent); font-size: 0.9rem; color: var(--text); }
.cal-focus-note strong { color: var(--gold); }
.cal-focus-clear { background: none; border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer; padding: 2px 4px; margin-left: auto; }
.cal-focus-clear:hover { color: var(--gold); }

/* Day-grouped agenda */
.cal-day-group { margin-bottom: 26px; }
.cal-day-head { font-family: var(--display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.cal-heading-reset { margin-left: 12px; font-size: 0.75rem; font-family: var(--body); text-transform: none; font-weight: 400; color: var(--muted); cursor: pointer; background: none; border: none; padding: 0; }

/* Range badge + discipline link on event cards */
.cal-event-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-event-tags .cal-cat-badge { margin-bottom: 0; }
.cal-range-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px; }
a.cal-range-badge.is-link { cursor: pointer; transition: color .18s, border-color .18s; }
a.cal-range-badge.is-link:hover { color: var(--gold); border-color: var(--gold); }
.cal-disc-link { color: var(--gold); font-weight: 600; }
.cal-disc-link.is-static { color: var(--muted); font-weight: 600; cursor: default; }

/* ── footer ─────────────────────────────────────────── */
.site-footer { background: var(--ink); border-top: 1px solid var(--line); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 56px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
.footer-grid h5 { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 700; }
.footer-grid a { display: block; color: var(--muted); font-size: 0.92rem; padding: 4px 0; transition: color .2s; }
.footer-grid a:hover { color: var(--gold); }
.footer-logo { margin-bottom: 14px; }
.footer-tag { color: var(--muted); font-size: 0.92rem; max-width: 36ch; line-height: 1.55; }
.footer-bar { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.82rem; flex-wrap: wrap; }
.footer-bar a { color: var(--gold); }

/* ============================================================
   Content pages (rendered by /p/:slug from DB)
   ============================================================ */
body.page-wrap, body.admin { background: var(--jet); }

/* ── Content page layout — CSS grid, sidebar + main ─────── */
.content-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 110px); align-items: start; max-width: 1200px; margin-inline: auto; }
.content-layout.nav-collapsed { grid-template-columns: 54px 1fr; }

/* Sticky sidebar — scrolls with the page until sticky kicks in */
.content-sidebar { position: sticky; top: 110px; max-height: calc(100vh - 120px); overflow-y: auto; background: var(--ink); border-right: 1px solid var(--line); }
.sidebar-toggle { display: none; }
.sidebar-toggle-bar { display: none; background: var(--ink); border-bottom: 1px solid var(--line); padding: 10px 16px; }
.sidebar-toggle-btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; font-family: var(--body); padding: 8px 14px; border-radius: 3px; cursor: pointer; transition: all .18s; }
.sidebar-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
.content-nav { padding: 16px 8px 24px; }

/* Sidebar tools — filter box + collapse control */
.nav-tools { display: flex; align-items: center; gap: 6px; padding: 4px 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.nav-search-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.nav-search-icon { position: absolute; left: 9px; color: var(--dim); pointer-events: none; }
.nav-search { width: 100%; background: var(--char); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-family: var(--body); font-size: 0.82rem; padding: 7px 10px 7px 30px; outline: none; transition: border-color .15s; }
.nav-search:focus { border-color: var(--gold); }
.nav-search::placeholder { color: var(--dim); }
.nav-search::-webkit-search-cancel-button { display: none; }
.nav-collapse { display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); cursor: pointer; width: 30px; height: 30px; transition: all .15s; }
.nav-collapse:hover { border-color: var(--gold); color: var(--gold); }
.nav-empty { padding: 8px 6px; color: var(--dim); font-size: 0.82rem; }

/* Collapsed desktop state — sidebar becomes a slim vertical rail.
   The expand control fills the rail (no inner border) so it reads as an
   intentional bar rather than a floating button, echoing the gold
   uppercase group labels from the expanded nav. */
.nav-rail-expand { display: none; }
.content-layout.nav-collapsed .content-nav { display: none; }
.content-layout.nav-collapsed .content-sidebar { display: flex; flex-direction: column; align-items: stretch; min-height: calc(100vh - 120px); }
.content-layout.nav-collapsed .nav-rail-expand {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; padding: 22px 0 26px; background: none; border: none;
  border-bottom: 1px solid var(--line);
  color: var(--dim); cursor: pointer; transition: color .18s, background .18s;
}
.content-layout.nav-collapsed .nav-rail-expand:hover { color: var(--gold); background: var(--hover-tint); }
.nav-rail-label {
  writing-mode: vertical-rl; font-family: var(--display);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.nav-group { margin-bottom: 24px; }
.nav-group-label { display: block; font-family: var(--display); font-size: 0.68rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 6px; padding: 0 4px 6px; border-bottom: 1px solid var(--line); }
.nav-group-items a { display: block; padding: 9px 10px; color: var(--muted); font-size: 0.86rem; border-radius: 3px; border-left: 2px solid transparent; transition: all .18s; text-decoration: none; margin-bottom: 1px; }
.nav-group-items a:hover { background: var(--char); color: var(--text); border-left-color: var(--gold); padding-left: 14px; }
.nav-group-items a.active { background: var(--char); color: var(--gold); border-left-color: var(--gold); font-weight: 600; padding-left: 14px; }

/* Content area */
.content { padding: 52px clamp(28px, 4vw, 72px) 88px; max-width: 900px; }
.content-layout.nav-collapsed .content { max-width: 920px; }
.content.content-full { grid-column: 1 / -1; max-width: 1000px; margin: 0 auto; }
.content h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 8px; color: var(--text); }
.content h1::after { content: ''; display: block; width: 60px; height: 3px; background: var(--gold); margin-top: 14px; margin-bottom: 28px; }
.content h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 36px 0 14px; color: var(--text); }
.content h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 22px 0 10px; color: var(--text); }
.content h4 { font-weight: 700; margin: 18px 0 8px; font-size: 0.96rem; }
.content p { margin-bottom: 16px; color: var(--text-body); line-height: 1.72; }
.content ul, .content ol { margin: 12px 0 18px 22px; color: var(--text-body); }
.content li { margin-bottom: 7px; line-height: 1.6; }
.content a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color .2s; }
.content a:hover { border-color: var(--gold); }
/* Buttons inside content must not inherit the gold link colour */
.content a.btn { border-bottom: none; color: inherit; }
.content a.btn-gold { color: var(--accent-contrast); }
.content a.btn-ghost { color: var(--text); }
.content a.btn:hover { border-bottom: none; }
.content img { max-width: 100%; height: auto; border-radius: 4px; margin: 18px 0; border: 1px solid var(--line); }
.content table { border-collapse: collapse; margin: 18px 0; width: 100%; }
.content table td, .content table th { padding: 10px 14px; border: 1px solid var(--line); color: var(--muted); }
.content table th { background: var(--char); color: var(--gold); font-family: var(--display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.content blockquote { border-left: 3px solid var(--gold); padding: 14px 20px; background: var(--char); margin: 20px 0; border-radius: 0 4px 4px 0; color: var(--muted); font-style: italic; }

.members-gate { background: linear-gradient(135deg, rgba(201,168,76,.08), rgba(201,168,76,.02)); border: 1px solid rgba(201,168,76,.3); border-left: 4px solid var(--gold); padding: 32px; border-radius: 4px; }
.members-gate h1 { margin-bottom: 14px; }
.members-gate p { color: var(--muted); }

/* Phone-only: sidebar becomes a collapsible drawer above content.
   Narrower than the site's other nav breakpoints (640px, matching the
   hero/footer/gallery breakpoints) so it stays visible — not collapsed
   behind a toggle — on any normal desktop/laptop window; only genuinely
   phone-width viewports get the drawer treatment. */
@media (max-width: 640px) {
  /* Phone uses the drawer, not the desktop collapse rail */
  .content-layout, .content-layout.nav-collapsed { grid-template-columns: 1fr; }
  .content-sidebar { position: static; max-height: none; overflow-y: visible; border-right: none; border-bottom: 1px solid var(--line); }
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 18px;
    background: none; border: none; border-bottom: 1px solid transparent;
    color: var(--gold); font-family: var(--display);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; cursor: pointer;
  }
  .sidebar-toggle svg { opacity: .7; }
  .content-nav, .content-layout.nav-collapsed .content-nav { display: none; padding: 0 8px 16px; }
  .content-nav.open, .content-layout.nav-collapsed .content-nav.open { display: block; }
  .content, .content-layout.nav-collapsed .content { padding: 28px 18px 60px; max-width: none; margin-inline: 0; }
  .sidebar-toggle-bar { display: block; }
  .nav-collapse, .nav-rail-expand { display: none !important; }
}

/* ── Member nav avatar & header ─────────────────────────── */
.member-nav-header { display: flex; align-items: center; gap: 12px; padding: 20px 16px 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.member-nav-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--char); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.04em; flex-shrink: 0; }
.member-nav-name { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.member-nav-num { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* ── Nav section label ──────────────────────────────────── */
.nav-section-label { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 0.65rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.2em; padding: 12px 14px 4px; }
.nav-section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── Sign-out button styled like a nav link ─────────────── */
.nav-signout-btn { display: block; width: 100%; padding: 10px 12px; background: none; border: none; border-left: 2px solid transparent; border-radius: 3px; color: var(--muted); font-size: 0.86rem; font-family: var(--body); text-align: left; cursor: pointer; transition: all .18s; }
.nav-signout-btn:hover { background: var(--char); color: var(--bad-fg); border-left-color: var(--crimson); }

/* ── Back to club website link at sidebar foot ──────────── */
.nav-back-link { padding: 14px 14px 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.nav-back-link a { font-size: 0.78rem; color: var(--dim); text-decoration: none; transition: color .18s; }
.nav-back-link a:hover { color: var(--gold); }

/* ── Form / public page shell ────────────────────────────── */
.form-main { max-width: 820px; margin: 0 auto; padding: 48px var(--pad-x) 80px; }
.form-main h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 6px; }
.form-main h1::after { content: ''; display: block; width: 50px; height: 3px; background: var(--gold); margin-top: 12px; margin-bottom: 22px; }
.form-main h2 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 32px 0 14px; }
.form-main > p, .form-main .form-intro { color: var(--muted); margin-bottom: 22px; line-height: 1.65; }
.form-section-h { font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 36px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* Legacy .form-page retained for any remaining references */
.form-page { max-width: 820px; margin: 32px auto; padding: 0 var(--pad-x); }

/* ── Join page: fees + LRD info ──────────────────────────── */
.join-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin: 24px 0 8px; }
.join-info-card { padding: 26px 28px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; }
.join-info-card h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.join-info-card h3 { font-size: 0.95rem; font-weight: 500; color: var(--muted); margin-bottom: 16px; line-height: 1.55; font-family: var(--body); text-transform: none; letter-spacing: 0; }
.join-info-card h4 { font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 20px 0 8px; color: var(--gold-2); }
.join-info-card ol { margin: 8px 0 14px 20px; color: rgba(237,237,237,.8); font-size: 0.92rem; }
.join-info-card ol li { margin-bottom: 8px; line-height: 1.55; }
.join-info-card ol strong { color: var(--text); }
.join-fees-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 12px 0; }
.join-fees-table thead th { padding: 8px 10px; background: var(--ink); color: var(--gold); font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--line); }
.join-fees-table tbody td { padding: 10px 10px; border-bottom: 1px solid var(--line); color: var(--text-body); }
.join-fees-table tbody td:first-child { color: var(--text); }
.join-fees-table tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.join-fees-table tbody tr:last-child td { border-bottom: 0; }
.join-note { font-size: 0.82rem; color: var(--dim); margin-top: 8px; line-height: 1.55; }
.join-note strong { color: var(--text); }
.join-divider { border: none; border-top: 1px solid var(--line); margin: 32px 0 0; }
.badge-new { display: inline-block; padding: 2px 8px; background: rgba(201,168,76,.15); color: var(--gold); font-size: 0.68rem; letter-spacing: 0.12em; border-radius: 100px; font-family: var(--body); font-weight: 700; text-transform: uppercase; }
.form { display: flex; flex-direction: column; gap: 18px; }
.form label { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=date], .form input[type=time], .form input[type=number], .form input[type=password], .form input:not([type]), .form select, .form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 14px; background: var(--jet); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; font-family: var(--body); font-weight: 400;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.18); }
.form .row { display: flex; gap: 14px; flex-wrap: wrap; }
.form .row label { flex: 1 1 200px; }

/* form submit button mirrors gold btn */
.form button[type=submit], .form .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: var(--gold); color: var(--accent-contrast); border: none; border-radius: 2px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.88rem; cursor: pointer; transition: all .25s; align-self: flex-start; }
.form button[type=submit]:hover { background: var(--gold-2); transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(201,168,76,.6); }

/* ── training strip (homepage) ──────────────────────── */
.training-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.t-pill { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; transition: all .3s; }
.t-pill:hover { transform: translateY(-4px); border-color: var(--gold); background: var(--ink); }
.t-pill .t-icon { font-size: 1.6rem; color: var(--gold); }
.t-pill strong { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }
.t-pill em { font-style: normal; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }

/* ── training/booking page UI ───────────────────────── */
.members-banner { display: flex; align-items: center; gap: 16px; padding: 16px 22px; background: linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.04)); border: 1px solid rgba(201,168,76,.35); border-left: 4px solid var(--gold); border-radius: 4px; margin-bottom: 28px; }
.members-banner .mb-icon { font-size: 1.4rem; line-height: 1; }
.members-banner strong { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.members-banner span { color: var(--muted); font-size: 0.92rem; }
.members-banner a { color: var(--gold); text-decoration: underline; font-weight: 600; }

.training-times { list-style: none; margin: 16px 0 0; padding: 14px 18px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; font-size: 0.92rem; }
.training-times li { padding: 4px 0; color: var(--muted); }
.training-times li strong { color: var(--text); font-weight: 600; }
.training-times .t-time { color: var(--gold); font-weight: 600; }

.policy-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 16px; background: rgba(26,111,255,.06); border: 1px solid rgba(80,140,255,.25); border-radius: 4px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.policy-note .pn-icon { color: #80b3ff; font-size: 1.1rem; line-height: 1.3; }

.session-day.preview h3 { color: var(--muted); }
.opens-badge { font-family: var(--body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3); padding: 4px 10px; border-radius: 100px; margin-left: 14px; vertical-align: middle; }
.session-card.preview { opacity: 0.55; }
.session-card.preview:hover { transform: none; border-color: var(--line); }

.session-card-time { font-family: var(--display); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-top: -2px; }

.training-intro { padding: 12px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.training-intro h1 { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; margin: 6px 0 14px; }
.training-intro h1::after { display: none; }

.discipline-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.discipline-filter a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--char); border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.04em; font-weight: 500; transition: all .25s; }
.discipline-filter a:hover { color: var(--gold); border-color: rgba(201,168,76,.4); }
.discipline-filter a.active { background: var(--gold); color: var(--accent-contrast); border-color: var(--gold); font-weight: 700; }
.discipline-filter a span { font-size: 1rem; }

.session-day { margin-bottom: 36px; }
.session-date { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.session-date::after { display: none; }
.session-time { font-family: var(--body); font-size: 0.85rem; font-weight: 500; color: var(--gold); letter-spacing: 0.08em; }

.session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.session-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; transition: all .3s; }
.session-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.session-card.full { opacity: 0.65; }
.session-card.full:hover { transform: none; border-color: var(--line); }
.session-icon { font-size: 1.6rem; color: var(--gold); line-height: 1; }
.session-card h4 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }
.session-card p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; min-height: 2.4em; }
.session-meta { padding: 8px 0 4px; }
.cap-pill { display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cap-ok   { background: rgba(15, 206, 108, 0.14); color: var(--ok-fg); }
.cap-low  { background: rgba(201, 168, 76, 0.16); color: var(--gold); }
.cap-full { background: rgba(200, 16, 46, 0.16); color: var(--bad-fg); }

.btn-sess { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; background: var(--gold); color: var(--accent-contrast); border: none; border-radius: 3px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: all .25s; cursor: pointer; font-family: var(--body); margin-top: 6px; }
.btn-sess:hover:not(:disabled) { background: var(--gold-2); transform: translateY(-1px); }
.btn-sess:disabled { background: var(--line); color: var(--dim); cursor: not-allowed; }

.checkbox-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.checkbox-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.checkbox-row span { font-size: 0.92rem; color: var(--text); letter-spacing: 0; text-transform: none; font-weight: 400; }

.confirm-card { padding: 28px; background: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 4px; margin-top: 24px; }
.confirm-table { width: 100%; border-collapse: collapse; }
.confirm-table td { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.confirm-table td:first-child { width: 35%; }
.confirm-table strong { color: var(--text); }

.empty-state { padding: 48px 24px; text-align: center; color: var(--muted); background: var(--char); border: 1px dashed var(--line); border-radius: 4px; }

/* ── admin ──────────────────────────────────────────── */
body.admin { background: var(--jet); color: var(--text); }
.admin-header { background: var(--ink); padding: 14px var(--pad-x); display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--gold); }
.admin-header strong { font-family: var(--display); color: var(--gold); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-header nav a { color: var(--muted); margin-left: 16px; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.admin-header nav a:hover { color: var(--gold); }
body.admin main { padding: 40px var(--pad-x); max-width: 1240px; margin: 0 auto; }
body.admin h1 { font-family: var(--display); color: var(--gold); margin-bottom: 28px; font-size: 2rem; letter-spacing: 0.02em; text-transform: uppercase; }
body.admin .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
body.admin .card { background: var(--char); border: 1px solid var(--line); border-radius: 4px; padding: 28px; text-align: center; color: inherit; transition: all .25s; }
body.admin .card:hover { background: var(--ink); border-color: var(--gold); transform: translateY(-4px); }
body.admin .card h2 { font-family: var(--display); font-size: 2.6rem; color: var(--gold); margin-bottom: 6px; font-weight: 700; }
body.admin .data-table { width: 100%; border-collapse: collapse; background: var(--char); border-radius: 4px; overflow: hidden; }
body.admin .data-table th, body.admin .data-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.88rem; vertical-align: top; }
body.admin .data-table th { background: var(--ink); color: var(--gold); font-family: var(--display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
body.admin code { background: var(--jet); padding: 2px 6px; border-radius: 3px; font-size: 0.85rem; color: var(--gold); }
body.admin .sub-tabs { display: flex; gap: 4px; margin-bottom: 18px; }
body.admin .sub-tabs a { padding: 10px 18px; background: var(--char); color: var(--muted); border-radius: 3px; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
body.admin .sub-tabs a.active { background: var(--gold); color: var(--accent-contrast); font-weight: 700; }

body.login-page { background: var(--jet); color: var(--text); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
body.login-page .login-form { background: var(--char); padding: 40px; border-radius: 4px; min-width: 340px; border: 1px solid var(--line); }
body.login-page h1 { font-family: var(--display); color: var(--gold); text-align: center; margin-bottom: 24px; font-size: 1.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.err-msg  { background: rgba(200,16,46,.15);  color: var(--bad-fg); padding: 10px 14px; border-radius: 3px; margin-bottom: 14px; font-size: 0.88rem; border: 1px solid rgba(200,16,46,.3); }
.warn-msg { background: rgba(232,168,56,.12); color: var(--warn-fg); padding: 10px 14px; border-radius: 3px; margin-bottom: 14px; font-size: 0.88rem; border: 1px solid rgba(232,168,56,.3); }

.btn-link { background: transparent; color: var(--muted); border: none; cursor: pointer; font: inherit; padding: 6px 12px; }
.btn-link:hover { color: var(--gold); }

/* ── React admin SPA — left sidebar layout ───────────────────
   Replaces the old horizontal top nav, which silently clipped items
   once there were too many to fit on one row. A vertical list has no
   such failure mode — every item is always visible, and it stays
   pinned to the top of the viewport once you scroll past the header. */
.admin-shell { display: flex; flex: 1; min-height: 0; }
.admin-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--ink); border-right: 1px solid var(--line);
  position: sticky; top: 0; align-self: flex-start;
  max-height: 100vh; overflow-y: auto;
  padding: 20px 8px 24px;
}
.admin-sidebar .nav-group-items a.active { border-left-color: var(--gold); }
.admin-sidebar-toggle-bar { display: none; background: var(--ink); border-bottom: 1px solid var(--line); padding: 10px 16px; }
.admin-sidebar-toggle-btn { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; font-family: var(--body); padding: 8px 14px; border-radius: 3px; cursor: pointer; width: 100%; justify-content: center; }
.admin-sidebar-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { position: static; width: 100%; max-height: none; overflow-y: visible; border-right: none; border-bottom: 1px solid var(--line); display: none; }
  .admin-sidebar.open { display: block; }
  .admin-sidebar-toggle-bar { display: block; }
}

/* ── React admin SPA — shared UI ─────────────────────────── */
.btn-danger { background: rgba(200,16,46,.15); color: var(--bad-fg); border-color: rgba(200,16,46,.4); }
.btn-danger:hover { background: rgba(200,16,46,.28); border-color: var(--crimson); color: #fff; }
.btn-xs { padding: 4px 10px; font-size: 0.72rem; }

.badge { display: inline-block; padding: 2px 8px; font-size: 0.68rem; letter-spacing: 0.1em; border-radius: 100px; font-family: var(--body); font-weight: 700; text-transform: uppercase; }
.badge-green { background: rgba(90,171,106,.15); color: var(--ok-fg); border: 1px solid rgba(90,171,106,.3); }
.badge-dim   { background: rgba(106,106,106,.15); color: var(--muted); border: 1px solid rgba(106,106,106,.25); }
.badge-gold  { background: rgba(201,168,76,.15); color: var(--gold); border: 1px solid rgba(201,168,76,.3); }

/* Status badges — AdminTraining session open/closed state */
.status-badge { display: inline-block; padding: 2px 8px; font-size: 0.68rem; letter-spacing: 0.1em; border-radius: 100px; font-family: var(--body); font-weight: 700; text-transform: uppercase; }
.status-active   { background: rgba(90,171,106,.15); color: var(--ok-fg); border: 1px solid rgba(90,171,106,.3); }
.status-inactive { background: rgba(106,106,106,.15); color: var(--muted); border: 1px solid rgba(106,106,106,.25); }
/* Generic form input for admin create forms */
.form-input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); color: var(--text); border-radius: 3px; font-size: 0.95rem; }
.form-input:focus { outline: none; border-color: var(--gold); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.admin-table th { background: var(--ink); color: var(--gold); font-family: var(--display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:hover td { background: var(--hover-tint); }

.admin-side-panel { background: var(--char); border: 1px solid var(--line); border-radius: 6px; padding: 28px 32px; }
@media (max-width: 640px) { .admin-side-panel { padding: 20px 16px; } }

/* ══════════════════════════════════════════════════════════
   BLOCK EDITOR — Public rendered output
   ══════════════════════════════════════════════════════════ */
.block-text p { margin-bottom: 16px; color: var(--text-body); line-height: 1.72; }
.block-text ul, .block-text ol { margin: 12px 0 18px 22px; color: var(--text-body); }
.block-text a { color: var(--gold); }
.block-image { margin: 24px 0; }
.block-image img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); }
.block-image-sm { max-width: 400px; margin: 24px auto; }
.block-image-left { float: left; max-width: 45%; margin: 8px 28px 16px 0; }
.block-image-right { float: right; max-width: 45%; margin: 8px 0 16px 28px; }
.block-image figcaption { font-size: 0.82rem; color: var(--muted); text-align: center; margin-top: 8px; }
.block-image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin: 28px 0; }
.block-image-text-reverse { direction: rtl; }
.block-image-text-reverse > * { direction: ltr; }
.block-image-text img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
@media (max-width: 700px) { .block-image-text { grid-template-columns: 1fr; } .block-image-left, .block-image-right { float: none; max-width: 100%; margin: 16px 0; } }
.block-quote { border-left: 3px solid var(--gold); padding: 16px 22px; background: var(--char); margin: 24px 0; border-radius: 0 4px 4px 0; }
.block-quote p { color: rgba(237,237,237,.9); font-size: 1.1rem; font-style: italic; margin-bottom: 8px; }
.block-quote cite { color: var(--muted); font-size: 0.88rem; }
.block-cta { background: var(--char); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 28px 32px; border-radius: 4px; margin: 28px 0; }
.block-cta h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.block-cta p { color: var(--muted); margin-bottom: 18px; }
.block-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.block-info-box { padding: 20px 24px; border-radius: 4px; margin: 20px 0; border-left: 4px solid; }
.block-info-gold { background: rgba(201,168,76,.08); border-color: var(--gold); }
.block-info-blue { background: rgba(74,144,217,.08); border-color: #4A90D9; }
.block-info-red  { background: rgba(200,16,46,.08);  border-color: var(--crimson); }
.block-info-green{ background: rgba(72,187,120,.08); border-color: var(--ok-fg); }
.block-info-box h4 { font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.block-info-box p, .block-info-box li { color: var(--text-body); font-size: 0.94rem; line-height: 1.6; }
.block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 24px 0; }
.block-columns-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .block-columns, .block-columns-3 { grid-template-columns: 1fr; } }
.block-divider { border: none; border-top: 1px solid var(--line); margin: 36px 0; }

/* ══════════════════════════════════════════════════════════
   BLOCK EDITOR — Admin UI
   ══════════════════════════════════════════════════════════ */
.page-editor-form { display: flex; flex-direction: column; gap: 0; }
.page-form-meta { background: var(--char); border: 1px solid var(--line); border-radius: 4px; padding: 20px 24px; margin-bottom: 16px; }
.meta-field { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.meta-field input, .meta-field select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--jet); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font-size: 0.95rem; }
.meta-field input:focus, .meta-field select:focus { outline: none; border-color: var(--gold); }
.meta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.meta-row .meta-field { flex: 1 1 160px; }
.page-editor-body { flex: 1; }
.page-form-actions { padding: 16px 0; }

/* Be (block editor) namespace */
.block-editor-root { background: var(--char); border: 1px solid var(--line); border-radius: 4px; min-height: 200px; }
.be-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--ink); border-radius: 4px 4px 0 0; }
.be-toolbar-label { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.be-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.be-empty { padding: 48px 24px; text-align: center; color: var(--dim); font-size: 0.94rem; }
.be-add-row { padding: 8px 8px 12px; display: flex; justify-content: center; }

/* Block cards */
.be-block { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--jet); transition: border-color .15s; }
.be-block:hover { border-color: rgba(201,168,76,.4); }
.be-block.be-block-open { border-color: var(--gold); }
.be-block-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--ink); }
.be-block-open .be-block-header { border-bottom: 1px solid var(--line); }
.be-block-type-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; }
.be-block-type-label { font-family: var(--display); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); min-width: 110px; flex-shrink: 0; }
.be-block-preview { flex: 1; font-size: 0.86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-block-preview img { height: 24px; width: auto; border-radius: 2px; vertical-align: middle; }
.be-block-actions { display: flex; gap: 2px; flex-shrink: 0; }
.be-icon-btn { padding: 3px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); border-radius: 2px; cursor: pointer; font-size: 0.82rem; line-height: 1.4; transition: all .15s; }
.be-icon-btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,.08); }
.be-icon-btn-danger:hover { color: var(--crimson); border-color: var(--crimson); background: rgba(200,16,46,.08); }

/* Block edit forms */
.be-block-form { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.be-form-row label { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.be-form-row input, .be-form-row select, .be-form-row textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; background: var(--jet); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font-size: 0.92rem; font-family: inherit; }
.be-form-row input:focus, .be-form-row select:focus, .be-form-row textarea:focus { outline: none; border-color: var(--gold); }
.be-html-textarea { font-family: 'Courier New', monospace; font-size: 0.82rem; min-height: 180px; white-space: pre; }
.be-form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.be-cta-btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.be-cta-btn-row input { flex: 1 1 160px; }
.be-cta-btn-row select { flex: 0 0 130px; }
.be-media-row .be-media-preview { min-height: 40px; display: flex; align-items: center; }
.be-media-empty { color: var(--dim); font-size: 0.82rem; font-style: italic; }
.be-media-row { display: flex; flex-direction: column; gap: 6px; }

/* Rich editor (contenteditable) */
.be-rich-editor { min-height: 80px; padding: 10px 12px; background: var(--jet); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font-size: 0.92rem; line-height: 1.65; margin-top: 6px; outline: none; cursor: text; }
.be-rich-editor:focus { border-color: var(--gold); }
.be-rich-editor[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--dim); pointer-events: none; }
.be-rich-toolbar { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.be-rich-toolbar button { padding: 3px 8px; background: var(--char); border: 1px solid var(--line); color: var(--muted); border-radius: 2px; cursor: pointer; font-size: 0.78rem; }
.be-rich-toolbar button:hover { color: var(--gold); border-color: var(--gold); }

/* Buttons used inside block editor */
.be-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid transparent; border-radius: 2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .2s; }
.be-btn-add { background: var(--gold); color: var(--accent-contrast); border-color: var(--gold); font-size: 0.88rem; padding: 9px 20px; }
.be-btn-add:hover { background: var(--gold-2); }
.be-btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.be-btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
.be-btn-sm { padding: 4px 10px; font-size: 0.72rem; }

/* Mode banner (when in HTML/Jodit mode) */
.be-mode-banner { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(201,168,76,.06); border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; font-size: 0.82rem; color: var(--muted); }
#legacy-editor-area { background: var(--char); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
#legacy-editor-area label { display: block; padding: 12px 16px 0; font-size: 0.75rem; color: var(--muted); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
#legacy-editor-area textarea { display: block; width: 100%; margin: 6px 0 0; border: none; border-top: 1px solid var(--line); border-radius: 0; }

/* Block type picker modal */
.be-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.be-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.be-modal-box { position: relative; background: var(--char); border: 1px solid var(--line); border-radius: 6px; max-width: 680px; width: 95vw; max-height: 85vh; overflow-y: auto; z-index: 1; }
.be-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.88rem; color: var(--gold); }
.be-modal-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.be-modal-close:hover { color: var(--crimson); }
.be-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 16px; }
.be-picker-tile { background: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 16px 14px; text-align: center; cursor: pointer; transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.be-picker-tile:hover { border-color: var(--gold); background: rgba(201,168,76,.06); transform: translateY(-2px); }
.be-picker-icon { font-size: 1.8rem; line-height: 1; }
.be-picker-tile strong { font-family: var(--display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text); }
.be-picker-tile small { font-size: 0.72rem; color: var(--dim); line-height: 1.3; }

/* Media picker modal */
.be-media-box { max-width: 840px; transition: outline-color .15s, background .15s; outline: 2px dashed transparent; outline-offset: -2px; }
.be-media-dropzone-active { outline-color: var(--gold); background: rgba(201,168,76,.05); }
.be-media-grid-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 14px; }
.be-media-tile { border: 2px solid transparent; border-radius: 3px; cursor: pointer; overflow: hidden; transition: border-color .15s; }
.be-media-tile:hover { border-color: var(--gold); }
.be-media-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.be-media-tile-name { padding: 4px 6px; font-size: 0.68rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--ink); }

/* ── Admin nav groups ────────────────────────────────────── */
.admin-nav-group { display: inline-block; color: var(--dim); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; padding: 0 8px; margin-left: 8px; border-left: 1px solid var(--line); }
.admin-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* ── CMS: Media Library ──────────────────────────────────── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 32px; }
.media-card { background: var(--char); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; }
.media-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.media-card:disabled { opacity: .5; transform: none; }
.media-card:disabled:hover { border-color: var(--line); }
.media-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.media-doc-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; font-size: 2.4rem; background: var(--ink); }
.media-card-name { padding: 6px 8px 2px; font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card-size { padding: 0 8px 6px; font-size: 0.68rem; color: var(--dim); }

/* ── CMS: Navigation Manager ─────────────────────────────── */
.nav-mgr-group { margin-bottom: 24px; background: var(--char); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.nav-mgr-group-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--ink); border-bottom: 1px solid var(--line); }
.nav-mgr-group-name { font-family: var(--display); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.nav-mgr-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nav-mgr-item:last-child { border-bottom: 0; }
.nav-mgr-item:hover { background: var(--hover-tint); }
.nav-mgr-handle { color: var(--dim); font-size: 1rem; cursor: grab; flex-shrink: 0; }
.nav-mgr-title { flex: 1; min-width: 160px; font-size: 0.9rem; }
.nav-mgr-slug { font-size: 0.78rem; color: var(--dim); flex-shrink: 0; }
.nav-mgr-order-btns { display: flex; gap: 4px; flex-shrink: 0; }
.nav-mgr-btn { padding: 3px 8px; background: var(--ink); border: 1px solid var(--line); color: var(--muted); border-radius: 2px; cursor: pointer; font-size: 0.82rem; line-height: 1; }
.nav-mgr-btn:hover { color: var(--gold); border-color: var(--gold); }
.nav-mgr-btn:disabled { opacity: .35; cursor: not-allowed; color: var(--muted); border-color: var(--line); }

/* ── CMS: Preview banner ─────────────────────────────────── */
.preview-banner { position: sticky; top: 0; z-index: 100; background: rgba(201,168,76,.9); color: #111; padding: 10px 20px; font-size: 0.88rem; font-weight: 700; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 16px; }
.preview-banner a { color: #111; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   NEWSLETTER SECTION — #newsletter
   ══════════════════════════════════════════════════════════ */
.nl-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .nl-layout { grid-template-columns: 1fr; gap: 48px; } }

/* ── Newsletter preview card ─────────────────────────────── */
.nl-paper {
  background: var(--char);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.nl-paper::after {
  content: '';
  position: absolute;
  bottom: -50px; right: -50px;
  width: 200px; height: 200px;
  border: 1px solid var(--line);
  border-radius: 50%;
  pointer-events: none;
  opacity: .35;
}

.nl-paper-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.nl-paper-logo { width: 36px; height: 36px; object-fit: contain; opacity: .55; filter: grayscale(1); flex-shrink: 0; }
.nl-paper-title { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.nl-paper-name { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text); }
.nl-paper-sub { font-size: 0.67rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.nl-paper-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); flex-shrink: 0; }

.nl-rule { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.nl-rule-sm { margin: 12px 0; }

.nl-tag { display: inline-block; padding: 3px 9px; background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3); color: var(--gold); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; margin-bottom: 10px; }
.nl-paper-lead h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; line-height: 1.22; color: var(--text); margin-bottom: 8px; }
.nl-paper-lead p { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }

.nl-paper-items { display: flex; flex-direction: column; }
.nl-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.nl-item:last-child { border-bottom: none; }
.nl-item-cat { font-family: var(--display); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); flex-shrink: 0; min-width: 76px; }
.nl-item-title { font-size: 0.82rem; color: var(--text); line-height: 1.3; }

.nl-paper-footer { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.67rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }

/* ── Signup side ─────────────────────────────────────────── */
.nl-section-title { font-size: clamp(2rem, 4.5vw, 3.6rem) !important; }
.nl-form { margin-top: 28px; }
.nl-field { display: flex; }
.nl-field input[type="email"] {
  flex: 1; min-width: 0;
  background: var(--char);
  border: 1.5px solid var(--line);
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 14px 18px;
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color .2s;
}
.nl-field input[type="email"]:focus { outline: none; border-color: var(--gold); }
.nl-field input[type="email"]::placeholder { color: var(--dim); }
.nl-field .btn { border-radius: 0 2px 2px 0; flex-shrink: 0; }
.nl-note { font-size: 0.76rem; color: var(--dim); margin-top: 10px; letter-spacing: 0.04em; }

.nl-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.nl-badge { padding: 5px 11px; background: rgba(201,168,76,.07); border: 1px solid rgba(201,168,76,.18); color: var(--muted); font-size: 0.71rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; }
@media (max-width: 640px) { .nl-layout { gap: 36px; } .nl-paper { padding: 24px; } }

/* ══════════════════════════════════════════════════════════
   MEMBERS BULLETIN — /members/newsletter  (mnl-*)
   ══════════════════════════════════════════════════════════ */
.mnl-wrap { padding-top: 16px; padding-bottom: 80px; }

/* Issue selector bar */
.mnl-issue-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 44px; padding-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mnl-issue-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mnl-tab { padding: 7px 14px; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 2px; font-size: 0.78rem; letter-spacing: 0.05em; cursor: default; }
.mnl-tab-active { background: var(--gold); color: var(--accent-contrast); border-color: var(--gold); font-weight: 700; }
.mnl-issue-note { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }

/* ── Feature story ───────────────────────────────────────── */
.mnl-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 40px; background: var(--char); border: 1px solid var(--line); border-top: 3px solid var(--gold); overflow: hidden; }
@media (max-width: 860px) { .mnl-feature { grid-template-columns: 1fr; } }

.mnl-feature-img { position: relative; overflow: hidden; min-height: 300px; }
.mnl-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.mnl-feature:hover .mnl-feature-img img { transform: scale(1.03); }
.mnl-feature-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 16px; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%); font-size: 0.72rem; color: rgba(237,237,237,.7); font-style: italic; }

.mnl-feature-body { padding: 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
@media (max-width: 860px) { .mnl-feature-body { padding: 28px; } }
.mnl-feature-headline { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.12; color: var(--text); }
.mnl-lead { font-size: 1.05rem; color: var(--text); line-height: 1.65; font-style: italic; border-left: 3px solid var(--gold); padding-left: 18px; margin: 4px 0; }
.mnl-feature-body p { font-size: 0.9rem; color: var(--muted); line-height: 1.72; }

/* ── Secondary stories grid ──────────────────────────────── */
.mnl-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; }
@media (max-width: 860px) { .mnl-stories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .mnl-stories { grid-template-columns: 1fr; } }

.mnl-story { background: var(--char); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s; display: flex; flex-direction: column; }
.mnl-story:hover { border-color: rgba(201,168,76,.4); }
.mnl-story-img { aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; }
.mnl-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.mnl-story:hover .mnl-story-img img { transform: scale(1.05); }
.mnl-story-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mnl-cat { font-family: var(--display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mnl-story-body h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--text); }
.mnl-story-body p { font-size: 0.84rem; color: var(--muted); line-height: 1.65; flex: 1; }

/* ── Member spotlight photo grid ─────────────────────────── */
.mnl-spotlight { margin-bottom: 64px; }
.mnl-spotlight-head { margin-bottom: 24px; }
.mnl-spotlight-head h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin: 6px 0 4px; }
.mnl-spotlight-head p { color: var(--muted); font-size: 0.9rem; }

.mnl-photo-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 220px; gap: 6px; }
@media (max-width: 700px) { .mnl-photo-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } }

.mnl-photo { position: relative; overflow: hidden; cursor: pointer; background: var(--char); }
.mnl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .4s ease; filter: brightness(.88) contrast(1.06); }
.mnl-photo:hover img { transform: scale(1.06); filter: brightness(1) contrast(1.06); }
.mnl-photo-tall { grid-row: span 2; }
.mnl-photo-wide { grid-column: span 2; }

.mnl-photo-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 16px 12px; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%); opacity: 0; transform: translateY(4px); transition: all .3s ease; }
.mnl-photo:hover .mnl-photo-overlay { opacity: 1; transform: none; }
.mnl-photo-name { display: block; font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--text); letter-spacing: 0.07em; text-transform: uppercase; }
.mnl-photo-sub { display: block; font-size: 0.71rem; color: rgba(237,237,237,.65); margin-top: 2px; }

/* ── In Brief ────────────────────────────────────────────── */
.mnl-brief { margin-bottom: 64px; }
.mnl-brief-head { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.mnl-brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .mnl-brief-grid { grid-template-columns: 1fr; } }
.mnl-brief-item { padding: 22px 24px; background: var(--char); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.mnl-brief-cat { font-family: var(--display); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
.mnl-brief-item h4 { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.2; }
.mnl-brief-item p { font-size: 0.84rem; color: var(--muted); line-height: 1.65; }
.mnl-brief-item a { color: var(--gold); }

/* ── Archive ─────────────────────────────────────────────── */
.mnl-archive { margin-bottom: 40px; }
.mnl-archive-list { display: flex; flex-direction: column; gap: 4px; }
.mnl-archive-item { display: flex; align-items: center; gap: 20px; padding: 14px 20px; background: var(--char); border: 1px solid var(--line); transition: border-color .2s, background .2s; flex-wrap: wrap; }
.mnl-archive-item:hover { border-color: rgba(201,168,76,.3); background: rgba(201,168,76,.03); cursor: default; }
.mnl-archive-num { font-family: var(--display); font-size: 0.88rem; font-weight: 700; color: var(--gold); min-width: 72px; flex-shrink: 0; }
.mnl-archive-date { font-size: 0.82rem; color: var(--muted); min-width: 108px; flex-shrink: 0; }
.mnl-archive-preview { flex: 1; font-size: 0.81rem; color: var(--dim); }
.mnl-archive-arrow { font-size: 0.75rem; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }
@media (max-width: 640px) { .mnl-archive-preview { display: none; } }

/* ── Club History Gallery ──────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 20px; }
.gallery-item { overflow: hidden; border-radius: 3px; }
.gallery-item img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform .25s, box-shadow .25s; cursor: zoom-in; }
.gallery-item img:hover { transform: scale(1.04); box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .gallery-item img { height: 110px; } }

/* ── Lightbox ─────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; animation: lbFadeIn .18s ease;
}
@keyframes lbFadeIn { from { opacity: 0 } to { opacity: 1 } }
.lightbox-overlay img {
  max-width: min(90vw, 1200px); max-height: 88vh;
  object-fit: contain; border-radius: 4px;
  border: 1px solid var(--line); cursor: default;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  animation: lbSlide .2s ease;
}
@keyframes lbSlide { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.lightbox-close {
  position: fixed; top: 20px; right: 24px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 1.1rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s;
  z-index: 10000;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }

/* ── FAQ accordion (native <details>) ──────────────── */
.faq-item { border-bottom: 1px solid var(--line, #2a2a2a); }
.faq-item summary {
  cursor: pointer; padding: 16px 0; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  color: var(--text, #ededed);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 300; color: var(--gold); transition: transform .2s; flex-shrink: 0; margin-left: 16px; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 18px 0; color: var(--muted); line-height: 1.7; margin: 0; }

/* ── Join steps ol ─────────────────────────────────── */
.join-steps { padding-left: 1.4em; display: flex; flex-direction: column; gap: 16px; }
.join-steps li { color: var(--muted); line-height: 1.65; }
.join-steps li strong { color: var(--text); }

/* ── Site search ──────────────────────────────────────────── */
.search-trigger {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 8px; border-radius: 4px;
  display: flex; align-items: center; transition: color .18s;
  flex-shrink: 0;
}
.search-trigger:hover { color: var(--gold); }

.search-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(60px, 12vh, 140px);
  animation: srFadeIn .15s ease;
}
@keyframes srFadeIn { from { opacity: 0 } to { opacity: 1 } }
.search-backdrop {
  position: absolute; inset: 0;
  background: var(--backdrop); backdrop-filter: blur(8px);
}
.search-modal {
  position: relative; z-index: 1;
  width: min(640px, calc(100vw - 32px));
  background: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 32px 80px var(--shadow-col);
  overflow: hidden;
  animation: srSlide .18s ease;
}
@keyframes srSlide { from { transform: translateY(-12px); opacity: 0 } to { transform: none; opacity: 1 } }
.search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.search-icon { color: var(--dim); flex-shrink: 0; }
.search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 1.05rem; font-family: var(--body);
  line-height: 1.4;
}
.search-input::placeholder { color: var(--dim); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold);
  animation: spin .6s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg) } }
.search-close {
  background: var(--char); border: 1px solid var(--line); border-radius: 3px;
  color: var(--dim); font-size: 0.7rem; font-family: var(--body);
  padding: 2px 7px; cursor: pointer; letter-spacing: 0.04em;
  flex-shrink: 0; transition: color .15s;
}
.search-close:hover { color: var(--text); }
.search-results { max-height: 400px; overflow-y: auto; padding: 6px 0; }
.search-result-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 12px 20px; transition: background .12s;
}
.search-result-item:hover, .search-result-item:focus {
  background: var(--char); outline: none;
}
.sr-item-title {
  display: block; color: var(--text);
  font-size: 0.95rem; font-weight: 500; margin-bottom: 3px;
}
.sr-item-excerpt {
  display: block; color: var(--dim); font-size: 0.8rem;
  line-height: 1.45; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-empty, .search-hint {
  padding: 24px 20px; color: var(--muted);
  font-size: 0.9rem; margin: 0;
}
.search-hint { color: var(--dim); }

/* ══════════════════════════════════════════════════════════
   TRADITIONAL REDESIGN LAYER
   Softer serif display type in sentence case, calmer motion,
   theme toggle and accessibility helpers. Kept as a late
   layer so the long-standing component rules above stay
   diff-friendly against main.
   ══════════════════════════════════════════════════════════ */

/* Sentence-case display headings (previously condensed uppercase) */
.hero-headline, .section-title, .auth-title, .members-hero h1,
.content h1, .content h2, .content h3, .form-main h1, .form-main h2,
.cal-month-title, .discipline-body h3, .t-body h4, .facility-card h4,
.join-card h4, .members-tile h3, .upcoming-body h3, .cal-event-body h4,
.block-cta h3, .mnl-feature-headline, .nl-paper-name, .session-card h4,
.latest-body h4, .lrd-header h4, .facilities-location h3,
.form-section-h, .session-date, .training-intro h1,
.mnl-spotlight-head h2, .mnl-brief-head, .doc-card h4,
.join-info-card h2, .join-info-card h4 {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* Serif display sizes — smaller than the condensed sans needed */
.hero-headline { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.08; }
.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; }
.members-hero h1, .content h1, .form-main h1, .training-intro h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.auth-title { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.cal-month-title { font-size: clamp(1.7rem, 4vw, 2.8rem); }
.nl-section-title { font-size: clamp(1.9rem, 4vw, 2.9rem) !important; }

/* Buttons & filter chips: sentence case, no hover lift/glow */
.btn-sess, .form button[type=submit], .be-btn, .type-filter a,
.mnl-tab, .discipline-filter a, .sidebar-toggle {
  text-transform: none;
  letter-spacing: 0.02em;
}
.form button[type=submit] { font-weight: 600; border-radius: 4px; }
.form button[type=submit]:hover { transform: none; box-shadow: none; background: var(--gold-2); }
.btn-sess { font-weight: 600; }
.btn-sess:hover:not(:disabled) { transform: none; }

/* Primary nav: sentence case, regular tracking */
.topnav a, .nav-dropdown-btn, .nav-dropdown-menu a {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.92rem;
}
.arrow, .tile-arrow { text-transform: none; letter-spacing: 0.02em; }

/* Card hovers: keep the border highlight, drop the lift */
.discipline-card:hover, .facility-card:hover, .members-tile:hover,
.doc-card:hover, .t-pill:hover, .media-card:hover, .be-picker-tile:hover,
body.admin .card:hover { transform: none; }
.join-card:hover { transform: none; }
.cal-event-item:hover { transform: none; box-shadow: none; }

/* Dark-theme-only bits */
:root[data-theme="dark"] .nl-paper-logo { filter: grayscale(1) invert(1); }

/* ── Theme toggle ─────────────────────────────────────── */
.theme-toggle {
  background: none; border: 1px solid var(--line); border-radius: 100px;
  color: var(--muted); cursor: pointer;
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .18s, border-color .18s;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Skip link (visible on keyboard focus) ────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--gold); color: var(--accent-contrast);
  padding: 10px 18px; border-radius: 0 0 4px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Global reduced-motion: stop all decorative animation ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Results panel: filterable / sortable data table ───────
   Introduced for the member Scores page (/members/scores).
   Named generically because the same toolbar + table shape is
   the obvious fit for the other member record lists (away
   matches, LRD detail) as they get the same treatment. */
.results-panel {
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--char); overflow: hidden; margin-bottom: 24px;
}
.results-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.results-head h2 {
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: var(--text);
}

.results-head-note { font-size: 0.78rem; color: var(--muted); }
/* The filter toolbar is the last thing in its own panel, so it must not
   carry the divider it needs when it sits above a table. */
.filters-panel .results-filters { border-bottom: 0; }
.filters-panel .results-head .link-btn { margin-left: auto; }

/* Export dropdown */
.export-menu { position: relative; margin-left: auto; }
.export-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 240px; padding: 6px;
  background: var(--char); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.export-menu-list button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 0; border-radius: 4px; background: none;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--text);
}
.export-menu-list button span {
  display: block; font-size: 0.74rem; font-weight: 400; color: var(--muted); margin-top: 2px;
}
.export-menu-list button:hover,
.export-menu-list button:focus-visible { background: var(--ink); color: var(--gold); }

/* Filter toolbar */
.results-filters {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  padding: 16px 20px; background: var(--ink); border-bottom: 1px solid var(--line);
}
.filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-group-wide { flex: 1 1 260px; }
.filter-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.results-filters select,
.results-filters input[type="search"] {
  font: inherit; font-size: 0.88rem; color: var(--text);
  background: var(--char); border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 10px; min-width: 150px; max-width: 100%;
}
.results-filters select:focus-visible,
.results-filters input[type="search"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.facet-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-top: 5px; }
.facet {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 0.85rem; color: var(--text); white-space: nowrap;
}
.facet input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; margin: 0; }

/* Row-count line + clear-filters */
.results-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 20px; font-size: 0.8rem; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.results-meta strong { color: var(--text); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--gold); text-decoration: underline;
}

/* Table */
.table-scroll { overflow-x: auto; }
/* table-layout: fixed + colgroup percentage widths below make the table's
   own columns always sum to 100% of its container — so it fits the member
   portal's content column at any size without needing the horizontal
   scroll .table-scroll provides as a defensive fallback only. Cells clip
   to a single line with an ellipsis (.cell-clip) rather than wrapping:
   wrapped cells produced ragged, uneven row heights that read as messy:
   a uniform single-line grid (matching the LRD Compliance table) reads as
   tidy, and the full value is still one hover away via the cell's title
   attribute. Smaller font (0.84rem vs the previous 0.9rem) buys enough
   width back that clipping rarely actually triggers on desktop. */
.data-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.84rem; }
.data-table th { padding: 0; background: var(--char); position: sticky; top: 0; z-index: 1; }
.data-table thead tr { border-bottom: 1px solid var(--line); }
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--ink); }
.data-table .num, .data-table th.num .sort-btn { text-align: right; justify-content: flex-end; }
.data-table td.num { white-space: nowrap; }
.cell-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }

/* Column widths — tuned so Date/Grade/Score (short, glanceable) stay
   compact and Match/Class (the longest real content) get the most room.
   Sums to 100% so the table never needs to grow past its container. */
.data-table col.col-date  { width: 11%; }
.data-table col.col-match { width: 27%; }
.data-table col.col-venue { width: 12%; }
.data-table col.col-stage { width: 10%; }
.data-table col.col-class { width: 21%; }
.data-table col.col-grade { width: 8%; }
.data-table col.col-score { width: 11%; }

.sort-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 9px 10px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.sort-btn:hover { color: var(--gold); }
.sort-btn.is-active { color: var(--text); }
.sort-arrow { font-size: 0.62rem; opacity: 0.45; }
.sort-btn.is-active .sort-arrow { opacity: 1; color: var(--gold); }

.cell-date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-muted { color: var(--muted); }
.cell-venue { color: var(--gold); }
.cell-score { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.cell-tag { font-size: 0.68rem; color: var(--dim); margin-left: 6px; }
.cell-empty { text-align: center; color: var(--muted); padding: 32px 16px; }

@media (max-width: 700px) {
  .results-head, .results-filters, .results-meta { padding-left: 14px; padding-right: 14px; }
  .results-filters { gap: 14px 16px; }
  .data-table { font-size: 0.78rem; }
  .data-table td { padding-left: 7px; padding-right: 7px; }
  .sort-btn { padding-left: 7px; padding-right: 7px; }
  .export-menu { margin-left: 0; }
}

/* ── Documents page (/members/documents) ────────────────────
   Jump nav to each category section, sort-by-title/date-added
   control, and per-row size/type/date metadata. */
.doc-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.doc-jump-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--char); color: var(--muted); text-decoration: none;
  font-size: 0.8rem; font-weight: 600; transition: border-color .15s, color .15s;
}
.doc-jump-link:hover, .doc-jump-link:focus-visible { border-color: var(--gold); color: var(--gold); }
.doc-jump-link span { color: var(--dim); font-weight: 400; }

.doc-sort { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.doc-sort-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
.doc-sort-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: none; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600;
}
.doc-sort-btn:hover { color: var(--gold); }
.doc-sort-btn.is-active { color: var(--gold); border-color: var(--gold); }
.doc-sort-arrow { font-size: 0.65rem; opacity: 0.6; }

.doc-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.doc-meta-item { font-size: 0.75rem; color: var(--dim); white-space: nowrap; }

/* Anchor targets land clear of the sticky topbar (~110px) */
.doc-section-anchor { scroll-margin-top: 130px; }

@media (max-width: 700px) {
  .doc-row { flex-wrap: wrap; row-gap: 8px; }
  .doc-row .doc-meta { width: 100%; padding-left: 0; }
}