/* ==========================================================================
   Landmark Baptist Church — Multi-Page Portfolio Rebuild
   Mobile-first · zero !important · Brand-rich design
   Colors derived from logo: Aqua teal (#61cadf), Deep teal (#028db4/#008fb3),
   Dark teal (#067a9a), Gold (#c9ad3b), Text (#0c2a33)
   ========================================================================== */

:root {
  --primary-blue: #008fb3;
  --primary-dark: #067a9a;
  --mid-blue: #2998ba;
  --light-blue: #61cadf;
  --pale-blue: #e8f6fa;
  --gold: #c9ad3b;
  --gold-light: #d4bc4f;
  --gold-pale: #e2d06a;
  --gold-dim: rgba(201,173,59,0.12);
  --cream: #fdf8f0;
  --dark-teal: #067a9a;
  --navy: #0c2a33;
  --navy-90: rgba(6,122,154,0.95);
  --text-color: #0c2a33;
  --text-muted: #4a6670;
  --white: #ffffff;
  --gray-50: #f7f9fb;
  --gray-100: #eef3f6;
  --gray-200: #dde7ee;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-600: #6b7280;
  --gray-800: #1a3a45;
  --nav-text: #0a4d5f;
  --brown: #736357;
  --font-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-heading: 'Raleway', system-ui, -apple-system, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-script: 'Great Vibes', cursive;
  --heading-color: #045a72;       /* deeper teal — WCAG AAA on white at body size */
  --heading-on-cream: #045a72;
  --heading-on-dark: #ffffff;     /* hero / footer */
  --fs-hero-title: clamp(2.4rem, 4vw + 0.4rem, 3.4rem);
  --fs-page-title: clamp(2rem, 3vw + 0.5rem, 2.85rem);
  --fs-section-h2: clamp(1.85rem, 2.6vw + 0.5rem, 2.5rem);
  --fs-card-title: clamp(1.3rem, 0.9vw + 0.95rem, 1.55rem);
  --fs-body-h3:    clamp(1.15rem, 0.7vw + 0.85rem, 1.35rem);
  --gold-on-dark:  #f0dc7a;       /* lighter than gold-pale for AA contrast on dark teal */
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
  --shadow-gold: 0 4px 20px rgba(201,173,59,0.3);
  --transition: 0.3s ease;
  --max-width: 1200px;
  --header-height: 65px;

  /* =========================================================================
     Visual Brand token system — additive type/space/radius ladder
     added run 69 (2026-05-23) under Graphic Design & Visual Brand lens.
     Type scale: 1.25 major-third ratio anchored at 16px body (Visual Designer
     Role 1, section B item 3). Existing hand-rolled font-size declarations
     (47 distinct values across 3753 lines) deliberately NOT rewritten —
     additive approach establishes the measured ladder the NEXT polish
     rotation snaps to without breaking values that currently render correctly.
     Space scale: canonical 4-px ladder (Role 1 section C item 1).
     Radius scale: 5 rungs respecting client's existing 10px / 16px rhythm
     (--radius / --radius-lg already defined above — retained).
     CLIENT BRAND CONSTRAINT (graphic-design SKILL.md Role 2 item 1 +
     run 68 next-rotation note): Landmark Baptist's palette + voice belongs
     to the church, NOT to the MattCreates property family — the
     cross-property coherence rule does NOT apply. Colors stay 100% client's;
     these mechanical ladder tokens carry no brand voice, just engineering rigor.
     --focus-halo uses client's --primary-blue (#008fb3) at 22% alpha so
     the global :focus-visible rule below is on-brand for THIS site.
     ========================================================================= */
  --rhythm: 4px;
  --text-xs: .75rem;       /* 12px */
  --text-sm: .875rem;      /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: 1.875rem;    /* 30px */
  --text-3xl: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-4xl: clamp(2rem, 4.5vw, 3rem);
  --text-display: clamp(2.5rem, 6.5vw, 5.125rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --focus-halo: rgba(0, 143, 179, 0.22);

  /* =========================================================================
     Canonical motion tokens — added run 79 (2026-05-23) under Motion & Video
     lens. Third Matt-owned property to receive the canonical block after run 77
     (MattCreates.com css/main.css) + run 78 (MattEbersole.com public/css/main.css).
     This closes the cross-property motion-language coherence gap that the Motion
     Director Role 4 check #1 calls out ("Same easing tokens across Matt-owned
     properties. Drift between sites = HIGH"). Token values match motion-video
     SKILL.md "Default Motion Tokens (Canonical)" block exactly so any rule
     authored against the SKILL pattern drops in without rework.

     CLIENT BRAND CONSTRAINT (run 69 Visual Brand pass established): Landmark
     Baptist's palette + voice belongs to the church, NOT the MattCreates
     property family. These motion tokens carry NO brand voice — they're
     mechanical engineering rigor (timing scale + easing curves). The church's
     calm-deliberate tone is preserved by using --ease-out-expo (decisive enter,
     gentle settle) as the default and reserving --ease-overshoot for genuine
     emphasis only. A church site should NOT bounce around — bouncy/spring
     motion contradicts the worship-space voice.

     Additive pattern matches runs 67 (MattCreates brand tokens), 68
     (MattEbersole brand tokens), 69 (this site's brand tokens), 77+78 (motion
     tokens on flagships). The pre-existing --transition: 0.3s ease token at
     line 53 is RETAINED — 80+ rules consume it correctly; do not touch.
     ========================================================================= */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);        /* canonical enter */
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);        /* canonical leave */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);           /* state toggles */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);   /* affirmation, sparing */
  --motion-fast: 150ms;        /* hover / focus / active state toggles */
  --motion-medium: 300ms;      /* element enter/exit, modal in/out */
  --motion-slow: 500ms;        /* page transitions, hero reveal */
  --motion-deliberate: 800ms;  /* large hero motion, story reveal */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem);
  line-height: 1.7;
  color: var(--text-color);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }
button { cursor: pointer; font-family: inherit; }

.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--dark-teal); color: var(--white);
  padding: 8px 16px; border-radius: var(--radius);
  z-index: 10000; font-size: 0.875rem;
}
.skip-link:focus { top: 8px; }

/* =========================================================================
   Global :focus-visible halo — added run 69 (2026-05-23) under
   Graphic Design & Visual Brand lens. WCAG 2.4.7 (focus visible) — provides
   a uniform keyboard-focus indicator for the bare DOM (links, buttons that
   don't carry their own :focus-visible override). Per-component focus rules
   already in the codebase (button :focus-visible at lines 380, 449, 1062,
   1139, 1173, 1216 etc.) use single-class selectors which win on specificity
   over this universal selector, so this rule is purely additive — it appears
   for elements that have NO custom focus styling. Halo via box-shadow (not
   outline-width) so it doesn't affect layout. Outline remains the precise
   keyboard-focus indicator; halo adds visual weight. --focus-halo token
   defined above on :root uses client's --primary-blue at 22% alpha.
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: var(--radius-sm);
}

/* =========================================================================
   .skip-link focus visibility upgrade — added run 69 (2026-05-23).
   The bypass-blocks affordance pre-fix had only "top: 8px;" — slid into
   view via position but had NO outline framing it. WCAG 2.4.1 (Bypass
   Blocks) + 2.4.7 (Focus Visible). The gold outline (--gold = #c9ad3b)
   provides high-contrast framing against the dark teal pill background
   (--dark-teal = #067a9a) — the gold/teal pairing IS the client's brand
   combination per the logo. Additive on .skip-link:focus AND uses
   :focus-visible for keyboard-only application.
   ========================================================================= */
.skip-link:focus,
.skip-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ==========================================================================
   PORTFOLIO FRAME — Matt's branding bar
   ========================================================================== */
.portfolio-frame {
  position: fixed; top: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(90deg, #034a5e 0%, var(--dark-teal) 100%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; z-index: 9999; font-size: 0.75rem;
  border-bottom: 2px solid var(--gold);
  gap: 12px; overflow: hidden;
}
.portfolio-frame__brand {
  color: var(--gold-pale); font-weight: 700; letter-spacing: 0.5px;
  font-family: var(--font-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.portfolio-frame__links { display: flex; gap: 12px; flex-shrink: 0; }
.portfolio-frame__links a {
  color: var(--white); font-weight: 600; text-decoration: none;
  padding: 2px 10px; border-radius: 50px; font-size: 0.7rem;
  transition: all var(--transition); letter-spacing: 0.3px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .portfolio-frame { padding: 0 10px; gap: 8px; }
  .portfolio-frame__brand { font-size: 0.65rem; letter-spacing: 0.2px; }
  .portfolio-frame__links { gap: 6px; }
  .portfolio-frame__links a { padding: 2px 8px; font-size: 0.62rem; letter-spacing: 0.2px; }
}
@media (max-width: 420px) {
  .portfolio-frame__brand { display: none; }
  .portfolio-frame { justify-content: center; }
}
.portfolio-frame__links a:first-child {
  border: 1px solid rgba(255,255,255,0.3);
}
.portfolio-frame__links a:first-child:hover {
  border-color: var(--gold); color: var(--gold);
}
.portfolio-frame__links a:last-child {
  background: var(--gold); color: var(--text-color);
}
.portfolio-frame__links a:last-child:hover {
  background: var(--gold-light);
}

/* ==========================================================================
   HEADER — Clean white with teal accents (matches live site + logo)
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.2) blur(4px);
  border-bottom: 3px solid var(--primary-blue);
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  display: flex; align-items: center; z-index: 9000;
  transition: height var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  height: 52px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.2) blur(8px);
}
.header-inner {
  width: 100%; max-width: var(--max-width); margin: 0 auto;
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.logo-link { display: inline-flex; align-items: center; }
.logo { height: 64px; width: auto; transition: height var(--transition), filter var(--transition); filter: brightness(1.2) drop-shadow(0 0 5px rgba(255,255,255,1)) drop-shadow(0 0 12px rgba(255,255,255,0.7)) drop-shadow(0 0 20px rgba(255,255,255,0.35)); }
.site-header.scrolled .logo { height: 51px; }

/* Desktop nav */
.nav-links { display: none; list-style: none; gap: 24px; align-items: center; }
.nav-links a {
  color: var(--text-color); font-family: var(--font-heading);
  font-weight: 600; font-size: 0.9rem; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: all var(--transition);
  letter-spacing: 0.3px;
}
.nav-links a:hover {
  color: var(--primary-blue); border-bottom-color: var(--primary-blue);
}
.nav-links a.active {
  color: var(--primary-blue); border-bottom-color: var(--primary-blue);
}

/* Dropdown */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px 0;
  min-width: 190px; opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  border-top: 3px solid var(--gold);
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible;
}
.nav-dropdown a {
  display: block; padding: 8px 20px; font-size: 0.85rem;
  color: var(--text-color); font-weight: 500;
}
.nav-dropdown a:hover { background: var(--pale-blue); color: var(--primary-blue); }
.nav-dropdown a.active { color: var(--primary-blue); font-weight: 700; }

/* Radio button — always visible, teal accent */
.radio-toggle {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-blue); border: 2px solid var(--mid-blue);
  color: var(--white); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0; margin-left: 12px;
  box-shadow: 0 0 12px rgba(0,143,179,0.3);
}
.radio-toggle:hover {
  background: var(--mid-blue); transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0,143,179,0.5);
}
/* Default play glyph + animated equalizer — JS toggles is-playing / is-paused. */
.radio-toggle__play {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.radio-toggle__eq {
  display: none;
  align-items: flex-end; justify-content: center;
  gap: 2px; height: 14px;
}
.radio-toggle__eq > span {
  display: block; width: 3px; background: currentColor; border-radius: 1px;
  transform-origin: bottom center;
  animation: eq-bounce 0.85s ease-in-out infinite alternate;
}
.radio-toggle__eq > span:nth-child(1) { height: 60%; animation-delay: 0s;    animation-duration: 0.7s; }
.radio-toggle__eq > span:nth-child(2) { height: 100%; animation-delay: 0.2s; animation-duration: 0.95s; }
.radio-toggle__eq > span:nth-child(3) { height: 45%; animation-delay: 0.4s;  animation-duration: 0.75s; }
.radio-toggle__eq > span:nth-child(4) { height: 80%; animation-delay: 0.1s;  animation-duration: 0.85s; }
@keyframes eq-bounce {
  0%   { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}
.radio-toggle.is-playing .radio-toggle__play,
.radio-toggle.is-paused  .radio-toggle__play { display: none; }
.radio-toggle.is-playing .radio-toggle__eq,
.radio-toggle.is-paused  .radio-toggle__eq  { display: inline-flex; }
/* Paused: freeze the bars, dim them, and overlay a mute slash. */
.radio-toggle.is-paused .radio-toggle__eq { opacity: 0.55; }
.radio-toggle.is-paused .radio-toggle__eq > span { animation-play-state: paused; }
.radio-toggle.is-paused::after {
  content: '';
  position: absolute; top: 50%; left: 18%; right: 18%;
  height: 2px; background: var(--white); border-radius: 2px;
  transform: translateY(-50%) rotate(-32deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  pointer-events: none;
}
/* Mobile mirror is hidden on desktop; desktop one is hidden on mobile (via media query). */
.radio-toggle--mobile { display: none; }

/* Mobile menu button */
.mobile-menu-btn {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; margin-left: 8px;
}
.mobile-menu-btn span {
  width: 24px; height: 2px; background: var(--text-color);
  transition: all var(--transition); border-radius: 2px;
}
.mobile-menu-btn.open span:nth-child(1),
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.open span:nth-child(2),
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3),
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed; top: calc(var(--header-height));
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  z-index: 8000; overflow-y: auto; padding: 12px 24px;
  transform: translateX(100%); transition: transform var(--transition), top var(--transition);
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  display: block; padding: 8px 0; font-size: 1.05rem;
  color: var(--text-color); font-weight: 600;
  border-bottom: 1px solid var(--gray-100);
  font-family: var(--font-heading);
  line-height: 1.3;
}
.mobile-nav a:hover { color: var(--primary-blue); }
.mobile-nav .sub-links { margin: 0; }
.mobile-nav .sub-links a {
  padding: 6px 0 6px 20px; font-size: 0.9rem; font-weight: 500;
  color: var(--text-muted);
}
.mobile-nav .sub-links a:hover { color: var(--primary-blue); }

/* ==========================================================================
   UNIFIED MEDIA PLAYER — One element, two visual modes (mini + full).
   The data-state attribute on #player drives layout and visibility.
   ========================================================================== */
.player {
  position: fixed; left: 0; right: 0;
  background: linear-gradient(180deg, #0e3340 0%, var(--navy) 100%);
  color: var(--white);
  z-index: 8500;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
}
.player audio { display: none; }
.player[data-state="hidden"] { display: none; }

/* ---------- Mini mode: compact bar below header ---------- */
.player[data-state="mini"] {
  top: calc(var(--header-height)); bottom: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px;
  border-bottom: 2px solid var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: player-slide-down 0.25s ease;
  transition: top var(--transition);
}
@keyframes player-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ---------- Full mode: fixed bottom bar with all controls ---------- */
.player[data-state="full"] {
  bottom: 0; top: auto;
  padding: 4px 20px 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "play info actions"
    "play scrub scrub";
  column-gap: 14px;
  row-gap: 0;
  align-items: center;
  animation: player-slide-up 0.35s ease;
}
@keyframes player-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.player[data-state="full"] .player__play          { grid-area: play; }
.player[data-state="full"] .player__info          { grid-area: info; min-width: 0; }
.player[data-state="full"] .player__scrubber-wrap { grid-area: scrub; display: block; }
.player[data-state="full"] .player__actions       { grid-area: actions; }

/* ---------- Per-mode visibility of action buttons ---------- */
.player[data-state="mini"] .player__action--prev,
.player[data-state="mini"] .player__action--next,
.player[data-state="mini"] .player__action--download,
.player[data-state="mini"] .player__action--share,
.player[data-state="mini"] .player__action--minimize {
  display: none;
}
.player[data-state="mini"] .player__time { display: none; }
.player[data-state="mini"] .player__info { flex: 1; min-width: 0; }
.player[data-state="mini"] .player__scrubber-wrap {
  display: none;
}
@media (min-width: 640px) {
  .player[data-state="mini"] .player__scrubber-wrap {
    display: block; flex: 0 1 220px; min-width: 120px;
  }
}
.player[data-state="full"] .player__action--expand { display: none; }

/* ---------- Play / pause button ---------- */
.player__play {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); border: none; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition);
  box-shadow: 0 4px 14px rgba(201,173,59,0.45);
}
.player__play:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.player__play:not(:disabled):hover {
  background: var(--gold-light); transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(201,173,59,0.6);
}
.player__play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(201,173,59,0.4);
}
.player[data-state="full"] .player__play { width: 42px; height: 42px; }
.player__play svg { width: 18px; height: 18px; }
.player[data-state="full"] .player__play svg { width: 20px; height: 20px; }

/* ---------- Title + time ---------- */
.player__info { min-width: 0; }
.player__title {
  margin: 0; font-weight: 700; font-size: 0.88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-heading); letter-spacing: 0.2px;
  color: var(--white); line-height: 1.15;
}
.player[data-state="full"] .player__title { font-size: 0.92rem; }
.player__time {
  margin: 0; font-size: 0.72rem; line-height: 1.2;
  color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums;
}

/* ---------- Scrubber ---------- */
.player__scrubber-wrap { padding: 0 2px; min-width: 0; }
.player__scrubber {
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.15);
  -webkit-appearance: none; appearance: none;
  outline: none; cursor: pointer;
  transition: height var(--transition);
}
.player__scrubber:hover { height: 6px; }
.player[data-state="mini"] .player__scrubber { height: 3px; }
.player[data-state="mini"] .player__scrubber:hover { height: 5px; }
.player__scrubber::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15);
}
.player__scrubber::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(201,173,59,0.5);
  transition: transform var(--transition);
}
.player__scrubber::-webkit-slider-thumb:hover { transform: scale(1.15); }
.player__scrubber::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15);
}
.player__scrubber::-moz-range-thumb {
  width: 12px; height: 12px; border: none;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(201,173,59,0.5);
}

