/* ============================================================
   Golgotha Romanian Baptist Church
   Palette:  white / bone / ink navy / royal / sky / slate
   Display:  Cormorant Garamond   Body: Inter
   ============================================================ */

:root {
  --white:     #FFFFFF;
  --bone:      #F7F9FC;
  --bone-2:    #E9F0F9;
  --ink:       #14213D;
  --ink-soft:  #1E2E52;
  --royal:     #1F4E9C;
  --royal-lt:  #2C64BE;
  --sky:       #8FC1EA;
  --sun:       #D9A94E;
  --slate:     #4C5A70;
  --slate-lt:  #5B6980;
  --line:      #D6E1EF;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --narrow: 720px;
}

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

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

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

body.gw-locked { overflow: hidden; height: 100vh; }

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--narrow); }
.center { text-align: center; }

/* ---------- Cross mark ---------- */
.brand-mark, .gateway-mark {
  position: relative;
  display: inline-block;
  flex: none;
}
.gateway-mark { width: 46px; height: 58px; margin: 0 auto 26px; }
.brand-mark   { width: 20px; height: 26px; }
.brand-mark.small { width: 26px; height: 34px; }

.cross-v, .cross-h { position: absolute; background: var(--royal); }
.cross-v { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.cross-h { top: 34%; left: 0; right: 0; height: 2px; }
.gateway-mark .cross-v, .gateway-mark .cross-h { background: var(--sky); }
.site-footer .cross-v, .site-footer .cross-h { background: var(--sky); }

/* ============================================================
   LANGUAGE GATEWAY
   ============================================================ */
.gateway {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 1;
  transition: opacity .55s ease;
}
.gateway.closing { opacity: 0; }
.gateway.hidden { display: none; }

.gateway-inner {
  max-width: 640px;
  width: 100%;
  text-align: center;
  animation: gwRise .7s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes gwRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gateway-eyebrow {
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 14px;
}
.gateway-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.1;
  letter-spacing: .01em;
}
.gateway-sub {
  color: rgba(255,255,255,.62);
  font-size: 15px;
  letter-spacing: .04em;
  margin: 14px 0 40px;
}

.gateway-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gw-btn {
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(143,193,234,.4);
  color: var(--bone);
  padding: 30px 22px;
  text-align: center;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.gw-btn:hover, .gw-btn:focus-visible {
  background: rgba(143,193,234,.1);
  border-color: var(--sky);
  transform: translateY(-2px);
  outline: none;
}
.gw-btn-lang {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
}
.gw-btn-desc {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.7);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
}
.brand-sub {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate-lt);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.site-nav a {
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--royal);
  transition: width .25s ease;
}
.site-nav a:hover::after { width: 100%; }
.site-nav a:hover { color: var(--royal); }

.nav-cta {
  border: 1px solid var(--royal);
  color: var(--royal) !important;
  padding: 8px 18px !important;
  border-radius: 2px;
  transition: background .2s ease, color .2s ease !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--royal); color: var(--bone) !important; }

.lang-switch {
  cursor: pointer;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--slate);
  display: flex;
  gap: 5px;
  align-items: center;
  transition: border-color .2s ease;
}
.lang-switch:hover { border-color: var(--royal); }
.lang-switch span[data-active] { transition: color .2s ease; }
.lang-switch .lang-sep { color: var(--line); }
.lang-switch span.on { color: var(--royal); font-weight: 600; }

.menu-toggle {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 30px;
  height: 22px;
  position: relative;
}
.menu-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease;
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 10px; }
.menu-toggle span:nth-child(3) { top: 20px; }
.menu-toggle.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(72px, 12vw, 128px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(143,193,234,.08), transparent 55%),
    var(--bone);
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 22px;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 8.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.hero-title-em {
  font-style: italic;
  font-weight: 500;
  color: var(--royal);
}
.hero-lede {
  margin: 30px 0 38px;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.65;
  color: var(--slate);
  max-width: 620px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 14px 28px;
  border-radius: 2px;
  transition: all .22s ease;
  cursor: pointer;
}
.btn-solid { background: var(--royal); color: var(--bone); }
.btn-solid:hover { background: var(--royal-lt); transform: translateY(-2px); }
.btn-line { border: 1px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bone); }

.hero-rule {
  max-width: var(--wrap);
  margin: clamp(48px,7vw,88px) auto 0;
  padding: 0 28px;
  height: 1px;
  background: var(--line);
  position: relative;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(64px, 9vw, 108px) 0; }
.section-alt { background: var(--bone-2); }
.section-dark { background: var(--ink); color: var(--bone); }

