/* Zion Lutheran Church · Wausau — shared site styles
   Palette "Golden City" — WCAG AA enforced (see brief)
   EB Garamond display · Spectral body · Spectral small-caps eyebrows (serif system) */

:root {
  --primary: #54401F;
  --primary-deep: #3E2F16;
  --accent: #C9A23F;        /* decorative / dark grounds only */
  --accent-text: #725B20;   /* small gold text on light grounds */
  --accent-soft: #E0C685;   /* text on umber */
  --oxblood: #8A3324;       /* heraldic red from the seal — rare, meaningful accents only */
  --ground: #F5EEDE;
  --ground-soft: #ebe4d1;
  --ground-deep: #e0d7bb;
  --ink: #1A1110;
  --ink-soft: #4a3f36;
  --muted: #675C4C;
  --rule: #c9bea6;
  --display: 'EB Garamond', Georgia, serif;
  --body: 'Spectral', Georgia, serif;
  --mono: 'Spectral', Georgia, serif;
  /* ===== TYPE SCALE (documented — single source of truth) =====
     One modular progression (~1.25 ratio) on the two serif faces already in use.
     Big display steps stay fluid (clamp: mobile -> desktop). Pick a step, don't guess.
       --fs-display  Home hero title            (EB Garamond 500)
       --fs-h1       Inner-page hero title      (EB Garamond 500)
       --fs-h2       Section titles             (EB Garamond 500)
       --fs-h3       Card / study / event titles ~24px (EB Garamond 500)
       --fs-lede     Section intros             ~20px (EB Garamond italic)
       --fs-body     Paragraphs                 17px base (Spectral 400)
       --fs-small    Captions, meta, dates      ~14px (Spectral)
       --fs-eyebrow  Section eyebrows           ~12px (Spectral 600 caps)
     Component sizes further down derive from these steps; deviations are intentional. */
  --fs-display: clamp(2.9rem, 4.8vw, 4.4rem);
  --fs-h1:      clamp(2.8rem, 4.6vw, 4.2rem);
  --fs-h2:      clamp(2rem, 2.9vw, 2.7rem);
  --fs-h3:      1.5rem;
  --fs-lede:    1.18rem;
  --fs-body:    1rem;
  --fs-small:   0.88rem;
  --fs-eyebrow: 0.78rem;
  --content-max: 1200px;
  --hero-wash: 0.6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--ground);
  color: var(--ink);
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===== Accessibility: visible keyboard focus =====
   Ring color must clear 3:1 against its ground (WCAG 2.2 §1.4.11). Gold --accent
   is ~2.1:1 on cream, so light grounds use --accent-text (~5.6:1); dark grounds
   keep --accent-soft, which has ample contrast there. */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible, .nav-cta:focus-visible, .play-btn:focus-visible { outline-offset: 4px; }
/* lighter ring on dark grounds for separation */
.g-umber a:focus-visible, .g-umber-deep a:focus-visible,
.g-umber .btn:focus-visible, footer a:focus-visible, .radio-band a:focus-visible {
  outline-color: var(--accent-soft);
}
/* don't show the ring for mouse clicks, only keyboard */
:focus:not(:focus-visible) { outline: none; }

/* ===== Accessibility: skip link ===== */
.skip-link {
  position: absolute; left: 12px; top: -64px;
  z-index: 1000;
  background: var(--primary); color: var(--ground);
  padding: 11px 20px; border-radius: 2px;
  font-family: var(--body);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: top 0.16s ease;
}
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }

/* ========== EYEBROW SYSTEM (serif small-caps) ========== */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
}
body[data-eyebrow="serif"] .eyebrow {
  font-family: var(--body);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
}
.eyebrow.on-dark { color: var(--accent); }
body .g-umber .eyebrow, body .on-umber .eyebrow { color: var(--accent-soft); }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  font-family: var(--body);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--ground); }
.btn-primary:hover { background: var(--primary-deep); }
.btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--primary); color: var(--ground); }
.btn-on-dark { background: var(--accent); color: var(--primary-deep); }
.btn-on-dark:hover { background: var(--accent-soft); }
.btn-on-dark-ghost { background: transparent; color: var(--accent-soft); border-color: var(--accent-soft); }
.btn-on-dark-ghost:hover { background: var(--accent-soft); color: var(--primary-deep); }
.btn .arrow { display: inline-block; transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }
.arrow svg { width: 1em; height: 1em; vertical-align: -0.12em; }

/* Quiet text links */
.text-link {
  font-family: var(--body);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.text-link:hover { color: var(--primary-deep); }

/* ========== NAV ========== */
.nav-outer {
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 6px 20px -6px rgba(26, 17, 16, 0.22), 0 2px 6px -2px rgba(26, 17, 16, 0.12);
}
.nav {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-mark { width: 38px; height: 38px; object-fit: contain; }
.nav-wordmark strong {
  font-family: var(--display);
  font-size: 1.26rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
  white-space: nowrap;
  position: relative; top: 1.5px;
}
.nav-panel { display: contents; }
.nav-links { display: flex; align-items: center; gap: 26px; flex: 1; justify-content: center; }
.nav-link, .nav-dropdown-toggle {
  font-family: var(--body);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary);
  cursor: pointer; padding: 4px 0;
  transition: color 0.15s;
  background: none; border: 0;
  position: relative;
  white-space: nowrap;
}
.nav-link:hover, .nav-dropdown-toggle:hover { color: var(--primary-deep); }
.nav-link.current::after, .nav-dropdown-toggle.current::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--accent);
}
.nav-dropdown { position: relative; }
.nav-dropdown-toggle .caret {
  display: inline-block; margin-left: 6px;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: 2px; opacity: 0.7;
}
.nav-dropdown-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  background: var(--primary-deep);
  border-top: 2px solid var(--accent);
  min-width: 260px; padding: 10px 0;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s, margin-top 0.15s;
  z-index: 200;
}
.nav-dropdown-panel.wide { min-width: 520px; }
.nav-dropdown-panel.wide .nav-dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; }
.nav-dropdown:hover .nav-dropdown-panel { opacity: 1; visibility: visible; margin-top: 0; }
.nav-dropdown-panel a {
  display: block; padding: 8px 20px;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--accent-soft);
  transition: background 0.12s, color 0.12s;
}
.nav-dropdown-panel a:hover { background: rgba(201, 162, 63, 0.18); color: var(--ground); }
.nav-dropdown-label {
  padding: 10px 20px 4px;
  font-family: var(--mono);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(201, 162, 63, 0.25);
  margin-bottom: 4px;
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: var(--primary); color: var(--ground);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--primary-deep); }
.nav-menu-btn { display: none; }

/* ========== LAYOUT SCAFFOLD ========== */
.shell { max-width: var(--content-max); margin: 0 auto; }
.sect { padding: 96px 40px; }
.sect.tight { padding: 72px 40px; }
/* Tighten the gap directly beneath a page hero / header */
.hero + section.sect,
.page-hero + section.sect,
.page-header + section.sect { padding-top: 44px; }
.g-cream { background: var(--ground); }
.g-soft { background: var(--ground-soft); }
.g-deep { background: var(--ground-deep); }
.g-umber { background: var(--primary); color: var(--ground); }
.g-umber-deep { background: var(--primary-deep); color: var(--accent-soft); }
body[data-grounds="quiet"] .g-soft,
body[data-grounds="quiet"] .g-deep { background: var(--ground); border-top: 1px solid var(--rule); }

.section-head { text-align: center; margin-bottom: 60px; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-head .eyebrow { display: block; margin-bottom: 18px; }
.section-title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 500; font-style: normal;
  color: var(--primary);
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.section-title em { font-style: italic; }
.g-umber .section-title, .g-umber-deep .section-title { color: var(--ground); }
.section-lede {
  font-family: var(--display);
  font-size: 1.14rem; line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
  text-wrap: pretty;
}

/* Poetic devotional line, preserved as a standfirst beneath the descriptive H2 */
.section-subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
  margin: 10px 0 0;
  text-wrap: pretty;
}
.section-subtitle em { font-style: italic; }
.g-umber .section-subtitle, .g-umber-deep .section-subtitle { color: var(--accent-soft); }
.section-subtitle + .section-lede { margin-top: 16px; }