/* ---------- Action buttons ---------- */
.player__actions {
  display: flex; gap: 0; flex-shrink: 0; align-items: center;
}
.player__action {
  background: none; border: none; color: rgba(255,255,255,0.7);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); cursor: pointer;
  padding: 0;
}
.player__action svg { width: 16px; height: 16px; }
.player__action:hover {
  color: var(--white); background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
.player__action:focus-visible {
  outline: none; color: var(--white);
  box-shadow: 0 0 0 3px rgba(201,173,59,0.4);
}

/* ==========================================================================
   HERO — Full-screen video background with strong branding
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--header-height) + 40px) 20px 60px;
  background-color: #0a4254;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(0);
  transition: opacity 2000ms var(--ease-in-out);
}
/* JS adds this class near the end of the video and removes it after the loop
   restarts, giving a fade-to-black → fade-back-in at the loop seam. */
.hero__video--fading { opacity: 0; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,122,154,0.55) 0%,
    rgba(6,122,154,0.50) 40%,
    rgba(6,122,154,0.72) 100%
  );
  z-index: 1;
}
.hero__content { max-width: 720px; position: relative; z-index: 2; }
.hero__title {
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: #ffffff;
  font-weight: 400; line-height: 1.3; margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.hero__lead {
  font-family: var(--font-heading);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4);
}
.hero__sub {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.9); margin-bottom: 36px;
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.3);
}
/* .btn-gold — Run 79 motion pass: transition:all → per-property
   (SKILL.md Role 1 check #5 HIGH), -3px hover lift tightened to -2px
   (Motion Director Role 4 check #4 — calm-tone-voice for a church site),
   and :active press state added (SKILL.md Role 3 Interactive State Standards
   — REQUIRED on every interactive element; zero :active states existed before
   this pass across all 97 :hover rules). Per-property list animates only the
   four properties that actually change on hover/press; --motion-fast (150ms)
   replaces the implicit 300ms (SKILL.md Role 1 check #8: hover >300ms = HIGH). */
.btn-gold {
  display: inline-block; background: var(--gold); color: var(--text-color);
  padding: 16px 36px; border-radius: 50px; font-weight: 800;
  font-size: 1rem; border: none;
  transition: transform var(--motion-fast) var(--ease-out-expo),
              background var(--motion-fast) var(--ease-out-expo),
              color var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
  text-transform: uppercase; letter-spacing: 1px;
  box-shadow: var(--shadow-gold);
  font-family: var(--font-heading);
}
.btn-gold:hover {
  background: var(--gold-light); color: var(--text-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(215,178,95,0.5);
}
.btn-gold:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: var(--motion-fast);
  box-shadow: 0 4px 16px rgba(215,178,95,0.45);
}

/* ==========================================================================
   SECTIONS — Alternating backgrounds with brand warmth
   ========================================================================== */
.section {
  padding: 80px 20px; position: relative;
}
.section--light { background: var(--white); }
.section--alt { background: var(--cream); }
.section--video { position: relative; overflow: hidden; min-height: 240px; display: flex; align-items: center; }
.section--video .section__video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.section--video .section__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,122,154,0.6) 0%,
    rgba(6,122,154,0.5) 50%,
    rgba(6,122,154,0.7) 100%
  );
  z-index: -1;
}
.section--video { color: var(--white); }
.section--video h1, .section--video h2 {
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
}

.container { max-width: var(--max-width); margin: 0 auto; }

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-section-h2);
  font-weight: 700; color: var(--heading-color); margin-bottom: 18px;
  text-align: center; position: relative; padding-bottom: 18px;
  letter-spacing: -0.005em; line-height: 1.15;
}
/* Gold underline accent on section headings */
h2::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 72px; height: 3px; background: var(--gold); border-radius: 2px;
}
/* Video sections invert the palette: white headings, no gold underline */
.section--video h1,
.section--video h2,
.section--video h3 {
  color: var(--heading-on-dark);
  font-family: var(--font-display); font-weight: 700;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}
.section--video h2::after { display: none; }

/* Default H3 — body subsection (privacy, contact panels, etc.).
   Cormorant Garamond, modest size, deep teal for AAA contrast on white. */
h3 {
  font-family: var(--font-display);
  font-size: var(--fs-body-h3);
  font-weight: 700; color: var(--heading-color);
  margin: 28px 0 12px; line-height: 1.3; letter-spacing: 0;
}
/* First h3 inside any container shouldn't get the top margin */
h3:first-child,
.card__body > h3:first-of-type,
.nav-card-body > h3:first-of-type,
.modal > h3:first-of-type { margin-top: 0; }

.section__intro {
  text-align: center; max-width: 700px; margin: 0 auto 48px;
  color: var(--text-muted); font-size: 1.05rem;
  line-height: 1.7;
}

/* ============================================================
   PAGE TITLE — H1 for in-content pages (no video hero).
   Used on: contact, give, privacy, missionaries, members.
   ============================================================ */
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: 700;
  text-align: center;
  margin: 0 auto 18px;
  color: var(--heading-color);
  letter-spacing: -0.005em;
  line-height: 1.15;
  position: relative;
  padding-bottom: 18px;
}
.page-title::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 72px; height: 3px; background: var(--gold); border-radius: 2px;
}
.page-title + .page-title__sub,
.page-title__sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0 auto 36px;
  max-width: 620px;
  line-height: 1.65;
}

/* ============================================================
   PAGE HERO — H1 for sub-pages that use a video hero section.
   Used on: events, locations, ministries, our-mission,
   our-pastor, staff, what-to-expect.
   The wrapping <section> is .section--video, so the hero gets
   white headings via the .section--video h1 rule above.
   ============================================================ */
.page-hero__inner {
  text-align: center;
  position: relative;
  z-index: 2;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero-title);
  font-weight: 700;
  color: var(--heading-on-dark);
  text-shadow: 0 3px 20px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.4);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
  line-height: 1.15;
  position: relative;
  padding-bottom: 18px;
}
.page-hero__title::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 72px; height: 3px; background: var(--gold); border-radius: 2px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.page-hero__sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  line-height: 1.65;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
/* Legacy .page-hero wrapper — kept for backwards-compat with any older markup. */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-height) + 60px) 20px 60px;
  min-height: 320px; display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero-title);
  font-weight: 700; color: var(--heading-on-dark);
  text-shadow: 0 3px 20px rgba(0,0,0,0.5), 0 1px 6px rgba(0,0,0,0.4);
  margin-bottom: 14px; letter-spacing: -0.005em; line-height: 1.15;
}
.page-hero p {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ==========================================================================
   CARDS — Warm, branded with gold border accents
   ========================================================================== */
.card-grid {
  display: grid; gap: 28px;
  grid-template-columns: 1fr;
}
.card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  border-bottom: 3px solid var(--gold);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card__img { width: 100%; height: 210px; object-fit: cover; }
.card__body { padding: 24px; }
.card__title {
  font-size: var(--fs-card-title); font-weight: 700; margin-bottom: 10px;
  color: var(--heading-color); font-family: var(--font-display);
  line-height: 1.25; letter-spacing: 0; position: relative; padding-bottom: 8px;
}
.card__title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; background: var(--gold); border-radius: 1px;
}
.card__text { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

/* ==========================================================================
   NAV CARDS — Index page discovery grid
   ========================================================================== */
.nav-card {
  display: block; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  color: inherit; border-bottom: 3px solid var(--gold);
}
.nav-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg); color: inherit;
}
.nav-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.nav-card-body { padding: 22px; }
.nav-card-body h3 {
  font-size: var(--fs-card-title); font-weight: 700; color: var(--heading-color);
  margin-bottom: 10px; font-family: var(--font-display);
  line-height: 1.2; position: relative; padding-bottom: 8px;
  letter-spacing: 0;
}
.nav-card-body h3::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; background: var(--gold); border-radius: 1px;
}
.nav-card-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }

/* ==========================================================================
   EXPECT POINTS — What to Expect page
   ========================================================================== */
.expect-card {
  background: var(--white);
  border-top: 4px solid var(--primary-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 8px 32px;
  max-width: 980px;
  margin: 0 auto;
}
.expect-point {
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-200);
  overflow: hidden;
}
.expect-point:last-child { border-bottom: none; }
.expect-point__img {
  float: right;
  width: 150px; height: 150px;
  margin: 4px 0 14px 24px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  shape-outside: inset(0 round var(--radius));
}
.expect-point__title {
  font-weight: 700; color: var(--heading-color); margin-bottom: 8px;
  font-family: var(--font-display); font-size: var(--fs-card-title);
  line-height: 1.25; letter-spacing: 0;
}
@media (max-width: 600px) {
  .expect-card { padding: 4px 18px; }
  .expect-point { padding: 22px 0; }
  .expect-point__img {
    width: 120px; height: 120px;
    margin: 2px 0 10px 16px;
  }
}
@media (max-width: 420px) {
  .expect-point__img {
    float: none;
    display: block;
    width: 100%; height: auto; max-height: 220px;
    margin: 0 0 14px;
    shape-outside: none;
  }
}

/* ==========================================================================
   PASTOR — Carousel + Bio
   ========================================================================== */
.pastor-carousel {
  max-width: 520px; margin: 0 auto 32px; position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--gold);
}
.pastor-carousel__track { display: flex; transition: transform 0.5s ease; }
.pastor-carousel__slide { min-width: 100%; }
.pastor-carousel__slide img { width: 100%; height: 400px; object-fit: cover; }
.pastor-carousel__dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 16px;
}
.pastor-carousel__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gray-300); border: none;
  transition: all var(--transition);
}
.pastor-carousel__dot.active {
  background: var(--gold); transform: scale(1.2);
}
.pastor-bio { max-width: 700px; margin: 0 auto; }
.pastor-bio h2 { text-align: left; }
.pastor-bio h2::after { left: 0; transform: none; }
.pastor-bio__extra { display: none; }
.pastor-bio__extra.show { display: block; }
.read-more-btn {
  background: none; border: none; color: var(--gold);
  font-weight: 700; font-size: 0.95rem; margin-top: 12px;
  padding: 0; text-decoration: underline;
  font-family: var(--font-heading);
}
.read-more-btn:hover { color: var(--gold-light); }

/* ==========================================================================
   STAFF
   ========================================================================== */
.staff-group {
  margin-bottom: 40px;
  padding: 28px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--gold);
}
.staff-group__title {
  font-size: var(--fs-card-title); color: var(--heading-color);
  margin: 0 0 14px; font-weight: 700;
  font-family: var(--font-display); letter-spacing: 0;
  line-height: 1.2; text-align: left;
  position: relative; padding-bottom: 8px;
}
.staff-group__title::after {
  content: ''; position: absolute; left: 0; bottom: 0; transform: none;
  width: 36px; height: 2px; background: var(--gold); border-radius: 1px;
}
.staff-list { list-style: none; }
.staff-list li {
  padding: 8px 0; display: flex; gap: 8px;
  border-bottom: 1px solid var(--gray-100);
}
.staff-list li:last-child { border-bottom: none; }
.staff-list__role { color: var(--text-muted); font-size: 0.9rem; }
.staff-list__name { font-weight: 700; color: var(--navy); }

/* ==========================================================================
   MISSIONARIES — JS-rendered cards
   ========================================================================== */
.missionary-card {
  display: flex; gap: 20px; padding: 24px;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); margin-bottom: 20px;
  border-bottom: 3px solid var(--gold);
}
.missionary-card__img {
  width: 120px; height: 120px; border-radius: var(--radius);
  object-fit: cover; flex-shrink: 0;
}
.missionary-card__name {
  font-weight: 700; color: var(--heading-color); font-size: var(--fs-card-title);
  font-family: var(--font-display); line-height: 1.2; letter-spacing: 0;
}
.missionary-card__country {
  color: var(--gold); font-size: 0.85rem; font-weight: 700; margin-bottom: 8px;
}
.missionary-card__desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 8px; }
.missionary-card__links a {
  font-size: 0.85rem; margin-right: 12px; font-weight: 700;
  color: var(--primary-blue);
}
.missionary-card__links a:hover { color: var(--gold); }

/* Supplemental card classes for JS-rendered missionaries */
.card__subtitle {
  color: var(--gold); font-size: 0.85rem; font-weight: 700; margin-bottom: 8px;
}
.card__links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.card__links a { font-size: 0.85rem; font-weight: 700; color: var(--primary-blue); }
.card__links a:hover { color: var(--gold); }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.event-card {
  display: flex; gap: 20px; padding: 24px;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); margin-bottom: 20px;
  border-left: 4px solid var(--gold);
  transition: transform var(--transition);
}
.event-card:hover { transform: translateX(4px); }
.event-card__img {
  width: 110px; height: 90px; border-radius: var(--radius);
  object-fit: cover; flex-shrink: 0;
}
.event-card__title { font-weight: 700; color: var(--heading-color); margin-bottom: 6px; font-family: var(--font-display); font-size: var(--fs-card-title); line-height: 1.25; letter-spacing: 0; }
.event-card__text { color: var(--text-muted); font-size: 0.9rem; }
.event-card__when { color: var(--navy); font-size: 0.92rem; font-weight: 600; margin-bottom: 2px; }
.public-events__status { color: var(--text-muted); font-size: 1rem; padding: 8px 0; }

/* ==========================================================================
   LOCATION
   ========================================================================== */
.location-content { text-align: center; }
.location-img {
  width: 100%; max-width: 560px; margin: 0 auto 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--gold);
}
.location-times { list-style: none; margin: 16px auto; max-width: 300px; text-align: left; }
.location-times li {
  padding: 8px 0; font-size: 0.95rem;
  border-bottom: 1px solid var(--gray-100);
}
.location-times li:last-child { border-bottom: none; }
.location-times strong { color: var(--navy); }
/* .btn-directions — Run 79 motion pass: same surgical pattern as .btn-gold.
   transition:all → 4-property list; -3px → -2px (calm-tone-voice for a church
   directions CTA, not a Black Friday "click me!" button); :active press state
   added with explicit primary-dark fill so the gradient settle reads on press. */
.btn-directions {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); padding: 14px 32px; border-radius: 50px;
  font-weight: 700; font-size: 0.95rem; margin-top: 20px;
  transition: transform var(--motion-fast) var(--ease-out-expo),
              background var(--motion-fast) var(--ease-out-expo),
              color var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}
.btn-directions:hover {
  transform: translateY(-2px); color: var(--white);
  box-shadow: 0 6px 24px rgba(0,143,179,0.35);
}
.btn-directions:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: var(--motion-fast);
  box-shadow: 0 3px 12px rgba(0,143,179,0.3);
}

/* ==========================================================================
   GIVE
   ========================================================================== */
.give-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 52px 40px; text-align: center;
  max-width: 600px; margin: 0 auto;
  border-top: 4px solid var(--gold);
}
.give-card h3 { color: var(--heading-color); margin-bottom: 16px; }
.give-card p { color: var(--text-muted); margin-bottom: 24px; }
/* .btn-give — Run 79 motion pass: highest-stakes CTA on the site (giving page
   = real money). transition:all → per-property + :active press state +
   tightened lift. The :active state is especially important here because a
   visitor giving online needs the page to feel responsive and grounded —
   a hover that bounces but no press feedback feels broken at exactly the
   wrong moment. */
.btn-give {
  display: inline-block; background: var(--gold); color: var(--navy);
  padding: 16px 40px; border-radius: 50px; font-weight: 800;
  transition: transform var(--motion-fast) var(--ease-out-expo),
              background var(--motion-fast) var(--ease-out-expo),
              color var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
  font-family: var(--font-heading);
  letter-spacing: 0.5px; box-shadow: var(--shadow-gold);
}
.btn-give:hover {
  background: var(--gold-light); color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(215,178,95,0.5);
}
.btn-give:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: var(--motion-fast);
  box-shadow: 0 4px 16px rgba(215,178,95,0.45);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 14px 18px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius); font-family: inherit; font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
/* .btn-submit — Run 79 motion pass: conversion-critical contact-form CTA.
   transition:all → per-property + :active press state. Hover lift here was
   already -2px (good — calm voice preserved). Press scale is .99 not .98
   because submit buttons are wider and .98 reads as a too-large jump on
   a wide element. Same logic that runs 77 + 78 applied to .submit-btn /
   .btn-link on the flagship sites. */
.btn-submit {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none;
  padding: 16px 32px; border-radius: 50px; font-weight: 700;
  font-size: 1rem;
  transition: transform var(--motion-fast) var(--ease-out-expo),
              background var(--motion-fast) var(--ease-out-expo),
              color var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
  align-self: flex-start;
  font-family: var(--font-heading); letter-spacing: 0.5px;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,143,179,0.35);
}
.btn-submit:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: var(--motion-fast);
  box-shadow: 0 3px 12px rgba(0,143,179,0.3);
}
.contact-info {
  background: var(--cream); padding: 32px; border-radius: var(--radius-lg);
  border-left: 4px solid var(--gold);
}
.contact-info h3 { margin-bottom: 12px; }
.contact-info p { margin-bottom: 8px; color: var(--text-muted); }
.social-links { display: flex; gap: 12px; margin-top: 16px; }
.social-links a {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary-blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  transition: all var(--transition);
}
.social-links a:hover { background: var(--primary-dark); color: var(--white); }
/* Footer social links on dark background */
.site-footer .social-links a {
  background: rgba(255,255,255,0.15); color: var(--white);
}
.site-footer .social-links a:hover { background: var(--white); color: var(--dark-teal); }

/* ==========================================================================
   MEMBERS — Gate + Tabs + Media Player + Directory + Prayer + Events
   ========================================================================== */
.members-gate {
  text-align: center; padding: 56px 32px 48px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary-blue);
  box-shadow: var(--shadow-lg);
  max-width: 480px; margin: 0 auto;
  position: relative;
}
.members-gate__prompt {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 320px;
}
.members-gate::before {
  content: '\1F510'; display: block;
  font-size: 2.2rem; margin-bottom: 16px;
  opacity: 0.85;
}
.members-gate__input {
  display: flex; gap: 10px; justify-content: center; align-items: stretch;
  margin-top: 28px; flex-wrap: wrap;
}
.members-gate__input input {
  padding: 13px 18px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); font-size: 1rem; width: 220px;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.members-gate__input input:focus {
  border-color: var(--primary-blue);
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.members-gate__input button {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none;
  padding: 13px 28px; border-radius: var(--radius); font-weight: 700;
  font-family: var(--font-heading); transition: all var(--transition);
  letter-spacing: 0.5px; text-transform: uppercase;
  font-size: 0.85rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,143,179,0.25);
}
.members-gate__input button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,143,179,0.35);
}
.members-gate__input button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.4);
}
.members-gate__error {
  color: #dc2626; margin-top: 14px;
  padding: 8px 14px;
  background: #fef2f2;
  border-radius: 6px;
  display: none; font-size: 0.85rem;
  font-weight: 600;
}

.members-content {
  display: none;
  background: var(--white);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary-blue);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 0;
}

/* Members page header row — H1 left, admin bar right */
.members-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin: 0 0 28px;
}
.members-header .page-title {
  text-align: left;
  margin: 0;
  padding-bottom: 14px;
  flex: 0 1 auto;
}
.members-header .page-title::after {
  left: 0;
  transform: none;
}

