/* ==========================================================================
   Double Springs Baptist Church — public site.

   The palette, type and page furniture here are taken from the church's own
   design: black ground, royal purple, metallic gold, warm ivory text, and
   engraved serif capitals for every heading.

   No web fonts are loaded. The site has to render identically with no network
   at all, so headings ask for the engraved serifs a visitor is likely to have
   and fall back through Palatino to Georgia; every stack ends in a generic.

   (c) Spark Fire Technologies. Proprietary.
   ========================================================================== */

:root {
  --black: #08060b;
  --ink: #0d0a13;
  --ink-2: #140f1d;
  --panel: #17111f;
  --panel-2: #1d1529;

  --purple-900: #2a0b45;
  --purple-800: #3a1060;
  --purple-700: #4a1173;
  --purple-600: #5c1a8c;
  --purple-500: #7226ad;
  --purple-400: #8f3fd0;

  --gold: #e0b34a;
  --gold-bright: #f5d27f;
  --gold-deep: #b8862a;

  --ivory: #f5efe4;
  --ivory-dim: #d9d0c2;
  --muted: #a99f92;
  --line: rgba(224, 179, 74, 0.28);
  --line-soft: rgba(245, 239, 228, 0.12);

  --ok: #67d391;
  --warn: #f0b849;
  --err: #ef7a7a;

  --serif-display: "Cinzel", "Trajan Pro", "Optima", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --serif-body: "EB Garamond", "Adobe Garamond Pro", Garamond, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Gill Sans MT", "Segoe UI", Optima, Candara, system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --radius: 4px;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.62);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

.container { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: 68px 0; }
.section-tight { padding: 40px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.mt { margin-top: 14px; }
.mt-lg { margin-top: 32px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #1b1206; padding: 10px 18px; font-family: var(--sans);
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------ utility bar */
.utility-bar {
  background: #05040a;
  border-bottom: 1px solid rgba(224, 179, 74, 0.18);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.utility-inner {
  width: min(100% - 32px, var(--wrap));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 0;
  color: var(--ivory-dim);
}
.util-item b { color: var(--gold); font-weight: 600; }
.util-dot { color: var(--gold-deep); }
.util-spacer { flex: 1 1 auto; }
.util-address { color: var(--ivory-dim); border-bottom: 1px dotted transparent; }
.util-address:hover { color: var(--gold-bright); border-bottom-color: var(--gold-deep); }
.util-watch, .util-give {
  border: 1px solid var(--line); padding: 3px 12px; border-radius: 999px; color: var(--gold);
}
.util-give { background: linear-gradient(180deg, var(--purple-600), var(--purple-800)); color: var(--gold-bright); }

/* --------------------------------------------------------------- masthead */
.masthead {
  position: relative;
  background:
    linear-gradient(90deg, rgba(5, 4, 10, 0.93) 0%, rgba(5, 4, 10, 0.86) 34%, rgba(5, 4, 10, 0.68) 68%, rgba(5, 4, 10, 0.55) 100%),
    url("/img/church-exterior.jpg") center 58% / cover no-repeat,
    #05040a;
  border-bottom: 1px solid rgba(224, 179, 74, 0.22);
}
/* The seal is taken out of flow so the church's name stays centred on the page
   itself — as the design has it — rather than centred on whatever space is
   left over beside the seal. */
.masthead-inner {
  position: relative;
  width: min(100% - 32px, var(--wrap));
  margin-inline: auto;
  padding: 14px 0 16px;
}
.masthead-seal { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.masthead-seal img {
  width: 150px; height: 150px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.75));
}
.masthead-text { text-align: center; padding-inline: 172px; }
.mh-name {
  font-size: clamp(19px, 3.2vw, 36px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
  font-variant: small-caps;
}
.mh-name a {
  color: var(--gold);
  background: linear-gradient(180deg, #f7dfa4 0%, #dfae45 48%, #a97c22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mh-city {
  font-family: var(--serif-display);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(13px, 1.6vw, 20px);
}
.mh-address {
  font-family: var(--sans);
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(10px, 1.1vw, 12px);
  margin-top: 4px;
}
.mh-pastor {
  font-size: clamp(15px, 1.9vw, 23px);
  color: var(--ivory);
  margin-top: 4px;
  font-style: italic;
}
.mh-pastor em { font-style: italic; color: var(--ivory-dim); }
.mh-theme {
  color: var(--gold);
  font-style: italic;
  font-size: clamp(12px, 1.35vw, 16px);
  letter-spacing: 0.03em;
  margin-top: 3px;
}

/* ------------------------------------------------------------- primary nav */
.mainnav {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, var(--purple-700) 0%, var(--purple-900) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.nav-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.nav-links a {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 13px;
  color: #f0e9f7;
  text-align: center;
  padding: 14px 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-links a:first-child { border-left: 1px solid rgba(255, 255, 255, 0.13); }
.nav-links a:hover { background: var(--purple-500); color: #fff; }
.nav-links a.active {
  background: var(--purple-400);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--gold);
}
.nav-toggle {
  display: none;
  width: 100%;
  background: transparent; border: 0; color: #f0e9f7;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 13px; padding: 13px; cursor: pointer;
}

/* -------------------------------------------------------------- typography */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 12px;
  color: var(--gold);
}
.section-title {
  font-size: clamp(28px, 4vw, 46px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.section-title.center { text-align: center; }
.section-sub { color: var(--ivory-dim); max-width: 62ch; }
.section-sub.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.2em; color: var(--ivory); }
.sub { color: var(--ivory-dim); }
.rule {
  height: 2px; border: 0; margin: 14px 0 22px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), rgba(224, 179, 74, 0));
}
.rule.center { background: linear-gradient(90deg, rgba(224,179,74,0), var(--gold), rgba(224,179,74,0)); margin-inline: auto; max-width: 520px; }

/* The two-tone headline the design uses everywhere: white word, gold word. */
.split-title { font-size: clamp(34px, 7vw, 84px); text-transform: uppercase; line-height: 0.98; margin: 0; }
.split-title .w { color: #fff; }
.split-title .g { color: var(--gold); }

.scripture {
  font-style: italic;
  color: var(--gold-bright);
  border-left: 2px solid var(--gold-deep);
  padding: 4px 0 4px 18px;
}
.scripture cite { display: block; font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: 0.2em; color: var(--gold-deep); margin-top: 8px; }
.quote-box {
  border: 1px solid var(--line);
  background: rgba(58, 16, 96, 0.22);
  padding: 22px 26px;
}
.quote-box p { font-style: italic; color: var(--gold-bright); margin: 0; }
.quote-box cite { display: block; font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; color: var(--gold-deep); margin-top: 10px; }

/* ------------------------------------------------------------------ layout */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel {
  background: linear-gradient(160deg, var(--panel) 0%, var(--ink) 100%);
  border: 1px solid var(--line-soft);
  padding: 26px;
}
.card {
  display: block;
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--ink) 100%);
  border: 1px solid var(--line-soft);
  padding: 22px;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
a.card:hover { transform: translateY(-3px); border-color: var(--line); }
.card h3 { color: var(--gold); font-size: 20px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  padding: 13px 26px;
  border: 1px solid var(--gold-deep);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: rgba(224, 179, 74, 0.14); color: var(--gold-bright); }
.btn-primary {
  background: linear-gradient(180deg, var(--purple-500), var(--purple-800));
  border-color: var(--purple-400);
  color: #fff;
}
.btn-primary:hover { background: linear-gradient(180deg, var(--purple-400), var(--purple-700)); color: #fff; }
.btn-give {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-color: var(--gold-deep);
  color: #2a1c05;
  font-weight: 700;
}
.btn-give:hover { color: #150e02; background: linear-gradient(180deg, #ffe6ab, var(--gold)); }
.btn-ghost { border-color: var(--line-soft); color: var(--ivory-dim); }
.btn-sm { padding: 9px 16px; font-size: 11px; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ================================================================= HOME ===
   The hero rebuilds the homepage design: raised hands behind a stage panel,
   the pastor and first lady at the left, service times beneath them. */
.home-hero {
  position: relative;
  background: #05040a;
  padding: 0 0 34px;
}
.home-hero-grid {
  width: min(100% - 32px, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 18px;
  padding-top: 18px;
}
.hero-portrait {
  position: relative;
  border: 1px solid var(--line-soft);
  background: #0b0810;
  overflow: hidden;
  /* Photograph on top, names in their own bar underneath. The names used to
     float over the bottom of the picture, where they crowded the pastor's
     face. */
  display: flex;
  flex-direction: column;
}
/* The whole photograph, never cropped: both the pastor and the first lady have
   to be in it. The names sit in their own bar underneath (see figcaption), so
   nothing needs to be trimmed to make room for them. */
.hero-portrait img {
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}
.hero-portrait figcaption {
  /* One credit per line. Side by side, the card is only ~350px wide and
     "Rev. Bryson C. Watts" broke across two lines, leaving his surname
     stranded under the picture on its own. */
  display: grid; gap: 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(58, 16, 96, 0.55), rgba(6, 4, 12, 0.96));
  border-top: 1px solid var(--line);
  font-family: var(--serif-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--ivory);
}
.hero-portrait figcaption > span { display: block; white-space: nowrap; }
.hero-portrait figcaption .role {
  display: inline; color: var(--gold); font-size: 11px; letter-spacing: 0.14em;
}
.hero-portrait figcaption .role::after { content: " · "; color: var(--gold-deep); }

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: 26px;
  /* Deliberately no photograph behind the broadcast panel: the church asked
     for a plain ground so nothing competes with what is on the screen. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(58, 16, 96, 0.42) 0%, rgba(6, 4, 12, 0) 62%),
    linear-gradient(180deg, #0c0812 0%, #060409 100%);
  border: 1px solid var(--line-soft);
}
.hero-stage-inner { width: min(100%, 720px); text-align: center; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0a0d;
  border: 3px solid rgba(245, 239, 228, 0.85);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  overflow: hidden;
}
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }
.video-frame .video-placeholder {
  padding: 22px;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: #2f2a25;
  background: linear-gradient(120deg, #1b1b1e 0%, #cfcfcf 52%, #f4f4f4 100%);
  width: 100%; height: 100%;
  display: grid; place-content: center; gap: 10px; text-align: center;
}
.video-placeholder .vp-title { font-family: var(--serif-display); font-size: 19px; letter-spacing: 0.08em; color: #1d1a16; }

.join-panel {
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(58, 16, 96, 0.5), rgba(10, 7, 16, 0.94));
  padding: 22px 20px 24px;
  text-align: center;
}
.join-panel h2 {
  color: var(--gold);
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}
.join-cadence {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 11px; color: var(--ivory-dim); margin-bottom: 14px;
}
.join-day {
  font-family: var(--serif-display); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold); border-bottom: 1px solid var(--gold-deep);
  display: inline-block; margin: 12px 0 6px; padding-bottom: 2px; font-size: 17px;
}
.join-line { text-transform: uppercase; letter-spacing: 0.05em; font-size: 17px; color: var(--ivory); }
.join-panel .btn { margin-top: 16px; }

.hero-strip { margin-top: 18px; }
.hero-strip img { width: 100%; height: clamp(140px, 18vw, 240px); object-fit: cover; border: 1px solid var(--line-soft); }

/* ------------------------------------------------------------- page heroes */
.page-hero {
  position: relative;
  border-bottom: 2px solid var(--gold-deep);
  background: #0a0710;
  overflow: hidden;
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 6, 11, 0.94) 0%, rgba(8, 6, 11, 0.78) 46%, rgba(8, 6, 11, 0.28) 100%);
}
.page-hero-body {
  position: relative; z-index: 2;
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  padding: 54px 0 46px;
}
.page-hero-body .kicker {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.26em;
  font-size: 12px; color: var(--ivory-dim); margin-top: 10px;
}
.page-hero-body .intro { max-width: 58ch; color: var(--ivory-dim); margin-top: 14px; }
.hero-verse {
  position: absolute; right: 4%; top: 22%; z-index: 3; max-width: 240px; text-align: center;
  font-style: italic; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.hero-verse cite { display: block; font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); margin-top: 8px; }

/* The three-phrase gold band under the history hero. */
.motto-band {
  background: linear-gradient(180deg, var(--purple-800), var(--purple-900));
  border-block: 1px solid var(--line);
}
.motto-band .container { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; padding: 12px 0; }
.motto-band span {
  font-family: var(--serif-display); font-variant: small-caps; letter-spacing: 0.1em;
  color: var(--gold); font-size: 17px;
}

/* --------------------------------------------------------------- ministries */
/* The Ministries banner is centred; every other page banner stays left-aligned. */
.page-hero.centered .page-hero-body { text-align: center; }
.page-hero.centered .split-title { text-align: center; }
.page-hero.centered .rule { margin-inline: auto; max-width: 520px; background: linear-gradient(90deg, rgba(224,179,74,0), var(--gold), rgba(224,179,74,0)); }
.page-hero.centered .intro { margin-inline: auto; }

.ministry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ministry-card {
  border: 1px solid var(--line-soft);
  background: #0b0810;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ministry-card:hover { transform: translateY(-4px); border-color: var(--line); }
.ministry-photo { position: relative; aspect-ratio: 330 / 156; background: linear-gradient(150deg, var(--purple-800), var(--ink)); }
.ministry-photo img { width: 100%; height: 100%; object-fit: cover; }
.ministry-name {
  background: linear-gradient(180deg, var(--purple-800), var(--purple-900));
  color: var(--gold);
  font-family: var(--serif-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-align: center;
  font-size: 21px;
  padding: 10px 12px;
  margin: 0;
  border-top: 1px solid rgba(224, 179, 74, 0.25);
}
.ministry-body { padding: 14px 16px 20px; text-align: center; color: var(--ivory-dim); flex: 1; }
.ministry-body p { margin: 0; }

/* ------------------------------------------------------------------ pastor */
.pastor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.pastor-photo { border: 1px solid var(--line-soft); width: 100%; height: auto; }
.photo-credits {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1px solid var(--line);
  margin-top: 12px; padding-top: 10px; text-align: center;
  font-family: var(--serif-display); text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em;
}
.photo-credits div + div { border-left: 1px solid var(--line-soft); }
.photo-credits .role { display: block; color: var(--gold-deep); font-size: 10px; letter-spacing: 0.16em; }
.first-lady { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(42, 11, 69, 0.32), rgba(8, 6, 11, 0)); }
.first-lady-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
.kingdom-quote {
  font-family: var(--serif-display); font-style: italic; text-align: center;
  font-size: clamp(20px, 2.4vw, 28px); color: var(--ivory);
  border-left: 1px solid var(--line); padding-left: 26px;
}

/* ----------------------------------------------------------------- history */
.history-split {
  display: grid; grid-template-columns: 1fr 1.4fr;
  /* The row has to be told to fill the banner. Left implicit it is sized by
     the photographs themselves, and a portrait crop then overflows. */
  grid-template-rows: 100%;
  height: clamp(340px, 40vw, 540px);
  overflow: hidden;
}
.history-split img { width: 100%; height: 100%; object-fit: cover; }
.story-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 34px; align-items: start; }
.story-aside {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(58, 16, 96, 0.38), rgba(8, 6, 11, 0.9));
  padding: 26px 24px;
  text-align: center;
}
.story-aside h3 { color: var(--gold); font-size: 26px; text-transform: uppercase; letter-spacing: 0.06em; }
.story-aside img { margin-top: 20px; border: 1px solid var(--line-soft); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gold-deep); }
.timeline-item { position: relative; padding: 0 0 26px 26px; }
.timeline-item::before {
  content: ""; position: absolute; left: -8px; top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(224, 179, 74, 0.18);
}
.chapter-head { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--gold-deep); }

/* ------------------------------------------------------------------ misc UI */
.hero { position: relative; padding: 70px 0; background: linear-gradient(160deg, var(--purple-900), var(--black) 70%); }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(110% 80% at 50% 0%, rgba(58, 16, 96, 0.5), rgba(6, 4, 12, 0)); }
.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.brand-statement { font-family: var(--sans); letter-spacing: 0.2em; font-size: 12px; color: var(--gold); text-transform: uppercase; }

.service-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.service-card { border: 1px solid var(--line-soft); background: linear-gradient(160deg, var(--panel-2), var(--ink)); padding: 22px; text-align: center; }
.service-card .day { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--gold-deep); }
.service-card h3 { margin: 8px 0 4px; font-size: 20px; color: var(--ivory); }
.service-card .time { font-family: var(--serif-display); font-size: 27px; color: var(--gold); }

.address-block { font-style: normal; line-height: 1.7; }
/* A flyer posted as an image is shown at a readable size without stretching. */
.ann-flyer { display: block; margin-top: 12px; }
.ann-flyer img {
  max-width: min(100%, 520px); height: auto;
  border: 1px solid var(--line-soft);
}
.list-item { border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.list-item:last-child { border-bottom: 0; }
.empty, .is-empty { border: 1px dashed var(--line-soft); padding: 26px; text-align: center; color: var(--muted); }
.badge {
  display: inline-block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 3px 10px; border: 1px solid var(--line-soft); color: var(--ivory-dim);
}
.badge-purple { background: rgba(114, 38, 173, 0.3); border-color: var(--purple-500); color: #e5d4f5; }
.badge-green { background: rgba(103, 211, 145, 0.16); border-color: var(--ok); color: var(--ok); }
.badge-amber { background: rgba(240, 184, 73, 0.16); border-color: var(--warn); color: var(--warn); }
.badge-red { background: rgba(239, 122, 122, 0.16); border-color: var(--err); color: var(--err); }
.notice { padding: 14px 18px; border: 1px solid var(--line-soft); margin: 12px 0; }
.notice-ok { border-color: var(--ok); background: rgba(103, 211, 145, 0.1); }
.notice-err { border-color: var(--err); background: rgba(239, 122, 122, 0.1); }
.notice-info { border-color: var(--purple-500); background: rgba(114, 38, 173, 0.14); }
.nugget { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(58, 16, 96, 0.4), var(--ink)); padding: 30px; text-align: center; }
.cap { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--gold-deep); }
.quote { font-style: italic; color: var(--gold-bright); }
.role { color: var(--muted); font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.leader-card { text-align: center; }
.leader-avatar {
  width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--purple-600), var(--purple-900));
  border: 2px solid var(--gold-deep); color: var(--gold);
  font-family: var(--serif-display); font-size: 24px;
}