.section-subline {
  font-family: var(--body);
  font-size: 1rem; line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 18px auto 0;
  text-wrap: pretty;
}

/* Cross ornament — use sparingly */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: var(--accent); font-size: 1rem;
  margin: 0 auto;
}
.ornament::before, .ornament::after {
  content: ''; width: 64px; height: 1px; background: var(--accent); opacity: 0.7;
}
.ornament-ox { color: var(--oxblood); }
.ornament-ox::before, .ornament-ox::after { background: var(--oxblood); opacity: 0.45; }
.ornament-ox + .eyebrow, .ornament-solo + .eyebrow { color: var(--oxblood); }
.section-head .ornament { margin-bottom: 18px; }
.visit-close .ornament-solo { color: var(--oxblood); font-size: 1.15rem; margin-bottom: 16px; }

/* ========== SUBPAGE HEADER ========== */
.page-header {
  padding: 84px 40px 72px;
  text-align: center;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.page-header .eyebrow { display: block; margin-bottom: 20px; }
.page-header-title {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 500; font-style: normal;
  color: var(--primary);
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.page-header-lede {
  font-family: var(--display);
  font-size: 1.18rem; font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px; margin: 0 auto;
  text-wrap: pretty;
}
.page-header-seal { width: 168px; margin: 0 auto 30px; }

/* ========== PAGE HERO (image header for secondary pages) ========== */
.page-hero {
  position: relative;
  min-height: clamp(340px, 44vh, 460px);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center;
  overflow: hidden;
  border-bottom: 3px solid var(--accent);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(26, 17, 16, 0.55) 0%,
      rgba(26, 17, 16, 0.30) 38%,
      rgba(26, 17, 16, 0.42) 62%,
      rgba(26, 17, 16, 0.80) 100%),
    radial-gradient(ellipse 90% 78% at 50% 50%, rgba(26, 17, 16, 0.14) 28%, rgba(26, 17, 16, 0.50) 100%);
  pointer-events: none; z-index: 1;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 118%, rgba(84, 64, 31, 0.55) 0%, rgba(84, 64, 31, 0) 60%);
  mix-blend-mode: multiply;
  opacity: var(--hero-wash);
  pointer-events: none; z-index: 1;
}
.page-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.page-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--content-max); width: 100%;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
}
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
  padding: 10px 34px;
  background: radial-gradient(ellipse at center, rgba(26,17,16,0.52) 0%, rgba(26,17,16,0.30) 55%, rgba(26,17,16,0) 100%);
  color: var(--accent-soft);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.page-hero .eyebrow::before, .page-hero .eyebrow::after {
  content: ''; width: 38px; height: 1px;
  background: var(--accent); opacity: 0.85;
}
.page-hero-title {
  min-height: 2.1em;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 500; font-style: normal;
  color: var(--ground);
  line-height: 1.04; margin: 0 0 20px;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92), 0 2px 32px rgba(0, 0, 0, 0.78), 0 1px 8px rgba(0, 0, 0, 0.7);
}
.page-hero-title em { font-style: italic; color: var(--accent); }
.page-hero-lede {
  min-height: 3.2em;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--display);
  font-size: 1.16rem; font-style: italic;
  line-height: 1.6;
  color: var(--ground);
  max-width: 640px; margin: 0 auto;
  text-wrap: pretty;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92), 0 1px 16px rgba(0, 0, 0, 0.8);
}
@media (max-width: 48em) {
  .page-hero { min-height: clamp(300px, 56vh, 400px); }
  .page-hero-inner { padding: 44px 24px; }
}

/* ========== ORDO (worship rhythm) ========== */
.ordo { max-width: 1080px; margin: 0 auto; }
.ordo-tier-label {
  display: flex; align-items: center; gap: 22px;
  margin: 0 0 34px;
}
.ordo-tier-label::before, .ordo-tier-label::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}
.ordo-tier-label span {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-text);
}
.ordo-lords-day {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  margin-bottom: 76px;
}
.ordo-service {
  text-align: center;
  padding: 8px 28px 4px;
  border-left: 1px solid var(--rule);
}
.ordo-service:first-child { border-left: 0; }
.ordo-service-name {
  font-family: var(--display);
  font-size: 1.7rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  line-height: 1.12;
  margin: 0 0 10px;
  min-height: 3.8rem;
  display: flex; align-items: center; justify-content: center;
}
.ordo-service-when {
  font-family: var(--mono);
  font-size: 0.82rem; letter-spacing: 0.1em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ordo-service-when strong { font-weight: 500; color: var(--ink); }
.ordo-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 9px;
  margin: 0 2px;
  background: rgba(245, 238, 222, 0.5);
}
.ordo-service-note {
  font-size: 0.8rem; font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  margin: 10px 0 0;
}

/* Daily office rail */
.ordo-rail {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  max-width: 840px; margin: 0 auto;
}
.ordo-rail::before {
  content: '';
  position: absolute; top: 5px; left: 2%; right: 2%;
  height: 1px; background: var(--accent); opacity: 0.55;
}
.ordo-hour { position: relative; padding-top: 26px; text-align: center; }
.ordo-hour::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 11px; height: 11px;
  background: var(--ground);
  border: 1px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}
