/* ============================================================================
   UNIVERSAL SCHOOL FATHERS CLUB — design system "Seal & Parchment" (Direction 3)
   styles.css v6 · seal-led refresh 2026-10-06 (supersedes "Home-Court Cream" v1)

   Palette drawn from the school seal: parchment cream page, deep navy ink and
   bands, crest gold for rules, borders and accents. White sticky header so the
   seal sits on white, with a thin gold stripe beneath it.
   Mobile-first from 390px; fluid clamp() type scale.

   WCAG 2.1 contrast proof (node contrast-check.mjs, computed 2026-10-06,
   all pairs verified by script; see CONVENTIONS.md §9 for the full table):

     ink #0B1F3A on bg #F5EDD8 ................. 14.15:1  body
     ink on surface #FFFFFF .................... 16.52:1  body
     muted #4A5568 on bg .......................  6.45:1  secondary text
     accent #163763 on bg ...................... 10.22:1  links, headings, primary btn
     gold-text #7A5C0E on bg ...................  5.35:1  small gold labels (eyebrows)
     gold-deep #9C7B17 on bg ...................  3.42:1  LARGE text / UI strokes only
     gold #C9A227 on bg ........................  2.07:1  DECORATIVE rules/fills only
     gold on navy #0B1F3A ......................  6.83:1  rules + text on navy OK
     gold-bright #D8B444 on navy ...............  8.28:1  gold text on dark bands
     ink on gold (gold CTA labels) .............  6.83:1
     cta label #FBF7EC on accent ............... 11.14:1  button labels
     cream-muted #D6CCB4 on navy ............... 10.35:1  secondary text on dark

   HARD RULES ENCODED BELOW
   - --gold (#C9A227) on light registers: decorative rules, stripes, fills only.
     Small gold text on light uses --gold-text; large numerals / UI strokes use
     --gold-deep.
   - Gold buttons always carry navy (--ink) labels, never white.
   - One accent CTA per region (nav Join button, one primary button per band).
   - Every page: parchment → white cards → at least one full navy band →
     parchment; navy footer with gold top rule everywhere.
   - Tap targets >= 44px (nav links, buttons, chips, cards).
   - prefers-reduced-motion honored; :focus-visible everywhere; skip link.

   Sections: tokens → reset/base → type → utilities → header/nav → buttons →
   hero → ticker → stats → cards → programs → events → chips → feature band →
   join band → footer → placeholder → forms → 404 → print → reduced motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* color — "Seal & Parchment" (Direction 3) */
  --bg: #F5EDD8;            /* parchment cream page */
  --surface: #FFFFFF;
  --ink: #0B1F3A;           /* deep navy text (14.15:1 on bg) */
  --navy: #0B1F3A;          /* = ink; bands + footer */
  --muted: #4A5568;         /* 6.45:1 on bg */
  --accent: #163763;        /* royal navy: links, headings, primary buttons */
  --accent-deep: #0B1F3A;   /* hover / deep accents */
  --gold: #C9A227;          /* crest gold: rules, stripes, fills (decorative on light) */
  --gold-deep: #9C7B17;     /* large text / UI strokes on light (3.42:1) */
  --gold-text: #7A5C0E;     /* small gold labels on light (5.35:1) */
  --gold-bright: #D8B444;   /* gold text on navy (8.28:1) */
  --dark: #0B1F3A;          /* section-rhythm band + footer */
  --cta-label: #FBF7EC;
  --cream-muted: #D6CCB4;   /* secondary text on navy */
  --cream-deep: #EADFC3;    /* event date blocks, kind chips, hovers */
  --border: #E3D6B5;
  --border-strong: #C8B88E;

  /* type */
  --font-display: 'Anton', 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* fluid scale (mobile-first from 390px) */
  --step--1: clamp(0.8125rem, 0.78rem + 0.17vw, 0.875rem);
  --step-0:  clamp(1.125rem, 1.09rem + 0.16vw, 1.1875rem);
  --step-1:  clamp(1.3125rem, 1.2rem + 0.55vw, 1.5625rem);
  --step-2:  clamp(1.625rem, 1.38rem + 1.2vw, 2.25rem);
  --step-3:  clamp(2.125rem, 1.6rem + 2.6vw, 3.375rem);
  --step-4:  clamp(2.875rem, 1.9rem + 4.9vw, 5.25rem);

  /* rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --section-pad: clamp(3.25rem, 2.25rem + 4.5vw, 6rem);
  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 68rem;
  --wrap-narrow: 56rem;
  --shadow-lift: 0 12px 28px rgba(11, 31, 58, 0.14);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);   /* long soft ease-out for motion */
  --ring: 3px solid var(--accent);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);          /* >= 18px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }

ul[class],
ol[class] { list-style: none; padding: 0; }

a { color: var(--accent); text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection { background: var(--accent); color: var(--cta-label); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

h4, .h-condensed {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--step-1);
  line-height: 1.15;
}

p { text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 68ch;                    /* 65-75ch measure */
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--step--1);
  color: var(--gold-text);
}