.members-tabs-wrapper {
  display: flex; align-items: stretch; justify-content: flex-start;
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--gray-200);
  position: relative;
}
.members-tabs {
  display: flex; gap: 2px;
  overflow-x: auto; padding: 0 8px;
  flex: 1;
  scrollbar-width: thin;
}
.members-tabs::-webkit-scrollbar { height: 4px; }
.members-tabs::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
.members-admin-bar {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.members-admin-login-btn,
.members-admin-logout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1.5px solid var(--primary-blue);
  border-radius: var(--radius); padding: 8px 14px;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  color: var(--primary-blue); transition: all var(--transition);
  font-family: var(--font-heading); letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,143,179,0.2);
}
.members-admin-login-btn > *,
.members-admin-logout-btn > * { pointer-events: none; }
.members-admin-login-btn:hover {
  background: var(--primary-blue); color: var(--white);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,143,179,0.25);
  border-color: var(--primary-blue);
}
.members-admin-login-btn:focus-visible,
.members-admin-logout-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.members-admin-logout-btn { border-color: #c0392b; color: #c0392b; }
.members-admin-logout-btn:hover {
  background: #c0392b; color: var(--white);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(192,57,43,0.25);
  border-color: #c0392b;
}
.members-admin-logout-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(192,57,43,0.25);
}
.members-admin-login-btn svg,
.members-admin-logout-btn svg { flex-shrink: 0; }
.members-tabs button {
  background: transparent; border: none; padding: 16px 22px 14px;
  font-weight: 600; color: var(--text-muted); font-size: 0.88rem;
  border-bottom: 3px solid transparent; transition: all var(--transition);
  white-space: nowrap; font-family: var(--font-heading);
  letter-spacing: 0.3px; position: relative;
  border-radius: 6px 6px 0 0;
}
.members-tabs button.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
  background: var(--white);
  font-weight: 700;
}
.members-tabs button:hover {
  color: var(--primary-blue);
  background: rgba(0,143,179,0.06);
}
.members-tabs button:focus-visible {
  outline: none;
  background: rgba(0,143,179,0.1);
  box-shadow: inset 0 0 0 2px rgba(0,143,179,0.3);
}

.tab-panel { display: none; padding: 24px; }
.tab-panel.active { display: block; }

/* The unified .player rules live up near the header; see UNIFIED MEDIA PLAYER. */

/* --- Sermon List --- */
.sermon-controls { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; }
.sermon-search {
  flex: 1; padding: 12px 18px; border: 2px solid var(--gray-200);
  border-radius: var(--radius); font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
  background: var(--white);
}
.sermon-search:focus {
  border-color: var(--primary-blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.sermon-list {
  list-style: none; max-height: 460px; overflow-y: auto;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white);
}
.sermon-list::-webkit-scrollbar { width: 6px; }
.sermon-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.sermon-list::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.sermon-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--gray-100);
  cursor: pointer; transition: all var(--transition);
  border-left: 3px solid transparent;
}
.sermon-item:last-child { border-bottom: none; }
.sermon-item:hover {
  background: var(--pale-blue);
  border-left-color: var(--primary-blue);
}
.sermon-item:focus-visible {
  outline: none;
  background: var(--pale-blue);
  box-shadow: inset 0 0 0 2px rgba(0,143,179,0.3);
}
.sermon-item__play-icon {
  color: var(--gray-400); flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.sermon-item:hover .sermon-item__play-icon {
  background: var(--primary-blue); color: var(--white);
}
.sermon-item__content { flex: 1; min-width: 0; }
.sermon-item__title {
  font-weight: 600; font-size: 0.92rem; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-color);
  font-family: var(--font-heading);
}
.sermon-item__meta {
  font-size: 0.78rem; color: var(--text-muted);
  display: block; margin-top: 3px;
  letter-spacing: 0.3px;
}
.sermon-item.playing {
  background: linear-gradient(90deg, var(--pale-blue) 0%, var(--white) 100%);
  border-left: 3px solid var(--primary-blue);
}
.sermon-item.playing .sermon-item__play-icon {
  background: var(--primary-blue); color: var(--white);
  box-shadow: 0 0 0 4px rgba(0,143,179,0.15);
}
.sermon-item.playing .sermon-item__title {
  color: var(--primary-blue); font-weight: 700;
}
.sermon-item--empty { padding: 20px; text-align: center; color: var(--text-muted); }

/* --- Directory --- */
.directory-controls {
  display: flex; gap: 10px; margin-bottom: 20px;
  flex-wrap: nowrap; align-items: center;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
}
.directory-controls input {
  flex: 1 1 auto; min-width: 0; padding: 10px 14px;
  height: 40px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
  font-family: inherit;
}
.directory-controls input:focus {
  border-color: var(--primary-blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.directory-controls select {
  padding: 10px 32px 10px 14px;
  height: 40px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius); font-size: 0.85rem;
  font-weight: 600; color: var(--text-color);
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23556570'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
  background-size: 12px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition);
}
.directory-controls select:focus {
  border-color: var(--primary-blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.directory-controls select:hover { border-color: var(--gray-300); }
.directory-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--white); border: 1.5px solid var(--primary-blue);
  padding: 0 14px; border-radius: var(--radius);
  height: 40px;
  font-size: 0.75rem;
  font-weight: 700; color: var(--primary-blue); cursor: pointer;
  transition: all var(--transition); font-family: var(--font-heading);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.directory-toggle-btn:hover {
  background: var(--primary-blue); color: var(--white);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,143,179,0.25);
}
.directory-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.directory-toggle-btn.active {
  background: var(--primary-blue); border-color: var(--primary-dark);
  color: var(--white); box-shadow: 0 2px 8px rgba(0,143,179,0.3);
}
.directory-toggle-btn svg { flex-shrink: 0; }

.directory-list {
  list-style: none;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .directory-list { grid-template-columns: repeat(2, 1fr); }
}
.directory-entry {
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--primary-blue);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.directory-entry:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  border-left-color: var(--gold);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  background: var(--white);
}
.directory-entry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.directory-entry__name {
  font-weight: 800; color: var(--navy); font-size: 1rem;
  margin-bottom: 6px; font-family: var(--font-heading);
  letter-spacing: 0.2px;
}
.directory-entry__details { font-size: 0.85rem; line-height: 1.55; }
.directory-entry__row { margin-bottom: 4px; color: var(--text-muted); }
.directory-entry__row a { color: var(--primary-blue); text-decoration: none; font-weight: 600; }
.directory-entry__row a:hover { text-decoration: underline; color: var(--primary-dark); }
.directory-entry__label { font-weight: 700; color: var(--text-color); margin-right: 4px; }
.directory-entry__children {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--gray-200);
  font-size: 0.8rem; color: var(--text-muted);
}
.directory-entry__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.directory-entry__admin {
  display: flex; gap: 4px; flex-shrink: 0;
}
/* Search-first directory: rows are anonymized "First L." chips; click reveals
   contact details in the family popup. */
.directory-entry--anon { padding: 0; display: flex; align-items: stretch; }
.directory-entry--anon .directory-entry__open {
  appearance: none;
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; gap: 12px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; width: 100%;
}
.directory-entry--anon .directory-entry__open:focus-visible {
  outline: none; box-shadow: inset 0 0 0 3px rgba(0,143,179,0.25);
  border-radius: var(--radius);
}
.directory-entry--anon .directory-entry__name { margin-bottom: 0; }
.directory-entry--anon .directory-entry__hint {
  font-size: 0.78rem; color: var(--text-muted); font-style: italic;
  white-space: nowrap;
}
.directory-entry--noresult {
  background: transparent; border: 0; border-left: 0; padding: 24px 4px;
  color: var(--text-muted); text-align: center; cursor: default; box-shadow: none;
}
.directory-entry--noresult:hover { transform: none; background: transparent; border: 0; box-shadow: none; }
.directory-empty {
  padding: 28px 18px; color: var(--text-muted); text-align: center;
  font-size: 0.95rem; line-height: 1.55;
  border: 1px dashed var(--gray-200); border-radius: var(--radius);
  background: rgba(0,0,0,0.015);
}
.directory-edit-btn, .directory-delete-btn {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  color: var(--text-muted);
}
.directory-edit-btn:hover {
  border-color: var(--primary-blue); color: var(--primary-blue);
  background: var(--pale-blue); transform: translateY(-1px);
}
.directory-delete-btn:hover {
  border-color: #c0392b; color: #c0392b;
  background: #fef2f2; transform: translateY(-1px);
}
.directory-edit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.2); }
.directory-delete-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(192,57,43,0.2); }
.directory-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none; border-radius: var(--radius);
  padding: 0 16px; height: 40px;
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-heading); letter-spacing: 0.4px;
  transition: all var(--transition);
  box-shadow: 0 2px 6px rgba(0,143,179,0.25);
  text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.directory-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,143,179,0.35);
}
.directory-add-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}

/* --- Birthday Calendar --- */
.directory-calendar {
  margin-top: 8px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.birthday-calendar-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 18px;
}
.birthday-calendar-nav button {
  background: var(--white); border: 1.5px solid var(--gray-200);
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--text-color);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.birthday-calendar-nav button:hover {
  border-color: var(--primary-blue); color: var(--primary-blue);
  background: var(--pale-blue); transform: scale(1.05);
}
.birthday-calendar-nav button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.birthday-calendar-nav span {
  font-weight: 800; font-size: 1.1rem; color: var(--navy);
  min-width: 170px; text-align: center;
  font-family: var(--font-heading); letter-spacing: 0.3px;
}
.birthday-calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-header {
  text-align: center; font-size: 0.72rem; font-weight: 800;
  color: var(--primary-blue); padding: 8px 4px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cal-day {
  min-height: 64px; padding: 5px 4px;
  border: 1px solid var(--gray-100);
  border-radius: 6px; font-size: 0.8rem; position: relative;
  overflow: hidden;
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cal-day.other-month { opacity: 0.4; background: var(--gray-50); }
.cal-day.today {
  border-color: var(--primary-blue); background: var(--pale-blue);
  box-shadow: 0 0 0 1px var(--primary-blue);
}
.cal-day.has-birthday {
  background: var(--gold-dim); border-color: var(--gold);
}
.cal-day__num {
  font-weight: 700; font-size: 0.72rem;
  color: var(--text-color); margin-bottom: 2px;
}
.cal-day.today .cal-day__num { color: var(--primary-dark); }
.cal-day__names { display: flex; flex-direction: column; gap: 1px; }
.cal-birthday {
  font-size: 0.62rem; color: var(--primary-dark); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 4px; border-radius: 3px;
  transition: background var(--transition);
  font-weight: 600;
}
.cal-birthday:hover { background: rgba(0,143,179,0.18); }
.cal-birthday small { color: var(--text-muted); font-weight: 400; }

/* --- Family Popup --- */
.family-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(6,42,51,0.6);
  z-index: 10001; display: none; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: modal-fade-in 0.2s ease;
}
.family-popup-overlay.open { display: flex; }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.family-popup {
  background: var(--white); border-radius: var(--radius-lg);
  max-width: 460px; width: 100%; padding: 28px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04);
  border-top: 4px solid var(--primary-blue);
  animation: modal-slide-up 0.25s ease;
}
@keyframes modal-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.family-popup__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.family-popup__header h3 {
  font-size: 1.15rem; font-weight: 800; color: var(--navy);
  font-family: var(--font-heading); letter-spacing: 0.2px;
}
.family-popup__close {
  background: var(--gray-50); border: none; font-size: 1.4rem; color: var(--gray-600);
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.family-popup__close:hover {
  color: var(--navy); background: var(--gray-100); transform: scale(1.05);
}
.family-popup__close:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
.family-popup__body { font-size: 0.9rem; }
.popup-row { margin-bottom: 10px; color: var(--text-muted); line-height: 1.55; }
.popup-row strong { color: var(--text-color); font-weight: 700; }
.popup-row a { color: var(--primary-blue); text-decoration: none; font-weight: 600; }
.popup-row a:hover { text-decoration: underline; color: var(--primary-dark); }

/* --- Prayer List --- */
.prayer-actions { display: flex; gap: 12px; margin-bottom: 20px; }
.prayer-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1.5px solid var(--primary-blue);
  padding: 10px 18px; border-radius: var(--radius);
  font-weight: 700; font-size: 0.78rem; color: var(--primary-blue);
  cursor: pointer; transition: all var(--transition);
  font-family: var(--font-heading);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.prayer-action-btn:hover {
  background: var(--primary-blue); color: var(--white);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,143,179,0.25);
}
.prayer-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.prayer-action-btn svg { flex-shrink: 0; }

.prayer-tabs {
  display: flex; gap: 4px; margin-bottom: 22px;
  border-bottom: 2px solid var(--gray-100);
  padding-bottom: 0;
}
.prayer-tab {
  background: transparent; border: none;
  padding: 10px 18px; margin-bottom: -2px;
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.4px; text-transform: uppercase;
  cursor: pointer; transition: color var(--transition), border-color var(--transition);
  border-bottom: 2px solid transparent;
}
.prayer-tab:hover { color: var(--primary-blue); }
.prayer-tab.is-active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}
.prayer-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
  border-radius: 4px;
}

.prayer-section { margin-bottom: 32px; }
.prayer-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-100);
  position: relative;
}
.prayer-section__header::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 40px; height: 2px; background: var(--gold);
}
.prayer-section__header h3 {
  font-size: 1.05rem; font-weight: 800; color: var(--navy);
  font-family: var(--font-heading); letter-spacing: 0.3px;
}
.prayer-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-blue); color: var(--white); border: none;
  padding: 7px 14px; border-radius: var(--radius); font-size: 0.75rem;
  font-weight: 700; cursor: pointer; transition: all var(--transition);
  font-family: var(--font-heading); letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,143,179,0.2);
}
.prayer-add-btn:hover {
  background: var(--primary-dark); transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,143,179,0.3);
}
.prayer-add-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}

.prayer-list { display: flex; flex-direction: column; gap: 10px; }
.prayer-item {
  padding: 16px 18px; border-left: 4px solid var(--gold);
  background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.prayer-item:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.prayer-item__text {
  flex: 1; font-size: 0.92rem; line-height: 1.6;
  color: var(--text-color); min-width: 0;
}
.prayer-item__actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--transition); }
.prayer-item:hover .prayer-item__actions { opacity: 1; }
.prayer-item__actions button {
  background: var(--white); border: 1px solid var(--gray-200); font-size: 0.85rem; color: var(--gray-600);
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.prayer-item__actions .prayer-edit-btn:hover {
  color: var(--primary-blue); border-color: var(--primary-blue); background: var(--pale-blue);
}
.prayer-item__actions .prayer-answer-btn:hover {
  color: #047857; border-color: #047857; background: #ecfdf5;
}
.prayer-item__actions .prayer-restore-btn:hover {
  color: var(--primary-blue); border-color: var(--primary-blue); background: var(--pale-blue);
}
.prayer-item__actions .prayer-delete-btn:hover {
  color: #dc2626; border-color: #dc2626; background: #fef2f2;
}
.prayer-item--answered {
  border-left-color: #047857;
  background: #f0fdf4;
}
.prayer-item--answered .prayer-item__text {
  color: var(--text-muted);
}
.prayer-item--answered .prayer-item__date {
  color: #047857; font-weight: 700;
}
.prayer-item__actions button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.2);
}
.prayer-item__date {
  width: 100%; font-size: 0.72rem; color: var(--text-muted);
  letter-spacing: 0.3px; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 8px;
}
.prayer-empty {
  color: var(--text-muted); font-style: italic; padding: 16px 0;
  text-align: center;
}
.loading-text { color: var(--text-muted); text-align: center; padding: 20px; }

/* --- Resources / Reading Room (bookstore-style library) --- */
.resources-grid { display: block; }

.library { display: block; }

.library__hero {
  text-align: center;
  padding: 8px 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--gray-100);
}
.library__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.library__heading {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.library__intro {
  margin: 0 auto;
  max-width: 58ch;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.library__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}
.library-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  font: inherit;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.library-filter:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  transform: translateY(-1px);
}
.library-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.library-filter.is-active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  border-color: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0,143,179,0.28);
}
.library-filter__label { line-height: 1; }
.library-filter__count {
  display: inline-block;
  min-width: 1.5em;
  padding: 2px 7px;
  background: rgba(12,42,51,0.08);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--navy);
}
.library-filter.is-active .library-filter__count {
  background: rgba(255,255,255,0.22);
  color: var(--white);
}

.library__active-tagline {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-muted);
  min-height: 1.2em;
}

.library__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* --- Card --- */
.library-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,42,51,0.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.library-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,143,179,0.3);
  box-shadow: 0 14px 32px rgba(12,42,51,0.14);
}

.library-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  overflow: hidden;
  text-decoration: none;
}
.library-card__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.library-card:hover .library-card__cover-img { transform: scale(1.04); }
.library-card__cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white);
  text-align: center;
}
.library-card__cover-fallback span {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.library-card__series {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.library-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
.library-card__category {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.library-card__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: 0.005em;
}
.library-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.25s ease;
}
.library-card__title a:hover { background-size: 100% 1px; }
.library-card__subtitle {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-muted);
}
.library-card__scripture {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  background: var(--pale-blue);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-dark);
}
.library-card__desc {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-color);
  flex: 1;
}

.library-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.library-card__read,
.library-card__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.library-card__read svg,
.library-card__download svg { flex-shrink: 0; }
.library-card__read {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(0,143,179,0.25);
}
.library-card__read:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,143,179,0.35);
}
.library-card__download {
  background: var(--white);
  color: var(--primary-dark);
  border-color: var(--gray-200);
}
.library-card__download:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: var(--pale-blue);
}
.library-card__read:focus-visible,
.library-card__download:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}

/* Category accent — thin stripe along the top of each card */
.library-card--foundations { border-top: 3px solid var(--gold); }
.library-card--bible-study { border-top: 3px solid var(--primary-blue); }
.library-card--doctrine { border-top: 3px solid var(--primary-dark); }
.library-card--christian-living { border-top: 3px solid #7a9e8a; }

.library-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
}

/* Tablet — keep auto-fill but tighten min-width */
@media (max-width: 900px) {
  .library__heading { font-size: 1.45rem; }
  .library__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
  }
}

/* Mobile — two columns, condensed copy */
@media (max-width: 600px) {
  .library__hero { padding: 4px 0 16px; margin: 0 0 16px; }
  .library__heading { font-size: 1.3rem; }
  .library__intro { font-size: 0.88rem; }
  .library__filters { justify-content: flex-start; gap: 6px; }
  .library-filter { padding: 7px 12px; font-size: 0.76rem; }
  .library-filter__count { font-size: 0.66rem; padding: 1px 6px; }
  .library__active-tagline { font-size: 0.84rem; margin-bottom: 16px; }
  .library__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .library-card__body { padding: 12px 13px 14px; }
  .library-card__category { font-size: 0.62rem; }
  .library-card__title { font-size: 0.9rem; }
  .library-card__subtitle { font-size: 0.74rem; margin-bottom: 6px; }
  .library-card__scripture { font-size: 0.66rem; padding: 2px 8px; }
  .library-card__desc {
    font-size: 0.78rem;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .library-card__actions { flex-direction: column; gap: 6px; }
  .library-card__read,
  .library-card__download {
    padding: 9px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }
  .library-card__series { top: 8px; right: 8px; padding: 3px 8px; font-size: 0.6rem; }
}

/* Very small phones (≤380px) — clamp subtitle/desc further */
@media (max-width: 380px) {
  .library-card__subtitle { display: none; }
  .library-card__desc { -webkit-line-clamp: 2; }
}

/* --- Events --- */
.events-actions { margin-bottom: 16px; }
.event-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none;
  padding: 11px 20px; border-radius: var(--radius); font-size: 0.82rem;
  font-weight: 700; cursor: pointer; transition: all var(--transition);
  font-family: var(--font-heading);
  letter-spacing: 0.3px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,143,179,0.25);
}
.event-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,143,179,0.35);
}
.event-add-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
/* Member events tab — overrides the generic .event-card (which has a flex layout) */
#members-events-list .event-card {
  display: block;
  padding: 18px 20px;
  border: 1.5px solid var(--gray-200);
  border-left: 4px solid var(--primary-blue);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 12px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