.eyebrow {
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 16px;
}
.eyebrow.light { color: var(--sky); }

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin-bottom: 30px;
  color: var(--ink);
}
.section-title.light { color: var(--bone); }

.prose { max-width: 640px; }
.prose p {
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.72;
  color: var(--slate);
  margin-bottom: 20px;
}
.prose p:last-child { margin-bottom: 0; }
.section-dark .prose p { color: rgba(255,255,255,.78); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Belief grid ---------- */
.belief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.belief-card {
  border-top: 2px solid var(--royal);
  padding-top: 22px;
}
.belief-num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--royal);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 12px;
}
.belief-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--ink);
}
.belief-card p {
  font-size: 15.5px;
  color: var(--slate);
  line-height: 1.62;
}

/* ============================================================
   SERVICE TIMES
   ============================================================ */
.times-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.time-block {
  padding: 34px 26px 34px 0;
  border-bottom: 1px solid var(--line);
}
.time-day {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--royal);
  margin-bottom: 20px;
}
.time-list { list-style: none; }
.time-list li {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.time-list li:first-child { border-top: none; }
.time-when {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.time-when .ampm { font-size: 15px; margin-left: 3px; color: var(--slate-lt); }
.time-what {
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--slate);
  margin-top: 3px;
}

/* ============================================================
   STAFF
   ============================================================ */
.staff-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 42px;
}
.staff-card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 34px 30px;
}
.section-alt .staff-card { background: var(--bone); }
.staff-role {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--royal);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.staff-bio { font-size: 16px; color: var(--slate); line-height: 1.68; }

/* ============================================================
   VISIT / CONTACT
   ============================================================ */
.contact-line {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  align-items: baseline;
}
.contact-line:first-of-type { border-top: none; }
.contact-label {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sky);
  min-width: 82px;
  flex: none;
}
.contact-line a {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  color: var(--bone);
  transition: color .2s ease;
}
.contact-line a:hover { color: var(--sky); }

.visit-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.visit-social a {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.2);
  padding: 9px 18px;
  border-radius: 2px;
  transition: all .2s ease;
}
.visit-social a:hover { border-color: var(--sky); color: var(--bone); }


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink-soft);
  color: rgba(255,255,255,.72);
  padding: 52px 0;
}

.footer-name { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--bone); line-height: 1.2; }
.footer-name-ro { font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.footer-verse {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--sky);
}
.footer-copy { font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    top: 72px; right: 0;
    width: min(320px, 86vw);
    height: calc(100vh - 72px);
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 32px 34px;
    transform: translateX(105%);
    transition: transform .34s cubic-bezier(.16,.84,.44,1);
    margin-left: 0;
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav a { color: var(--bone); font-size: 17px; padding: 12px 0; width: 100%; }
  .site-nav a::after { background: var(--sky); }
  .site-nav a:hover { color: var(--sky); }
  .nav-cta {
    border-color: var(--sky);
    color: var(--sky) !important;
    margin-top: 14px;
    width: 100%;
    justify-content: center;
  }
  .nav-cta:hover { background: var(--sky); color: var(--ink) !important; }
  .menu-toggle { display: block; margin-left: auto; }
  .lang-switch { margin-left: auto; order: 2; }

  .belief-grid { grid-template-columns: 1fr; gap: 24px; }
  .times-grid { grid-template-columns: 1fr 1fr; }
  .staff-list { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; gap: 34px; }
  .gateway-choices { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .header-inner { gap: 10px; }
  .times-grid { grid-template-columns: 1fr; }
  .time-block { padding-right: 0; }
  .contact-line { flex-direction: column; gap: 4px; }
}

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* Active nav link (current page) */
.site-nav a.active { color: var(--royal); }
.site-nav a.active::after { width: 100%; }
@media (max-width: 860px) {
  .site-nav a.active { color: var(--sky); }
}

/* Interior page banner (replaces the tall home hero on sub-pages) */
.page-banner {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 0 clamp(40px, 6vw, 68px);
  background:
    radial-gradient(120% 160% at 82% 0%, rgba(143,193,234,.09), transparent 55%),
    var(--bone);
  border-bottom: 1px solid var(--line);
}
.page-banner .wrap { max-width: var(--wrap); }
.page-banner-eyebrow {
  font-size: 12.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 18px;
}
.page-banner-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 6.5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 15ch;
}
.page-banner-title em { font-style: italic; font-weight: 500; color: var(--royal); }
.page-banner-lede {
  margin-top: 22px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.65;
  color: var(--slate);
  max-width: 56ch;
}

/* Give the first content section on interior pages breathing room */
.page-body { padding-top: clamp(56px, 8vw, 92px); }