.num {                                    /* numerals / dates / labels */
  font-family: var(--font-condensed);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Article / long-form typography (parenting field notes) */
.prose {
  font-size: var(--step-0);
  max-width: 68ch;
  overflow-wrap: anywhere;   /* citation URLs must never force horizontal overflow */
}
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.9em; }
.prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  border-left: 4px solid var(--gold);
  padding: 0.2em 0 0.2em 1.1em;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--accent-deep);
}
.prose .cite, .prose small {
  font-size: 0.82em;
  color: var(--muted);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--border-strong);
  margin-block: 2.2em;
}

/* --------------------------------------------------------------------------
   4. Layout + utilities
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }

.section { padding-block: var(--section-pad); }
.section--surface { background: var(--surface); }
.section--dark {
  background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C9A227' stroke-opacity='0.08' stroke-width='1'%3E%3Crect x='26' y='26' width='32' height='32'/%3E%3Crect x='26' y='26' width='32' height='32' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--bg);
}
.section--accent { background: var(--accent); color: var(--bg); border-top: 2px solid var(--gold); }

.section--dark a, .section--accent a { color: var(--gold-bright); }
.section--dark a:hover, .section--accent a:hover { color: var(--cta-label); }

.section-head { max-width: 46rem; margin-bottom: var(--space-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: var(--space-2); }
.section-head .lede { color: var(--muted); margin-top: var(--space-2); }
.section--dark .section-head .lede,
.section--accent .section-head .lede { color: var(--cream-muted); }
.section--dark .section-head .eyebrow,
.section--accent .section-head .eyebrow { color: var(--gold-bright); }

/* Thin-line 8-point star — inline SVG in markup, styled here (stroke only) */
.star {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  color: var(--gold);
  opacity: 0.9;
}
.section--dark .star,
.section--accent .star { color: var(--gold-bright); }
.star--ghost { opacity: 0.08; }         /* light-register texture usage */
.star--lg { width: 2.5rem; height: 2.5rem; }

/* Drum-stripe: double crest-gold rule (decorative divider). On navy bands it
   uses gold-bright for extra lift. */
.drum-stripe {
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--gold);
}
.section--accent .drum-stripe,
.drum-stripe--bright { color: var(--gold-bright); }

/* Reveal-on-scroll — see §22 "Cinematic motion" (v7). Content is NEVER hidden
   unless site.js has added html.js-motion (IntersectionObserver present and
   no reduced-motion preference). No JS = everything fully visible. */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 0.75rem;
  z-index: 100;
  background: var(--accent);
  color: var(--cta-label);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--cta-label); }

:focus-visible {
  outline: var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}
.ticker :focus-visible,
.section--dark :focus-visible,
.section--accent :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-bright);
}