#members-events-list .event-card:hover {
  border-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.event-card__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.event-card__header h3 {
  font-size: 1.3rem; font-weight: 700; color: var(--heading-color);
  font-family: var(--font-display); line-height: 1.25; letter-spacing: 0.005em;
}
.event-card__actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--transition); }
.event-card:hover .event-card__actions { opacity: 1; }
.event-card__actions button {
  background: var(--white); border: 1px solid var(--gray-200); font-size: 0.85rem;
  color: var(--gray-600);
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.event-card__actions .event-edit-btn:hover {
  color: var(--primary-blue); border-color: var(--primary-blue); background: var(--pale-blue);
}
.event-card__actions .event-delete-btn:hover {
  color: #dc2626; border-color: #dc2626; background: #fef2f2;
}
.event-card__actions button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.2);
}
.event-card__date {
  display: inline-block;
  font-size: 0.78rem; color: var(--primary-blue); font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  font-family: var(--font-heading);
  background: var(--pale-blue);
  padding: 3px 10px; border-radius: 12px;
}
.event-card__location { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }
.event-card__desc {
  font-size: 0.92rem; color: var(--text-muted); margin-top: 10px;
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-200);
}

/* --- First-Visit Members Hint -------------------------------------------
   Floating "Members" label + curved arrow that pulses once per day, then
   bounces off-screen. Gated by localStorage in script.js. */
.members-hint {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  will-change: transform, opacity;
  animation:
    members-hint-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    members-hint-glow 1.6s ease-in-out 0.55s infinite alternate;
}
.members-hint__label {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  padding: 7px 22px 8px;
  border-radius: 999px;
  border: 2px solid var(--gold);
  box-shadow:
    0 0 18px rgba(201, 173, 59, 0.55),
    0 6px 18px rgba(6, 122, 154, 0.35);
}
.members-hint__arrow {
  width: 46px;
  height: 46px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(201, 173, 59, 0.7));
}
.members-hint.is-leaving {
  animation: members-hint-bounce-away 0.85s cubic-bezier(0.55, 0, 0.7, 0.2) forwards;
}
@keyframes members-hint-in {
  0%   { opacity: 0; transform: translate(-50%, 24px) scale(0.6); }
  60%  { opacity: 1; transform: translate(-50%, -6px) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes members-hint-glow {
  0%   { filter: drop-shadow(0 0 4px rgba(201, 173, 59, 0.35)); }
  100% { filter: drop-shadow(0 0 14px rgba(201, 173, 59, 0.9)); }
}
@keyframes members-hint-bounce-away {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
  20%  { opacity: 1; transform: translate(-50%, -36px) scale(1.1) rotate(-8deg); }
  45%  { opacity: 1; transform: translate(-50%, -12px) scale(1.04) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, 140vh) scale(0.55) rotate(22deg); }
}
/* Run 79 motion pass: this block previously LIVED INSIDE
   @media (prefers-reduced-motion: reduce) and added a 0.3s animation to
   .members-hint inside the reduce-motion query — semantically inverted (the
   reduce-motion query should reduce, never add, motion). The .members-hint
   slide animation is now defined unconditionally below; for users who prefer
   reduced motion, the canonical universal block at line ~2715 sets
   animation-duration: 0.01ms !important on every animation including this
   one. End state (visible) is preserved via animation-fill-mode: both. */
.members-hint { animation: members-hint-fade 0.3s ease-out both; }
.members-hint.is-leaving { animation: members-hint-fade-out 0.3s ease-out forwards; }
@keyframes members-hint-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes members-hint-fade-out { to { opacity: 0; } }

/* Members hint is only meaningful on mobile where the bottom nav exists.
   On desktop the arrow points at nothing — hide it entirely. */
@media (min-width: 768px) {
  .members-hint { display: none; }
}

/* --- Mobile Members Footer Nav --- */
.members-mobile-footer {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 2px solid var(--gray-200);
  z-index: 9000; padding: 6px 0 env(safe-area-inset-bottom, 6px);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}
.members-mobile-footer.show { display: flex; justify-content: space-around; }
.members-mobile-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 8px 10px; color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: color var(--transition); min-width: 0; flex: 1;
}
.members-mobile-tab svg { flex-shrink: 0; width: 22px; height: 22px; }
.members-mobile-tab.active { color: var(--primary-blue); }
.members-mobile-tab:hover { color: var(--primary-blue); }

/* Mobile padding for fixed footer */
@media (max-width: 768px) {
  .members-mobile-footer.show ~ .site-footer,
  body:has(.members-mobile-footer.show) main { padding-bottom: 78px; }
  /* Sit the unified player flush against the top of the mobile members
     footer. The footer's true height varies with safe-area-inset-bottom
     on notched devices, so calc against the same env() the footer uses. */
  body:has(.members-mobile-footer.show) .player[data-state="full"] {
    bottom: calc(60px + env(safe-area-inset-bottom, 6px));
  }
  .members-tabs { display: none; }
  .members-tabs-wrapper {
    display: none;
  }
  .members-header {
    gap: 12px;
    margin-bottom: 20px;
  }
  .members-header .page-title {
    padding-bottom: 10px;
  }
  .members-admin-login-btn span,
  .members-admin-logout-btn span { display: none; }
  .members-admin-login-btn,
  .members-admin-logout-btn { padding: 8px 10px; }
  .tab-panel { padding: 16px; }
  .player[data-state="full"] {
    padding: 3px 12px 3px;
    column-gap: 8px;
    row-gap: 0;
  }
  .player[data-state="full"] .player__action--download,
  .player[data-state="full"] .player__action--share {
    display: none;
  }
  .player[data-state="full"] .player__play { width: 38px; height: 38px; }
  .player__action { width: 30px; height: 30px; }
  .player__action svg { width: 15px; height: 15px; }
  .sermon-list { max-height: 320px; }
  .directory-controls { gap: 8px; padding: 10px; }
  .directory-toggle-btn span { display: none; }
  .directory-toggle-btn { padding: 0 10px; min-width: 40px; }
  .directory-add-btn { padding: 0 12px; font-size: 0.7rem; }
  .cal-day { min-height: 44px; }
  .cal-header { font-size: 0.65rem; padding: 4px 2px; }
  .cal-birthday { font-size: 0.6rem; }
  .prayer-item { padding: 14px; }
  .event-card { padding: 14px; }
  .members-gate { padding: 44px 22px 36px; }
  .members-gate__input input { width: 100%; }
  .members-gate__input button { width: 100%; }
}

/* Tightest mobile (≤480px) — wrap controls into a tidy two-row layout */
@media (max-width: 480px) {
  .directory-controls {
    flex-wrap: wrap; gap: 8px;
  }
  .directory-controls input { width: 100%; min-width: 0; flex: 1 1 100%; order: -1; }
  .directory-controls select { flex: 1 1 auto; }
  .directory-add-btn { flex: 1 1 100%; }
  .prayer-actions { flex-direction: column; align-items: stretch; }
  .prayer-action-btn { justify-content: center; }
  .modal { padding: 24px 18px; }
  .modal--form { padding: 28px 20px 22px; }
  .members-tabs button { padding: 14px 14px 12px; font-size: 0.82rem; }
  .members-mobile-tab { font-size: 0.68rem; padding: 8px 6px; }
  .family-popup { padding: 22px 20px; }
}

/* ==========================================================================
   MISSION PAGE — Cards + Modals
   ========================================================================== */
.mission-cards { display: grid; gap: 28px; grid-template-columns: 1fr; }
.mission-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 36px; text-align: center;
  border-top: 4px solid var(--gold);
  transition: transform var(--transition);
}
.mission-card:hover { transform: translateY(-4px); }
.mission-card__title {
  font-weight: 700; font-size: var(--fs-card-title); color: var(--heading-color);
  margin-bottom: 14px; font-family: var(--font-display);
  line-height: 1.2; letter-spacing: 0;
  position: relative; padding-bottom: 10px;
}
.mission-card__title::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 36px; height: 2px; background: var(--gold); border-radius: 1px;
}
.mission-card__text {
  color: var(--text-muted); font-size: 0.95rem; margin-bottom: 24px; line-height: 1.7;
}
.mission-card__btn {
  display: inline-block; background: none;
  border: 2px solid var(--gold); color: var(--gold);
  padding: 10px 24px; border-radius: 50px; font-weight: 700;
  font-size: 0.9rem; cursor: pointer;
  transition: all var(--transition); font-family: var(--font-heading);
}
.mission-card__btn:hover {
  background: var(--gold); color: var(--navy);
}

/* ==========================================================================
   FOOTER — Dark teal (from logo's deeper color)
   ========================================================================== */
.site-footer {
  background: var(--dark-teal);
  color: rgba(255,255,255,0.9);
  padding: 44px 20px 18px;
}
.footer-grid {
  display: grid; gap: 32px; grid-template-columns: 1fr;
  max-width: var(--max-width); margin: 0 auto;
}
.footer-identity { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer h3 {
  color: var(--heading-on-dark); font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700; margin-bottom: 12px;
  letter-spacing: 0.005em; line-height: 1.2;
  padding-bottom: 8px; position: relative;
}
.site-footer h3::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 36px; height: 2px;
  background: var(--gold-on-dark); border-radius: 1px;
}
.site-footer h3:not(:first-child) { margin-top: 18px; }
.site-footer a { color: rgba(255,255,255,0.75); transition: color var(--transition); }
.site-footer a:hover { color: var(--white); }
.footer-logo {
  /* Image natural size is 463x163; force CSS to honor that ratio
     so the HTML width/height attrs don't distort it. */
  height: 56px;
  width: auto;
  aspect-ratio: 463 / 163;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}
.footer-contact p { margin-bottom: 4px; font-size: 0.9rem; line-height: 1.5; }
.footer-links { list-style: none; padding-left: 0; margin: 0; }
.footer-links li { padding: 3px 0; }
.footer-links a { font-size: 0.9rem; }
.footer-bottom {
  text-align: center; padding-top: 16px; margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
  max-width: var(--max-width); margin-left: auto; margin-right: auto;
}
/* Footer "Service Times" list — override the verbose inline line-height */
.footer-identity ul { line-height: 1.6 !important; }
.footer-identity ul li { padding: 2px 0; }
.social-links { display: flex; gap: 10px; }

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6,42,51,0.65);
  z-index: 10000; display: none; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.modal-overlay.open {
  display: flex;
  animation: modal-fade-in 0.2s ease;
}
.modal {
  background: var(--white); border-radius: var(--radius-lg);
  max-width: 700px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 44px; position: relative;
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04);
  animation: modal-slide-up 0.25s ease;
}
.modal__close {
  position: absolute; top: 12px; right: 12px;
  background: var(--gray-50); border: none; font-size: 1.4rem; color: var(--gray-600);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1;
}
.modal__close:hover {
  color: var(--navy);
  background: var(--gray-100);
  transform: scale(1.05);
}
.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
.modal h3 {
  margin-bottom: 16px; color: var(--heading-color);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-card-title); line-height: 1.2;
}
.modal p { margin-bottom: 12px; color: var(--text-muted); line-height: 1.7; }

/* Form Modals — admin PIN, event, directory, confirm */
.modal--form {
  max-width: 500px; padding: 36px 32px 28px;
  border-top: 4px solid var(--primary-blue);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04);
}
.modal--confirm {
  max-width: 400px; padding: 32px 28px 24px;
  border-top-color: #dc2626;
}
.modal--form h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title); font-weight: 700;
  margin-bottom: 6px; color: var(--heading-color);
  letter-spacing: 0;
}
.modal--form > p {
  font-size: 0.9rem; margin-bottom: 22px;
  color: var(--text-muted);
  line-height: 1.55;
}
.modal--form .confirm-message {
  color: var(--text-color);
  font-size: 0.95rem;
  margin-bottom: 22px;
  line-height: 1.6;
}
.modal-form__group {
  margin-bottom: 16px;
  display: flex; flex-direction: column;
}
.modal-form__group label {
  font-size: 0.82rem; font-weight: 700;
  color: var(--navy); margin-bottom: 6px;
  font-family: var(--font-heading);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.modal-form__required { color: #dc2626; margin-left: 2px; }
.modal-form__group input,
.modal-form__group textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-color);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.modal-form__group input::placeholder,
.modal-form__group textarea::placeholder {
  color: var(--gray-400);
}
.modal-form__group input:hover,
.modal-form__group textarea:hover { border-color: var(--gray-300); }
.modal-form__group input:focus,
.modal-form__group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.modal-form__group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.modal-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.modal-form__hint { font-size: 0.8rem; color: var(--gray-600, #6b7280); margin: 4px 0 0; }
.modal-form__error {
  color: #dc2626; font-size: 0.85rem;
  margin: 4px 0 14px;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 6px;
  border-left: 3px solid #dc2626;
  display: none;
  font-weight: 600;
}
.modal-form__error.show { display: block; }
.modal-form__actions {
  display: flex; justify-content: flex-end;
  gap: 10px; margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
/* .btn-modal — Run 79 motion pass: admin PIN / event / directory / confirm
   modals. transition:all → per-property + :active press states across all
   three variants (--primary, --secondary, --danger). The :active states matter
   especially on .btn-modal--danger (irreversible destructive action — visitor
   needs tactile confirmation the press registered before the destructive
   request fires). Same surgical pattern applied to the four main CTAs above
   so the entire site's interactive feedback layer is now consistent. */
.btn-modal {
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.85rem;
  padding: 11px 22px;
  border: none; border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-out-expo),
              background var(--motion-fast) var(--ease-out-expo),
              border-color var(--motion-fast) var(--ease-out-expo),
              color var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.btn-modal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
.btn-modal--primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(0,143,179,0.25);
}
.btn-modal--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,143,179,0.35);
}
.btn-modal--primary:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--motion-fast);
  box-shadow: 0 1px 4px rgba(0,143,179,0.2);
}
.btn-modal--secondary {
  background: var(--white); color: var(--navy);
  border: 1.5px solid var(--gray-200);
}
.btn-modal--secondary:hover {
  background: var(--gray-50); border-color: var(--gray-300);
}
.btn-modal--secondary:active {
  background: var(--gray-100); border-color: var(--gray-400);
  transform: scale(0.98);
  transition-duration: var(--motion-fast);
}
.btn-modal--danger {
  background: #dc2626; color: var(--white);
  box-shadow: 0 2px 6px rgba(220,38,38,0.25);
}
.btn-modal--danger:hover {
  background: #b91c1c; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(220,38,38,0.35);
}
.btn-modal--danger:active {
  background: #991b1b; transform: translateY(0) scale(0.98);
  transition-duration: var(--motion-fast);
  box-shadow: 0 1px 4px rgba(220,38,38,0.2);
}
.btn-modal--danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.3);
}

/* Inline prayer add/edit form (not overlay) */
.prayer-inline-form {
  background: var(--cream);
  border: 2px solid var(--primary-blue);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.prayer-inline-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 10px 12px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-color);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.prayer-inline-form textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.prayer-inline-form__actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

@media (max-width: 540px) {
  .modal--form { padding: 24px 20px; }
  .modal-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* Accordion */
.accordion { margin-top: 24px; }
.accordion__item {
  border: 2px solid var(--gray-200); border-radius: var(--radius);
  margin-bottom: 8px; overflow: hidden;
  transition: border-color var(--transition);
}
.accordion__item.open { border-color: var(--gold); }
.accordion__header {
  width: 100%; padding: 18px 22px;
  background: var(--cream); border: none; text-align: left;
  font-weight: 800; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; color: var(--navy); font-family: var(--font-heading);
}
.accordion__header::after { content: '+'; font-size: 1.2rem; color: var(--gold); font-weight: 700; }
.accordion__item.open .accordion__header::after { content: '\2212'; }
.accordion__item.open .accordion__header { background: var(--gold-dim); }
.accordion__body {
  padding: 0 22px; max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion__item.open .accordion__body { max-height: 2000px; padding: 22px; }
.accordion__body ul { list-style: disc; padding-left: 20px; }
.accordion__body li { margin-bottom: 12px; font-size: 0.9rem; line-height: 1.6; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  border: none; font-size: 1.2rem; font-weight: 700; display: none;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold); transition: all var(--transition); z-index: 5000;
}
.back-to-top.visible { display: flex; }
.back-to-top:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(215,178,95,0.5);
}

/* ==========================================================================
   FADE-IN ANIMATION
   ========================================================================== */
/* Cards are visible by default. JS adds .will-animate to opt-in to scroll animation. */
.fadein.will-animate {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  animation: fadein-fallback 0.6s ease 3s forwards;
}
.fadein.visible { opacity: 1; transform: translateY(0); animation: none; }

@keyframes fadein-fallback {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion canonical block — Run 79 motion pass: hardened with
   !important per motion-video SKILL.md "Default Motion Tokens (Canonical)"
   block. Without !important the universal *, *::before, *::after rule loses
   on specificity to every class-selector transition declaration in this file
   (42 of them as of pre-fix audit), which meant the reduce-motion preference
   was being silently ignored on every CTA, card hover, modal animation, and
   form input transition. CRITICAL accessibility fix — vestibular-disorder
   users got the full motion firehose anyway. Also added animation-iteration-count
   so infinite animations stop after one cycle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fadein.will-animate { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 639px) {
  /* Mobile footer: Identity + Connect stack in left column; Quick Links
     occupies the right column spanning both rows. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 24px;
  }
  .footer-identity {
    grid-column: 1;
    grid-row: 1;
  }
  .footer-grid > div:has(.footer-links) {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: left;
  }
  .footer-grid > div:has(.social-links) {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
  /* Tighten footer h3 spacing on mobile so paired columns align */
  .site-footer h3:not(:first-child) { margin-top: 0; }
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mission-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .mobile-menu-btn { display: none; }
  .section { padding: 100px 40px; }
  .pastor-carousel__slide img { height: 480px; }
  .mission-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile header — small play (left), centered logo, hamburger (right) */
@media (max-width: 767px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
  }
  .radio-toggle--mobile {
    display: flex;
    width: 32px; height: 32px;
    font-size: 0.75rem;
    margin: 0; padding: 0;
    grid-column: 1;
    justify-self: start;
    box-shadow: 0 0 8px rgba(0,143,179,0.25);
  }
  .radio-toggle--desktop { display: none; }
  .logo-link {
    grid-column: 2;
    justify-self: center;
    justify-content: center;
  }
  .logo { height: 56px; }
  .site-header.scrolled .logo { height: 45px; }
  .mobile-menu-btn {
    grid-column: 3;
    justify-self: end;
    margin: 0;
  }
  /* The nav is hidden on mobile (mobile-nav drawer is used instead),
     but reserve no space for it in the header. */
  nav[aria-label="Primary Navigation"] { display: none; }
}

@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .missionary-card__img { width: 150px; height: 150px; }
}