/* Leadership + creative team grids */
.team-block { margin-top: 56px; }
.team-block:first-of-type { margin-top: 0; }
.team-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 32px);
  color: var(--ink);
  margin-bottom: 6px;
}
.team-heading-rule {
  width: 44px; height: 2px; background: var(--royal);
  margin-bottom: 26px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.team-grid.cols-1 { grid-template-columns: repeat(3, 1fr); max-width: 640px; }
.member {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.member-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.member-role {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-lt);
  margin-top: 5px;
}

@media (max-width: 860px) {
  .team-grid, .team-grid.cols-1 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .team-grid, .team-grid.cols-1 { grid-template-columns: 1fr; }
}

/* Footer navigation (multi-page) */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 4px 0 2px;
}
.footer-nav a {
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.7);
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--sky); }

/* ============================================================
   HERO WITH ARTWORK (two-column)
   ============================================================ */
.hero { padding: clamp(56px, 9vw, 100px) 0 clamp(48px, 7vw, 84px); }

.hero-inner {
  max-width: var(--wrap);
  display: grid;
  grid-template-columns: 1.05fr .8fr;
  gap: clamp(44px, 6vw, 88px);
  align-items: center;
}

.hero-copy { min-width: 0; }

/* Arched window frame */
.hero-art {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 430px;
}
.arch {
  position: relative;
  border-radius: 999px 999px 8px 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 34px 74px -46px rgba(20,33,61,.55);
  background: var(--bone-2);
}
.arch svg,
.arch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 1040;
  object-fit: cover;
}
/* thin gold ring inset inside the arch */
.arch-ring {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(143,193,234,.55);
  border-radius: 999px 999px 5px 5px;
  pointer-events: none;
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-art { max-width: 360px; }
  .hero-copy { text-align: left; }
}
@media (max-width: 480px) {
  .hero-art { max-width: 300px; }
  .arch-ring { inset: 9px; }
}

/* ============================================================
   INTERIOR PAGE DESIGN LAYER
   ============================================================ */

/* --- Banner with arched emblem medallion --- */
.banner-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.banner-medallion {
  position: relative;
  width: clamp(128px, 15vw, 176px);
  justify-self: end;
}
.medallion-arch {
  border-radius: 999px 999px 7px 7px;
  background: linear-gradient(165deg, var(--ink-soft) 0%, var(--ink) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 26px 52px -36px rgba(20,33,61,.6);
  overflow: hidden;
}
.medallion-arch svg { display: block; width: 100%; height: auto; }
.medallion-ring {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(143,193,234,.45);
  border-radius: 999px 999px 4px 4px;
  pointer-events: none;
}
@media (max-width: 680px) {
  .banner-grid { grid-template-columns: 1fr; }
  .banner-medallion { display: none; }
}

/* --- Thin gold cross divider --- */
.cross-divider {
  position: relative;
  width: 22px;
  height: 30px;
  margin: 44px auto 0;
}
.cross-divider::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: var(--royal);
  transform: translateX(-50%);
}
.cross-divider::after {
  content: "";
  position: absolute;
  top: 34%; left: 0; right: 0;
  height: 2px;
  background: var(--royal);
}
.cross-divider.tight { margin-top: 0; margin-bottom: 26px; }

/* --- Tagline band (About) --- */
.quote-band {
  background: var(--ink);
  padding: clamp(52px, 8vw, 84px) 0;
  text-align: center;
}
.quote-band .cross-divider { margin: 0 auto 24px; }
.quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(23px, 3.6vw, 36px);
  line-height: 1.3;
  color: var(--bone);
  max-width: 24ch;
  margin: 0 auto;
}

/* --- Staff initial medallions --- */
.staff-avatar {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--ink-soft), var(--ink));
  color: var(--sky);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(143,193,234,.5);
  margin-bottom: 18px;
}
.member { display: flex; flex-direction: column; }
.member-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sky);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(143,193,234,.45);
  margin-bottom: 12px;
}

/* --- Sunday highlight in the schedule --- */
.time-block.primary { position: relative; }
.time-block.primary::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 46px; height: 3px;
  background: var(--royal);
}

/* ============================================================
   CONTENT LAYER (pastor's words + history)
   ============================================================ */