.ordo-hour-name {
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 4px;
}
.ordo-hour-time {
  font-family: var(--display);
  font-size: 1.5rem; font-style: italic;
  color: var(--primary);
  margin: 0 0 16px;
}
.ordo-office { margin: 0 0 16px; }
.ordo-office-name {
  font-family: var(--display);
  font-size: 1.16rem; font-style: italic; font-weight: 500;
  color: var(--ink);
  margin: 0 0 3px;
  line-height: 1.25;
}
.ordo-office-days {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 3px;
}
.ordo-office-note { font-size: 0.78rem; font-style: italic; color: var(--muted); margin: 0; line-height: 1.45; }
.ordo-footnote {
  margin-top: 60px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.ordo-footnote a { color: var(--primary); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.ordo-daily-line {
  max-width: 760px; margin: 0 auto; text-align: center;
  font-family: var(--display);
  font-size: 1.35rem; font-style: italic; line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ordo-daily-line strong { font-style: normal; font-weight: 500; color: var(--primary); }
.ordo-placeholder-note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ========== TRIO CARDS (About preview) ========== */
.trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1080px; margin: 0 auto;
}
.trio-card { text-align: left; padding: 0 36px; border-left: 1px solid var(--rule); }
.trio-card:first-child { border-left: 0; }
.trio-card .eyebrow { display: block; margin-bottom: 14px; }
.trio-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; min-height: 2.6em; }
.trio-icon { color: var(--primary); margin: 0; flex-shrink: 0; height: 42px; }
.trio-icon svg { width: 42px; height: 42px; display: block; }
.trio-title {
  font-family: var(--display);
  font-size: 1.5rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  margin: 0; line-height: 1.18;
}
.trio-verse {
  font-family: var(--display);
  font-size: 1.14rem; font-style: italic;
  padding-top: 2px;
  color: var(--accent-text);
  margin: 0 0 12px; line-height: 1.55;
  min-height: 3.6em;
}
.trio-body {
  font-size: 0.95rem; line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* ========== TWO-UP ========== */
.two-up {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 1080px; margin: 0 auto;
}
.two-up-card {
  background: var(--ground);
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px;
}
.g-cream .two-up-card { background: var(--ground-soft); }
.two-up-card .eyebrow { display: block; margin-bottom: 14px; }
.two-up-title {
  font-family: var(--display);
  font-size: 1.95rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  margin: 0 0 12px; line-height: 1.15;
}
.two-up-date {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 14px;
}
.two-up-body { font-size: 0.94rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 28px; flex: 1; }

/* ========== STUDIES ========== */
.studies {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1120px; margin: 0 auto;
}
.study {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  padding: 26px 22px;
}
.study .eyebrow { display: block; font-size: 0.58rem; margin-bottom: 10px; }
.study-name {
  font-family: var(--display);
  font-size: 1.22rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  margin: 0 0 10px; line-height: 1.2;
}
.study-time { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.study-time em { color: var(--muted); }

/* ========== ACADEMY BAND ========== */
.academy-card {
  max-width: 1020px; margin: 0 auto;
  background: var(--ground);
  border: 1px solid var(--rule);
  display: grid; grid-template-columns: 340px 1fr;
  overflow: hidden;
}
.academy-visual {
  background: #1B2A3D;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
  position: relative; overflow: hidden;
}
.academy-visual::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(201,162,63,0) 30%, rgba(201,162,63,0.07) 31.5%, rgba(201,162,63,0) 33%),
    radial-gradient(circle, rgba(201,162,63,0) 44%, rgba(201,162,63,0.06) 45.5%, rgba(201,162,63,0) 47%),
    radial-gradient(circle, rgba(201,162,63,0) 58%, rgba(201,162,63,0.05) 59.5%, rgba(201,162,63,0) 61%),
    radial-gradient(circle at 50% 42%, rgba(240, 233, 214, 0.10) 0%, transparent 60%);
}
.academy-visual::after {
  content: '';
  position: absolute; inset: 14px;
  border: 1px solid rgba(201,162,63,0.28);
  pointer-events: none;
}
.academy-crest {
  position: relative;
  width: 100%; max-width: 188px; height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
  transition: transform 0.25s ease;
}
.academy-card:hover .academy-crest { transform: translateY(-4px); }
.academy-visual-text {
  font-family: var(--display);
  color: var(--accent-soft);
  font-style: italic;
  font-size: 1.55rem;
  text-align: center; line-height: 1.35;
  position: relative;
}
.academy-visual-text strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem; font-style: normal; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.academy-body { padding: 48px 44px; }
.academy-body .eyebrow { display: block; margin-bottom: 14px; font-size: 1.15rem; font-weight: 600; }
.academy-title {
  font-family: var(--display);
  font-size: 2.1rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  margin: 0 0 18px; line-height: 1.15;
}
.academy-text { font-size: 0.96rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 24px; }

/* ========== EVENTS ========== */
.events-list { max-width: 880px; margin: 0 auto; }
.event-row {
  display: grid; grid-template-columns: 210px 1fr auto;
  gap: 32px; align-items: center;
  padding: 26px 0;
}
/* Group by day: divider only between days; same-day rows tuck under, one date + diamond per day */
#events .event-row + .event-row.ev-day-start { border-top: 1px solid var(--rule); }
#events .event-row:not(.ev-day-start) { padding-top: 4px; }
#events .event-row:not(.ev-day-start) .event-date::before { display: none; }
.event-date {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text);
}
.event-title {
  font-family: var(--display);
  font-size: 1.3rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  margin: 0 0 4px;
}
.event-detail { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.events-footer { text-align: center; margin-top: 44px; }

/* ========== GIVE BAND ========== */
.give-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.give-body {
  font-family: var(--display);
  font-size: 1.15rem; font-style: italic;
  line-height: 1.7;
  color: var(--accent-soft);
  margin-bottom: 36px;
  text-wrap: pretty;
}
.give-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.g-umber .section-lede { color: var(--accent-soft); }

/* ========== COME AND SEE CLOSE ========== */
.visit-close {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  max-width: 1080px; margin: 0 auto;
  align-items: center;
}
.visit-close .eyebrow { display: block; margin-bottom: 18px; }
.visit-close-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 3.8vw, 3.4rem);
  font-style: normal; font-weight: 500;
  color: var(--primary);
  margin: 0 0 22px; line-height: 1.06;
}
.visit-close-body {
  font-family: var(--display);
  font-size: 1.12rem; font-style: italic;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 30px;
  text-wrap: pretty;
}
.visit-close-meta {
  margin: 0 0 32px; padding: 0; list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.visit-close-meta li { padding: 12px 0; border-top: 1px solid rgba(84,64,31,0.16); line-height: 1.6; }
.visit-close-meta li:first-child { border-top: 0; padding-top: 0; }
.visit-close-meta strong { font-weight: 500; color: var(--primary); }
.map-frame {
  background: #faf4e6;
  padding: 16px 16px 13px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(26,17,16,0.10), 0 22px 44px -16px rgba(26,17,16,0.55);
  display: flex; flex-direction: column; gap: 11px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.map-hatch { width: 100%; height: auto; display: block; border: 1px solid #d8cbb0; }
.map-pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.map-pin img { width: 44px; height: 44px; }
.map-pin span {
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--primary);
  background: var(--ground);
  border: 1px solid var(--rule);
  padding: 5px 10px;
}
.map-tag {
  text-align: center;
  font-family: var(--display); font-style: italic;
  font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--muted);
}

/* ========== FOOTER ========== */
footer {
  background: var(--primary-deep);
  color: var(--accent-soft);
  padding: 44px 0 26px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr;
  gap: 48px;
  max-width: var(--content-max);
  margin: 0 auto 36px;
  padding: 0 24px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand-row { display: flex; align-items: center; gap: 14px; }
.footer-mark { width: 42px; height: 42px; }
.footer-seal { width: 98px; height: 98px; display: block; }
.footer-els { display: inline-flex; line-height: 0; margin-top: 10px; }
.footer-els-mark { display: block; width: 116px; height: 46px; background: var(--accent-soft); opacity: 0.78;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: opacity 0.15s; }
.footer-els:hover .footer-els-mark { opacity: 1; }
.footer-brand-name {
  font-family: var(--display);
  font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ground);
}
.footer-address { font-size: 0.88rem; line-height: 1.8; color: var(--accent-soft); font-style: normal; margin: 0; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer-col li { font-size: 0.88rem; line-height: 1.5; }
.footer-col a { color: var(--accent-soft); transition: color 0.15s; }
.footer-col a:hover { color: var(--ground); }
.footer-base {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: 28px;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 1px solid rgba(201, 162, 63, 0.25);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.74rem;
  color: #b9a886;
  letter-spacing: 0.05em;
  flex-wrap: wrap; gap: 12px;
}
.footer-base-links { display: flex; gap: 22px; }
.footer-base-links a { color: #b9a886; }
.footer-base-links a:hover { color: var(--accent-soft); }

/* ========== SERMON LIST (shared: Resources + Sermon detail) ========== */
.sermon-list { max-width: 920px; margin: 0 auto; }
.sermon-row {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 28px; align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.sermon-row:last-child { border-bottom: 0; }
.play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.play-btn::after {
  content: '';
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--primary);
  margin-left: 3px;
  transition: border-left-color 0.15s;
}
.sermon-row:hover .play-btn { background: var(--primary); }
.sermon-row:hover .play-btn::after { border-left-color: var(--ground); }
.play-btn:hover { background: var(--primary); }
.play-btn:hover::after { border-left-color: var(--ground); }
.sermon-title {
  font-family: var(--display);
  font-size: 1.35rem; font-style: italic; font-weight: 500;
  color: var(--primary);
  margin: 0 0 5px;
}
.sermon-row:hover .sermon-title { color: var(--primary-deep); }
.sermon-meta {
  font-family: var(--mono);
  font-size: 0.76rem; letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0;
}
.sermon-length {
  font-family: var(--mono);
  font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.08em;
}
@media (max-width: 48em) {
  .sermon-row { grid-template-columns: 44px 1fr; }
  .sermon-length { display: none; }
  .play-btn { width: 44px; height: 44px; }
}

/* ========== SCROLL REVEAL (subtle, motion-safe) ========== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 64em) {
  .nav-links { gap: 18px; }
  .studies { grid-template-columns: repeat(3, 1fr); }
  .ordo-rail { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
  .ordo-rail::before { display: none; }
  .trio { grid-template-columns: 1fr; gap: 44px; max-width: 560px; }
  .trio-card { border-left: 0; padding: 0; }
  .trio-verse { min-height: 0; }
  .academy-card { grid-template-columns: 1fr; }
  .academy-visual { padding: 40px; }
  .visit-close { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 48em) {
  .sect { padding: 64px 24px; }
  .sect.tight { padding: 48px 24px; }
  .page-header { padding: 64px 24px 52px; }
  .nav { padding: 12px 18px; gap: 14px; position: relative; flex-wrap: wrap; }
  .nav-links {
    display: flex;
    flex-basis: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid transparent;
    margin-top: 0; padding-top: 0;
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.30s ease, opacity 0.22s ease, margin-top 0.30s ease, padding-top 0.30s ease, visibility 0s linear 0.30s;
  }
  .nav-cta {
    display: flex; justify-content: center; align-items: center;
    order: 4; flex-basis: 100%; max-width: 260px; margin-left: auto; margin-right: auto;
    border-radius: 2px; padding: 0 15px;
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.30s ease, opacity 0.22s ease, padding 0.30s ease, margin 0.30s ease, visibility 0s linear 0.30s;
  }
  .nav-outer.menu-open .nav-links {
    opacity: 1; visibility: visible;
    border-top-color: var(--rule); margin-top: 2px; padding-top: 12px;
    transition: max-height 0.32s ease, opacity 0.26s ease, margin-top 0.32s ease, padding-top 0.32s ease, visibility 0s;
  }
  .nav-outer.menu-open .nav-cta {
    max-height: 80px; opacity: 1; visibility: visible;
    margin-top: 6px; padding: 12px 15px;
    transition: max-height 0.32s ease, opacity 0.26s ease, padding 0.3s ease, margin 0.3s ease, visibility 0s;
  }
  .nav-links .nav-link {
    padding: 15px 4px;
    text-align: center;
    line-height: 1.25;
  }
  .nav-links .nav-link.current::after { display: none; }
  .nav-links .nav-link.current { color: var(--accent-text); }
  .nav-menu-btn {
    display: flex; flex-direction: column; gap: 5px;
    margin-left: auto;
    background: none; border: 0; cursor: pointer; padding: 8px 4px;
  }
  .nav-menu-btn span { display: block; width: 22px; height: 2px; background: var(--primary); transition: transform 0.18s ease, opacity 0.18s ease; }
  .nav-outer.menu-open .nav-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-outer.menu-open .nav-menu-btn span:nth-child(2) { opacity: 0; }
  .nav-outer.menu-open .nav-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .section-head { margin-bottom: 44px; }
  .ordo-lords-day { grid-template-columns: 1fr; margin-bottom: 56px; }
  .ordo-service { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 8px; text-align: center; }
  .ordo-service:first-child { border-top: 0; padding-top: 8px; }
  .ordo-service-name { min-height: 0; }
  .ordo-rail { grid-template-columns: 1fr; gap: 36px; }
  .ordo-hour { padding-top: 0; padding-left: 0; text-align: center; }
  .ordo-hour::before { display: none; }
  .studies { grid-template-columns: 1fr; max-width: 420px; }
  .two-up { grid-template-columns: 1fr; }
  .two-up-card { min-height: 0; padding: 36px 28px; }
  .res-row .res-title { text-wrap: balance; min-height: 0; }
  .trio-head { min-height: 0; }
  .event-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  #events .event-date:empty { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .give-ctas { flex-direction: column; align-items: center; }
}

/* ============ READABILITY LAYER (WCAG AA + elderly readership) ============
   Raises the floor on small tracked labels to ≥ ~12px, darkens muted ink
   (was 4.4:1 on the deep ground — now passes), enlarges meta/body-adjacent
   text. Palette and the gold-text AA split are unchanged. */
:root { --muted: #5d5343; }
.eyebrow { font-size: 0.78rem; }
body[data-eyebrow="serif"] .eyebrow { font-size: 0.82rem; }
.nav-link, .nav-dropdown-toggle { font-size: 0.78rem; }
.nav-cta { font-size: 0.74rem; }
.nav-dropdown-panel a { font-size: 0.88rem; }
.nav-dropdown-label { font-size: 0.68rem; }
.btn { font-size: 0.78rem; }
.text-link { font-size: 0.76rem; }
.ordo-tag { font-size: 0.66rem; }
.ordo-hour-name { font-size: 0.72rem; }
.ordo-office-days { font-size: 0.78rem; }
.ordo-office-note { font-size: 0.84rem; }
.ordo-service-when { font-size: 0.88rem; }
.ordo-service-note { font-size: 0.84rem; }
.ordo-placeholder-note { font-size: 0.7rem; }
.section-lede { font-size: 1.18rem; }
.two-up-date { font-size: 0.76rem; }
.two-up-body { font-size: 0.97rem; }
.trio-body { font-size: 0.98rem; }
.study .eyebrow { font-size: 0.7rem; }
.study-time { font-size: 0.88rem; }
.event-date { font-size: 0.74rem; }
.event-detail { font-size: 0.9rem; }
.academy-text { font-size: 0.98rem; }
.visit-close-meta { font-size: 0.86rem; }
.map-pin span { font-size: 0.7rem; }
.map-tag { font-size: 0.68rem; }
.footer-col h4 { font-size: 0.72rem; }
.footer-col li { font-size: 0.92rem; }
.footer-base, .footer-base-links a { font-size: 0.82rem; color: #c2b294; }

/* ============ SECTION DELINEATION (site-wide) ============
   Hairline edge per section, stronger cream/tan ground rhythm, and
   larger section-head eyebrows as clear section markers. */
.sect { border-top: 1px solid var(--rule); }
.page-hero + .sect, .page-header + .sect { border-top: 0; }
.sect.g-umber, .sect.g-umber-deep { border-top: 0; }
body[data-grounds="rotated"] .g-soft { background: #e6dcc0; }
body[data-eyebrow] .section-head .eyebrow {
  font-size: 1.15rem;        /* ~18px — clear presence, about half the title */
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.3;
  margin-bottom: 22px;       /* separates the label unit from the headline */
}
/* Group the cross tight to the eyebrow so they read as one announcing unit */
body[data-eyebrow] .section-head .ornament { margin-bottom: 12px; }


/* ========== SECTION DIVIDER (image band between sections) ========== */
.section-divider {
  position: relative;
  height: clamp(290px, 38vh, 440px);
  background-size: cover;
  background-position: center 30%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.divider-scripture { position: relative; z-index: 2; max-width: 760px; padding: 0 32px; }
.section-divider::after {
  content: '';
  position: absolute; inset: 0;
  /* Smooth feather into the neighbouring grounds — no hard mid-stop, no implied line.
     Default (and quiet grounds): both edges fade to cream. */
  background:
    linear-gradient(to bottom, var(--ground) 0%, rgba(245,238,222,0) 36%),
    linear-gradient(to top, var(--ground) 0%, rgba(245,238,222,0) 36%),
    radial-gradient(ellipse 88% 96% at 50% 50%, rgba(26,17,16,0.46) 0%, rgba(26,17,16,0.14) 50%, rgba(26,17,16,0) 78%);
  pointer-events: none;
}
/* Rotated grounds: the Worship section below is tan, so the lower edge fades to tan */
body[data-grounds="rotated"] .section-divider::after {
  background:
    linear-gradient(to bottom, var(--ground) 0%, rgba(245,238,222,0) 36%),
    linear-gradient(to top, #e6dcc0 0%, rgba(230,220,192,0) 36%),
    radial-gradient(ellipse 88% 96% at 50% 50%, rgba(26,17,16,0.46) 0%, rgba(26,17,16,0.14) 50%, rgba(26,17,16,0) 78%);
}
.section-divider + .sect { border-top: 0 !important; }
@media (max-width: 48em) { .section-divider { height: clamp(210px, 32vh, 280px); } }

/* ===== ITALIC POLICY — italic is reserved for Scripture and pull-quotes ===== */
/* Headings, ledes, labels and descriptive prose are set roman for a calmer,
   more consistent voice; the Word stays set-apart in italic. */
.section-lede, .page-header-lede, .page-hero-lede,
.ordo-service-name, .ordo-service-note, .ordo-hour-time, .ordo-office-name,
.ordo-office-note, .ordo-footnote, .ordo-daily-line,
.trio-title, .two-up-title, .study-name, .academy-title, .academy-visual-text,
.event-title, .give-body, .visit-close-body, .footer-address, .sermon-title,
.place-band-sub {
  font-style: normal;
}
/* Scripture, pull-quotes, and title-emphasis accents remain italic */
.trio-verse, .hero-verse, .essay-epigraph, .essay-close-verse,
.verse-band-verse, .section-title em, .hero-display em {
  font-style: italic;
}

/* ===== Heading scale — calmer, consistent lower-page titles ===== */
.two-up-title { font-size: 1.5rem; }
.academy-title { font-size: 1.6rem; }
#events .section-title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
body[data-eyebrow] .visit-close .eyebrow { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.26em; line-height: 1.3; }
.place-band + .sect { border-top: 0 !important; }

/* ===== Resources cards ===== */
.res-grid { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.res-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.res-card { background: var(--ground); border: 1px solid var(--rule); border-top: 2px solid var(--accent); padding: 30px 30px; display: flex; flex-direction: column; gap: 11px; }
.res-card-wide { padding: 34px 38px; }
.res-card .eyebrow { display: block; font-size: 0.7rem; }
.res-title { text-wrap: balance; font-family: var(--display); font-size: 1.45rem; font-weight: 500; color: var(--primary); margin: 0; line-height: 1.18; }
.res-row .res-title { text-wrap: balance; min-height: 2.4em; }
.res-card-wide .res-title { text-wrap: balance; font-size: 1.85rem; }
.res-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
.res-body { font-size: 0.94rem; line-height: 1.62; color: var(--ink-soft); margin: 0; flex: 1; }
.res-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 4px; }
.res-play { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; background: var(--primary); color: var(--ground); border: 1px solid transparent; border-radius: 2px; font-family: var(--body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.15s; }
.res-play:hover { background: var(--primary-deep); }
.res-play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid currentColor; }
.res-play.is-playing .res-play-icon { width: 9px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
/* ===== Inline audio timeline (unfurls only while a track is active) =====
   One player at a time, so at most one of these is ever visible. Injected by
   zion.js directly after the active recording's launcher button.
   Seated directly against that button, like a tab and its pane: the negative
   margin cancels the action row's 12px row-gap, and the button squares its bottom
   corners, so the two read as one object rather than a slab floating below a
   control. Which recording is playing is carried by the button itself (label,
   icon, darkened ground) — no marker on the panel.
   The panel is a FULL-WIDTH FLEX ITEM inserted directly after the active button
   inside .res-actions — not a sibling after the whole row. .res-actions wraps, and
   a sibling after a wrapping flex container can only ever sit below its LAST line,
   which would detach it from its button on tablet/mobile. As a flex item with
   flex-basis 100% it always claims the line immediately after its own button, at
   every viewport, so the attachment is structural. */
.res-timeline { position: relative; flex: 0 0 100%; margin: -12px 0 2px; padding: 16px 20px 14px; background: rgba(139,107,42,0.06); border: 1px solid rgba(62,47,22,0.12); border-top: 2px solid var(--accent-text); border-radius: 0 2px 2px 2px; display: flex; flex-direction: column; gap: 6px; }
/* Row 2: transport on the left, clock on the right. */
.res-tl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.res-tl-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.res-tl-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent-text) var(--pct, 0%), rgba(62,47,22,0.2) var(--pct, 0%)); }
.res-tl-seek::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(62,47,22,0.2); }
.res-tl-seek::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent-text); }
/* Thumb: 13px visual, but the 22px-tall input keeps the touch target generous. */
.res-tl-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--ground); }
.res-tl-seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--ground); }
.res-tl-seek:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 2px; }
.res-tl-time { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; text-align: right; }
.res-tl-skips { display: flex; gap: 8px; }
/* The saved-position offer: same footprint as a skip, accented so it reads as the
   optional path rather than a peer of the transport control beside it. */