/* ==========================================================================
   GLOBAL FOCUS & MICRO-INTERACTION POLISH
   Consistent keyboard-focus treatment across interactive elements.
   ========================================================================== */
a:focus-visible,
button:focus-visible {
  outline: none;
}
.btn-gold:focus-visible {
  box-shadow: 0 0 0 4px rgba(201,173,59,0.35), var(--shadow-gold);
}
.btn-give:focus-visible {
  box-shadow: 0 0 0 4px rgba(201,173,59,0.35), var(--shadow-gold);
}
.btn-directions:focus-visible,
.btn-submit:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
.nav-links a:focus-visible {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,143,179,0.2);
}
.read-more-btn:focus-visible,
.mission-card__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(201,173,59,0.35);
}
.radio-toggle:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,143,179,0.35), 0 0 12px rgba(0,143,179,0.3);
}
.back-to-top:focus-visible {
  box-shadow: 0 0 0 4px rgba(201,173,59,0.4), var(--shadow-gold);
}

/* Selection color */
::selection {
  background: rgba(0,143,179,0.2);
  color: var(--navy);
}

/* Scrollbar styling for tab panels and lists */
.tab-panel::-webkit-scrollbar { width: 8px; }
.tab-panel::-webkit-scrollbar-thumb {
  background: var(--gray-300); border-radius: 4px;
}
.tab-panel::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ==========================================================================
   PRINT STYLES — Directory print uses window.print() directly,
   so optimize the on-page directory + members content for print.
   ========================================================================== */
@media print {
  /* Hide chrome that doesn't belong on paper */
  .site-header,
  .mobile-nav,
  .player,
  .site-footer,
  .back-to-top,
  .members-mobile-footer,
  .members-tabs-wrapper,
  .members-gate,
  .modal-overlay,
  .family-popup-overlay,
  .prayer-actions,
  .prayer-tabs,
  .directory-controls,
  .events-actions,
  .directory-entry__admin,
  .prayer-item__actions,
  .event-card__actions,
  .skip-link {
    display: none;
  }

  /* Show only the active panel content cleanly */
  body, main {
    background: #fff;
    color: #000;
    padding: 0;
    margin: 0;
  }
  .section {
    padding: 0;
    background: #fff;
  }
  .members-content {
    display: block;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .tab-panel {
    display: block;
    padding: 0;
  }
  .tab-panel:not(.active) { display: none; }

  /* Page title — show only on first page */
  .page-title {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #000;
  }
  .page-title::after {
    content: ' — Landmark Baptist Church, Woodruff SC';
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
  }

  /* Directory list — print-friendly layout */
  .directory-list {
    display: block;
    columns: 2;
    column-gap: 20px;
  }
  .directory-entry {
    break-inside: avoid;
    background: #fff;
    border: none;
    border-left: 2px solid #000;
    box-shadow: none;
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  .directory-entry:hover { transform: none; box-shadow: none; }
  .directory-entry__name { color: #000; font-size: 0.95rem; }
  .directory-entry__row { color: #333; font-size: 0.8rem; }
  .directory-entry__row a { color: #000; text-decoration: none; }
  .directory-calendar { display: none; }

  /* Prayer list — clean print */
  .prayer-section { break-inside: avoid; margin-bottom: 20px; }
  .prayer-section__header { border-bottom: 1px solid #000; padding-bottom: 4px; }
  .prayer-section__header::after { display: none; }
  .prayer-section__header h3 { color: #000; font-size: 1rem; }
  .prayer-item {
    background: #fff; border-left: 2px solid #000;
    box-shadow: none; padding: 6px 10px;
    page-break-inside: avoid;
  }
  .prayer-item:hover { transform: none; box-shadow: none; }
  .prayer-item__text { color: #000; font-size: 0.85rem; }
  .prayer-item__date { color: #555; }

  /* Misc resets for print */
  a { color: #000; text-decoration: none; }
  .card, .nav-card, .mission-card, .give-card, .staff-group {
    box-shadow: none; break-inside: avoid;
  }
  /* Hide videos and large heroes */
  .hero, .page-hero, .section--video, video, .hero__video, .section__video-bg {
    display: none;
  }
}

/* ==========================================================================
   RADIO CLIP STUDIO — Waveform review + radio tab
   ========================================================================== */

/* --- Sermon list: admin "Review" button --- */
.sermon-item__review-btn {
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid var(--gold);
  color: var(--navy);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sermon-item__review-btn:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(201,173,59,0.35);
}
.sermon-item__review-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,173,59,0.4);
}

/* --- Waveform Review Panel --- */
.waveform-review {
  margin-top: 22px;
  background: linear-gradient(180deg, #0e3340 0%, var(--navy) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px 18px 14px;
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.waveform-review__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.waveform-review__header h3 {
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--gold-pale);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}
.waveform-review__close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--white);
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.waveform-review__close:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.05);
}
.waveform-review__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(97,202,223,0.5);
}

.waveform-review__canvas-wrap {
  position: relative;
  background: var(--navy);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  margin-bottom: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#waveform-canvas {
  display: block;
  width: 100%;
  height: 120px;
  cursor: crosshair;
}
.waveform-review__playhead {
  position: absolute;
  top: 0; bottom: 0; width: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201,173,59,0.6);
  pointer-events: none;
  display: none;
  z-index: 2;
}
.waveform-review__selection {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(0,143,179,0.28);
  border-left: 2px solid var(--primary-blue);
  border-right: 2px solid var(--primary-blue);
  pointer-events: none;
  z-index: 1;
}
.waveform-review__loading-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 80%);
  text-align: center;
  pointer-events: none;
}
.waveform-review__load-bar-track {
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.waveform-review__load-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-blue, #1a7fa8), var(--light-blue, #61cadf));
  border-radius: 2px;
  transition: width 0.2s linear;
}
.waveform-review__loading {
  color: var(--gray-300);
  font-size: 0.88rem;
  margin: 0;
  pointer-events: none;
}

.waveform-review__controls {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.waveform-review__btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.waveform-review__btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.waveform-review__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(97,202,223,0.4);
}
.waveform-review__btn--play {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  min-width: 80px;
}
.waveform-review__btn--play:hover { background: var(--gold-light); }
.waveform-review__btn--primary {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
}
.waveform-review__btn--primary:hover { background: var(--mid-blue); }
.waveform-review__btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: var(--gray-300);
}
.waveform-review__btn--ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}
.waveform-review__time {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-300);
  font-weight: 600;
}
.waveform-review__selection-info {
  font-size: 0.78rem;
  color: var(--light-blue);
  background: rgba(0,143,179,0.15);
  padding: 5px 10px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.waveform-review__hint {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin: 4px 0 0;
  line-height: 1.5;
}
.waveform-review__regions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.waveform-review__regions h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gold-pale);
  margin: 0 0 8px;
  font-family: var(--font-heading);
}
.waveform-review__region {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.82rem;
}
.waveform-review__region-name { color: var(--white); font-weight: 600; }
.waveform-review__region-meta { color: var(--gray-400); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.waveform-review__regions-empty {
  color: var(--gray-400);
  font-size: 0.82rem;
  margin: 0;
  font-style: italic;
}

/* --- Radio Tab --- */
.radio-admin-bar {
  margin-bottom: 18px;
}
.radio-extract-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none;
  padding: 11px 20px; border-radius: var(--radius); font-size: 0.82rem;
  font-weight: 700; cursor: pointer; transition: all var(--transition);
  font-family: var(--font-heading);
  letter-spacing: 0.3px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,143,179,0.25);
}
.radio-extract-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,143,179,0.35);
}
.radio-extract-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
.radio-extract-btn svg { flex-shrink: 0; }

.radio-categories {
  display: flex; flex-direction: column; gap: 26px;
}
.radio-category__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.92rem;
  font-family: var(--font-heading);
  color: var(--navy);
  margin: 0 0 12px;
  font-weight: 800;
}
.radio-category__title small {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.radio-clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.radio-clip-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-left: 4px solid var(--primary-blue);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: all var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.radio-clip-card:hover {
  border-color: var(--primary-blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.radio-clip-card.is-playing {
  border-color: var(--gold);
  border-left-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-dim) 0%, var(--white) 60%);
}
.radio-clip-card__header {
  display: flex; align-items: center; gap: 12px;
}
.radio-clip-card__play {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(201,173,59,0.35);
}
.radio-clip-card__play:hover {
  background: var(--gold-light);
  transform: scale(1.06);
}
.radio-clip-card__play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,173,59,0.45);
}
.radio-clip-card.is-playing .radio-clip-card__play {
  background: var(--primary-blue);
  color: var(--white);
}
.radio-clip-card__info { flex: 1; min-width: 0; }
.radio-clip-card__name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.3;
  word-break: break-word;
}
.radio-clip-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.radio-clip-card__category {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--white);
  font-family: var(--font-heading);
  white-space: nowrap;
}
.radio-clip-card__category.cat-intro    { background: var(--primary-blue); }
.radio-clip-card__category.cat-special  { background: var(--gold); color: var(--navy); }
.radio-clip-card__category.cat-speaker  { background: #8b5cf6; }
.radio-clip-card__category.cat-excerpt  { background: var(--dark-teal); }
.radio-clip-card__category.cat-slogan   { background: #f97316; }
.radio-clip-card__category.cat-other    { background: #6b7280; }

.radio-clip-card__admin {
  display: flex; gap: 4px; flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--transition);
}
.radio-clip-card:hover .radio-clip-card__admin { opacity: 1; }
.radio-clip-card__admin button {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  width: 30px; height: 30px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.radio-clip-card__edit:hover {
  color: var(--primary-blue); border-color: var(--primary-blue); background: var(--pale-blue);
}
.radio-clip-card__delete:hover {
  color: #dc2626; border-color: #dc2626; background: #fef2f2;
}
.radio-clip-card__admin button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.25);
}
.radio-clip-card__source {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-200);
  line-height: 1.4;
}
.radio-clip-card__notes {
  font-size: 0.85rem;
  color: var(--text-color);
  margin: 6px 0 0;
  line-height: 1.5;
  font-style: italic;
}

.radio-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: 0.95rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px dashed var(--gray-200);
}

/* --- Sermon picker modal --- */
.sermon-picker__search {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sermon-picker__search:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0,143,179,0.15);
}
.sermon-picker__list {
  list-style: none;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin: 0 0 16px;
  padding: 0;
}
.sermon-picker__item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background var(--transition);
}
.sermon-picker__item:last-child { border-bottom: none; }
.sermon-picker__item:hover { background: var(--pale-blue); }
.sermon-picker__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
}
.sermon-picker__meta {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.sermon-picker__empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

/* Source line in radio clip modal */
.radio-clip__source,
.radio-clip__range {
  font-size: 0.92rem;
  color: var(--text-color);
  margin: 0;
  padding: 8px 12px;
  background: var(--gray-50);
  border-radius: 6px;
  border-left: 3px solid var(--primary-blue);
  font-variant-numeric: tabular-nums;
}

/* --- Mobile adjustments for radio + waveform --- */
@media (max-width: 600px) {
  .sermon-item__review-btn {
    padding: 5px 8px;
    font-size: 0.66rem;
  }
  .waveform-review { padding: 14px 12px 12px; }
  .waveform-review__header h3 { font-size: 0.88rem; }
  #waveform-canvas { height: 100px; }
  .waveform-review__controls { gap: 8px; }
  .waveform-review__btn { padding: 7px 10px; font-size: 0.72rem; }
  .waveform-review__time { width: 100%; order: 5; }
  .waveform-review__selection-info { width: 100%; order: 4; }
  .radio-clip-grid { grid-template-columns: 1fr; }
  .radio-clip-card__admin { opacity: 1; }
}
@media (max-width: 768px) {
  /* Tighten mobile members footer to fit 6 tabs */
  .members-mobile-tab { padding: 8px 4px; }
  .members-mobile-tab span { font-size: 0.65rem; }
}

/* ==========================================================================
   SERMON UPLOAD
   ========================================================================== */
.sermon-admin-bar {
  margin-bottom: 14px;
}
.sermon-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
  color: var(--white); border: none;
  padding: 11px 20px; border-radius: var(--radius); font-size: 0.82rem;
  font-weight: 700; cursor: pointer; transition: all var(--transition);
  font-family: var(--font-heading);
  letter-spacing: 0.3px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,143,179,0.25);
}
.sermon-upload-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,143,179,0.35);
}
.sermon-upload-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(0,143,179,0.3);
}
.sermon-upload-btn svg { flex-shrink: 0; }

.sermon-upload__dropzone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  background: var(--gray-50);
  margin-bottom: 16px;
  transition: all var(--transition);
  cursor: pointer;
}
.sermon-upload__dropzone:hover {
  border-color: var(--primary-blue);
  background: var(--pale-blue);
}
.sermon-upload__dropzone.is-dragover {
  border-color: var(--primary-blue);
  background: var(--pale-blue);
  transform: scale(1.01);
}
.sermon-upload__dropzone.has-file {
  border-color: var(--gold);
  border-style: solid;
  background: var(--gold-dim);
}
.sermon-upload__icon {
  color: var(--gray-400);
  margin-bottom: 8px;
}
.sermon-upload__dropzone.has-file .sermon-upload__icon { color: var(--gold); }
.sermon-upload__hint {
  font-size: 0.92rem;
  color: var(--text-color);
  margin: 0 0 4px;
}
.sermon-upload__browse {
  background: none; border: none; padding: 0;
  color: var(--primary-blue);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit; font-size: inherit;
}
.sermon-upload__browse:hover { color: var(--primary-dark); }
.sermon-upload__formats {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}
.sermon-upload__filename {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 700;
  word-break: break-all;
  font-family: var(--font-heading);
}
.sermon-upload__progress {
  margin-top: 12px;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.sermon-upload__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--light-blue));
  width: 0%;
  transition: width 0.15s linear;
}

/* ==========================================================================
   SCENE STACK — Persistent fullscreen background video with crossfade
   One #scene-stack lives in the body shell; JS adds/swaps .scene-layer
   children per page. Layers fade in via .active.
   ========================================================================== */
#scene-stack {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #0a4254;
}
#scene-stack .scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
  will-change: opacity;
}
#scene-stack .scene-layer.active { opacity: 1; }
#scene-stack .scene-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 2000ms var(--ease-in-out);
}
/* JS adds .is-vid-fading near the loop seam for a smooth fade-to-black /
   fade-back-in at the loop boundary. Opacity multiplies with the parent
   layer opacity so inter-page crossfades still work correctly. */
#scene-stack .scene-layer video.is-vid-fading { opacity: 0; }
/* Soft global wash so light text on top of any video stays legible. */
#scene-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6,122,154,0.35) 0%,
    rgba(6,122,154,0.30) 50%,
    rgba(10,66,84,0.55) 100%);
  pointer-events: none;
}

/* Once the scene stack is live, suppress the inline per-page videos and
   make hero/video sections transparent so the global stack shows through.
   The page's local overlays would double-tint the global wash, so drop
   them too — readability comes from #scene-stack::after now. */
body.scene-stack-ready .hero__video,
body.scene-stack-ready .section--video .section__video-bg {
  display: none;
}
body.scene-stack-ready .hero {
  background-color: transparent;
}
body.scene-stack-ready .hero__overlay,
body.scene-stack-ready .section--video .section__overlay {
  background: transparent;
}

/* Drop the page-level wrappers' opaque backgrounds so the scene stack
   shows through behind the content. Content cards keep their own
   backgrounds (.card, .nav-card, .staff-group, .event-card, .give-card,
   .mission-card, .directory-entry, .members-content, .tab-panel, .sermon-list,
   forms/inputs, etc.) so text and forms remain readable on top. */
body.scene-stack-ready {
  background: transparent;
}
/* Content sections keep a paper background even with scene-stack live, so
   long-form body text (privacy, contact info, give copy, missionaries list)
   stays readable. The video continues to show through hero/video sections
   only. */
body.scene-stack-ready .section--light { background: var(--white); }
body.scene-stack-ready .section--alt { background: var(--cream); }



/* =============================================================================
   <picture> wrappers — added by builder run 11 (image WebP delivery)
   Many images on this site are inside layout flexbox/grid cells where the
   parent expects the image to fill / object-fit the cell. The browser default
   makes <picture> render as inline, which would shrink-wrap and break those
   cells. Force <picture> to behave like the <img> it wraps so the existing
   layout selectors (.nav-card img, .card__img, .pastor-carousel__slide img,
   .location-img, etc.) keep working without per-rule duplication.
   ============================================================================= */
picture {
  display: contents;
}

/* =============================================================================
   SMS PIN auth, member profile, and admin dashboard
   ============================================================================= */