/* --------------------------------------------------------------------------
   5. Site header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 2px solid var(--gold);       /* thin crest-gold stripe under the white bar */
  box-shadow: 0 6px 18px -12px rgba(11, 31, 58, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  padding-block: 0.25rem;
}
.brand__seal {
  height: 3rem;
  width: auto;               /* seal file is 512x512 — keep native ratio */
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__school {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--gold-text);
}
.brand__club {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.28rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.brand:hover .brand__club { color: var(--accent); }

.site-nav__list {
  display: none;                 /* mobile: shown as full-screen sheet via html.nav-open */
}

/* Mobile hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile sheet */
/* Open menu = dropdown panel hanging under the sticky header. The page
   stays visible and scrollable behind it (owner request): no inset:0, no
   scroll lock, tab bar stays usable. .site-header is the positioned
   ancestor (sticky), so top:100% lands just below the white bar. */
html.nav-open .site-nav {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  flex-direction: column;
  background: var(--bg);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 22px 40px -22px rgba(11, 31, 58, 0.45);
  max-height: 78dvh;
  overflow-y: auto;
  padding: 1rem 1.5rem 1.4rem;
}
html.nav-open .site-nav__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  gap: 0.1rem;
}
html.nav-open .site-nav__link {
  display: flex;
  align-items: center;
  min-height: 3rem;               /* 48px tap target */
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
html.nav-open .site-nav__link:hover { color: var(--accent); }
html.nav-open .site-nav__link[aria-current="page"] { color: var(--accent); }
html.nav-open .site-nav__link[aria-current="page"]::after {
  content: "";
  width: 0.6rem; height: 0.6rem;
  margin-left: auto;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);   /* small diamond marker */
}
html.nav-open .site-nav__cta { margin-top: var(--space-2); }
html.nav-open .site-nav__cta a, a.site-nav__cta { justify-content: center; }

@media (min-width: 880px) {
  .site-header__inner { min-height: 4.75rem; }
  .nav-toggle { display: none; }
  .site-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
  }
  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.65rem;
    font-family: var(--font-condensed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 1.02rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .site-nav__link:hover { color: var(--accent); background: var(--cream-deep); }
  .site-nav__link[aria-current="page"] {
    color: var(--accent);
    box-shadow: inset 0 -3px 0 var(--gold);
  }
  .site-nav__cta { margin-left: 0.6rem; }
}
/* Compact desktop nav: 10 items + CTA need tighter spacing until 1160px. */
@media (min-width: 880px) and (max-width: 1159px) {
  .site-nav__list { gap: 0.15rem 0.55rem; }
  .site-nav__link { font-size: 0.76rem; letter-spacing: 0.03em; padding: 0.4rem 0.1rem; }
}
@media (min-width: 1160px) {
  .site-nav__list { gap: 0.15rem 1.05rem; }
  .site-nav__link { font-size: 0.84rem; letter-spacing: 0.03em; padding: 0.4rem 0.15rem; }
}