.res-tl-resume { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px; background: transparent; border: 1px solid var(--accent); border-radius: 2px; font-family: var(--body); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--accent-text); cursor: pointer; }
.res-tl-resume:hover { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.res-tl-skip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 34px; padding: 6px; background: var(--ground); border: 1px solid rgba(62,47,22,0.22); border-radius: 2px; font-family: var(--body); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--primary); cursor: pointer; }
.res-tl-skip:hover { border-color: var(--accent-text); color: var(--accent-text); }
/* The launcher that owns the open panel becomes the panel's front face: it drops the
   solid umber for the pane's own surface and INTERRUPTS the pane's gold seam across
   its own width, so one continuous line runs out from either side of the tab.
   Two constraints drive the implementation:
   • the 2px accent is an inset shadow, not a border — a 2px border would grow the
     box 1px past the idle sibling's and nudge the row on activation;
   • the mask is the OPAQUE composite of the pane fill over the card ground; the
     semi-transparent fill itself would let the gold read straight through.
   The idle sibling stays solid umber — still an available action, so it should read
   as the more forward control. */
.res-play.is-playing, .res-play.is-loading,
.res-play.is-playing:hover, .res-play.is-loading:hover {
  position: relative; z-index: 1;
  background: rgba(139,107,42,0.06); color: var(--primary);
  border: 1px solid rgba(62,47,22,0.12); border-bottom-color: transparent;
  box-shadow: inset 0 2px 0 var(--accent-text);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* Mask the pane's 2px accent directly beneath the tab. */
.res-play.is-playing::after, .res-play.is-loading::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: rgb(239,230,211);
}
@media (max-width: 30em) { .res-timeline { padding: 14px 16px 12px; } .res-tl-row { gap: 8px; } .res-tl-skips { gap: 6px; } .res-tl-resume { min-width: 0; padding: 6px 10px; } }
/* Touch devices: the seek rail is the primary new interaction, so it needs a finger-
   sized target (WCAG 2.2 AA 2.5.8 asks 24px; the project standard is 44px). The
   visible 3px bar is drawn by the track pseudo-element, so the input's box can grow
   to 44px without thickening the rail. The WebKit thumb is offset from the track, so
   its margin-top is re-centred for the larger thumb: (3 - 18) / 2. */