.quote-attr {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sky);
}
.prose strong { color: var(--royal); font-weight: 600; }
.history-credit {
  margin-top: 26px !important;
  font-weight: 500;
  font-size: 14px !important;
  font-style: italic;
  color: var(--slate-lt) !important;
}
.pastor-note {
  border-left: 3px solid var(--royal);
  padding: 8px 0 8px 28px;
  margin: 0;
}
.pastor-note p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
}
.pastor-note cite {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-lt);
}
.media-word {
  margin: 36px auto 0;
  max-width: 52ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--slate);
}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
.footer-nav a { padding: 6px 2px; display: inline-block; }
@media (max-width: 480px) {
  .quote-text { font-size: clamp(21px, 6vw, 26px); }
  .pastor-note { padding-left: 20px; }
  .prose p { font-size: 16.5px; }
  .section-title { margin-bottom: 24px; }
}

/* --- History read-more --- */
.history-toggle { margin-top: 30px; cursor: pointer; }
.history-more { margin-top: 26px; }
.history-more:not([hidden]) { animation: histReveal .45s ease both; }
@keyframes histReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Off-canvas nav: prevent phantom horizontal scroll, untabbable when closed --- */
html { overflow-x: hidden; overflow-x: clip; }
@media (max-width: 860px) {
  .site-nav {
    visibility: hidden;
    transition: transform .34s cubic-bezier(.16,.84,.44,1), visibility 0s linear .34s;
  }
  .site-nav.open {
    visibility: visible;
    transition: transform .34s cubic-bezier(.16,.84,.44,1), visibility 0s;
  }
}

/* --- Congregation photo --- */
.photo-frame { margin: 44px 0 0; }
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: 0 28px 56px -36px rgba(20,33,61,.5);
}
.photo-frame figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--slate-lt);
}

/* --- Social links --- */
.social-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.social-links.center-row { margin-top: 26px; }
.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--slate);
  transition: border-color .2s ease, color .2s ease;
}
.social-links a:hover { border-color: var(--royal); color: var(--ink); }
.social-links svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.site-footer .social-links { margin: 6px 0 2px; }
.site-footer .social-links a {
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.75);
}
.site-footer .social-links a:hover { border-color: var(--sky); color: var(--bone); }


/* --- Zelle QR card --- */
.qr-card {
  margin: 30px auto 0;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  box-shadow: 0 28px 56px -38px rgba(20,33,61,.5);
}
.qr-card img { display: block; width: 100%; height: auto; }
@media (max-width: 480px) {
  .qr-card { max-width: 280px; padding: 14px; }
}

/* Nav breathing room now that there are 7 items */
@media (min-width: 861px) and (max-width: 1180px) {
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 13.5px; }
}


/* ============================================================
   CHURCH TIMELINE
   ============================================================ */
.timeline-section { padding-bottom: clamp(40px, 6vw, 64px); }

.timeline {
  position: relative;
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0 14px;
}

/* the rail the dots sit on */
.tl-track {
  position: absolute;
  top: 9px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.tl-progress {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sky), var(--royal));
  transition: width 2.6s cubic-bezier(.22,.7,.3,1);
}
.timeline.run .tl-progress { width: 100%; }

.tl-item {
  position: relative;
  padding-top: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * 300ms + 120ms);
}
.timeline.run .tl-item { opacity: 1; transform: translateY(0); }

.tl-dot {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--bone-2);
  border: 2px solid var(--line);
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
  transition-delay: calc(var(--i) * 300ms);
}
.timeline.run .tl-item .tl-dot {
  background: var(--royal);
  border-color: var(--royal);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(143,193,234,.16);
}
/* final dot reads as "today" */
.timeline.run .tl-item:last-child .tl-dot {
  background: var(--royal);
  border-color: var(--royal);
}

.tl-year {
  display: block;
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 600;
  color: var(--royal);
  line-height: 1.1;
}
.tl-title {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.3;
}
.tl-desc {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--slate-lt);
}

/* ---- tablet: 4 across, two rows ---- */
@media (max-width: 1000px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 34px 14px; }
  .tl-track { display: none; }
  .tl-item { padding-top: 30px; }
  .tl-item::before {
    content: "";
    position: absolute;
    top: 9px; left: 0; right: 0;
    height: 2px;
    background: var(--line);
  }
}

/* ---- phone: vertical rail ---- */
@media (max-width: 620px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 34px;
  }
  .tl-track {
    display: block;
    top: 6px; bottom: 10px;
    left: 7px; right: auto;
    width: 2px; height: auto;
  }
  .tl-progress {
    width: 100%; height: 0;
    background: linear-gradient(180deg, var(--sky), var(--royal));
    transition: height 2.6s cubic-bezier(.22,.7,.3,1);
  }
  .timeline.run .tl-progress { height: 100%; width: 100%; }
  .tl-item {
    padding: 0 0 26px 0;
    text-align: left;
    transform: translateX(10px);
  }
  .timeline.run .tl-item { transform: translateX(0); }
  .tl-item::before { display: none; }
  .tl-dot { top: 4px; left: -34px; margin-left: 0; }
  .tl-year { font-size: 21px; }
  .tl-title { margin-top: 2px; font-size: 14.5px; }
  .tl-desc { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-item { opacity: 1; transform: none; transition: none; }
  .tl-progress { transition: none; width: 100%; }
  .tl-dot { transition: none; }
}