.members-gate__step + .members-gate__step { margin-top: 10px; }
.members-gate__hint {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--gray-500, #6b7280);
}
.members-gate__sep {
  color: var(--gray-300, #d1d5db);
  margin: 0 8px;
}
.members-gate__link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary-blue);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.members-gate__link:hover { color: var(--primary-blue-dark, #1e40af); }

#members-pin {
  letter-spacing: 0.5em;
  font-feature-settings: "tnum";
  text-align: center;
}

.modal--large { max-width: 880px; width: calc(100% - 32px); }

.profile-photo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.profile-photo__img,
.profile-photo__placeholder {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-400, #9ca3af);
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;
  border: 1.5px solid var(--gray-200, #e5e7eb);
  flex-shrink: 0;
}
.profile-photo__upload {
  cursor: pointer;
  padding: 8px 16px !important;
}
.profile-photo__hint {
  font-size: 0.78rem;
  color: var(--gray-500, #6b7280);
  flex-basis: 100%;
  margin: 0;
}

.profile-section {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius, 8px);
  padding: 10px 14px;
  margin: 14px 0;
}
.profile-section > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 4px 0;
}
.profile-section > summary::-webkit-details-marker { display: none; }
.profile-section > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
  color: var(--primary-blue);
}
.profile-section[open] > summary::before { content: "−"; }
.profile-section__hint { font-size: 0.82rem; color: var(--gray-500, #6b7280); margin: 6px 0 10px; }
.profile-section__action { display: flex; align-items: flex-end; }

.profile-devices {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.profile-devices li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  font-size: 0.86rem;
}
.profile-devices li:last-child { border-bottom: 0; }
.profile-devices__meta { color: var(--gray-500, #6b7280); font-size: 0.78rem; }
.profile-devices__revoke {
  background: none;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--gray-700, #374151);
}
.profile-devices__revoke:hover { border-color: #dc2626; color: #dc2626; }
.profile-devices__current { font-size: 0.72rem; color: var(--primary-blue); font-weight: 700; text-transform: uppercase; }

.directory-form__invites {
  margin-top: 8px;
  padding: 12px;
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius, 8px);
  border: 1px dashed var(--gray-200, #e5e7eb);
}
.directory-form__invites-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.88rem;
}
.directory-form__invite-list {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.directory-form__invite-list label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem;
}

.admin-dash__tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  margin-bottom: 16px;
}
.admin-dash__tab {
  background: none;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--gray-600, #4b5563);
  border-bottom: 2px solid transparent;
}
.admin-dash__tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}
.admin-dash__panel { display: none; }
.admin-dash__panel.active { display: block; }
.admin-dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.admin-dash__stat {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius, 8px);
  padding: 14px;
}
.admin-dash__stat-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500, #6b7280);
}
.admin-dash__stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.1;
  margin-top: 4px;
}
.admin-dash__table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--gray-100, #f3f4f6);
  border-radius: var(--radius, 8px);
}
.admin-dash__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.admin-dash__table th,
.admin-dash__table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.admin-dash__table th {
  background: var(--gray-50, #f9fafb);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600, #4b5563);
  position: sticky; top: 0;
}
.admin-dash__table tr:last-child td { border-bottom: 0; }
.admin-dash__btn {
  background: var(--primary-blue);
  color: var(--white);
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
.admin-dash__btn:hover { background: var(--primary-blue-dark, #1e40af); }
.admin-dash__empty {
  padding: 20px;
  text-align: center;
  color: var(--gray-500, #6b7280);
  font-size: 0.86rem;
}

/* =========================================================================
   Print stylesheet refinement — added run 69 (2026-05-23) under Graphic
   Design & Visual Brand lens. ADDITIVE on the existing @media print block
   above (which already hides chrome + sets body to fff/000 + handles
   directory columns). This second block refines:
   (1) @page margin .75in — canonical letter-paper margin matching natural
       eye-tracking width for 12pt body. Outside any @media print so it
       applies regardless of UA.
   (2) Refined ink #111 instead of pure #000 on body + headings — the
       publication-grade typographic standard for paper output. Per
       graphic-design SKILL.md Role 4 Art Director print-mode test:
       "If a client would print this, it has to print well."
   (3) widows/orphans: 3 on body + p/li/blockquote — prevents single-line
       paragraph splits across pages (hallmark of unconsidered output).
   (4) font-variant-numeric: tabular-nums on print body — digit columns
       align across rows in any printed prayer list / directory / sermon
       index.
   (5) URL unfurling on a[href]::after — preserves link context in print
       with carve-outs for internal anchors (#…) / mailto / tel / javascript
       pseudo-links / skip-link (URLs would clutter or be useless on paper).
   (6) page-break-after: avoid on h1-h4 — prevents lonely headings at
       page bottom.
   (7) page-break-inside: avoid on img/picture/svg — prevents image cuts.
   Zero conflicts with the existing print block (additive selectors only).
   Bonus: tabular-nums utility class for screen rendering — 6 existing
   font-variant-numeric: tabular-nums uses in the codebase (player time,
   stats, waveform meta, etc.); class lets future markup opt-in by name.
   ========================================================================= */
@page { margin: .75in; }

@media print {
  body {
    color: #111;
    font-variant-numeric: tabular-nums;
    widows: 3;
    orphans: 3;
  }
  p, li, blockquote { widows: 3; orphans: 3; }
  h1, h2, h3, h4 {
    color: #111;
    page-break-after: avoid;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after,
  a[href^="javascript:"]::after,
  a.skip-link::after { content: ""; }
  img, picture, svg {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

.numeric,
.tabular-nums,
[class*="-price"],
[class*="-stat"],
[class*="-time"],
[class*="-duration"] {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   STICKY MOBILE CTA BAR  (Strategy & Product lens — builder run 97)
   ==========================================================================
   The three highest-value conversion paths on a local church website are:
     (1) Call the church  — for hours, visitor questions, pastoral need
     (2) Get directions   — turn-by-turn from the visitor's current location
     (3) Plan a visit     — read "What to Expect" before showing up Sunday
   Pre-run-97 the homepage exposes (3) via the gold "Visit Us This Week!"
   hero button — but every other page (the SERP landing pages for "baptist
   church near Woodruff", "Bible-believing church 29388", "Pastor Joey Clark"
   etc.) had no persistent conversion surface. Visitors who landed on
   our-pastor.html or ministries.html from a Google search had to scroll all
   the way to the footer, find the phone number / address as plain text,
   and either copy-paste it or remember it. That's a textbook conversion
   leak for a local-service website.
   ---
   The sticky bottom bar puts all three actions one tap away on every page,
   on mobile only (where the address-in-text → maps-app friction is highest).
   Desktop already has the full nav + footer above the fold; sticky bar
   hidden via @media(min-width:768px). The bar uses ARIA labels + small
   visible labels (icon-only is an accessibility regression; sighted users
   with motor impairments rely on the visible "Call" / "Directions" / "Visit"
   text as a tap target). Z-index lower than the audio player (1900 < 9999)
   so player overlay still wins; higher than back-to-top (5000 → bar at
   4900) — back-to-top button is shifted up via .has-cta-bar body class to
   sit ABOVE the bar instead of disappearing behind it. Bottom-safe-area-inset
   so iOS notch / home-bar phones don't clip the bar.
   ---
   HARD-CONSTRAINT compliance: zero changes to existing visible body text or
   image-to-text associations. The three labels ("Call", "Directions",
   "Visit") are NEW functional UI labels, not modifications to existing
   doctrinal / pastoral / event copy — analogous to the existing "Skip to
   main content" skip link and "Back to top" button which are functional
   UI text that already coexists on every page.
   ========================================================================== */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 4900;
  background: var(--navy, #0c2a33);
  background: linear-gradient(180deg, rgba(12,42,51,0.94) 0%, rgba(12,42,51,0.99) 60%);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid rgba(215,178,95,0.35);
}
.cta-bar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
}
.cta-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px 12px;
  text-decoration: none;
  color: var(--gold-light, #e0c884);
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  font: 600 0.7rem/1 'Montserrat', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease;
  min-height: 56px;
  cursor: pointer;
}
.cta-bar__btn:last-child {
  border-right: 0;
}
.cta-bar__btn:hover,
.cta-bar__btn:focus-visible {
  background: rgba(215,178,95,0.12);
  color: var(--gold, #d4a937);
  outline: 0;
}
.cta-bar__btn:focus-visible {
  outline: 2px solid var(--gold, #d4a937);
  outline-offset: -2px;
}
.cta-bar__btn:active {
  background: rgba(215,178,95,0.2);
}
.cta-bar__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cta-bar__icon--filled {
  fill: currentColor;
  stroke: none;
}
.cta-bar__label {
  display: block;
}
@media (max-width: 767px) {
  .cta-bar { display: block; }
  /* Lift back-to-top above the bar so it isn't hidden on mobile */
  body.has-cta-bar .back-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0)); }
  /* Reserve space at page bottom so the sticky bar doesn't cover footer copyright */
  body.has-cta-bar { padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-bar__btn { transition: none; }
}

/* ==========================================================================
   FOOTER MICRO-LINKS  (Strategy & Product lens — builder run 97)
   ==========================================================================
   The footer phone number and address were plain text. Wrapping them in
   tel:/maps:/ deep links (no visible text change) turns them into one-tap
   conversion actions on mobile. The .footer-microlink class strips the
   browser's default link styling so the footer still LOOKS like prose to
   keep the design system intact, while gaining the tap-to-act behavior.
   ========================================================================== */
.footer-microlink,
.footer-microlink:link,
.footer-microlink:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.15);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.footer-microlink:hover,
.footer-microlink:focus-visible {
  color: var(--gold-light, #e0c884);
  border-bottom-color: var(--gold, #d4a937);
  outline: 0;
}
.footer-microlink:focus-visible {
  outline: 2px solid var(--gold, #d4a937);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   UX LENS — Design (UX) additions — builder run 105 (2026-05-23)
   ==========================================================================
   Dept rotation #6 (Design UX). HARD CONSTRAINT honored: zero body-text
   additions, zero img/alt/src changes, zero picture-text moves. All additions
   are functional UI scaffolding analogous to the run-97 sticky CTA bar
   precedent — new persistent navigation/affordance surfaces with only
   structural labels (no body copy). CLIENT BRAND CONSTRAINT honored: all
   new components consume client's existing tokens (--primary-blue,
   --dark-teal, --gold, --gray-* etc.) — no MattCreates property tokens
   leak in. Namespace .uxr105-* to keep additions auditable + removable.
   ========================================================================== */

/* (1) Scroll Progress Bar — slim 2px gradient at the very top of the viewport.
   Persistent answer to "how much page is left?" — closes the read-anxiety loop
   on long-content pages (our-pastor, our-mission, what-to-expect). JS-driven
   transform: scaleX() updated on scroll via rAF (no layout thrash). Sits above
   the .portfolio-frame branding bar at z-index 10001 so it always wins. Uses
   client's brand gradient (light-blue → primary-blue → dark-teal → gold). */
.uxr105-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(12, 42, 51, 0.06);
  z-index: 10001; pointer-events: none;
}
.uxr105-progress__bar {
  height: 100%;
  background: linear-gradient(90deg,
    var(--light-blue) 0%, var(--primary-blue) 35%,
    var(--dark-teal) 70%, var(--gold) 100%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 80ms linear;
  box-shadow: 0 0 8px rgba(0,143,179,0.35);
  will-change: transform;
}

/* (3) Universal scroll-margin-top — when JS scrolls to an anchor (#explore,
   #ministries-adult, etc.) the fixed header (65px) + portfolio-frame (36px)
   would otherwise cover the top of the target section. scroll-margin-top
   sets the implicit padding that the scroll algorithm uses. Selectors target
   any element with an id that's likely an anchor target (sections, headings,
   the player overlay). 110px = header + portfolio bar + 10px breathing room. */
[id]:not(:where(body, html, .skip-link, #main, #site-header, #player, #mobile-nav,
  #mobile-menu-btn, #player-audio, #scene-stack)) {
  scroll-margin-top: 110px;
}
@media (max-width: 767px) {
  [id]:not(:where(body, html, .skip-link, #main, #site-header, #player, #mobile-nav,
    #mobile-menu-btn, #player-audio, #scene-stack)) {
    scroll-margin-top: 90px;
  }
}

/* (4) WCAG-AAA touch target sweep — universal min-height: 44px on nav surfaces.
   WCAG 2.5.5 (Target Size Level AAA) requires 44×44 CSS pixels for interactive
   targets. Pre-fix the nav-links dropdown items rendered at ~28px tall — Fitts'
   Law penalty on thumb-tap accuracy. Applies to dropdown links, mobile-nav
   sub-links, footer-links rows. Doesn't widen the visual element — adds
   transparent tap-padding above/below text via min-height + flex centering. */
.nav-dropdown a,
.mobile-nav .sub-links a,
.mobile-nav > a,
.footer-links a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-dropdown a { padding: 8px 14px; }
.footer-links a { padding-top: 4px; padding-bottom: 4px; }
/* Desktop: remove mobile touch-target height from footer links for compact spacing */
@media (min-width: 1024px) {
  .footer-links a { min-height: unset; padding-top: 1px; padding-bottom: 1px; }
  .footer-links li { padding: 1px 0; }
}
/* mobile-menu-btn keeps its 24px bars but its tappable hitbox needs 44×44.
   Scoped to mobile-only so it cannot re-introduce display:flex on desktop
   and override the display:none from the @media(min-width:768px) block. */
@media (max-width: 767px) {
  .mobile-menu-btn {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
}

/* (5) Active page highlight in mobile-nav — visual rail showing visitor where
   they are. JS adds .uxr105-current to the matching <a> in #mobile-nav based
   on location.pathname. Left-edge gold rail + brighter teal color + bold. */
.mobile-nav > a.uxr105-current,
.mobile-nav .sub-links a.uxr105-current {
  color: var(--primary-blue);
  font-weight: 700;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  background: rgba(0, 143, 179, 0.04);
}

/* (6) nav-card focus depth polish — explore cards on index get a tactile lift
   + cyan focus ring + gold accent line on keyboard focus. Pre-fix focus only
   showed the global :focus-visible halo, no card-specific affordance. */
.nav-card:focus-visible {
  outline: 0;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,143,179,0.18),
              0 0 0 3px var(--primary-blue),
              0 0 0 6px var(--focus-halo, rgba(0,143,179,0.22));
}
.nav-card:focus-visible::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--gold));
}

/* (7) Contact form usability polish — bigger touch padding on inputs, focus
   halo using brand tokens, better placeholder contrast (WCAG 3:1 min for
   placeholder text), and stronger error/valid visual states without changing
   any text. Pre-fix inputs used the bare-DOM defaults with the global halo
   only — no form-specific signal. */
.uxr105-form input:not([type=checkbox]):not([type=radio]),
.uxr105-form textarea,
.uxr105-form select {
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text-color);
  background: var(--white);
  border: 1.5px solid var(--gray-300, #cbd5e1);
  border-radius: var(--radius-sm, 4px);
  transition: border-color var(--motion-fast, 150ms) var(--ease-out-expo, ease-out),
              box-shadow var(--motion-fast, 150ms) var(--ease-out-expo, ease-out);
  width: 100%;
}
.uxr105-form textarea { min-height: 120px; line-height: 1.55; }
.uxr105-form input::placeholder,
.uxr105-form textarea::placeholder {
  color: #5a7882; /* 4.6:1 on white — exceeds WCAG 1.4.11 (3:1 min) */
  opacity: 1;
}
.uxr105-form input:focus-visible,
.uxr105-form textarea:focus-visible,
.uxr105-form select:focus-visible {
  outline: 0;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px var(--focus-halo, rgba(0,143,179,0.22));
}
.uxr105-form input:user-invalid,
.uxr105-form textarea:user-invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 4px rgba(179,38,30,0.10);
}
.uxr105-form input:user-valid:not(:placeholder-shown),
.uxr105-form textarea:user-valid:not(:placeholder-shown) {
  border-color: #1b7a3a;
}
.uxr105-form label {
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 600; font-size: 0.9rem;
  color: var(--text-color);
}

/* (8) Mobile menu backdrop — clickable scrim behind the mobile-nav slide-in.
   JS toggles .uxr105-scrim--visible when menu opens. Tapping outside the
   menu closes it (Krug "tap outside to dismiss" pattern). Sits behind
   .mobile-nav (z-index 8000 → 7900) but above the page content. */
.uxr105-scrim {
  position: fixed; inset: 0;
  background: rgba(12, 42, 51, 0.42);
  z-index: 7900;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-medium, 300ms) var(--ease-out-expo, ease-out);
}
.uxr105-scrim.uxr105-scrim--visible {
  opacity: 1; pointer-events: auto;
}

/* (9) Mobile menu slide-in polish — currently slides via transform: translateX,
   but the transition wasn't defined. Add an explicit 300ms ease so it doesn't
   snap. Also clean up focus styles inside the opened mobile-nav. */
.mobile-nav {
  transition: transform var(--motion-medium, 300ms) var(--ease-out-expo, ease-out);
}
.mobile-nav a:focus-visible {
  outline: 0;
  background: rgba(0,143,179,0.08);
  color: var(--primary-blue);
  box-shadow: inset 4px 0 0 var(--primary-blue);
  border-radius: var(--radius-sm, 4px);
}

/* (10) Print stylesheet — clean print output. Hides fixed nav, fixed bars,
   sticky CTA, player, back-to-top, chapter nav, progress bar, scrim, hero
   video, and decorative overlays. Restores body padding (the .has-cta-bar
   60px bottom padding is meaningless on paper). Resets background to white,
   text to true black for printer contrast. Forces light theme regardless
   of prefers-color-scheme. URL-after links inside body for citation. */
@media print {
  :root { --header-height: 0 !important; }
  body, html { background: #fff !important; color: #000 !important; }
  body.has-cta-bar { padding-bottom: 0 !important; }
  .portfolio-frame, .site-header, .mobile-nav, .mobile-menu-btn,
  .cta-bar, .back-to-top, .player, .hero__video, .hero__overlay,
  #scene-stack, .uxr105-progress, .uxr105-scrim,
  .radio-toggle, .social-links, .footer-links, .footer-bottom { display: none !important; }
  main, .section, .container { padding-top: 0 !important; margin-top: 0 !important; }
  .hero { min-height: auto !important; padding: 16px 0 !important; }
  .hero__title, .hero__lead, .hero__sub {
    color: #000 !important; text-shadow: none !important;
  }
  a { color: #000 !important; text-decoration: underline !important; }
  a[href^="http"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after {
    content: " (" attr(href) ")"; font-size: 0.85em; color: #444;
  }
  a[href^="#"]::after { content: ''; }
  picture, img { page-break-inside: avoid; max-width: 100% !important; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .site-footer { background: #fff !important; color: #000 !important;
                 border-top: 1px solid #000; padding: 16px 0 !important; }
  .site-footer * { color: #000 !important; }
}

/* (11) Reduced-motion guards on all UX additions — honor user OS-level
   preference. Strip transitions on scroll-progress bar, mobile menu slide,
   scrim fade, form input transitions, focus glows. */
@media (prefers-reduced-motion: reduce) {
  .uxr105-progress__bar,
  .uxr105-scrim,
  .mobile-nav,
  .uxr105-form input,
  .uxr105-form textarea,
  .uxr105-form select,
  .nav-card { transition: none !important; }
  .nav-card:focus-visible { transform: none !important; }
}

/* (12) perf-tier safety — on the perf-min tier strip the progress bar glow
   so older devices don't pay GPU cost on every scroll repaint. */
.perf-min .uxr105-progress__bar { box-shadow: none; }

/* ============================================================================
   UX LENS — Builder run 116 (2026-05-23) — Landmark Baptist Woodruff
   Department rotation #6 (Design UX), second-pass continuation.
   Project #3 of 9. Follows run 115 (MattEbersole.com Design UX).
   ----------------------------------------------------------------------------
   HARD-CONSTRAINT honored: NO existing visible body text added/changed,
   NO images moved. All new components are functional UX scaffolding that
   re-presents data already on the page (service times list in the footer,
   address+phone in the footer, nav-card body copy) into wayfinding tooling.
   ----------------------------------------------------------------------------
   New components (namespace .uxr116-*):
     · uxr116-next       — Live "Next service" countdown widget
     · uxr116-schedule   — Visual weekly schedule strip (Sun→Sat)
     · uxr116-quickcontact — Desktop+mobile tap cards (Call/Email/Directions)
     · uxr116-skipnav    — Skip-to-section dropdown (keyboard a11y)
     · uxr116-srOnly     — Screen-reader-only utility class
   Zero existing rules redefined. Zero new :root tokens introduced.
   All selectors use existing design tokens defined in the file head.
   ============================================================================ */

/* (1) Shared section frame for run-116 surfaces. Keeps the additions visually
       consistent with the existing .section--light cream/wheat palette while
       not redefining .section itself. */
.uxr116-frame {
  position: relative;
  padding: clamp(48px, 6vw, 84px) clamp(20px, 4vw, 40px);
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(0,143,179,0.06), transparent 70%),
    radial-gradient(800px 320px at 88% 110%, rgba(201,173,59,0.08), transparent 70%),
    var(--cream, #fdf8f0);
  border-top: 1px solid rgba(12,42,51,0.06);
  border-bottom: 1px solid rgba(12,42,51,0.06);
}
.uxr116-frame .uxr116-inner {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
}
.uxr116-frame h2 {
  font-family: var(--font-display);
  color: var(--heading-color, #045a72);
  font-size: var(--fs-section-h2);
  margin: 0 0 12px;
  line-height: 1.15;
  text-align: center;
}
.uxr116-frame .uxr116-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs, .75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-teal, #067a9a);
  margin: 0 0 8px;
  text-align: center;
}
.uxr116-frame .uxr116-intro {
  font-family: var(--font-body);
  color: var(--text-color, #0c2a33);
  font-size: var(--text-base, 1rem);
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 62ch;
  text-align: center;
}

/* (2) Screen-reader-only utility — WCAG 1.3.1 programmatic-label pattern.
       Used on the wizard fieldset legends + schedule visualization caption. */
.uxr116-srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* (3) NEXT SERVICE COUNTDOWN — Live widget that computes from current time
       which of the 4 weekly services (Sun School 10am / Morn 11am / Eve 5pm /
       Tues 7pm — text from the footer service-times list) is up next, and
       shows a humanized countdown. Pure UI on existing data; no new editorial
       copy. Defensive: if the countdown JS fails to populate it remains hidden
       via the data-state attribute. */
.uxr116-next {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 32px);
  background: linear-gradient(135deg,
    var(--white, #fff) 0%,
    rgba(232,246,250,0.6) 100%);
  border: 1px solid rgba(0,143,179,0.18);
  border-left: 4px solid var(--primary-blue, #008fb3);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,0.1));
  margin-bottom: clamp(32px, 4vw, 48px);
}
.uxr116-next[data-state="hidden"] { display: none; }
.uxr116-next__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    var(--primary-blue, #008fb3),
    var(--dark-teal, #067a9a));
  color: var(--white, #fff);
  box-shadow: 0 6px 20px rgba(0,143,179,0.35);
  flex-shrink: 0;
}
.uxr116-next__icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uxr116-next__body { display: flex; flex-direction: column; gap: 4px; }
.uxr116-next__eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs, .75rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-teal, #067a9a);
}
.uxr116-next__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.65rem);
  font-weight: 600;
  color: var(--heading-color, #045a72);
  line-height: 1.2;
  margin: 0;
}
.uxr116-next__when {
  font-family: var(--font-body);
  font-size: var(--text-sm, .875rem);
  color: var(--text-muted, #4a6670);
  margin: 0;
}
.uxr116-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--gold, #c9ad3b);
  color: var(--navy, #0c2a33);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm, .875rem);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition, .3s ease), box-shadow var(--transition, .3s ease);
  box-shadow: var(--shadow-gold, 0 4px 20px rgba(201,173,59,0.3));
}
.uxr116-next__cta:hover,
.uxr116-next__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(201,173,59,0.42);
  outline: none;
}
.uxr116-next__cta:focus-visible {
  outline: 3px solid rgba(0,143,179,0.45);
  outline-offset: 3px;
}
.uxr116-next__pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fbf71;
  margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(47,191,113,0.6);
  animation: uxr116Pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  vertical-align: middle;
}
@keyframes uxr116Pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(47,191,113,0); }
}
@media (max-width: 720px) {
  .uxr116-next {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .uxr116-next__icon { width: 48px; height: 48px; }
  .uxr116-next__body { align-items: center; }
  .uxr116-next__cta { width: 100%; justify-content: center; max-width: 320px; }
}

/* (4) WEEKLY SCHEDULE VISUALIZATION — 7-day strip showing Sun→Sat with the
       3 service blocks colored against 4 non-service days. Pure visual
       reorganization of the footer's service-times <ul> (10:00 / 11:00 / 17:00
       / 19:00). Mobile: 1col stacked. Desktop ≥720px: 7col strip. */
.uxr116-schedule {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 8px;
}
.uxr116-schedule__day {
  position: relative;
  padding: 16px 12px;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #dde7ee);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  transition: transform var(--transition, .3s ease),
              box-shadow var(--transition, .3s ease),
              border-color var(--transition, .3s ease);
}
.uxr116-schedule__day:hover,
.uxr116-schedule__day:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,0.1));
  border-color: rgba(0,143,179,0.35);
}
.uxr116-schedule__day--today {
  border-color: var(--primary-blue, #008fb3);
  border-width: 2px;
  background: linear-gradient(180deg,
    rgba(232,246,250,0.7) 0%,
    var(--white, #fff) 60%);
}
.uxr116-schedule__day--today::before {
  content: "TODAY";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-blue, #008fb3);
  color: var(--white, #fff);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,143,179,0.4);
}
.uxr116-schedule__dow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-teal, #067a9a);
}
.uxr116-schedule__day--rest .uxr116-schedule__dow {
  color: var(--gray-400, #94a3b8);
}
.uxr116-schedule__svc {
  display: block;
  background: rgba(0,143,179,0.08);
  border-left: 3px solid var(--primary-blue, #008fb3);
  padding: 6px 6px 6px 8px;
  border-radius: 6px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-color, #0c2a33);
}
.uxr116-schedule__svc--evening {
  background: rgba(201,173,59,0.12);
  border-left-color: var(--gold, #c9ad3b);
}
.uxr116-schedule__svc strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--heading-color, #045a72);
  font-size: 0.72rem;
}
.uxr116-schedule__rest {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--gray-400, #94a3b8);
  font-style: italic;
  margin: auto 0;
}
@media (max-width: 900px) {
  .uxr116-schedule { grid-template-columns: repeat(4, 1fr); }
  .uxr116-schedule__day:nth-child(5),
  .uxr116-schedule__day:nth-child(6),
  .uxr116-schedule__day:nth-child(7) { display: none; }
  .uxr116-schedule.uxr116-schedule--full .uxr116-schedule__day { display: flex; }
}
@media (max-width: 600px) {
  .uxr116-schedule { grid-template-columns: 1fr 1fr; }
  .uxr116-schedule__day { min-height: auto; }
  .uxr116-schedule__day:nth-child(n+5) { display: none; }
  .uxr116-schedule.uxr116-schedule--full .uxr116-schedule__day { display: flex; }
}
.uxr116-schedule__more {
  margin-top: 16px;
  text-align: center;
}
.uxr116-schedule__more-btn {
  background: none;
  border: 1px solid rgba(0,143,179,0.4);
  color: var(--dark-teal, #067a9a);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm, .875rem);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition, .3s ease), color var(--transition, .3s ease);
}
.uxr116-schedule__more-btn:hover,
.uxr116-schedule__more-btn:focus-visible {
  background: var(--primary-blue, #008fb3);
  color: var(--white, #fff);
  outline: none;
}
@media (min-width: 901px) {
  .uxr116-schedule__more { display: none; }
}

/* (5) QUICK CONTACT CARDS — Call / Email / Directions tap targets */
.uxr116-quickcontact {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 20px);
}
.uxr116-quickcontact__card {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
  background: var(--white, #fff);
  border: 1px solid rgba(0,143,179,0.15);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.07));
  text-decoration: none;
  color: var(--text-color, #0c2a33);
  transition: transform var(--transition, .3s ease), box-shadow var(--transition, .3s ease);
}
.uxr116-quickcontact__card:hover,
.uxr116-quickcontact__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,0.1));
  outline: none;
}
.uxr116-quickcontact__card:focus-visible {
  outline: 3px solid rgba(0,143,179,0.45);
  outline-offset: 3px;
}
.uxr116-quickcontact__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--primary-blue, #008fb3);
  color: var(--white, #fff);
}
.uxr116-quickcontact__icon--call  { background: var(--primary-blue, #008fb3); }
.uxr116-quickcontact__icon--email { background: var(--dark-teal, #067a9a); }
.uxr116-quickcontact__icon--map   { background: var(--gold, #c9ad3b); color: var(--navy, #0c2a33); }
.uxr116-quickcontact__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.uxr116-quickcontact__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.uxr116-quickcontact__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs, .75rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-teal, #067a9a);
}
.uxr116-quickcontact__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base, 1rem);
  color: var(--heading-color, #045a72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uxr116-quickcontact__hint {
  font-family: var(--font-body);
  font-size: var(--text-xs, .75rem);
  color: var(--text-muted, #4a6670);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .uxr116-quickcontact { flex-direction: column; }
  .uxr116-quickcontact__card { flex: none; }
}

/* ---------------------------------------------------------------------------
   (13) PRINT BRANCH — flatten the visual chrome to black-on-white, hide the
   decorative ornament strip, hide the CTA bar, hide the back-to-top button.
   --------------------------------------------------------------------------- */
@media print {
  .lbw134-threshold { display: none !important; }
  .uxr116-frame::before,
  .uxr116-frame::after,
  .section#explore::before { display: none !important; }
  .card-grid .nav-card { box-shadow: none !important; border: 1px solid #999 !important; page-break-inside: avoid; }
  .card-grid .nav-card::before,
  .card-grid .nav-card::after { display: none !important; }
  .uxr116-quickcontact__card::before,
  .uxr116-quickcontact__card::after { display: none !important; }
  .site-footer { background: #ffffff !important; color: #000 !important; }
  .site-footer::before,
  .site-footer::after,
  .site-footer .footer-bottom::before { display: none !important; }
  .cta-bar { display: none !important; }
  .hero::after,
  .hero .hero__overlay { display: none !important; }
  .btn-gold { box-shadow: none !important; border: 1px solid #c9ad3b !important; }
}

/* ---------------------------------------------------------------------------
   (14) REDUCED-MOTION BRANCH — pause any decorative transform animations
   we introduced. Image zoom inside .nav-card already covered by the run-116
   block, but the card-lift transition is new in this run.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card-grid .nav-card,
  .uxr116-quickcontact__card,
  .btn-gold {
    transition: none !important;
  }
  .card-grid .nav-card:hover,
  .card-grid .nav-card:focus-visible,
  .uxr116-quickcontact__card:hover,
  .uxr116-quickcontact__card:focus-visible,
  .btn-gold:hover,
  .btn-gold:focus-visible {
    transform: none !important;
  }
  .card-grid .nav-card picture img { transition: none !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   (15) PERF-MIN BRANCH — for low-power devices that have the .perf-min
   class added by the runtime perf gate (matches the run-105 contract).
   --------------------------------------------------------------------------- */
.perf-min .lbw134-threshold {
  background:
    linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
}
.perf-min .uxr116-frame::before,
.perf-min .section#explore::before {
  display: none;
}
.perf-min .card-grid .nav-card,
.perf-min .uxr116-quickcontact__card {
  box-shadow: 0 6px 16px rgba(12,42,51,0.08) !important;
}

/* ---------------------------------------------------------------------------
   (16) RUN 134 OWNERSHIP MARKER — declares which selectors this run owns
   so future audits can grep for the component family.
   ---------------------------------------------------------------------------
   lbw134-* selectors + selector-level enhancements owned by builder run 134
   (2026-05-24, Graphic Design & Visual Brand lens):
     .lbw134-threshold (NEW markup — purely decorative aria-hidden div)
     .section#explore  (atmosphere ground + h2 fleuron decoration)
     .uxr116-frame::before / ::after  (sanctuary depth + top rule)
     .card-grid .nav-card  (stained-glass chrome — gradient ring + L-marks + halo + image treatment)
     .uxr116-schedule__day[data-uxr116-day="0|2|--rest"]  (color-coding)
     .uxr116-quickcontact__card  (embossed brand chrome + gold-foil edge)
     .uxr116-quickcontact__icon  (inset highlight)
     .uxr116-next  (gradient border ring + warmer ground)
     .uxr116-next__cta  (deeper teal halo)
     .site-footer  (sanctuary gradient + top rule + grid + center monogram)
     .cta-bar  (gold-foil top edge + deeper gradient)
     .hero::after  (gold edge rule)
     .hero .hero__overlay  (refined vignette)
     .btn-gold  (inset highlight + halo + bevel)
   No JS changes this run — all visual.
   --------------------------------------------------------------------------- */

/* ==========================================================================
   BUILDER RUN 143 · 2026-05-24 · Motion & Video Department · lbw143-motion-v1
   --------------------------------------------------------------------------
   Lens: Motion & Video (FIFTH-PASS rotation, project 3 of 9 — Landmark Baptist).
   Author: MattCreates full-agency team. Builder identifier lbw143-motion-v1.

   SCOPE & CONSTRAINT MATRIX
   --------------------------------------------------------------------------
   HARD CONSTRAINT (Landmark CLAUDE.md): keep ALL text exact, keep pictures
   associated with their text. Motion-only chrome — zero text changes, zero
   image moves, zero markup reordering. Every selector here is either
   (a) prefixed `.lbw143-*`, (b) a `[data-lbw143-*]` attribute selector
   injected by lbw143-motion.js, or (c) an additive `::after` / `::before`
   pseudo on an existing class that does NOT alter its visible content.

   SANCTUARY-RESPECTING MOTION LANGUAGE
   --------------------------------------------------------------------------
   This church is NOT MattCreates (atelier-motion run 141) and NOT MattEbersole
   (portfolio-motion run 142). The brand voice is calm, reverent, deliberate —
   visitors come here looking for a worship space, not a marketing splash. So:
     - Default easing is `--ease-in-out` (symmetric Material-standard
       cubic-bezier(0.4, 0, 0.2, 1)) — NOT `--ease-overshoot` and NOT
       a spring curve. Symmetric ease tells the eye "this is steady"
       rather than "this is excited."
     - Default duration is `--motion-deliberate` (800ms) on hero reveals
       and `--motion-slow` (500ms) on section reveals — slower than the
       portfolio sites. A church doesn't rush you in.
     - Word-by-word hero reveal uses pure translateY (no rotateX flourish
       like mc141/me142) — gentle rise, not theatrical.
     - Card hover uses the `--gold-foil` family from run-134 (NOT cyan)
       because gold is already the brand's emphasis ink. Sweep direction
       is slower (1400ms vs me142's 1100ms).
     - No magnetic CTA, no cursor-proximity glow, no spring overshoot, no
       infinite ambient drift — sanctuary calm requires restraint.

   ADDITIVE ONLY — selectors owned by this run
   --------------------------------------------------------------------------
   .lbw143-depthlayer        (NEW — calm tinted background veil, paused
                              under reduced-motion, not infinite drift)
   .lbw143-hword             (NEW — word wrapper for hero h1 reveal)
   .lbw143-hword > span      (NEW — per-word inner span, --lbw143-d delay)
   .lbw143-stagger           (NEW — generic enter-from-below with delay)
   .lbw143-rev               (NEW — section reveal target)
   [data-lbw143-section]     (NEW — wraps existing <section> for reveal)
   .lbw143-titlewrap         (NEW — wraps h1/h2 inner text for gold-rule
                              punctuation underneath)
   .lbw143-titlewrap::after  (NEW — gold-gradient rule sweep beneath title)
   [data-lbw143-card]        (NEW — applied to .nav-card and other cards)
   .lbw143-sweep             (NEW — gold-foil sweep gradient child of cards)
   .lbw143-press             (NEW — :active scale on CTAs)
   .lbw143-focusable         (NEW — calm focus-ring breathing pulse)
   .lbw143-leaving           (NEW — html-level class set during page-leave)
   .lbw143-skeleton          (NEW — shimmer placeholder for slow loads)
   .lbw143-build (marker)    (NEW — invisible identity marker)

   Augments existing without redefining base rules:
     html.lbw143-leaving main     (page-leave fade)
     html.lbw143-leaving .site-main
     html.lbw143-leaving #main
     html.lbw143-leaving .hero
     .nav-card:hover (via data-lbw143-card chrome layered ON TOP)
     .btn-gold:active, .btn:active, .uxr116-cta:active (via .lbw143-press)
     :focus-visible breathing pulse (via .lbw143-focusable)
     ========================================================================== */

/* ---------------------------------------------------------------------------
   (1) lbw143 sanctuary motion tokens — additive, namespaced. Reuses the
   canonical --motion-* / --ease-* family declared at the top of the file
   (Builder Run 79 added these to Landmark in 2026-05-23).
   --------------------------------------------------------------------------- */
:root {
  --lbw143-stagger:        110ms;  /* word-by-word stagger — slower than mc141's 60ms */
  --lbw143-stagger-tight:  90ms;   /* section title→body stagger */
  --lbw143-ease-calm:      cubic-bezier(0.4, 0, 0.2, 1);  /* Material-standard symmetric */
  --lbw143-ease-reverent:  cubic-bezier(0.32, 0.94, 0.6, 1);  /* gentle settle, no overshoot */
  --lbw143-card-lift:      -2px;   /* subtler than mc141's -3px */
  --lbw143-deliberate:     1100ms; /* longer than --motion-deliberate (800ms) — hero reveal */
  --lbw143-gold-foil:      rgba(201, 173, 59, 0.18);
  --lbw143-gold-foil-warm: rgba(226, 208, 106, 0.22);
  --lbw143-teal-veil:      rgba(0, 143, 179, 0.05);
  --lbw143-cream-veil:     rgba(253, 248, 240, 0.04);
}

/* ---------------------------------------------------------------------------
   (2) Optional calm depth layer — opt-in via .lbw143-depthlayer markup.
   NOT a marketing-style drifting radial gradient; this is a static, very
   subtle warm-teal veil that does NOT animate by default. Reduced-motion +
   .perf-min users see the same static appearance.
   --------------------------------------------------------------------------- */
.lbw143-depthlayer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% 18%, var(--lbw143-teal-veil), transparent 65%),
    radial-gradient(50vw 40vh at 88% 80%, var(--lbw143-gold-foil), transparent 65%);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
   (3) Hero word-by-word reveal — gentle rise, no 3D rotation. Each word
   sits in an `.lbw143-hword` span that clips overflow, and the inner span
   does the translate. Per-word delay set via --lbw143-d inline style by
   the JS companion. Fires only after `html.lbw143-hero-ready`.
   --------------------------------------------------------------------------- */
.lbw143-hword {
  display: inline-block;
  overflow: visible;
  vertical-align: bottom;
  line-height: 1.05;
}
.lbw143-hword > span {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  transition:
    transform var(--lbw143-deliberate) var(--lbw143-ease-reverent) var(--lbw143-d, 0ms),
    opacity   var(--lbw143-deliberate) var(--lbw143-ease-reverent) var(--lbw143-d, 0ms);
  will-change: transform, opacity;
}
html.lbw143-hero-ready .lbw143-hword > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   (4) Generic stagger reveal classes — applied by JS to the hero
   subhead, lead, and CTA button. Sanctuary cadence: 14px rise, no scale.
   --------------------------------------------------------------------------- */
.lbw143-stagger {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    transform var(--motion-slow, 500ms) var(--lbw143-ease-reverent) var(--lbw143-d, 0ms),
    opacity   var(--motion-slow, 500ms) var(--lbw143-ease-reverent) var(--lbw143-d, 0ms);
}
html.lbw143-hero-ready .lbw143-stagger {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------------
   (5) Section reveal — calmly slides in title from left, body from right
   (existing UXR-116 sections + section--light + section--alt + section--video).
   Triggered by IntersectionObserver setting `is-lbw143-rev` on the section.
   --------------------------------------------------------------------------- */
[data-lbw143-section] > .container,
[data-lbw143-section] > .uxr116-frame__inner {
  opacity: 1; /* keep parent visible — children animate */
}
[data-lbw143-section] h2,
[data-lbw143-section] .page-title,
[data-lbw143-section] .page-hero__title,
[data-lbw143-section] .section__intro,
[data-lbw143-section] .lbw143-rev {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    transform var(--motion-slow, 500ms) var(--lbw143-ease-reverent),
    opacity   var(--motion-slow, 500ms) var(--lbw143-ease-reverent);
}
[data-lbw143-section] h2,
[data-lbw143-section] .page-title,
[data-lbw143-section] .page-hero__title {
  transform: translate3d(-20px, 0, 0);
}
[data-lbw143-section] .section__intro,
[data-lbw143-section] .page-hero__sub {
  transform: translate3d(20px, 0, 0);
  transition-delay: var(--lbw143-stagger-tight);
}
[data-lbw143-section].is-lbw143-rev h2,
[data-lbw143-section].is-lbw143-rev .page-title,
[data-lbw143-section].is-lbw143-rev .page-hero__title,
[data-lbw143-section].is-lbw143-rev .section__intro,
[data-lbw143-section].is-lbw143-rev .page-hero__sub,
[data-lbw143-section].is-lbw143-rev .lbw143-rev {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------------
   (6) Section-title gold-foil punctuation rule — a 1.5px wide gradient
   sweep underneath h2/h1 inside data-lbw143-section. The sweep grows from
   0 → 100% width over 1.1s after the title arrives. Subtle gold, not loud.
   The JS wraps the title's inner text in `.lbw143-titlewrap` so we have a
   stable anchor for the ::after pseudo. Only non-decorated, pure-text
   titles get wrapped.
   --------------------------------------------------------------------------- */
.lbw143-titlewrap {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
.lbw143-titlewrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1.5px;
  width: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 173, 59, 0) 5%,
    rgba(226, 208, 106, 0.85) 50%,
    rgba(201, 173, 59, 0) 95%,
    transparent 100%
  );
  transition: width var(--lbw143-deliberate) var(--lbw143-ease-reverent) 180ms;
  will-change: width;
}
[data-lbw143-section].is-lbw143-rev .lbw143-titlewrap::after {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   (7) Card four-layer chrome (subtler than mc141 / me142) — gold-foil
   sweep + subtle top-edge gold rule + 2px lift + drop-shadow. Used on
   .nav-card by default; future cards can opt in by setting
   data-lbw143-card.
   --------------------------------------------------------------------------- */
[data-lbw143-card] {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--motion-medium, 300ms) var(--lbw143-ease-reverent),
    filter    var(--motion-medium, 300ms) var(--lbw143-ease-reverent);
}
[data-lbw143-card]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 173, 59, 0) 8%,
    rgba(226, 208, 106, 0.7) 50%,
    rgba(201, 173, 59, 0) 92%,
    transparent 100%
  );
  transform: scaleX(0.6);
  transform-origin: 50% 50%;
  opacity: 0;
  transition:
    transform var(--motion-medium, 300ms) var(--lbw143-ease-reverent),
    opacity   var(--motion-medium, 300ms) var(--lbw143-ease-reverent);
  pointer-events: none;
}
[data-lbw143-card] .lbw143-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 25%,
    var(--lbw143-gold-foil-warm) 50%,
    transparent 75%
  );
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform var(--lbw143-deliberate) var(--lbw143-ease-reverent),
    opacity   var(--motion-medium, 300ms) var(--lbw143-ease-reverent);
  mix-blend-mode: plus-lighter;
}
[data-lbw143-card]:hover,
[data-lbw143-card]:focus-visible,
[data-lbw143-card]:focus-within {
  transform: translateY(var(--lbw143-card-lift));
  filter: drop-shadow(0 14px 26px rgba(12, 42, 51, 0.18));
}
[data-lbw143-card]:hover::after,
[data-lbw143-card]:focus-visible::after,
[data-lbw143-card]:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}
[data-lbw143-card]:hover .lbw143-sweep,
[data-lbw143-card]:focus-visible .lbw143-sweep,
[data-lbw143-card]:focus-within .lbw143-sweep {
  transform: translateX(0%);
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   (8) Tactile press for CTAs — sanctuary-friendly subtle scale on :active.
   Lighter than mc141 (.97) — we keep it at .985 for a more dignified press.
   --------------------------------------------------------------------------- */
.lbw143-press:active {
  transform: translate3d(0, 1px, 0) scale(0.985);
  transition: transform 120ms var(--lbw143-ease-calm);
}

/* ---------------------------------------------------------------------------
   (9) Focus pulse — 3-layer breathing halo for keyboard users. Uses
   client's --focus-halo token (declared in run 69) so the color is
   on-brand teal (#008fb3 at 22% alpha). Calm 2.2s rhythm (slower than
   mc141's 1.8s — sanctuary tempo).
   --------------------------------------------------------------------------- */
.lbw143-focusable:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--focus-halo, rgba(0, 143, 179, 0.22)),
    0 0 14px 4px rgba(0, 143, 179, 0.16);
  animation: lbw143-focuspulse 2.2s var(--lbw143-ease-calm) infinite;
}
@keyframes lbw143-focuspulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px #ffffff,
      0 0 0 4px var(--focus-halo, rgba(0, 143, 179, 0.22)),
      0 0 12px 3px rgba(0, 143, 179, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 2px #ffffff,
      0 0 0 4px var(--focus-halo, rgba(0, 143, 179, 0.30)),
      0 0 22px 6px rgba(0, 143, 179, 0.22);
  }
}

/* ---------------------------------------------------------------------------
   (10) Page-leave transition — when the user clicks an internal link, JS
   adds `html.lbw143-leaving` for ~260ms before the browser swaps. The
   main content gently fades down and out. Reverent, not flashy.
   --------------------------------------------------------------------------- */
html.lbw143-leaving main,
html.lbw143-leaving .site-main,
html.lbw143-leaving #main,
html.lbw143-leaving .hero ~ * {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity   260ms var(--lbw143-ease-calm),
    transform 260ms var(--lbw143-ease-calm);
}

/* ---------------------------------------------------------------------------
   (11) Skeleton shimmer for slow-loading images. Subtle warm-cream sweep
   — NOT cyan, NOT bright. Used by setting `.lbw143-skeleton` on an img
   wrapper until the image loads.
   --------------------------------------------------------------------------- */
.lbw143-skeleton {
  position: relative;
  background: linear-gradient(
    100deg,
    rgba(238, 243, 246, 1) 0%,
    rgba(253, 248, 240, 1) 45%,
    rgba(238, 243, 246, 1) 90%
  );
  background-size: 240% 100%;
  animation: lbw143-skeleton-shimmer 1800ms linear infinite;
}
@keyframes lbw143-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   (12) Eyebrow / kicker presence indicator — a 5×5px gold dot before
   any `.eyebrow` or `.kicker` text, breathing in a calm 3.2s pulse.
   Sanctuary tempo — slower than mc141's 2.4s.
   --------------------------------------------------------------------------- */
.eyebrow.lbw143-eyebrow::before,
.kicker.lbw143-eyebrow::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(201, 173, 59, 0.85);
  box-shadow: 0 0 8px rgba(201, 173, 59, 0.55);
  margin-right: 8px;
  vertical-align: middle;
  animation: lbw143-eyebrow-pulse 3.2s var(--lbw143-ease-calm) infinite;
}
@keyframes lbw143-eyebrow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* ---------------------------------------------------------------------------
   (13) Reveal-style augment for `.fadein` — the rebuild's existing
   `.fadein` class is set on .nav-card and other elements. The legacy
   JS handles them (fadeObserver at script.js:987) but this rule adds
   a sanctuary-tempo settle to elements opted into the lbw143 system
   via `data-lbw143-fade` (set by lbw143-motion.js for non-card targets).
   --------------------------------------------------------------------------- */
[data-lbw143-fade] {
  transition:
    opacity   var(--motion-slow, 500ms) var(--lbw143-ease-reverent),
    transform var(--motion-slow, 500ms) var(--lbw143-ease-reverent);
}

/* ---------------------------------------------------------------------------
   (14) Header brand hover — a gentle 1px lift on the site brand wordmark
   (run-134 already added the header gold rule). Subtle, no glow.
   --------------------------------------------------------------------------- */
.site-header .brand:hover,
.site-header a[href="/"]:hover,
.site-header a[href="index.html"]:hover,
.site-header a[href="./"]:hover {
  transform: translate3d(0, -1px, 0);
  transition: transform var(--motion-fast, 150ms) var(--lbw143-ease-calm);
}

/* ---------------------------------------------------------------------------
   (15) Scroll progress augment — if the rebuild gets a scroll progress
   bar (the SPA's design/hero.js pattern), this paints it with the
   gold-foil family rather than flat cyan, matching the run-134 brand.
   --------------------------------------------------------------------------- */
.scroll-progress.lbw143-scroll-progress {
  background:
    linear-gradient(90deg,
      rgba(201, 173, 59, 0.95) 0%,
      rgba(226, 208, 106, 1) 50%,
      rgba(201, 173, 59, 0.95) 100%) !important;
  box-shadow: 0 0 10px rgba(201, 173, 59, 0.45);
}

/* ---------------------------------------------------------------------------
   (16) lbw143-pause-marquee — pause-on-hover for any marquee-style
   elements (none on the rebuild today, but future-proofing for the
   testimonial strips that may land in a later content pass).
   --------------------------------------------------------------------------- */
.lbw143-pause-marquee:hover {
  animation-play-state: paused;
}

/* ---------------------------------------------------------------------------
   (17) REDUCED-MOTION BRANCH — resolve all lbw143 motion to final state.
   This is the most important branch in the run. Vestibular-disorder
   users should see zero motion forced on them.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lbw143-hword > span {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .lbw143-stagger {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  [data-lbw143-section] h2,
  [data-lbw143-section] .page-title,
  [data-lbw143-section] .page-hero__title,
  [data-lbw143-section] .section__intro,
  [data-lbw143-section] .page-hero__sub,
  [data-lbw143-section] .lbw143-rev {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .lbw143-titlewrap::after {
    width: 100% !important;
    transition: none !important;
  }
  [data-lbw143-card],
  [data-lbw143-card]:hover,
  [data-lbw143-card]:focus-visible,
  [data-lbw143-card]:focus-within {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  [data-lbw143-card] .lbw143-sweep {
    display: none !important;
  }
  [data-lbw143-card]::after {
    transform: scaleX(1) !important;
    opacity: 0.5 !important;
    transition: none !important;
  }
  .lbw143-focusable:focus-visible {
    animation: none !important;
  }
  html.lbw143-leaving main,
  html.lbw143-leaving .site-main,
  html.lbw143-leaving #main,
  html.lbw143-leaving .hero ~ * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lbw143-skeleton {
    animation: none !important;
  }
  .lbw143-eyebrow::before {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   (18) FORCED-COLORS BRANCH — high-contrast Windows. Hide decorative
   chrome (sweep, gold rules, halo), keep focus ring as a solid
   CanvasText outline.
   --------------------------------------------------------------------------- */
@media (forced-colors: active) {
  [data-lbw143-card] .lbw143-sweep,
  [data-lbw143-card]::after,
  .lbw143-titlewrap::after,
  .lbw143-depthlayer,
  .lbw143-eyebrow::before {
    display: none !important;
  }
  .lbw143-focusable:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   (19) .perf-min / .perf-low BRANCH — runtime perf gate already exists on
   this site (sceneController.js + the run-105 contract). Strip the
   heaviest motion on low-power devices.
   --------------------------------------------------------------------------- */
.perf-min .lbw143-depthlayer,
.perf-low .lbw143-depthlayer,
.perf-min [data-lbw143-card] .lbw143-sweep,
.perf-low [data-lbw143-card] .lbw143-sweep,
.perf-min .lbw143-skeleton,
.perf-low .lbw143-skeleton {
  display: none !important;
}
.perf-min [data-lbw143-card]:hover,
.perf-low [data-lbw143-card]:hover {
  filter: none !important;
  transform: none !important;
}
.perf-min .lbw143-focusable:focus-visible,
.perf-low .lbw143-focusable:focus-visible {
  animation: none !important;
  outline: 2px solid var(--primary-blue, #008fb3) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   (20) PRINT BRANCH — strip all decorative chrome to a static, paper-
   friendly render. Titles already-revealed at print time, no rules
   sweeping, no shadows.
   --------------------------------------------------------------------------- */
@media print {
  .lbw143-hword > span,
  .lbw143-stagger,
  [data-lbw143-section] h2,
  [data-lbw143-section] .page-title,
  [data-lbw143-section] .page-hero__title,
  [data-lbw143-section] .section__intro,
  [data-lbw143-section] .lbw143-rev,
  [data-lbw143-section] .page-hero__sub {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lbw143-titlewrap::after,
  [data-lbw143-card] .lbw143-sweep,
  [data-lbw143-card]::after,
  .lbw143-depthlayer,
  .lbw143-eyebrow::before,
  .lbw143-skeleton {
    display: none !important;
  }
  [data-lbw143-card]:hover {
    filter: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   (21) Invisible build marker — grep-checkable identity stamp for audit
   tooling. Hidden from rendering.
   --------------------------------------------------------------------------- */
.lbw143-build::before {
  content: "lbw143-motion-v1";
  display: none;
}

/* ---------------------------------------------------------------------------
   (22) RUN 143 OWNERSHIP MARKER — declares which selectors this run owns
   so future audits can grep for the component family.
   ---------------------------------------------------------------------------
   lbw143-* selectors + selector-level augments owned by builder run 143
   (2026-05-24, Motion & Video lens):
     .lbw143-depthlayer        — calm tinted background veil (opt-in)
     .lbw143-hword             — word wrapper for hero h1 reveal
     .lbw143-stagger           — generic enter-from-below classes
     .lbw143-rev               — section reveal target
     [data-lbw143-section]     — wraps existing <section> for reveal
     .lbw143-titlewrap         — wraps h1/h2 inner text + gold rule punctuation
     [data-lbw143-card]        — applied to .nav-card
     .lbw143-sweep             — gold-foil sweep gradient child of cards
     .lbw143-press             — :active subtle scale on CTAs
     .lbw143-focusable         — calm focus-ring breathing pulse
     html.lbw143-leaving       — page-leave fade (set on <html> by JS)
     .lbw143-skeleton          — warm cream shimmer placeholder
     .lbw143-eyebrow           — eyebrow / kicker gold-dot presence indicator
     [data-lbw143-fade]        — opt-in for legacy .fadein adapters
     .lbw143-scroll-progress   — gold-foil scroll progress augment
     .lbw143-pause-marquee     — pause-on-hover for marquees (future)
     .lbw143-build             — invisible identity marker

   Augments existing without redefining base rules:
     .site-header .brand:hover   — subtle 1px translateY lift
     :focus-visible              — via .lbw143-focusable opt-in

   Easing tokens consumed:
     --motion-fast / --motion-medium / --motion-slow / --motion-deliberate
       (canonical run-79 motion vocabulary)
     --ease-out-expo / --ease-in-quart / --ease-in-out / --ease-overshoot
       (canonical run-79 motion vocabulary) — overshoot NOT used (sanctuary calm)
     --lbw143-ease-calm / --lbw143-ease-reverent  (new local additions)
     --lbw143-deliberate  (new local long-duration token: 1100ms)
     --focus-halo  (run-69 brand-on-brand teal focus ring)
     --primary-blue / --gold / --cream / --navy  (run-69 sanctuary palette)

   Sanctuary-respect commitments honored:
     - No spring overshoot (--ease-overshoot NOT used)
     - No infinite drift on .lbw143-depthlayer (static gradient veil)
     - Word reveal uses translateY only — no rotateX (theatrical)
     - Card hover uses gold-foil (run-134 brand emphasis ink) — not cyan
     - Hero reveal duration = 1100ms (longer than portfolio sites)
     - Section reveal duration = 500ms (--motion-slow, not --motion-medium)
     - Press scale .985 (dignified, not .97 athletic)
     - Reduced-motion supported on every animated rule above
     - No marketing-feel chrome (no magnetic CTA, no cursor-glow)
     - No text content modified, no images moved
   --------------------------------------------------------------------------- */

/* ==========================================================================
   DESKTOP FULL-WIDTH LAYOUTS
   Converts narrow single-column pages to two-column or grid layouts on
   desktop so the full 1200px container is utilized. Mobile layouts are
   unchanged — all rules are gated behind min-width: 768px.
   Affected pages: Location, Our Pastor, Our Staff, Ministries, Missions.
   ========================================================================== */

/* --- Location: image-left / info-right two-column --- */
@media (min-width: 768px) {
  .location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 52px;
    align-items: start;
    text-align: left;
  }
  /* Picture element spans the full height of the right column */
  .location-content > picture {
    grid-column: 1;
    grid-row: 1 / 8;
  }
  /* Every direct child except picture goes to the right column */
  .location-content > :not(picture) {
    grid-column: 2;
  }
  /* Remove the centered max-width constraints that made it look narrow */
  .location-img  { max-width: 100%; margin: 0; }
  .location-times { max-width: none; }
}

/* --- Our Pastor: carousel-left / bio-right two-column --- */
@media (min-width: 768px) {
  #pastor-bio > .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start;
  }
  .pastor-bio {
    max-width: none;
    margin: 0;
  }
  .pastor-bio h2::after { left: 0; transform: none; }
}

/* --- Our Staff: two-column staff groups --- */
@media (min-width: 768px) {
  #staff-roster > .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
}

/* --- Ministries: 4-column card grid on wide viewports --- */
@media (min-width: 1280px) {
  #ministries-adult .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Missions: two-column missionary cards --- */
@media (min-width: 768px) {
  #missionaries-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  #missionaries-list .missionary-card {
    margin-bottom: 0;
  }
}

/* --- Mobile nav: prevent off-screen menu from intercepting pointer events --- */
.mobile-nav { pointer-events: none; }
.mobile-nav.open { pointer-events: auto; }

/* --- Scroll-reveal fade classes (JS adds .fade-visible when in viewport) --- */
.fade-in-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-up:not(.fade-visible):not(.visible) { opacity: 0; transform: translateY(25px); }

.fade-in-down {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-down:not(.fade-visible):not(.visible) { opacity: 0; transform: translateY(-25px); }

.fade-out-up {
  opacity: 0;
  transform: translateY(-25px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-out-down {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-visible,
.visible { opacity: 1; transform: translateY(0); }