/* --------------------------------------------------------------------------
   6. Buttons — one accent CTA per region
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7em 1.6em;
  border-radius: 999px;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1.06rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {                       /* THE one accent CTA per region: solid navy */
  background: var(--accent);
  color: var(--cta-label);            /* 11.14:1 */
  box-shadow: inset 0 -3px 0 var(--gold);
}
.btn--primary:hover {
  background: var(--accent-deep);
  color: var(--gold-bright);          /* 8.28:1 */
  box-shadow: inset 0 -3px 0 var(--gold), 0 8px 18px -8px rgba(11, 31, 58, 0.55);
}
.btn--ghost {                         /* secondary: gold outline, navy label */
  border: 2px solid var(--gold-deep); /* 3.42:1 UI stroke on parchment */
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--ghost-light {
  border: 2px solid var(--gold);
  color: var(--cta-label);
  background: transparent;
}
.btn--ghost-light:hover { background: rgba(201, 162, 39, 0.16); color: var(--cta-label); }
.btn--invert {                        /* gold fill — the one CTA on navy bands */
  background: var(--gold);
  color: var(--ink);                  /* 6.83:1 */
}
.btn--invert:hover { background: var(--gold-bright); color: var(--ink); }   /* 8.28:1 */
/* Band link colors (.section--dark a) must not leak into buttons */
.section--dark .btn--invert, .section--accent .btn--invert,
.section--dark .btn--invert:hover, .section--accent .btn--invert:hover { color: var(--ink); }
.section--dark .btn--ghost-light, .section--accent .btn--ghost-light,
.section--dark .btn--ghost-light:hover, .section--accent .btn--ghost-light:hover { color: var(--cta-label); }

/* Header Join CTA: crest-gold fill with navy label (mock), navy on hover */
.site-nav__cta.btn--primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: none;
}
.site-nav__cta.btn--primary:hover {
  background: var(--accent-deep);
  color: var(--gold-bright);
  box-shadow: none;
}
.btn--sm { min-height: 44px; padding: 0.5em 1.2em; font-size: 0.98rem; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--section-pad);
  background:
    radial-gradient(ellipse 70% 60% at 30% 0%, rgba(255, 252, 243, 0.85) 0%, rgba(255, 252, 243, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C9A227' stroke-opacity='0.06' stroke-width='1'%3E%3Crect x='26' y='26' width='32' height='32'/%3E%3Crect x='26' y='26' width='32' height='32' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-2);
  letter-spacing: 0.2em;
}
.hero__eyebrow::before {              /* thin gold lead-in rule */
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
}
.hero__title { color: var(--ink); }
.hero__title::after {                 /* gold divider flourish: rule · diamond · rule */
  content: "";
  display: block;
  width: 8.5rem;
  height: 12px;
  margin-top: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='12' viewBox='0 0 136 12'%3E%3Cpath d='M0 6H56M80 6H136' stroke='%23C9A227' stroke-width='2'/%3E%3Cpath d='M68 1l5 5-5 5-5-5z' fill='%23C9A227'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.section--dark .hero__title,
.section--accent .hero__title { color: var(--bg); }
.hero__lede { margin-top: var(--space-3); }

.hero__sub{
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.85;
}
.hero__sub a{
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.hero__cta a:not(.btn) {
  padding: 0.55rem 0;                 /* bare text link -> 44px+ tap target */
}
.hero__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px var(--surface), 0 0 0 7px var(--border-strong), var(--shadow-lift);
}
.hero__img { width: 100%; }
.hero__scrim {                       /* cream wash blending photo into the page */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 237, 216, 0) 60%, rgba(245, 237, 216, 0.85) 100%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------------------------------
   8. Scoreboard ticker — navy band, gold left accent, gold-bright digits
   -------------------------------------------------------------------------- */
.ticker {
  background: linear-gradient(90deg, var(--accent) 0%, var(--navy) 70%);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  color: var(--bg);
}
.ticker__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.75rem;
  padding-block: 1rem;
}
.ticker__label {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  color: var(--gold-bright);          /* 5.98:1 on accent, 8.28:1 on navy */
  flex: none;
}
.ticker__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--gold);   /* gold left accent on the Next Up line */
}
.ticker__line {
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
}
.ticker__when {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
  white-space: nowrap;
}
.ticker__count { display: flex; gap: 0.5rem; margin-left: auto; }
.ticker__count[hidden] { display: none !important; }
.count-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
  padding: 0.4rem 0.6rem 0.3rem;
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: rgba(11, 31, 58, 0.55);
}
.count-chip__num {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
}
.count-chip__label {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  color: var(--cream-muted);
  margin-top: 0.2rem;
}
.ticker__cal {
  flex: none;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--cta-label);
  text-decoration-color: var(--gold);
  padding-block: 0.65rem;             /* 24px line -> ~45px tap target */
}
.ticker__cal:hover { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   9. Stat band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-3);
}
@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat { border-top: 3px solid var(--gold); padding-top: var(--space-2); }
.stat__num {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.9rem + 2.5vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
}
.stats__note {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   10. Quick-link cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards { grid-template-columns: repeat(4, 1fr); } }
/* Officers roster (about.html): a <ul> of cards, five offices in one row on desktop */
.cards--officers { list-style: none; margin: 0; padding: 0; }
@media (min-width: 980px) { .cards--officers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .cards--officers { grid-template-columns: repeat(5, 1fr); } }
.cards--officers ~ .prose { margin-top: var(--space-3); }