/* Timeline and story share a background: tighten the seam between them */
.timeline-section + #history { padding-top: clamp(20px, 3vw, 34px); }

/* Social icon shapes */
.social-links .ic-fill, .social-links .ic-fill-shape { fill: currentColor; }
.social-links .ic-stroke, .social-links .ic-stroke-shape {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}
.social-links .ic-stroke-shape { stroke-width: 2; }
.social-links .ic-fill-shape { stroke: none; }
.social-links svg { fill: none; }

.live-dot {
  width: 58px; height: 58px; flex: none;
  border-radius: 3px;
  background: var(--royal);
  position: relative;
}
.live-dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 0 rgba(255,255,255,.65);
  animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70%  { box-shadow: 0 0 0 13px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}

/* ============================================================
   BLUE PALETTE REFINEMENTS
   ============================================================ */

/* Cross dividers: royal on light surfaces, sky on dark ones */
.section-dark .cross-divider::before,
.section-dark .cross-divider::after,
.quote-band .cross-divider::before,
.quote-band .cross-divider::after { background: var(--sky); }

/* Timeline: sky-to-royal rail, royal dots, sky "today" marker */
.timeline.run .tl-item .tl-dot {
  background: var(--royal);
  border-color: var(--royal-lt);
  box-shadow: 0 0 0 4px rgba(31,78,156,.14);
}
.timeline.run .tl-item:last-child .tl-dot {
  background: var(--sky);
  border-color: var(--royal);
}

/* Header: a whisper of sky so the white bar has a defined edge */
.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(31,78,156,.05), 0 10px 26px -24px rgba(20,33,61,.4);
}

/* Cards read as white against the cool page tint */
.staff-card, .arch, .medallion-arch, .photo-frame img { background: var(--white); }
.section-alt .staff-card { background: var(--white); }

/* Dark sections get a subtle royal lift instead of flat navy */
.section-dark {
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(31,78,156,.34), transparent 60%),
    var(--ink);
}
.quote-band {
  background:
    radial-gradient(110% 130% at 85% 10%, rgba(31,78,156,.32), transparent 60%),
    var(--ink);
}
.gateway {
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(31,78,156,.36), transparent 62%),
    var(--ink);
}

/* Buttons: a touch of depth */
.btn-solid { box-shadow: 0 10px 22px -14px rgba(31,78,156,.55); }
.btn-solid:hover { box-shadow: 0 14px 26px -14px rgba(31,78,156,.6); }

/* Live indicator sits on royal now */
.live-dot { background: var(--royal); }

/* ============================================================
   MEDIA PAGE: two equal cards
   ============================================================ */
.section-title.center { text-align: center; }

.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 38px;
}
.media-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 30px 28px 26px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.media-card:hover {
  border-color: var(--royal);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(20,33,61,.45);
}
.media-icon {
  width: 46px; height: 46px;
  border-radius: 4px;
  background: var(--royal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex: none;
}
.media-v {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}
.media-label {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 8px;
}
.media-title {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 28px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 10px;
}
.media-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 18px;
}
.media-go {
  margin-top: auto;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--royal);
  font-weight: 500;
  transition: transform .25s ease;
}
.media-card:hover .media-go { transform: translateX(3px); }

/* live card gets the pulsing marker */
.media-card.is-live .media-icon { background: var(--royal); position: relative; }
.media-card.is-live .live-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: livePulse 2s ease-out infinite;
}

@media (max-width: 760px) {
  .media-grid { grid-template-columns: 1fr; gap: 16px; }
  .media-card { padding: 26px 24px 22px; }
}

/* Social buttons: slightly smaller */
.social-links { gap: 10px; }
.social-links a {
  gap: 7px;
  font-size: 11px;
  letter-spacing: .09em;
  padding: 7px 13px;
}
.social-links svg { width: 13px; height: 13px; }

/* Schedule footnote (communion) */
.schedule-note {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--sky);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}


/* Church family photo, closing the story section */
.family-photo-section { padding-top: clamp(44px, 6vw, 68px); padding-bottom: 0; }
.family-photo-section .photo-frame { margin-top: 0; }

/* ============================================================
   FOOTER — three columns + bottom bar
   ============================================================ */
.site-footer { padding: clamp(48px, 6vw, 68px) 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
  text-align: left;
  padding-bottom: clamp(34px, 4vw, 46px);
}