@media (pointer: coarse) {
  .res-tl-seek { height: 44px; }
  .res-tl-seek::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; }
  .res-tl-seek::-moz-range-thumb { width: 18px; height: 18px; }
  .res-tl-skip { min-width: 44px; min-height: 44px; }
  .res-tl-resume { min-height: 44px; }
  /* No pseudo-element hit-area needed now: both controls are real boxes. */
}
.res-link { font-family: var(--body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); border-bottom: 1px solid var(--accent); padding-bottom: 3px; align-self: flex-start; }
.res-link:hover { color: var(--primary-deep); }
@media (max-width: 53.75em) { .res-row { grid-template-columns: 1fr; } }

/* ===== Resources featured card (service + sermon + cover) ===== */
.res-featured { display: grid; grid-template-columns: 1fr 232px; gap: 38px; align-items: center; }
.res-featured-aside { display: flex; flex-direction: column; gap: 14px; }
.res-cover-caption { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--muted); text-align: center; margin: 0; line-height: 1.4; }
.res-featured-text { display: flex; flex-direction: column; gap: 11px; }
.res-featured-cover {
  display: block; line-height: 0; position: relative;
  padding: 8px; background: #fdfaf2;
  border: 1px solid #e2d8c0; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(26,17,16,0.08), 0 14px 30px -12px rgba(26,17,16,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.res-featured-cover img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.res-featured-cover:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(26,17,16,0.10), 0 22px 42px -12px rgba(26,17,16,0.5); }
.res-cover-slot { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--rule); text-align: center; padding: 12px; }
@media (max-width: 48em) { .res-featured { grid-template-columns: 1fr; } .res-featured-cover { min-height: 200px; } }
.res-actions .res-link { align-self: center; }