.card {
  position: relative;
  isolation: isolate;                           /* keeps the ::after shadow layer local */
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: inset 0 3px 0 var(--gold);        /* crest-gold top accent */
  transition: transform 0.5s var(--ease-soft), border-color 0.5s ease;
}
.card::after {                                  /* lift shadow: fades via opacity, never animates box-shadow */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--ink);
}
.card:hover::after { opacity: 1; }
.card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--gold-text);
}
.card__kicker .star { width: 1rem; height: 1rem; }
.card__title { font-size: var(--step-1); }
.card__body { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  overflow-wrap: anywhere;            /* URL-style link text must not widen the grid track */
}

/* --------------------------------------------------------------------------
   11. Program blocks ("What we do")
   -------------------------------------------------------------------------- */
.programs { display: grid; gap: 0; }
.program {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-strong);
}
.program:first-child { border-top: 3px solid var(--gold); }
.program__num {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--gold-deep);            /* huge display numeral — large-text safe (3.42:1) */
}
.program__title { font-size: var(--step-2); margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.program__body { color: var(--ink); max-width: 68ch; }
.program__body p + p { margin-top: 0.8em; }
.program__body .cite { display: block; margin-top: 0.6rem; font-size: 0.85em; color: var(--muted); }
@media (min-width: 760px) {
  .program { grid-template-columns: 9rem 1fr; }
}

/* Program blocks + pending notes on dark/accent bands: the base styles assume
   a light section; on dark they must flip to cream/gold-bright (join.html
   how-to-join ships .programs inside .section--dark). */
.section--dark .program,
.section--accent .program { border-top-color: rgba(245, 237, 216, 0.22); }
.section--dark .program:first-child,
.section--accent .program:first-child { border-top-color: var(--gold-bright); }
.section--dark .program__num,
.section--accent .program__num { color: var(--gold-bright); }   /* 9.43:1 on dark */
.section--dark .program__title,
.section--accent .program__title { color: var(--bg); }          /* 16.6:1 on dark */
.section--dark .program__body,
.section--accent .program__body { color: var(--cream-muted); }  /* 9.40:1 on dark */
.section--dark .program__body strong,
.section--accent .program__body strong { color: var(--bg); }
.section--dark .program__body .cite,
.section--accent .program__body .cite { color: var(--cream-muted); }
.section--dark .placeholder-note,
.section--accent .placeholder-note {
  border-color: var(--gold-bright);
  background: rgba(245, 237, 216, 0.07);
  color: var(--bg);
}
.section--dark .placeholder-note strong,
.section--accent .placeholder-note strong { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   12. Event rows + next-events strip
   -------------------------------------------------------------------------- */
.events-list, .events-strip { display: grid; gap: 0; }

.event {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
/* display:grid above beats the UA [hidden] rule — restore hide for filters */
.event[hidden] { display: none !important; }
.event__date {
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);           /* gold left accent on date chips */
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 0.55rem 0.3rem 0.45rem;
}
.event__day {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.event__month {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.event__title { font-size: var(--step-1); line-height: 1.15; }
.event__meta {
  margin-top: 0.35rem;
  font-family: var(--font-condensed);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
}
.event__kind {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--accent);
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}
.event__flag {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--cta-label);
  background: var(--accent-deep);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}
.event__note { margin-top: 0.35rem; font-size: 0.9em; color: var(--muted); }

/* Past events: dimmed but visible AND AA-safe — muted color (7.07:1), lighter rule */
.event--past .event__title,
.event--past .event__meta { color: var(--muted); }
.event--past .event__day { color: var(--muted); }
.event--past .event__date { background: transparent; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); }
.event--past { border-bottom-color: var(--border); }

.events-more { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   13. Filter chips
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.98rem;
  color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { border-color: var(--gold-deep); color: var(--accent); }
.chip[aria-pressed="false"] {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--cta-label);
}
.chip[aria-pressed="true"]:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--cta-label);
}
.filter-status { margin-bottom: var(--space-2); }