.foot-col { min-width: 0; }

.foot-head {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 16px;
}

/* brand column */
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--white); line-height: 1.25; }
.footer-name-ro { font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.footer-verse {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.45;
  color: var(--sky);
  max-width: 30ch;
  margin-bottom: 20px;
}

/* social icons only, no labels */
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  color: rgba(255,255,255,.72);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.social-icons a:hover { border-color: var(--sky); color: var(--white); background: rgba(143,193,234,.1); }
.social-icons svg { width: 15px; height: 15px; }
.social-icons .ic-fill, .social-icons .ic-fill-shape { fill: currentColor; }
.social-icons .ic-stroke, .social-icons .ic-stroke-shape {
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round;
}
.social-icons .ic-stroke-shape { stroke-width: 2; }
.social-icons .ic-fill-shape { stroke: none; }
.social-icons svg { fill: none; }

/* links column */
.footer-nav { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.footer-nav a {
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.72);
  padding: 0;
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--sky); }

/* contact column */
.foot-address { font-style: normal; display: flex; flex-direction: column; gap: 9px; }
.foot-address a {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  transition: color .2s ease;
}
.foot-address a:hover { color: var(--sky); }
.foot-times {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

/* bottom bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 28px 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-copy { font-size: 12.5px; letter-spacing: .03em; color: rgba(255,255,255,.45); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .foot-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   VISIT — contact + building photo, then a full-width map
   ============================================================ */
.visit-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
}

.building-figure { margin: 0; }
.building-figure img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 26px 52px -34px rgba(0,0,0,.6);
  margin-left: auto;
}
.building-figure figcaption {
  margin-top: 12px;
  max-width: 400px;
  margin-left: auto;
  text-align: right;
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255,255,255,.55);
}

.visit-map {
  margin-top: clamp(34px, 5vw, 52px);
  min-height: 320px;
  height: 340px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  filter: grayscale(.15) contrast(1.02);
}
.visit-map iframe { display: block; width: 100%; height: 100%; }

@media (max-width: 860px) {
  .visit-grid { grid-template-columns: 1fr; gap: 34px; }
  .building-figure img { max-width: 100%; margin-left: 0; }
  .building-figure figcaption { max-width: 100%; margin-left: 0; text-align: left; }
  .visit-map { height: 300px; min-height: 300px; }
}

/* Zelle recipient address — same label/value pattern as the contact rows */
.zelle-alt { margin-top: 34px; }
.zelle-alt-label {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 9px;
}
.zelle-alt-value {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  user-select: all;
}

/* ============================================================
   MOBILE TOUCH TARGETS & LEGIBILITY
   Primary controls sized to the 44px minimum for reliable tapping
   ============================================================ */
@media (max-width: 860px) {

  /* hamburger: was 30x22, now a full 44x44 target with the bars centred */
  .menu-toggle { width: 44px; height: 44px; margin-right: -8px; }
  .menu-toggle span { left: 9px; width: 26px; }
  .menu-toggle span:nth-child(1) { top: 12px; }
  .menu-toggle span:nth-child(2) { top: 22px; }
  .menu-toggle span:nth-child(3) { top: 32px; }

  /* language switch */
  .lang-switch { min-height: 44px; padding: 6px 14px; }

  /* brand lockup */
  .brand { min-height: 44px; }

  /* slightly shorter header frees vertical space on small screens */
  .header-inner { height: 64px; }
  .site-nav { top: 64px; height: calc(100vh - 64px); }

  /* nav links inside the drawer */
  .site-nav a { min-height: 48px; display: flex; align-items: center; }

  /* footer navigation: two columns so 7 links stay reachable without a tall stack */
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 18px;
  }
  .footer-nav a { min-height: 44px; display: flex; align-items: center; }

  /* footer contact rows */
  .foot-address a { min-height: 44px; display: flex; align-items: center; }
  .foot-address a[href^="tel"], .foot-address a[href^="mailto"] { min-height: 44px; }

  /* social buttons */
  .social-icons a { width: 44px; height: 44px; }
  .social-links a { min-height: 44px; }
  .visit-social a { min-height: 44px; display: inline-flex; align-items: center; }

  /* contact rows on the dark Visit panel */
  .contact-line a { min-height: 44px; display: inline-flex; align-items: center; }
  .contact-line a[href^="https://maps"] { align-items: flex-start; }

  /* timeline captions are read, not scanned — bump for legibility */
  .tl-desc { font-size: 14px; line-height: 1.5; }
  .tl-title { font-size: 15.5px; }

  /* footer meta */
  .foot-times { font-size: 13.5px; }
  .footer-copy { font-size: 13px; }
}