/* ----------------------------------------------------------------- gallery */
.album-grid, .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.album-card { border: 1px solid var(--line-soft); background: var(--ink); overflow: hidden; }
.album-cover { aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--purple-800), var(--ink)); display: grid; place-items: center; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-body { padding: 16px 18px; }
.album-meta { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.photo-tile { border: 0; padding: 0; background: none; cursor: pointer; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line-soft); }
.lightbox-stage {
  position: fixed; inset: 0; z-index: 90; background: rgba(3, 2, 6, 0.96);
  display: grid; grid-template-rows: auto 1fr auto; padding: 18px;
}
.lightbox-bar { display: flex; justify-content: space-between; gap: 12px; }
.lightbox-caption { text-align: center; color: var(--ivory-dim); }
.lb-btn { background: transparent; border: 1px solid var(--line); color: var(--gold); font-size: 22px; padding: 6px 16px; cursor: pointer; }
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; } .lb-next { right: 14px; }

/* ------------------------------------------------------------------- forms */
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  background: #100c17; border: 1px solid var(--line-soft); color: var(--ivory);
  font-family: var(--serif-body); font-size: 17px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold-deep); outline: none; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; color: var(--ivory-dim); font-size: 15px; }
.checkbox-row input { margin-top: 5px; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: #05040a; border-top: 2px solid var(--gold-deep); padding: 52px 0 26px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
.footer-seal { width: 90px; height: 90px; margin-bottom: 10px; }
.site-footer h4 { color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; }
.site-footer p, .site-footer address { color: var(--ivory-dim); font-size: 16px; }
.site-footer a { display: block; color: var(--ivory-dim); padding: 3px 0; font-size: 16px; }
.site-footer a:hover { color: var(--gold); }
.site-footer .btn { display: inline-block; color: var(--gold); }
.footer-times .cadence { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.footer-times b { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--line-soft); margin-top: 34px; padding-top: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.footer-bottom a { display: inline; color: var(--muted); }
/* The builder's credit sits last, quieter than the church's own copyright. */
.footer-credit {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 239, 228, 0.07);
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.footer-credit strong { color: var(--gold-deep); font-weight: 600; }

.mobile-give { display: none; }

/* ----------------------------------------------------------------- loading */
.loading { display: grid; place-items: center; gap: 14px; padding: 90px 0; color: var(--muted); font-family: var(--sans); letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; }
.spinner { width: 34px; height: 34px; border: 2px solid rgba(224, 179, 74, 0.25); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Motion: elements marked for reveal start hidden, and motion.js brings them
   in. Anything still hidden after the safety net in motion.js is shown. */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Page-specific pieces that share the design language above. */
.history-hero { position: relative; border-bottom: 2px solid var(--gold-deep); }
.history-hero .hero-verse { top: 14%; z-index: 3; }
/* The headline sits over the two photographs, so it carries its own scrim
   rather than relying on whatever happens to be behind it. */
.history-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6, 4, 11, 0.88) 0%, rgba(6, 4, 11, 0.45) 34%, rgba(6, 4, 11, 0) 62%);
  pointer-events: none;
}
.history-hero-copy {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  width: min(100% - 40px, var(--wrap)); margin-inline: auto; padding-top: 26px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.92);
}
.history-hero-copy .kicker {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 12px; color: var(--ivory);
}
.history-hero-copy .split-title { font-size: clamp(30px, 6vw, 74px); }
.bible-panel {
  background:
    linear-gradient(90deg, rgba(8, 6, 11, 0.95) 0%, rgba(8, 6, 11, 0.55) 100%),
    url("/img/bible-band.jpg") center / cover no-repeat;
}
.welcome-band { align-items: center; }
.brand-panel {
  display: grid; place-items: center; gap: 14px; text-align: center;
  padding: 40px 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(58, 16, 96, 0.55) 0%, rgba(8, 6, 11, 0) 70%),
    linear-gradient(180deg, #0d0916 0%, #070510 100%);
}
.brand-panel img {
  width: min(78%, 340px); height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
}
.brand-panel .brand-line {
  font-family: var(--serif-display); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 13px; color: var(--gold);
}
.brand-panel .brand-theme { font-style: italic; color: var(--ivory-dim); max-width: 34ch; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .home-hero-grid { grid-template-columns: 1fr; }
  .pastor-layout, .first-lady-grid, .story-grid { grid-template-columns: 1fr; }
  .kingdom-quote { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
  .ministry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masthead-text { padding-inline: 124px; }
  .masthead-seal img { width: 110px; height: 110px; }
  .history-split { grid-template-columns: 1fr; }
  .history-split img { height: 260px; }
  .history-hero-copy { position: static; padding: 22px 20px 6px; text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .section { padding: 46px 0; }
  .masthead-inner { padding-top: 16px; }
  .masthead-seal { position: static; transform: none; display: block; text-align: center; margin-bottom: 8px; }
  .masthead-seal img { width: 92px; height: 92px; margin-inline: auto; }
  .masthead-text { padding-inline: 0; }
  .masthead { background-image: linear-gradient(180deg, rgba(5,4,10,0.9), rgba(5,4,10,0.94)), url("/img/church-exterior.jpg"); background-size: cover; }
  .utility-inner { justify-content: center; font-size: 11px; }
  .util-spacer { display: none; }

  .nav-toggle { display: block; }
  .nav-links { display: none; grid-template-columns: 1fr; }
  .nav-links.open { display: grid; }
  .nav-links a { border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.13); text-align: left; padding-left: 18px; }
  .nav-links a:first-child { border-left: 0; }

  .grid-2, .grid-3, .ministry-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-verse { position: static; max-width: none; margin-top: 20px; text-align: left; }
  .page-hero::after { background: linear-gradient(180deg, rgba(8, 6, 11, 0.86), rgba(8, 6, 11, 0.94)); }
  .photo-credits { grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; }
  .photo-credits div + div { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 8px; }
  .mobile-give { display: block; position: sticky; bottom: 0; z-index: 45; padding: 10px; background: rgba(5, 4, 10, 0.94); border-top: 1px solid var(--line); }
  .site-footer { margin-bottom: 0; }
}