/* Worship-folder outline button (secondary to Play Sermon) */
.res-folder { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 2px; font-family: var(--body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.15s, color 0.15s; }
.res-folder:hover { background: var(--primary); color: var(--ground); }

/* ===== Sermon transcript =====
   The toggle is a ghost peer of the bulletin link — a third-tier action beside two
   audio buttons, so it borrows that outline rather than competing for the eye. */
.res-transcript-toggle { display: inline-flex; align-items: center; min-height: 42px; padding: 11px 22px; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 2px; font-family: var(--body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; }
.res-transcript-toggle:hover { background: var(--primary); color: var(--ground); }
.res-transcript-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
/* The panel is a READING surface, not a UI panel: full measure, serif body, generous
   leading, and a gold rule that ties it to the card it belongs to. Width is capped in
   ch so the line length stays comfortable no matter how wide the card grows. */
.res-transcript { margin: 22px 0 4px; padding: 24px 0 4px; border-top: 2px solid var(--accent-text); }
.res-transcript p { max-width: 66ch; margin: 0 0 1.05em; font-family: var(--display); font-size: 1.02rem; line-height: 1.78; color: var(--ink); text-wrap: pretty; }
.res-transcript p:last-child { margin-bottom: 0; }
.res-transcript-status { font-style: italic; color: var(--ink-soft); }
/* Bottom close: quiet by design — it should not compete with the text it follows. */
.res-transcript-close { display: block; margin: 26px 0 0; padding: 10px 20px; background: transparent; color: var(--ink-soft); border: 1px solid rgba(62,47,22,0.2); border-radius: 2px; font-family: var(--body); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.res-transcript-close:hover { color: var(--primary); border-color: var(--primary); }
.res-transcript-close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
@media print { .res-transcript-close { display: none; } }
@media print { .res-transcript { display: block !important; } .res-transcript-toggle { display: none; } }

/* Day of the church year (featured Divine Service card) */
.res-churchday { font-family: var(--display); font-size: 1.05rem; color: var(--accent-text); margin: 2px 0 0; }
.res-play:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

#resources { padding-top: 64px; padding-bottom: 64px; }
#resources .events-footer { margin-top: 64px; }
#resources .section-head { margin-bottom: 40px; }

#events { padding-top: 64px; padding-bottom: 64px; }
#events .events-footer { margin-top: 64px; }
#events .section-head { margin-bottom: 40px; }
/* 16px base + the 4px same-day top gives 20px within a day and 32px between days —
   matching the News page's This Week rhythm exactly. */
#events .event-row { padding: 16px 0; }

/* ===== UNIFORM SECTION SPACING ===== */
.sect { padding-top: 64px; padding-bottom: 64px; }
.section-head { margin-bottom: 40px; }

.res-play { min-width: 176px; justify-content: center; }

/* Come & See: float the church illustration left so it faces into the text (desktop) */
@media (min-width: 64.0625em) {
  #visit .visit-close { grid-template-columns: 1fr 1.1fr; }
  #visit .visit-close > div:not(.map-frame) { order: 2; }
  #visit .visit-close .map-frame { order: 1; }
}

/* News & Events: diamond date markers + gentle row hover */
#events .events-list { position: relative; }
#events .event-row { transition: background 0.18s ease; padding-left: 16px; padding-right: 14px; margin-left: -16px; margin-right: -14px; border-radius: 3px; }
#events .event-row:hover { background: rgba(201,162,63,0.08); }
#events .event-date { position: relative; padding-left: 24px; color: var(--accent-text); line-height: 1.5; }
#events .event-date::before {
  content: ''; position: absolute; left: 3px; top: 0.62em;
  width: 7px; height: 7px; margin-top: -4px; background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(201,162,63,0.16);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
#events .event-row:hover .event-date::before { background: var(--oxblood); box-shadow: 0 0 0 3px rgba(138,51,36,0.15); }
.res-dur { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); align-self: center; }
.res-runtime { font-family: var(--display); font-style: italic; font-size: 0.98rem; color: var(--muted); margin: -2px 0 4px; line-height: 1.5; }
/* ===== Divine Service archive (Resources) ===== */
.service-archive { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.svc-card { background: var(--ground); border: 1px solid var(--rule); border-top: 2px solid var(--accent); padding: 24px 26px; display: grid; grid-template-columns: 104px 1fr; gap: 26px; align-items: start; }
.svc-cover { display: block; line-height: 0; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.svc-cover img { width: 100%; height: auto; display: block; }
.svc-body { display: flex; flex-direction: column; gap: 8px; }
.svc-date { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.svc-title { font-family: var(--display); font-size: 1.4rem; font-weight: 500; color: var(--primary); line-height: 1.18; margin: 0; }
.svc-churchday { font-size: 0.92rem; color: var(--muted); margin: 0; }
.svc-runtime { font-family: var(--body); font-style: italic; font-size: 0.92rem; color: var(--muted); margin: 2px 0 4px; }
.svc-card .res-actions { margin-top: 4px; }
@media (max-width: 37.5em) { .svc-card { grid-template-columns: 1fr; } .svc-cover { max-width: 160px; } }
/* ===== On-this-page jump nav (Resources) ===== */
.page-jump { max-width: var(--content-max); margin: 0 auto; padding: 30px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-bottom: 1px solid var(--rule); background: var(--ground); }
.page-jump-intro { font-family: var(--display); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--ink-soft); text-align: center; max-width: 720px; margin: 0; text-wrap: pretty; }
.page-jump-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.page-jump-links a { font-family: var(--body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); padding: 6px 18px; border-left: 1px solid var(--rule); transition: color 0.15s; }
.page-jump-links a:first-child { border-left: 0; }
.page-jump-links a:hover { color: var(--accent-text); }
:target { scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 42.5em) {
  .page-jump { padding: 16px 22px; gap: 6px 0; }
  .page-jump-label { width: 100%; text-align: center; margin: 0 0 6px; }
  .page-jump-links a { padding: 5px 12px; font-size: 0.66rem; }
}
/* ===== In This Section index (Resources) ===== */
.page-index { padding: 26px 40px 28px; border-bottom: 1px solid var(--rule); background: transparent; }
.page-index-title { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 16px; }
.page-index-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); }
.page-index-grid li { border-left: 0; }
.page-index-grid li:first-child { border-left: 0; }
.page-index-grid a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 4px 28px; }
.pidx-cross { color: var(--accent); font-size: 0.95rem; line-height: 1; transition: color 0.15s; }
.pidx-name { font-family: var(--display); font-size: 1.2rem; font-weight: 500; color: var(--primary); line-height: 1.16; transition: color 0.15s; }
.pidx-desc { font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--muted); line-height: 1.4; }
.page-index-grid a:hover .pidx-name { color: var(--accent-text); }
.page-index-grid a:hover .pidx-cross { color: var(--oxblood); }
@media (max-width: 48em) {
  .page-index { padding: 20px 18px 22px; }
  .page-index-title { margin-bottom: 12px; }
  .page-index-grid, .page-index-grid.cols-3 { grid-template-columns: 1fr; gap: 0; max-width: 340px; }
  .page-index-grid li, .page-index-grid li:nth-child(odd), .page-index-grid li:nth-child(n+3) { border-left: 0; border-top: 1px solid rgba(201,162,63,0.22); }
  .page-index-grid li:first-child { border-top: 0; }
  .page-index-grid a { flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: 11px; padding: 13px 8px; }
  .page-index-grid .pidx-cross { flex-shrink: 0; font-size: 0.9rem; }
  .page-index-grid .pidx-name { font-size: 1.02rem; line-height: 1.15; }
  .page-index-grid .pidx-desc { display: none; }
}
.page-index-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 780px; }
@media (max-width: 48em){ .page-index-grid.cols-3 { grid-template-columns: 1fr 1fr; } }
.page-index-grid.cols-5 { grid-template-columns: repeat(5, 1fr); max-width: 1100px; }
@media (max-width: 48em){
  .page-index-grid.cols-5 { grid-template-columns: 1fr; max-width: 340px; }
  .page-index-grid.cols-5 li, .page-index-grid.cols-5 li:nth-child(n+3) { border-left: 0; border-top: 1px solid rgba(201,162,63,0.22); }
  .page-index-grid.cols-5 li:first-child { border-top: 0; }
  .page-index-grid.cols-5 a { flex-direction: row; align-items: center; justify-content: center; gap: 11px; padding: 13px 8px; }
  .page-index-grid.cols-5 .pidx-cross { flex-shrink: 0; }
}