/* ============================================================
   MOBILE HEADER — full lockup, language switch then hamburger,
   both pinned to the right edge
   ============================================================ */
@media (max-width: 860px) {
  .brand-sub {
    display: block;
    font-size: 9px;
    letter-spacing: .13em;
    white-space: nowrap;
  }
  .brand-name { font-size: 20px; }

  /* order along the bar: brand … [RO/EN] [☰] */
  .lang-switch { order: 2; margin-left: auto; padding: 6px 10px; font-size: 11.5px; }
  .menu-toggle { order: 3; margin-left: 0; margin-right: -8px; }
  .header-inner { gap: 8px; }
}

/* ============================================================
   MOBILE FOOTER — two columns instead of one long stack
   ============================================================ */
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 16px;
    padding-bottom: 26px;
  }
  .foot-brand-col { grid-column: 1 / -1; }

  /* the link list sits inside its own narrow column now */
  .footer-nav { grid-template-columns: 1fr; gap: 0; }
  .footer-nav a { min-height: 42px; font-size: 14px; }
  .foot-address a { min-height: 42px; }

  /* tighten the brand block */
  .footer-brand { margin-bottom: 12px; }
  .footer-verse { font-size: 15.5px; margin-bottom: 16px; max-width: 34ch; }
  .foot-head { margin-bottom: 10px; }
  .social-icons { gap: 8px; }

  /* keep the bottom bar to a single tidy row */
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px 18px;
    gap: 10px;
  }
  .footer-copy { font-size: 11.5px; line-height: 1.3; }
}


/* ============================================================
   MOBILE FIXES
   ============================================================ */

/* Grid children must be allowed to shrink, or an image forces overflow */
.visit-grid > * { min-width: 0; }
.building-figure { min-width: 0; }

@media (max-width: 860px) {
  /* Visit: smaller, centred church photo so the scroll stays comfortable */
  .building-figure img {
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
  }
  .building-figure figcaption {
    max-width: 260px;
    margin: 12px auto 0;
    text-align: center;
  }

  /* Staff: clearer breaks between team categories */
  .team-block { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--line); }
  .team-block:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
  .team-heading { font-size: 24px; }
  .team-heading-rule { margin-bottom: 22px; }

  /* Media: centred cards with an obvious tappable action */
  .media-card { align-items: center; text-align: center; padding: 28px 22px 24px; }
  .media-icon { margin-left: auto; margin-right: auto; }
  .media-desc { margin-bottom: 20px; }
  .media-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    padding: 0 18px;
    border: 1px solid var(--royal);
    border-radius: 3px;
    color: var(--royal);
    font-weight: 500;
    background: var(--white);
  }
  .media-card:hover .media-go, .media-card:active .media-go {
    background: var(--royal);
    color: var(--white);
    transform: none;
  }
}


/* ============================================================
   HEADER LOCKUP ON SMALL SCREENS
   The full "Golgotha / Romanian Baptist Church" is kept at every
   width; it scales down instead of dropping the subtitle.
   ============================================================ */
@media (max-width: 383px) {
  .brand-mark { width: 17px; height: 22px; }
  .brand { gap: 9px; }
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 7.5px; letter-spacing: .06em; }
  .lang-switch { padding: 5px 9px; font-size: 11px; gap: 4px; }
  .header-inner { gap: 7px; }
}

@media (max-width: 344px) {
  .brand-mark { width: 16px; height: 21px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 16.5px; }
  .brand-sub { font-size: 7.2px; letter-spacing: .05em; }
  .lang-switch { padding: 5px 8px; font-size: 10.5px; gap: 3px; }
  .header-inner { gap: 6px; padding: 0 18px; }
  .wrap { padding: 0 18px; }
}

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */
.nav-extra { display: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 35, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease, visibility 0s linear .34s;
  z-index: 850;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease, visibility 0s;
}