/* Hide past rows when the list opts in (JS toggles .is-hide-past) */
.events-list.is-hide-past .event--past { display: none; }


/* --------------------------------------------------------------------------
   14. Dark feature band (Paradigm Parenting)
   -------------------------------------------------------------------------- */
.feature__grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .feature__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}
.feature__list {
  display: grid;
  gap: 0.65rem;
  margin-top: var(--space-3);
}
.feature__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.12rem;
  color: var(--bg);
}
.feature__item .star { width: 1rem; height: 1rem; }
.feature__teaser {
  background: rgba(245, 237, 216, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.feature__teaser-kicker {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  color: var(--gold-bright);
}
.feature__teaser-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--step-2);
  line-height: 1.08;
  margin-top: 0.5rem;
  color: var(--bg);
}
.feature__teaser p { color: var(--cream-muted); margin-top: 0.6rem; }
.feature__teaser .btn { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   15. Join band
   -------------------------------------------------------------------------- */
.join-band { text-align: center; }
.join-band .drum-stripe { width: min(100%, 30rem); margin: 0 auto var(--space-4); }
.join-band__title { color: var(--bg); max-width: 34rem; margin-inline: auto; overflow-wrap: anywhere; }
.join-band__meta {
  margin-top: var(--space-2);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  color: var(--gold-bright);
}
.join-band__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--dark);
  color: var(--cream-muted);
  border-top: 3px solid var(--gold);          /* crest-gold top rule */
  padding-block: var(--space-5) var(--space-3);
  font-size: 1rem;
}
.site-footer a { color: var(--bg); }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer__head {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--gold-bright);
  margin-bottom: 0.7rem;
}
.site-footer__dates { line-height: 1.9; }
.site-footer__list { display: grid; gap: 0.45rem; }
.site-footer__channel-note { font-size: 0.85em; margin-top: 0.5rem; }
.site-footer__legal {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(201, 162, 39, 0.3);
  display: grid;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.footer-independence { color: var(--bg); font-weight: 700; }

/* --------------------------------------------------------------------------
   17. Placeholder policy (visible, honest, never lorem ipsum)
   -------------------------------------------------------------------------- */
.placeholder-note {
  border: 2px dashed var(--gold);
  background: #FBF6E9;
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.placeholder-note strong {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-3); max-width: 34rem; }
.field { display: grid; gap: 0.35rem; }
.field__label {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--ink);
}
.field__input {
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.field__input:focus-visible { outline: var(--ring); outline-offset: 1px; }
.field__help { font-size: 0.85rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   19. 404 — scoreboard register
   -------------------------------------------------------------------------- */
.notfound { text-align: center; }
.notfound__code {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(6rem, 3rem + 16vw, 12rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.notfound__title { color: var(--bg); }
.notfound__lede { color: var(--cream-muted); margin-top: var(--space-2); }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   20. Print styles (articles print clean: chrome hidden, black on white)
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .ticker,
  .chips,
  .filter-status,
  .join-band,
  .skip-link,
  .hero__media,
  .btn,
  .cards { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding: 0; }
  .wrap, .wrap--narrow { width: 100%; }

  .prose, .prose p, .prose li { max-width: none; color: #000; }
  .prose h1, .prose h2, .prose h3 { color: #000; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 85%;
    word-break: break-all;
  }
  .prose blockquote { border-left-color: #666; color: #000; }
  .placeholder-note { border-color: #666; background: #fff; }
}

/* --------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   22. Cinematic motion (v9) — soft and slow, opacity/transform/clip only (no
   layout shift, no animated box-shadow on content). Every rule that hides
   content is gated on html.js-motion, which site.js adds ONLY when
   IntersectionObserver exists and the visitor has not asked for reduced
   motion; the media query is a second guard. Reveals play once: site.js adds
   .is-done after the first run, which drops the animation so a display toggle
   can never replay or flicker it. Depth hierarchy: media travels and settles
   MORE than copy (dolly feel), copy stays near-still (readability first).
   -------------------------------------------------------------------------- */
@keyframes motion-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-hero-rise {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Hero media "dolly settle": drifts up and de-scales into its resting frame,
   which is exactly scale(1) so the parallax state below takes over cleanly. */
@keyframes motion-hero-media {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(1.045); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* Gold divider flourish draws in left-to-right after the headline lands. */
@keyframes motion-rule-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -2% 0 0); }
}
/* Sweep: ~3.1s of travel inside an 18s cycle, then rests off-stage. */
@keyframes motion-sweep {
  0%   { transform: translate3d(-100%, 0, 0); opacity: 0; }
  3%   { opacity: 1; }
  14%  { opacity: 1; }
  17%  { transform: translate3d(250%, 0, 0); opacity: 0; }
  100% { transform: translate3d(250%, 0, 0); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Reveal-on-scroll: hidden only until the observer marks it in view (once). */
  .js-motion [data-reveal]:not(.is-in) { opacity: 0; }
  .js-motion [data-reveal].is-in:not(.is-done) {
    animation: motion-rise 1.05s var(--ease-soft) var(--d, 0s) backwards;
  }

  /* Hero entrance: one overlapping cascade (gaps widened for a silkier flow),
     then the media settles from a gentle push-in to its true frame. */
  .js-motion .hero .hero__copy.is-in { animation: none; }
  .js-motion .hero .hero__copy.is-in > * {
    animation: motion-hero-rise 1.15s var(--ease-soft) backwards;
  }
  .js-motion .hero .hero__copy.is-in > :nth-child(1) { animation-delay: 0.05s; }
  .js-motion .hero .hero__copy.is-in > :nth-child(2) { animation-delay: 0.13s; }
  .js-motion .hero .hero__copy.is-in > :nth-child(3) { animation-delay: 0.21s; }
  .js-motion .hero .hero__copy.is-in > :nth-child(n+4) { animation-delay: 0.29s; }
  .js-motion .hero .hero__copy.is-done > * { animation: none; }
  .js-motion .hero .hero__media.is-in:not(.is-done) {
    animation: motion-hero-media 1.5s var(--ease-soft) 0.18s backwards;
  }
  /* The headline's gold flourish draws once, after the title lands. */
  .js-motion .hero .hero__copy.is-in:not(.is-done) .hero__title::after {
    animation: motion-rule-draw 0.9s var(--ease-soft) 0.55s backwards;
  }

  /* Hero photo depth (desktop + fine pointer only; site.js adds .js-parallax
     and glides the transform with a lerp). scale(1.03) keeps the frame filled
     for the <=1.3% drift. */
  .js-parallax .hero .hero__img { transform: translate3d(0, 0, 0) scale(1.03); }

  /* Scoreboard ticker: a soft, feathered light drifts along just under the
     gold stripe; pauses while the strip is hovered or focused. Decorative. */
  .js-motion .ticker { position: relative; overflow: hidden; }
  .js-motion .ticker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(255, 244, 205, 0) 0%,
      rgba(255, 244, 205, 0.08) 20%,
      rgba(255, 244, 205, 0.24) 42%,
      rgba(255, 244, 205, 0.30) 50%,
      rgba(255, 244, 205, 0.24) 58%,
      rgba(255, 244, 205, 0.08) 80%,
      rgba(255, 244, 205, 0) 100%);
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    animation: motion-sweep 18s cubic-bezier(0.45, 0, 0.55, 1) 2.2s infinite;
    pointer-events: none;
  }
  .js-motion .ticker:hover::before,
  .js-motion .ticker:focus-within::before { animation-play-state: paused; }

  /* Keyboard parity for the soft card lift (link cards only). */
  a.card:focus-visible { transform: translateY(-2px); }
  a.card:focus-visible::after { opacity: 1; }
}

/* Header depth on scroll (site.js toggles .is-scrolled past 8px). A shadow
   state is not motion, so it applies regardless of the reduced-motion setting;
   only the fade is transitioned, inside the media query. */
.site-header.is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(11, 31, 58, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .site-header { transition: box-shadow 0.35s var(--ease-soft); }
}

/* Touch screens: no sticky hover lift after a tap. */
@media (hover: none) {
  .card:hover { transform: none; }
  .card:hover::after { opacity: 0; }
}

/* Print: always print everything, motion state ignored. */
@media print {
  .js-motion [data-reveal] { opacity: 1 !important; animation: none !important; }
  .js-parallax .hero .hero__img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   23. Mobile tab bar (app-style bottom nav). Shows below 880px — the same
   range where the header switches to the hamburger. Five primary sections;
   the full menu stays in the header sheet. Static links: works with no JS,
   nothing animates, active state is server-marked via aria-current.
   -------------------------------------------------------------------------- */
.tabbar { display: none; }
@media (max-width: 879px) {
  body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;                 /* under the header sheet (z-40), above content */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--navy);
    border-top: 2px solid var(--gold);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 3.5rem;          /* >= 44px tap target */
    padding: 0.4rem 0 0.45rem;
    color: var(--cream-muted);   /* 9.4:1 on navy */
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .tabbar__item svg { width: 1.3rem; height: 1.3rem; display: block; }
  .tabbar__item[aria-current="page"] { color: var(--gold-bright); }  /* 8.3:1 */
  .tabbar__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 18%;
    right: 18%;
    height: 3px;
    background: var(--gold-bright);
    border-radius: 0 0 3px 3px;
  }
  .tabbar__item:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: -2px;
  }
}
@media print {
  .tabbar { display: none !important; }
}

/* Copy button confirmation (donate page) */
.btn.is-copied { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.section--accent .btn.is-copied.btn--invert { background: var(--gold); color: var(--ink); }

/* Long unbreakable email in the closing band: one line on phones */
.join-band__title--sm {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  text-wrap: nowrap;
}

/* For the Kids page: monogram avatars, alumni photos, Kawthar embed frame */
.card__initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-bright);          /* 8.28:1 on navy */
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}
.card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 0.8rem;
}
.embed-frame {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.embed-frame iframe { width: 100%; border: 0; display: block; }

/* Kawthar feed tabs (kids page) */
.feed-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.feed-tab[aria-pressed="true"] { background: var(--navy); color: var(--gold-bright); border-color: var(--navy); }

/* Worth Watching — one-click video facades (youtube-embed-facade pattern).
   Zero YouTube bytes until the visitor clicks; muted autoplay + postMessage
   unmute so one click plays WITH sound (no red-button trap). */
.talks {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .talks { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.talk__title { font-size: var(--step-1); margin-top: 0.9rem; }
.talk__meta { color: var(--muted); margin-top: 0.35rem; font-size: var(--step--1); }
.facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy);
  cursor: pointer;
  padding: 0;
  border: 0;
}
.facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* crops hqdefault's 4:3 letterbox */
  display: block;
}
.facade::after {                  /* gentle scrim so the button reads on bright thumbs */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(11,31,58,0.12) 0%, rgba(11,31,58,0.34) 100%);
  pointer-events: none;
}
.facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(11, 31, 58, 0.82);
  color: var(--gold-bright);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.2rem;           /* optical centering of the triangle */
}
.facade:hover .facade-play,
.facade:focus-visible .facade-play { background: var(--gold); color: var(--navy); }
.facade:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.facade iframe { width: 100%; height: 100%; border: 0; display: block; }