/* ========== WSAU RADIO STRIP ========== */
.radio-strip { max-width: 1080px; margin: 0 auto; background: linear-gradient(135deg, #efe6cb 0%, #e6dbbb 100%); border: 1px solid #d8c89a; border-top: 2px solid var(--accent); padding: 42px 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 44px; align-items: center; position: relative; overflow: hidden; }
.radio-strip::before { content: ''; position: absolute; left: -70px; top: 50%; width: 380px; height: 380px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(84,64,31,0) 38%, rgba(84,64,31,0.10) 39.5%, rgba(84,64,31,0) 41%), radial-gradient(circle, rgba(84,64,31,0) 53%, rgba(84,64,31,0.08) 54.5%, rgba(84,64,31,0) 56%), radial-gradient(circle, rgba(84,64,31,0) 68%, rgba(84,64,31,0.06) 69.5%, rgba(84,64,31,0) 71%); pointer-events: none; }
.radio-year-wrap { position: relative; text-align: center; }
.radio-year { font-family: var(--display); color: var(--accent); font-size: clamp(3.4rem, 6vw, 4.8rem); font-weight: 600; line-height: 0.9; }
.radio-since { font-family: var(--mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin: 12px 0 0; }
.radio-body { position: relative; }
.radio-strip .eyebrow { color: var(--accent-text); display: block; margin-bottom: 10px; }
.radio-strip h3 { font-family: var(--display); font-size: 1.55rem; font-weight: 500; color: var(--primary); margin: 0 0 10px; line-height: 1.18; }
.radio-strip p { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 50ch; }
.radio-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.onair { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.onair-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b5d44; }
.onair-label { color: var(--muted); }
.radio-strip[data-live="true"] .onair-dot { background: #d23b2e; }
.radio-strip[data-live="true"] .onair-label { color: #a32414; }
.radio-listen { cursor: pointer; }
.radio-listen:disabled { opacity: 0.45; pointer-events: none; cursor: default; }
.radio-listen.is-playing { background: var(--primary-deep); }
.radio-time { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--muted); margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .radio-strip[data-live="true"] .onair-dot { animation: onairPulse 1.6s ease-out infinite; }
  @keyframes onairPulse { 0% { box-shadow: 0 0 0 0 rgba(210,59,46,0.6); } 70% { box-shadow: 0 0 0 10px rgba(210,59,46,0); } 100% { box-shadow: 0 0 0 0 rgba(210,59,46,0); } }
}
@media (max-width: 48em) { .radio-strip { grid-template-columns: 1fr; padding: 32px 28px; gap: 22px; text-align: center; } .radio-strip p { max-width: none; } .radio-strip::before { display: none; } }
/* Audio loading state: spinner replaces the play triangle while buffering */
.res-play.is-loading { cursor: progress; }
.res-play.is-loading .res-play-icon { width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: resSpin 0.7s linear infinite; }
@keyframes resSpin { to { transform: rotate(360deg); } }
.radio-listen.is-loading { cursor: progress; }
.radio-spin { display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: resSpin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .radio-spin { animation: none; opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .res-play.is-loading .res-play-icon { animation: none; opacity: 0.6; } }
.acad-br { display: none; }
@media (min-width: 48.0625em) { .acad-br { display: inline; } }

/* ===== Nav collapses to hamburger early enough that the desktop bar never overflows ===== */
@media (max-width: 70em) {
  .nav { padding: 10px 22px 8px; gap: 0 14px; position: relative; flex-wrap: wrap; }
  .nav-links {
    display: flex;
    flex-basis: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid transparent;
    margin-top: 0; padding-top: 0;
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.30s ease, opacity 0.22s ease, margin-top 0.30s ease, padding-top 0.30s ease, visibility 0s linear 0.30s;
  }
  .nav-cta {
    display: flex; justify-content: center; align-items: center;
    order: 4; flex-basis: 100%; max-width: 260px; margin-left: auto; margin-right: auto;
    border-radius: 2px; padding: 0 15px;
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.30s ease, opacity 0.22s ease, padding 0.30s ease, margin 0.30s ease, visibility 0s linear 0.30s;
  }
  .nav-outer.menu-open .nav-links {
    opacity: 1; visibility: visible;
    border-top-color: var(--rule); margin-top: 2px; padding-top: 12px;
    transition: max-height 0.32s ease, opacity 0.26s ease, margin-top 0.32s ease, padding-top 0.32s ease, visibility 0s;
  }
  .nav-outer.menu-open .nav-cta {
    max-height: 80px; opacity: 1; visibility: visible;
    margin-top: 6px; padding: 12px 15px;
    transition: max-height 0.32s ease, opacity 0.26s ease, padding 0.3s ease, margin 0.3s ease, visibility 0s;
  }
  .nav-links .nav-link { padding: 15px 4px; text-align: center; line-height: 1.25; }
  .nav-links .nav-link.current::after { display: none; }
  .nav-links .nav-link.current { color: var(--accent-text); }
  .nav-menu-btn {
    display: flex; flex-direction: column; gap: 5px;
    margin-left: auto;
    background: none; border: 0; cursor: pointer; padding: 8px 4px;
  }
  .nav-menu-btn span { display: block; width: 22px; height: 2px; background: var(--primary); transition: transform 0.18s ease, opacity 0.18s ease; }
  .nav-outer.menu-open .nav-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-outer.menu-open .nav-menu-btn span:nth-child(2) { opacity: 0; }
  .nav-outer.menu-open .nav-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ===== Mobile menu: absolute overlay panel (doesn't push page content) ===== */
@media (max-width: 70em) {
  .nav-panel {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ground);
    border-top: 1px solid var(--rule);
    box-shadow: 0 16px 30px -10px rgba(26,17,16,0.30);
    padding: 6px 18px 20px;
    max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.30s ease, opacity 0.24s ease, visibility 0s linear 0.30s;
  }
  .nav-outer.menu-open .nav-panel {
    max-height: calc(100svh - 4.5rem);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    opacity: 1; visibility: visible;
    transition: max-height 0.32s ease, opacity 0.26s ease, visibility 0s;
  }
  /* The panel now gates visibility; keep its children always shown inside it */
  .nav-links, .nav-outer.menu-open .nav-links {
    max-height: none; opacity: 1; visibility: visible; overflow: visible;
    flex-basis: auto; margin-top: 0; padding-top: 8px; border-top: 0;
    transition: none;
  }
  .nav-cta, .nav-outer.menu-open .nav-cta {
    max-height: none; opacity: 1; visibility: visible; overflow: visible;
    margin: 14px auto 0; transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-panel, .nav-outer.menu-open .nav-panel { transition: none; }
  }
}
body.nav-locked { overflow: hidden; }

/* Lord's Day cells: equal-height columns with tags bottom-aligned (fixes wrap jank) */
.ordo-lords-day .ordo-service { display: flex; flex-direction: column; align-items: center; }
.ordo-lords-day .ordo-service .ordo-tag { margin-top: auto; }
.ordo-lords-day .ordo-service-name { margin-bottom: 16px; }
@media (max-width: 48em) {
  .ordo-lords-day .ordo-service { align-items: center; text-align: center; }
  .ordo-lords-day .ordo-service .ordo-tag { margin-top: 8px; }
}

/* ===== Nav: animated gold hover underline (desktop) + homepage wordmark indicator ===== */
@media (hover: hover) and (min-width: 70.0625em) {
  .nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
    height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: center;
    transition: transform 0.18s ease;
  }
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-link.current::after { transform: scaleX(1); }
}
/* Wordmark is the masthead, not a nav item: no underline; only a subtle hover cue */
.nav-brand .nav-wordmark strong { transition: color 0.15s; }
@media (hover: hover) {
  .nav-brand:hover .nav-wordmark strong { color: var(--primary-deep); }
}

/* Academy band: prevent mobile horizontal overflow */
.academy-body { min-width: 0; }
.academy-title, .academy-text, .academy-body .eyebrow { overflow-wrap: break-word; }
@media (max-width: 48em) {
  .academy-body { padding: 32px 24px; }
  .academy-title { font-size: 1.55rem; }
  .academy-body .eyebrow { font-size: 15px !important; letter-spacing: 0.16em; }
}
/* Footer refinements: tagline, cross flourish, mobile centering */
.footer-tagline { font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--accent); margin: -2px 0 0; letter-spacing: 0.02em; }
.footer-cross { text-align: center; color: var(--accent); font-size: 1.05rem; opacity: 0.85; max-width: var(--content-max); margin: 0 auto; padding: 0 24px 16px; }
@media (max-width: 48em) {
  .footer-brand { align-items: center; text-align: center; }
  .footer-address { text-align: center; }
  .footer-els { align-self: center; }
}

/* ===== Centered colophon footer ===== */
.footer-center { max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.footer-center .footer-seal { width: 92px; height: 92px; margin: 0 auto; }
.footer-center .footer-tagline { font-family: var(--display); font-style: italic; font-size: 1.08rem; color: var(--accent); margin: 12px 0 0; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 22px 0 0; }
.footer-nav a { font-family: var(--body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft); transition: color 0.15s; }
.footer-nav a:hover { color: var(--ground); }
.footer-rule { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 420px; margin: 26px auto 24px; }
.footer-rule::before, .footer-rule::after { content: ''; height: 1px; flex: 1; background: var(--accent); opacity: 0.4; }
.footer-rule span { color: var(--accent); font-size: 1rem; opacity: 0.9; }
.footer-contact { font-size: 0.86rem; line-height: 1.7; color: var(--accent-soft); margin: 0; }
.footer-contact a { color: inherit; }
.footer-contact a:hover { color: var(--ground); }
.footer-center .footer-els { margin: 22px 0 0; }
.footer-center .footer-els-mark { width: 108px; height: 42px; }
.footer-legal { font-size: 0.74rem; letter-spacing: 0.03em; color: #b9a886; margin: 18px 0 0; line-height: 1.7; }
.footer-legal a { color: #b9a886; border-bottom: 1px solid rgba(201,162,63,0.4); padding-bottom: 1px; }
.footer-legal a:hover { color: var(--accent-soft); }
@media (max-width: 37.5em) {
  .footer-nav { gap: 12px 18px; }
  .footer-contact { font-size: 0.82rem; }
}

/* On-This-Page index: stronger desktop click affordances */
@media (hover: hover) and (min-width: 48.0625em) {
  .page-index-grid a { position: relative; border-radius: 3px; transition: background 0.15s; }
  .page-index-grid a:hover { background: rgba(201,162,63,0.10); }
  .pidx-name { position: relative; display: inline-block; }
  .pidx-name::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.18s ease; }
  .page-index-grid a:hover .pidx-name::after { transform: scaleX(1); }
  .page-index-grid a:hover .pidx-desc { color: var(--accent-text); }
}
.footer-seal-link { display: inline-block; transition: opacity 0.15s; }
.footer-seal-link:hover { opacity: 0.82; }

/* Mobile: keep long button labels from forcing full-bleed width */
@media (max-width: 48em) {
  .btn { letter-spacing: 0.1em; font-size: 0.66rem; padding: 13px 22px; white-space: normal; text-align: center; max-width: 100%; }
}

/* Suppress nav menu transitions during viewport resize (prevents CTA flash at breakpoint) */
html.nav-resizing .nav-links, html.nav-resizing .nav-cta, html.nav-resizing .nav-menu-btn span { transition: none !important; }

/* ===== On-This-Page index: dark "hero footer" band, tied to the hero above ===== */
.page-index { background: var(--oxblood); border-bottom: 0; border-top: 0; }
.page-index-title { color: var(--accent-soft); }
.page-index .pidx-name { color: var(--ground); }
.page-index .pidx-desc { color: var(--accent-soft); }
.page-index .pidx-cross { color: var(--accent); }
.page-index-grid a:hover .pidx-name { color: #fff; }
.page-index-grid a:hover .pidx-cross { color: var(--accent-soft); }
@media (max-width: 48em) {
  .page-index-grid li, .page-index-grid li:nth-child(n+3) { border-color: rgba(201,162,63,0.22); }
}
@media (hover: hover) and (min-width: 48.0625em) {
  .page-index-grid a:hover { background: rgba(201,162,63,0.12); }
}

/* 3-item index on mobile: clean single-column list instead of an orphaned 2x2 */
@media (max-width: 48em) {
  .page-index-grid.cols-3 { grid-template-columns: 1fr; max-width: 340px; }
  .page-index-grid.cols-3 li, .page-index-grid.cols-3 li:nth-child(n+3) { border-left: 0; border-top: 1px solid rgba(201,162,63,0.22); }
  .page-index-grid.cols-3 li:first-child { border-top: 0; }
  .page-index-grid.cols-3 a { flex-direction: row; align-items: center; justify-content: center; gap: 11px; padding: 13px 8px; }
  .page-index-grid.cols-3 .pidx-cross { flex-shrink: 0; }
}

/* On dark index band: brighten descriptor on hover (was darkening, got lost) */
@media (hover: hover) and (min-width: 48.0625em) {
  .page-index-grid a:hover .pidx-desc { color: var(--ground); }
}

/* On-This-Page dark band: fade only (no slide) so the beige beneath never peeks through */
.page-index.reveal { transform: none !important; }
/* Clean seam + breathing room from the dark index band into the first content section */
.page-index + .sect { border-top: 0; padding-top: 76px; }
@media (max-width: 48em){ .page-index + .sect { padding-top: 56px; } }

/* ===== Support CTA: plain close with standard hairline above the footer ===== */
.support-cta { background: var(--ground); }

/* Hero primary CTA: lift off the photo with elevation (no border) */
.hero .btn-primary { box-shadow: 0 4px 16px rgba(0,0,0,0.45); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; }
.hero .btn-primary:hover { box-shadow: 0 7px 22px rgba(0,0,0,0.5); transform: translateY(-1px); }
@media (max-width: 48em) {
  .page-index { padding-bottom: 14px; }
  .page-index-grid .pidx-cross { display: none; }
}
.radio-folder { font-family: var(--body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color 0.15s; }
.radio-folder:hover { color: var(--primary); }
.radio-folder .arrow { transition: transform 0.15s; }
.radio-folder:hover .arrow { transform: translateX(3px); }
.radio-ico { display: inline-block; width: 0.6em; height: 0.72em; vertical-align: -1px; }
.ico-pdf { display: inline-block; vertical-align: -1px; margin-left: 3px; }
/* ===== Monthly calendar download (News page) ===== */
.cal-download { text-align: center; margin: 4px 0 40px; }
.cal-download[hidden] { display: none; }