@media (max-width: 860px) {
  .site-nav {
    width: min(340px, 88vw);
    padding: 30px 30px 34px;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(31,78,156,.42), transparent 62%),
      var(--ink);
    box-shadow: -22px 0 54px -30px rgba(0,0,0,.65);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 900;
  }

  /* links: serif, hairline-separated, staggered in */
  .site-nav a {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: .005em;
    color: rgba(255,255,255,.9);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .4s ease, transform .4s ease, color .2s ease;
  }
  .site-nav.open a { opacity: 1; transform: translateX(0); }
  .site-nav.open a:nth-of-type(1) { transition-delay: .08s; }
  .site-nav.open a:nth-of-type(2) { transition-delay: .13s; }
  .site-nav.open a:nth-of-type(3) { transition-delay: .18s; }
  .site-nav.open a:nth-of-type(4) { transition-delay: .23s; }
  .site-nav.open a:nth-of-type(5) { transition-delay: .28s; }
  .site-nav.open a:nth-of-type(6) { transition-delay: .33s; }

  .site-nav a::after { display: none; }
  .site-nav a:hover, .site-nav a:active { color: var(--sky); }

  /* current page marked with a sky rule rather than a colour swap alone */
  .site-nav a.active { color: var(--sky); position: relative; }
  .site-nav a.active::before {
    content: "";
    position: absolute;
    left: -30px; top: 50%;
    width: 18px; height: 2px;
    margin-top: -1px;
    background: var(--sky);
  }

  /* Donate keeps its button treatment, set apart from the list */
  .site-nav .nav-cta {
    font-family: var(--sans);
    font-size: 15px;
    letter-spacing: .04em;
    border: 1px solid var(--sky);
    color: var(--sky) !important;
    border-bottom: 1px solid var(--sky);
    border-radius: 3px;
    margin-top: 22px;
    padding: 0 18px !important;
    min-height: 50px;
    justify-content: center;
  }
  .site-nav .nav-cta:hover, .site-nav .nav-cta:active {
    background: var(--sky);
    color: var(--ink) !important;
  }
  .site-nav .nav-cta::before { display: none; }

  /* closing block: cross, tagline, service times */
  .nav-extra {
    display: block;
    margin-top: auto;
    padding-top: 30px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease .38s, transform .45s ease .38s;
  }
  .site-nav.open .nav-extra { opacity: 1; transform: translateY(0); }
  .nav-extra-mark {
    position: relative;
    display: block;
    width: 20px; height: 26px;
    margin-bottom: 16px;
  }
  .nav-extra-mark .cross-v, .nav-extra-mark .cross-h { background: var(--sky); }
  .nav-extra-verse {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.45;
    color: rgba(255,255,255,.72);
    margin-bottom: 10px;
  }
  .nav-extra-times {
    font-size: 12.5px;
    letter-spacing: .06em;
    color: rgba(255,255,255,.45);
  }
}

/* ============================================================
   DESKTOP NAV: current page must read differently from hover
   hover = thin rule that animates in;  current = solid 2px rule, held
   ============================================================ */
@media (min-width: 861px) {
  .site-nav a::after {
    height: 1px;
    background: var(--slate-lt);
  }
  .site-nav a:hover::after { background: var(--royal); }

  .site-nav a.active {
    color: var(--royal);
    font-weight: 500;
  }
  .site-nav a.active::after {
    width: 100%;
    height: 2px;
    bottom: -3px;
    background: var(--royal);
    transition: none;
  }
  /* the Donate button marks itself by filling in, not by underline */
  .site-nav .nav-cta.active {
    background: var(--royal);
    color: var(--white) !important;
    border-color: var(--royal);
  }
}

/* ============================================================
   DRAWER: covers the header, clears browser chrome at the bottom
   ============================================================ */
@media (max-width: 860px) {
  /* side panel starting at the very top, so the bar underneath is hidden but the
     dimmed, blurred page still shows alongside it.
     100dvh follows the visible viewport as mobile browser chrome shows/hides. */
  .site-nav {
    top: 0;
    width: min(340px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: calc(64px + 26px) 30px calc(40px + env(safe-area-inset-bottom, 0px));
    box-shadow: -22px 0 54px -30px rgba(0,0,0,.65);
    -webkit-overflow-scrolling: touch;
  }

  /* while open, the header keeps only the close button */
  body.nav-open .site-header {
    z-index: 950;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  body.nav-open .brand,
  body.nav-open .lang-switch {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  /* the X sits on the dark panel, so it needs light bars */
  body.nav-open .menu-toggle span { background: var(--white); }

  /* the closing block must not slide under the URL bar */
  .nav-extra { padding-top: 26px; padding-bottom: 8px; }
}

/* The drawer is a descendant of the header, so the close button must outrank
   it inside that same stacking context — raising the header itself does nothing. */
@media (max-width: 860px) {
  .menu-toggle { position: relative; z-index: 960; }
}

/* Footer service line: headline fact plus a route to the full schedule */
.foot-times { display: flex; flex-direction: column; gap: 5px; }
.foot-times a {
  color: var(--sky);
  font-size: 12.5px;
  transition: color .2s ease;
}
.foot-times a:hover { color: var(--white); }
@media (max-width: 860px) {
  .foot-times a { min-height: 40px; display: inline-flex; align-items: center; }
}