/* ========================================================================
   Wrights Grove Baptist Church — website mockup
   Style aesthetic: modern church platform (Subsplash / Church Center / Nucleus)
   Palette: pulled from official logo (gold script + charcoal)
   ======================================================================== */


@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #1a1a1a;
  --ink-soft: #2c2c2c;
  --body: #353535;
  --muted: #6b6b6b;
  /* Was #8b8b8b, which came out at 2.8:1 on our own cream — too faint to read
     comfortably. Darkened until it clears 4.5:1 on every background we use. */
  --muted-soft: #676767;

  /* Three golds, because one colour cannot do all three jobs and still be
     readable. Measured against white, #faf7f1, #f3ece0 and #f3e6c4 — the four
     backgrounds gold actually sits on across the site.
       --gold          fills, borders, and text on DARK backgrounds. Untouched.
                       On a light background it is 1.8:1, so never use it for
                       text there.
       --gold-display  large gold type on light backgrounds, 24px and up
                       (the big numerals). Clears the 3:1 bar for large text.
       --gold-dark     gold text at normal size on light backgrounds.
                       Clears 4.5:1. Was #b88a1f, which only reached 2.5:1. */
  --gold: #d4a531;
  --gold-display: #a47f22;
  --gold-dark: #81631b;
  --gold-light: #f3e6c4;
  --cream: #faf7f1;
  --cream-deep: #f3ece0;
  --white: #ffffff;
  --line: #e8e2d4;
  --hero-overlay-1: rgba(20, 18, 14, 0.65);
  --hero-overlay-2: rgba(20, 18, 14, 0.35);
  --shadow-sm: 0 2px 8px rgba(20, 18, 14, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 18, 14, 0.08);
  --shadow-lg: 0 16px 48px rgba(20, 18, 14, 0.12);
  --radius: 4px;
  --radius-lg: 10px;
}

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

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  line-height: 1.2;
}

h1 { font-size: 3.4rem; letter-spacing: -0.01em; }
h2 { font-size: 2.2rem; letter-spacing: -0.005em; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

a { color: var(--ink); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--gold-dark); }

p { margin: 0 0 1rem; }

img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-dark);
  margin-bottom: 12px;
  display: inline-block;
}

/* ============== TOP BAR (announcement strip) ============== */
.topbar {
  background: var(--ink);
  color: var(--cream);
  font-size: 0.875rem;
  text-align: center;
  padding: 10px 16px;
  letter-spacing: 0.02em;
}
.topbar strong { color: var(--gold); }

/* ============== NAVIGATION ============== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-brand img {
  height: 56px;
  width: auto;
}
.nav-brand-fallback {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.nav-brand-fallback em {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}
.brand-svg {
  height: 100px;
  width: auto;
  display: block;
}
.brand-svg.footer-size {
  height: 110px;
}
.brand-img {
  height: 100px;
  width: auto;
  display: block;
  object-fit: contain;
}
.footer-logo-img {
  height: 110px;
}
/* Slightly tighter nav padding to balance the larger logo */
.nav { padding: 10px 0; }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--gold); color: var(--ink); }
.nav-links a.active { border-bottom-color: var(--gold); color: var(--ink); }
.nav-links li { display: flex; align-items: center; }
/* Match the group toggles beside them, and clear the 44px tap floor. */
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── Grouped nav ──────────────────────────────────────────────────────────
   The nav was ten items across, which is ten decisions before a first-time
   visitor can do anything. About and Watch & Listen now hold the pages that
   belong under them. */
.nav-group { position: relative; }
.nav-group-toggle {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}
.nav-group-toggle:hover,
.nav-group.open .nav-group-toggle,
.nav-group.has-active .nav-group-toggle {
  border-bottom-color: var(--gold);
  color: var(--ink);
}
.nav-group .caret { font-size: 0.875rem; line-height: 1; transition: transform 0.2s ease; }
.nav-group.open .caret { transform: rotate(180deg); }

.nav-group-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 210px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  z-index: 60;
}
.nav-group.open .nav-group-menu { display: block; }
.nav-group-menu li { display: block; }
.nav-group-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border-bottom: 0;
  white-space: nowrap;
}
.nav-group-menu a:hover,
.nav-group-menu a.active {
  border-bottom: 0;
  background: var(--cream);
  color: var(--ink);
}

/* "Plan a Visit" sits with Give as the pair of buttons at the end. The Give
   button carries a transparent border so both boxes come out the same height
   as the outlined one beside it. */
.nav-cta .btn { padding: 8px 16px; }
.nav .btn-primary.btn-sm { border: 1.5px solid transparent; }
.nav-cta .btn.active { background: var(--ink); color: var(--white); }

/* Anything you tap should be at least 44px in both directions — roughly a
   fingertip. Several links here rendered 23–24px tall, which is fine with a
   mouse and fiddly on a phone. inline-flex lets the min-height take effect
   without changing how any of them look on a wide screen. */
.btn,
.arrow,
.read-more,
.ministry-fb,
.social-row a,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Icon-only controls need the width too — text links get theirs from the text. */
.nav-toggle,
.social-row a {
  min-width: 44px;
  justify-content: center;
}

.btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  justify-content: center;
}
.btn-primary {
  background: var(--gold);
  color: var(--ink);
}
.btn-primary:hover { background: var(--gold-dark); color: var(--white); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--white);
}
.btn-outline:hover { background: var(--white); color: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-sm { padding: 8px 16px; font-size: 0.875rem; }

/* ============== HERO ============== */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(135deg, var(--hero-overlay-1), var(--hero-overlay-2)),
    radial-gradient(circle at 20% 30%, #4a3520 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #2c2418 0%, transparent 60%),
    linear-gradient(180deg, #1f1810 0%, #0c0a07 100%);
  color: var(--cream);
  overflow: hidden;
}
/* Home hero. The overlay used to dim the whole photograph evenly, which made
   the headline legible but flattened the picture and left the type sitting on
   the busiest part of it — the dancers. This shades the left side, where the
   words are, and lets the right side come back up so the congregation is
   actually visible. Same photo, more contrast where it is needed, less where
   it is not. */
.hero-with-photo {
  background:
    linear-gradient(95deg,
      rgba(20, 18, 14, 0.90) 0%,
      rgba(20, 18, 14, 0.80) 45%,
      rgba(20, 18, 14, 0.44) 74%,
      rgba(20, 18, 14, 0.28) 100%),
    linear-gradient(135deg, rgba(212, 165, 49, 0.10), transparent 60%),
    url('img/hero-worship.jpg') center 30% / cover no-repeat,
    linear-gradient(180deg, #1f1810 0%, #0c0a07 100%);
}
@media (max-width: 860px) {
  /* On a phone the text runs the full width, so a side-weighted wash would
     leave the end of each line stranded on the bright part of the photo. */
  .hero-with-photo {
    background:
      linear-gradient(180deg, rgba(20, 18, 14, 0.84) 0%, rgba(20, 18, 14, 0.80) 100%),
      linear-gradient(135deg, rgba(212, 165, 49, 0.10), transparent 60%),
      url('img/hero-worship.jpg') center 30% / cover no-repeat,
      linear-gradient(180deg, #1f1810 0%, #0c0a07 100%);
  }
}

/* On the dark hero the bright gold is the readable one — the darkened text
   gold exists for light backgrounds and would disappear here. */
.hero .eyebrow { color: var(--gold); }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(212, 165, 49, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.4;
}
.hero-content {
  position: relative;
  z-index: 2;
  /* Top and bottom only — the shorthand used to zero the sides too, which took
     away the side padding .container sets and pushed the headline flush to the
     edge of a phone screen. */
  padding-top: 80px;
  padding-bottom: 64px;
}
.hero h1 {
  color: var(--white);
  font-size: 4rem;
  line-height: 1.05;
  max-width: 780px;
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.hero-sub {
  font-size: 1.2rem;
  color: var(--cream);
  opacity: 0.92;
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.5;
}
/* The one monthly note a first-time visitor should not miss, sitting inside
   the hero rather than in a pop-up. A pop-up would make their first action on
   the site "close this", and the flyer it would have carried is a wide
   landscape image whose type is unreadable once a phone shrinks it. */
.hero-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  max-width: 620px;
  margin: -22px 0 36px;
  padding: 14px 18px;
  border: 1px solid rgba(212, 165, 49, 0.55);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(20, 16, 11, 0.42);
}
.hero-now .tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.hero-now .msg {
  flex: 1 1 260px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
}
.hero-now a {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.hero-now a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .hero-now { margin-top: -8px; padding: 13px 15px; }
  .hero-now .msg { font-size: 0.95rem; }
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.hero-meta {
  display: grid;
  /* min() lets these columns drop below 180px on a narrow screen. Without it
     the three service times plus their gaps demand 604px, which stretched the
     hero past the width of a phone and cut the headline off mid-word. */
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  /* Four service times: 4x180 plus three 28px gaps needs 804px, so the old
     720px cap left Wednesday stranded alone on a second row. */
  gap: 28px;
  max-width: 840px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-meta-item .label {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.hero-meta-item .value {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--white);
  line-height: 1.3;
}

/* ============== SECTION SHELLS ============== */
section { padding: 80px 0; }
section.compact { padding: 64px 0; }
section.bg-cream { background: var(--cream); }
section.bg-ink { background: var(--ink); color: var(--cream); }
section.bg-ink h2, section.bg-ink h3 { color: var(--white); }

.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--muted); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

/* ============== "NEW HERE" CARDS ============== */
.new-here-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.action-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.action-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-light);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: Georgia, serif;
}
.action-card h3 { margin-bottom: 10px; }
.action-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; flex: 1; }
.action-card a.arrow {
  font-weight: 600;
  color: var(--gold-dark);
  font-size: 0.95rem;
}
.action-card a.arrow::after { content: " →"; }

/* ============== LATEST SERMON CARD ============== */
.feature-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.feature-row.reverse { grid-template-columns: 1fr 1.1fr; }

.sermon-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(20, 18, 14, 0.55), rgba(20, 18, 14, 0.85)),
    linear-gradient(135deg, #5a4a32 0%, #2c2418 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.sermon-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 30%, rgba(212, 165, 49, 0.25) 0%, transparent 50%);
}
.play-btn {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.play-btn:hover { transform: scale(1.08); }
.play-btn::after {
  content: "";
  border-left: 24px solid var(--ink);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.sermon-preview-label {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 2;
  color: var(--white);
}
.sermon-preview-label .date {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.sermon-preview-label .title {
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ============== EVENTS ============== */
.events-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.event-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.event-date {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  overflow: hidden;
}
.event-date .month {
  background: var(--gold);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px;
  text-transform: uppercase;
}
.event-date .day {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 6px;
  color: var(--ink);
}
.event-body h4 { margin-bottom: 4px; }
.event-body .time { font-size: 0.875rem; color: var(--muted); }

/* ============== NEWSLETTER ============== */
.newsletter {
  background: var(--ink);
  color: var(--cream);
  padding: 72px 0;
  text-align: center;
}
.newsletter h2 { color: var(--white); margin-bottom: 14px; }
.newsletter p { color: rgba(255, 255, 255, 0.75); max-width: 540px; margin: 0 auto 32px; }
.newsletter-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  gap: 8px;
}
.newsletter-form input {
  flex: 1;
  /* A flex item will not shrink past its intrinsic width unless you say so, and
     an <input> asks for about twenty characters. On a 320-360px phone that plus
     the Subscribe button was wider than the screen, which let the whole page
     scroll sideways — and a sticky header only spans the screen, not the wider
     page, so it slid out from under the content and left a blank band down one
     side with the Give button out of reach. */
  min-width: 0;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
}
.newsletter-form input:focus { outline: 2px solid var(--gold); }

/* ============== FOOTER ============== */
.footer {
  background: #100e0a;
  color: rgba(255, 255, 255, 0.65);
  padding: 64px 0 32px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer h4 {
  color: var(--gold);
  font-family: -apple-system, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer a { color: rgba(255, 255, 255, 0.75); }
.footer a:hover { color: var(--gold); }
.footer-brand .nav-brand-fallback { color: var(--white); }
.footer-brand p { margin-top: 16px; max-width: 320px; line-height: 1.6; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}
.social-row { display: flex; gap: 16px; }
.social-row a {
  width: 44px;
  height: 44px;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.social-row a:hover { background: var(--gold); color: var(--ink); }

/* ============== SERMONS PAGE ============== */
.page-header {
  background: var(--cream);
  padding: 80px 0 64px;
  text-align: center;
}
.page-header h1 { font-size: 3rem; margin-bottom: 14px; }
.page-header p { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

.sermons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sermon-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  cursor: pointer;
}
.sermon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sermon-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  background:
    linear-gradient(135deg, rgba(20, 18, 14, 0.5), rgba(20, 18, 14, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
}
.sermon-thumb.t1 { background: linear-gradient(135deg, #6b5230 0%, #2c2418 100%); }
.sermon-thumb.t2 { background: linear-gradient(135deg, #4a3a52 0%, #1f1827 100%); }
.sermon-thumb.t3 { background: linear-gradient(135deg, #2c4a45 0%, #161f1d 100%); }
.sermon-thumb.t4 { background: linear-gradient(135deg, #5a3a2c 0%, #2c1f18 100%); }
.sermon-thumb.t5 { background: linear-gradient(135deg, #3a4a5a 0%, #1a242c 100%); }
.sermon-thumb.t6 { background: linear-gradient(135deg, #5a4a2c 0%, #2c2418 100%); }
.sermon-thumb .play-mini {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sermon-thumb .play-mini::after {
  content: "";
  border-left: 14px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.sermon-thumb .duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
}
.sermon-card-body { padding: 22px; }
.sermon-card-body .date {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 8px;
}
.sermon-card-body h3 { font-size: 1.2rem; margin-bottom: 6px; line-height: 1.3; }
.sermon-card-body .speaker { color: var(--muted); font-size: 0.9rem; }

.filter-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  justify-content: center;
}
.filter-chip {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 50px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--white);
}
.filter-chip:hover { border-color: var(--gold); }
.filter-chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ============== VISIT PAGE ============== */
.expect-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}
.expect-card {
  text-align: left;
  padding: 32px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--gold);
}
.expect-card .num {
  font-family: Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  /* Large gold on a light card — bright gold reads at 2.1:1 here. */
  color: var(--gold-display);
  line-height: 1;
  margin-bottom: 16px;
}
.expect-card h3 { margin-bottom: 10px; font-size: 1.25rem; }
.expect-card p { color: var(--muted); font-size: 0.95rem; }

.visit-form-section {
  background: var(--cream);
}
.visit-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-md);
  max-width: 680px;
  margin: 0 auto;
}
.visit-form h2 { margin-bottom: 8px; }
.visit-form > p { color: var(--muted); margin-bottom: 32px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-field.full { grid-column: span 2; }
.form-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--white);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--gold);
  border-color: var(--gold);
}
.form-field textarea { resize: vertical; min-height: 100px; }

.map-block {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(212, 165, 49, 0.1), rgba(212, 165, 49, 0.05)),
    repeating-linear-gradient(45deg, #e8e2d4 0px, #e8e2d4 2px, #f3ece0 2px, #f3ece0 24px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.map-pin {
  width: 60px;
  height: 60px;
  background: var(--gold);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.map-pin::after {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--ink);
  border-radius: 50%;
  position: absolute;
  top: 19px;
  left: 19px;
}

/* ============== MOCKUP RIBBON ============== */
.mockup-ribbon {
  background: linear-gradient(135deg, #d4a531, #b88a1f);
  color: var(--ink);
  padding: 8px 16px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  .hero h1 { font-size: 2.8rem; }
  .container { padding: 0 20px; }
  .new-here-grid, .events-row, .sermons-grid, .expect-row,
  .footer-grid, .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 24px; }
  .nav-links { display: none; }
  section { padding: 56px 0; }
  .form-row { grid-template-columns: 1fr; }
  .form-field.full { grid-column: span 1; }
}


/* ===== AUDIO SERMON COMPONENTS (audio-first launch) ===== */
.audio-player {
  background: linear-gradient(135deg, #fffdf8 0%, #f5edda 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.audio-player-top { display: flex; align-items: center; gap: 20px; }
.audio-play {
  flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 20px rgba(212,165,49,0.40);
  transition: transform .2s ease;
}
.audio-play:hover { transform: scale(1.07); }
.audio-play::after {
  content: ""; border-left: 20px solid var(--ink);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px;
}
.audio-meta .eyebrow-sm {
  font-size: 0.875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700; display: block; margin-bottom: 6px;
}
.audio-meta h3 { font-size: 1.35rem; margin: 0 0 4px; }
.audio-meta .speaker { color: var(--muted); font-size: .9rem; }
.waveform {
  height: 56px; border-radius: 4px; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20288%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20x%3D'0'%20y%3D'29.0'%20width%3D'5'%20height%3D'42'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'8'%20y%3D'16.0'%20width%3D'5'%20height%3D'68'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'16'%20y%3D'35.0'%20width%3D'5'%20height%3D'30'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'24'%20y%3D'9.0'%20width%3D'5'%20height%3D'82'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'32'%20y%3D'23.0'%20width%3D'5'%20height%3D'54'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'40'%20y%3D'31.0'%20width%3D'5'%20height%3D'38'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'48'%20y%3D'13.0'%20width%3D'5'%20height%3D'74'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'56'%20y%3D'27.0'%20width%3D'5'%20height%3D'46'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'64'%20y%3D'5.0'%20width%3D'5'%20height%3D'90'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'72'%20y%3D'21.0'%20width%3D'5'%20height%3D'58'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'80'%20y%3D'33.0'%20width%3D'5'%20height%3D'34'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'88'%20y%3D'17.0'%20width%3D'5'%20height%3D'66'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'96'%20y%3D'25.0'%20width%3D'5'%20height%3D'50'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'104'%20y%3D'11.0'%20width%3D'5'%20height%3D'78'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'112'%20y%3D'28.0'%20width%3D'5'%20height%3D'44'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'120'%20y%3D'19.0'%20width%3D'5'%20height%3D'62'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'128'%20y%3D'36.0'%20width%3D'5'%20height%3D'28'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'136'%20y%3D'7.0'%20width%3D'5'%20height%3D'86'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'144'%20y%3D'24.0'%20width%3D'5'%20height%3D'52'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'152'%20y%3D'30.0'%20width%3D'5'%20height%3D'40'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'160'%20y%3D'15.0'%20width%3D'5'%20height%3D'70'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'168'%20y%3D'26.0'%20width%3D'5'%20height%3D'48'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'176'%20y%3D'3.0'%20width%3D'5'%20height%3D'94'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'184'%20y%3D'22.0'%20width%3D'5'%20height%3D'56'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'192'%20y%3D'32.0'%20width%3D'5'%20height%3D'36'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'200'%20y%3D'18.0'%20width%3D'5'%20height%3D'64'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'208'%20y%3D'34.0'%20width%3D'5'%20height%3D'32'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'216'%20y%3D'10.0'%20width%3D'5'%20height%3D'80'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'224'%20y%3D'27.0'%20width%3D'5'%20height%3D'46'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'232'%20y%3D'20.0'%20width%3D'5'%20height%3D'60'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'240'%20y%3D'37.0'%20width%3D'5'%20height%3D'26'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'248'%20y%3D'8.0'%20width%3D'5'%20height%3D'84'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'256'%20y%3D'25.0'%20width%3D'5'%20height%3D'50'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'264'%20y%3D'29.0'%20width%3D'5'%20height%3D'42'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'272'%20y%3D'14.0'%20width%3D'5'%20height%3D'72'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'280'%20y%3D'27.0'%20width%3D'5'%20height%3D'46'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x; background-size: auto 100%;
}
.audio-times {
  display: flex; justify-content: space-between;
  font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.audio-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm);
  transition: all .2s ease; cursor: pointer;
  display: flex; flex-direction: column; gap: 16px;
}
.audio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.audio-card-top { display: flex; align-items: center; gap: 14px; }
.audio-play-sm {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold-light); display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.audio-card:hover .audio-play-sm { background: var(--gold); }
.audio-play-sm::after {
  content: ""; border-left: 13px solid var(--gold-dark);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px;
  transition: border-left-color .2s ease;
}
.audio-card:hover .audio-play-sm::after { border-left-color: var(--ink); }
.waveform-sm {
  flex: 1; height: 32px; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20288%20100'%20preserveAspectRatio%3D'none'%3E%3Crect%20x%3D'0'%20y%3D'29.0'%20width%3D'5'%20height%3D'42'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'8'%20y%3D'16.0'%20width%3D'5'%20height%3D'68'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'16'%20y%3D'35.0'%20width%3D'5'%20height%3D'30'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'24'%20y%3D'9.0'%20width%3D'5'%20height%3D'82'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'32'%20y%3D'23.0'%20width%3D'5'%20height%3D'54'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'40'%20y%3D'31.0'%20width%3D'5'%20height%3D'38'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'48'%20y%3D'13.0'%20width%3D'5'%20height%3D'74'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'56'%20y%3D'27.0'%20width%3D'5'%20height%3D'46'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'64'%20y%3D'5.0'%20width%3D'5'%20height%3D'90'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'72'%20y%3D'21.0'%20width%3D'5'%20height%3D'58'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'80'%20y%3D'33.0'%20width%3D'5'%20height%3D'34'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'88'%20y%3D'17.0'%20width%3D'5'%20height%3D'66'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'96'%20y%3D'25.0'%20width%3D'5'%20height%3D'50'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'104'%20y%3D'11.0'%20width%3D'5'%20height%3D'78'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'112'%20y%3D'28.0'%20width%3D'5'%20height%3D'44'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'120'%20y%3D'19.0'%20width%3D'5'%20height%3D'62'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'128'%20y%3D'36.0'%20width%3D'5'%20height%3D'28'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'136'%20y%3D'7.0'%20width%3D'5'%20height%3D'86'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'144'%20y%3D'24.0'%20width%3D'5'%20height%3D'52'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'152'%20y%3D'30.0'%20width%3D'5'%20height%3D'40'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'160'%20y%3D'15.0'%20width%3D'5'%20height%3D'70'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'168'%20y%3D'26.0'%20width%3D'5'%20height%3D'48'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'176'%20y%3D'3.0'%20width%3D'5'%20height%3D'94'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'184'%20y%3D'22.0'%20width%3D'5'%20height%3D'56'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'192'%20y%3D'32.0'%20width%3D'5'%20height%3D'36'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'200'%20y%3D'18.0'%20width%3D'5'%20height%3D'64'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'208'%20y%3D'34.0'%20width%3D'5'%20height%3D'32'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'216'%20y%3D'10.0'%20width%3D'5'%20height%3D'80'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'224'%20y%3D'27.0'%20width%3D'5'%20height%3D'46'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'232'%20y%3D'20.0'%20width%3D'5'%20height%3D'60'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'240'%20y%3D'37.0'%20width%3D'5'%20height%3D'26'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'248'%20y%3D'8.0'%20width%3D'5'%20height%3D'84'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'256'%20y%3D'25.0'%20width%3D'5'%20height%3D'50'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'264'%20y%3D'29.0'%20width%3D'5'%20height%3D'42'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'272'%20y%3D'14.0'%20width%3D'5'%20height%3D'72'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3Crect%20x%3D'280'%20y%3D'27.0'%20width%3D'5'%20height%3D'46'%20rx%3D'2'%20fill%3D'%23d4a531'%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x; background-size: auto 100%;
}
.audio-card .dur-tag {
  font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.audio-card .date {
  font-size: 0.875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700; margin-bottom: 6px;
}
.audio-card h3 { font-size: 1.15rem; margin-bottom: 6px; line-height: 1.3; }
.audio-card .speaker { color: var(--muted); font-size: .88rem; }
@media (max-width: 900px) {
  .audio-player { padding: 26px; }
  .audio-meta h3 { font-size: 1.2rem; }
}


/* ============================================================
   SCROLL FADE-IN ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s cubic-bezier(.2,.6,.2,1),
              transform .85s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SCHEDULE EXCEPTION
   A month where a standing service moves. Wednesday worship is normally on
   Zoom; in September it gathers in person for revival. That exception was
   buried in small grey type in four places, so people were reading the
   standing time and the exception as a contradiction. This shows the change
   as a change: what it usually is, what it is this month, and the dates.
   ============================================================ */
.sched-exception {
  max-width: 760px;
  margin: 40px auto 0;
  background: linear-gradient(135deg, #fffdf8 0%, #f5edda 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 38px 36px 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.sched-exception-tag {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
}
.sched-exception h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 22px;
  line-height: 1.3;
}

/* The two states, with an arrow between them. */
.sched-swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}
.sched-state {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  padding: 20px 18px;
}
.sched-state.is-now {
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: 0 4px 14px rgba(212, 165, 49, 0.18);
}
.sched-state-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.sched-state.is-now .sched-state-label { color: var(--gold-dark); }
.sched-state-where {
  font-family: 'Fraunces', serif;
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
.sched-state-time {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.sched-state-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.sched-arrow {
  align-self: center;
  color: var(--gold-dark);
  font-size: 1.5rem;
  line-height: 1;
}

/* The specific dates, so nobody has to work out which Wednesdays. */
.sched-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.sched-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 50px;
  padding: 6px 14px;
}
/* A date that is deliberately nothing. Sep 30 2026 is a day of rest: no service
   in person and none on Zoom. Removing it outright would leave people who were
   told "every Wednesday in September" turning up to a closed building, so it is
   shown, struck through, and named. */
.sched-date.is-rest {
  border-style: dashed;
  border-color: var(--muted, #8a8175);
  color: var(--muted, #6b6b6b);
  background: transparent;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.sched-rest {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(255,255,255,0.55);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.sched-rest strong { color: var(--ink); }

.sched-footnote {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 165, 49, 0.35);
}
.sched-footnote strong { color: var(--ink); }

/* On a phone the two states stack, and the arrow turns to point down. */
@media (max-width: 560px) {
  .sched-exception { padding: 34px 22px 26px; }
  .sched-exception h3 { font-size: 1.28rem; }
  .sched-swap { grid-template-columns: 1fr; gap: 10px; }
  .sched-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ============================================================
   MONTHLY THEME BANNER
   ============================================================ */
.theme-banner {
  background:
    linear-gradient(180deg, rgba(255,253,248,0.85) 0%, rgba(243,236,224,0.92) 100%),
    url('img/theme-dawn.jpg') center / cover no-repeat;
  color: var(--ink);
  padding: 96px 0; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.theme-banner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(212,165,49,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(212,165,49,0.06) 0%, transparent 50%);
}
.theme-banner > * { position: relative; z-index: 2; }
.theme-banner .eyebrow { color: var(--gold); }
.theme-banner h2 {
  color: var(--white);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.8rem;
  margin-bottom: 14px;
  font-variation-settings: "opsz" 144;
}
.theme-banner h2 em { color: var(--gold); font-style: italic; }
.theme-banner .verse {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  max-width: 640px; margin: 0 auto;
  font-size: 1.1rem; line-height: 1.6;
}

/* ============================================================
   INNER-PAGE HERO (premium look for new pages)
   ============================================================ */
.page-hero {
  background:
    radial-gradient(circle at 20% 40%, rgba(212,165,49,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #fffdf8 0%, #faf4e8 100%);
  padding: 104px 0 88px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 {
  font-size: 3.8rem;
  margin-bottom: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.page-hero h1 em { color: var(--gold-dark); font-style: italic; font-weight: 400; }
.page-hero .lede {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--muted);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 400;
}

/* ============================================================
   PASTOR'S NOTE PAGE
   ============================================================ */
.note-card {
  max-width: 780px; margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.note-header {
  background:
    linear-gradient(135deg, rgba(20,18,14,0.84) 0%, rgba(44,31,20,0.82) 100%),
    url('img/note-bg.jpg') center 25% / cover no-repeat;
  color: var(--cream);
  padding: 44px 52px 36px;
  position: relative;
}
.note-header::after {
  content: ""; position: absolute; bottom: -1px; left: 52px; right: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}
.note-header .meta {
  font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 10px;
}
.note-header h2 {
  color: var(--white);
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 500;
  font-style: italic;
}
.note-body { padding: 48px 52px 52px; }
.note-body p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.78;
  color: var(--body);
  margin-bottom: 1.25em;
}
.note-body p:first-of-type::first-letter {
  font-size: 3.4em; float: left; line-height: 0.85;
  font-weight: 600; margin-right: 10px; margin-top: 4px;
  color: var(--gold-dark);
  font-family: 'Fraunces', serif;
}
.note-body .pull-quote {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 400;
  font-size: 1.45rem; line-height: 1.45;
  color: var(--ink);
  padding: 28px 36px;
  border-left: 4px solid var(--gold);
  background: var(--cream);
  margin: 32px 0;
  border-radius: 0 6px 6px 0;
}
.note-signature {
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px;
}
.note-signature .name {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem; font-style: italic; font-weight: 500; color: var(--ink);
}
.note-signature .role { font-size: 0.88rem; color: var(--muted); }
.note-archive-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.note-archive-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all .25s ease;
  cursor: pointer;
}
.note-archive-card:hover {
  transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-md);
}
.note-archive-card .date {
  font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700; margin-bottom: 10px;
}
.note-archive-card h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.3; }
.note-archive-card p {
  color: var(--muted); font-size: 0.92rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.note-archive-card .read-more {
  display: inline-block; margin-top: 14px;
  font-size: 0.88rem; font-weight: 600; color: var(--gold-dark);
}
.note-archive-card .read-more::after { content: " →"; }

/* ============================================================
   GIVE PAGE
   ============================================================ */
.give-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.give-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  transition: all .25s ease;
  display: flex; flex-direction: column;
}
.give-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.give-card.featured {
  background: linear-gradient(160deg, #fffdf8 0%, #f6efe0 100%);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.give-card.featured::before {
  content: "Most members use this";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; padding: 5px 14px; border-radius: 50px;
  font-family: 'Inter', sans-serif;
}
.give-card .icon-circle {
  width: 68px; height: 68px;
  background: var(--gold-light); color: var(--gold-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  font-family: 'Fraunces', serif;
  font-size: 1.9rem; font-weight: 600;
}
.give-card.featured .icon-circle { background: var(--gold); color: var(--ink); }
.give-card h3 { margin-bottom: 12px; font-size: 1.4rem; }
.give-card p { color: var(--muted); font-size: 0.95rem; flex: 1; line-height: 1.6; }
.give-card .detail-line {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.1rem; color: var(--ink);
  margin: 16px 0 22px;
}
.give-impact {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center;
}
.give-impact-num {
  font-family: 'Fraunces', serif;
  font-size: 3.2rem; font-weight: 500;
  color: var(--gold-dark); display: block; line-height: 1;
  font-style: italic;
}
.give-impact-label {
  font-size: 0.92rem; color: var(--muted); margin-top: 10px; line-height: 1.4;
}
.faq-grid { display: grid; gap: 16px; }
.faq-item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 32px;
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: var(--gold); }
.faq-item summary {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem; color: var(--ink); font-weight: 500;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: 'Inter', sans-serif;
  font-size: 1.6rem; color: var(--gold-dark);
  line-height: 1; flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  color: var(--body); margin-top: 14px; line-height: 1.7;
  padding-right: 40px;
}

/* ============================================================
   ABOUT / BELIEFS PAGE
   ============================================================ */
.belief-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.belief-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  border-left: 4px solid var(--gold);
  transition: all .25s ease;
}
.belief-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.belief-card .num {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem; font-weight: 500;
  /* Large gold on a white card — bright gold reads at 2.3:1 here. */
  color: var(--gold-display); font-style: italic;
  line-height: 1; margin-bottom: 14px;
}
.belief-card h3 { margin-bottom: 12px; font-size: 1.35rem; }
.belief-card p { color: var(--body); line-height: 1.7; }
.belief-card .scripture {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--muted); font-size: 0.95rem; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.value-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  text-align: center;
}
.value-col h4 {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  color: var(--gold-dark); font-size: 1.5rem; margin-bottom: 12px;
}
.value-col p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

/* Pastor portrait card on About */
.pastor-card {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px;
  align-items: center;
  background: var(--cream);
  padding: 56px;
  border-radius: var(--radius-lg);
}
.pastor-portrait {
  aspect-ratio: 4/5;
  background:
    linear-gradient(135deg, rgba(20,18,14,0.45), rgba(20,18,14,0.7)),
    linear-gradient(135deg, #6b5230 0%, #2c2418 100%);
  border-radius: var(--radius-lg);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px;
  color: var(--white);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  position: relative;
}
.pastor-portrait::after {
  content: "Pastor's photo here";
  font-size: 0.875rem; opacity: 0.6;
}
.pastor-card h3 {
  font-size: 2rem; margin-bottom: 10px;
}
.pastor-card .role {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--gold-dark); margin-bottom: 22px; font-size: 1.05rem;
}
.pastor-card p { line-height: 1.7; margin-bottom: 16px; }

@media (max-width: 900px) {
  .note-archive-grid, .give-options, .belief-grid, .give-impact { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding: 72px 0 56px; }
  .page-hero h1 { font-size: 2.4rem; }
  .page-hero .lede { font-size: 1.1rem; }
  .theme-banner h2 { font-size: 1.9rem; }
  .theme-banner { padding: 48px 0; }
  .note-header { padding: 32px 28px 28px; }
  .note-header h2 { font-size: 1.7rem; }
  .note-body { padding: 32px 28px; }
  .note-body p { font-size: 1.06rem; }
  .pastor-card { grid-template-columns: 1fr; padding: 32px; gap: 28px; }
}


/* ============================================================
   PALETTE SOFTENING (Wrights Grove preview)
   ============================================================ */

/* Theme banner — now cream, not black */
.theme-banner .eyebrow { color: var(--gold-dark); }
.theme-banner h2 {
  color: var(--ink) !important;
  font-style: italic;
  font-weight: 400;
}
.theme-banner h2 em {
  color: var(--gold-dark);
  font-style: italic;
}
.theme-banner .verse {
  color: var(--muted) !important;
  font-style: italic;
}

/* Newsletter section — warm cocoa instead of flat black */
.newsletter {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,165,49,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #3a2c1c 0%, #261c11 100%);
}
.newsletter h2 { color: #fffdf6 !important; }

/* Warmer dark CTA — softer than pure ink */
.bg-warm-deep {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,165,49,0.15) 0%, transparent 55%),
    linear-gradient(135deg, #3a2c1c 0%, #261c11 100%);
  color: var(--cream);
}
.bg-warm-deep h2, .bg-warm-deep h3 { color: #fffdf6; }

/* Pastor portrait — real photo of Pastor Leonard */
.pastor-portrait {
  background:
    url('img/pastor-leonard.jpg') center 20% / cover no-repeat,
    linear-gradient(135deg, rgba(20,18,14,0.30), rgba(20,18,14,0.55)),
    url('img/community.jpg') center / cover no-repeat;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.pastor-portrait::after { content: none; }


/* ============================================================
   MINISTRIES PAGE — directory-driven cards
   ============================================================ */
.ministries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.ministry-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: all .25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ministry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.ministry-num {
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  font-weight: 500;
  /* Large gold on a white card — bright gold reads at 2.3:1 here. */
  color: var(--gold-display);
  font-style: italic;
  line-height: 1;
  margin-bottom: 10px;
}
.ministry-count {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: var(--gold-light);
  padding: 5px 12px;
  border-radius: 50px;
}
.ministry-card h3 {
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.ministry-desc {
  color: var(--body);
  line-height: 1.65;
  margin-bottom: 22px;
  flex: 1;
}
.ministry-team {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.team-line {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(212, 165, 49, 0.15);
}
.team-line:last-child { border-bottom: none; }
.team-label {
  flex-shrink: 0;
  min-width: 80px;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.team-name {
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-weight: 500;
}
.team-more {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(212, 165, 49, 0.2);
  font-size: 0.875rem;
  color: var(--muted);
  font-style: italic;
}
.ministry-note {
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--gold-light), transparent);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink);
  font-style: italic;
}
.ministry-fb {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-dark);
}
@media (max-width: 900px) {
  .ministries-grid { grid-template-columns: 1fr; }
  .ministry-card { padding: 28px; }
  .ministry-count { top: 24px; right: 24px; }
}

/* ============================================================
   V4 — Logo prominence, clearer menu, mobile hamburger nav
   ============================================================ */

/* Make the official logo stand out in the nav */
.nav-brand img { height: 74px; }

/* Footer: the white-cross version of the logo sits directly on the dark
   footer, so the old white chip behind it is gone. */
.footer-logo-img {
  height: 120px;
  width: auto;
  background: none;
  padding: 0;
  box-shadow: none;
}

/* Desktop menu: more apparent — darker, bolder, a touch larger.
   The group toggles (About, Watch & Listen) are buttons, not links, so they
   have to be named here too or they render lighter than the tabs beside them. */
.nav-links { gap: 26px; }
.nav-links a,
.nav-group-toggle { color: var(--ink); font-weight: 600; font-size: 1rem; }

/* Hamburger button (hidden on desktop) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: 4px; }
.nav-toggle span { display: block; width: 27px; height: 3px; background: var(--ink); border-radius: 2px; margin: 4px 0; transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 900px) {
  .nav-inner { justify-content: flex-start; gap: 12px; }
  .nav-brand { margin-right: auto; }
  .nav-brand img { height: 56px; }
  .nav .btn-primary.btn-sm { order: 2; }
  .nav-toggle { display: block; order: 3; }

  /* Slide-down panel when open */
  .nav.nav-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: 4px 0; z-index: 60;
  }
  .nav.nav-open .nav-links li { width: 100%; display: block; }
  .nav.nav-open .nav-links a { display: block; padding: 15px 28px; font-size: 1.08rem; border-bottom: 1px solid var(--line); }
  /* Only the last row of the whole menu loses its rule — not the last row of
     each group, which made the dividers look like they had been dropped at
     random. */
  .nav.nav-open .nav-links > li:last-child a { border-bottom: none; }
  .nav.nav-open .nav-links a:hover, .nav.nav-open .nav-links a.active { background: var(--cream); }

  /* In the phone menu the groups are already open — hiding them behind a second
     tap would make the shorter nav harder to use than the long one it replaced.
     The group name stays on as a small heading so the list still reads as
     grouped rather than as seven loose links. */
  .nav.nav-open .nav-group-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 20px 28px 6px;
    min-height: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 0;
    cursor: default;
  }
  .nav.nav-open .nav-group-toggle:hover { border-bottom: 0; color: var(--muted); }
  .nav.nav-open .nav-group .caret { display: none; }
  .nav.nav-open .nav-group-menu {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .nav.nav-open .nav-group-menu a { padding: 15px 28px; }

  /* Plan a Visit reads as a row in the list here, not a small pill. */
  .nav.nav-open .nav-cta { padding: 12px 28px 16px; }
  .nav.nav-open .nav-cta .btn { width: 100%; justify-content: center; padding: 12px 18px; }

  /* Hamburger morphs into an X */
  .nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Phones ───────────────────────────────────────────────────────────────
   The site had a single breakpoint at 900px, so a small phone got exactly the
   same treatment as a large tablet: tablet-sized headlines and padding on a
   375px screen. This is the second step down — type, spacing and the countdown
   boxes shrink to fit a hand. Nothing below 14px, so it stays readable. */
@media (max-width: 560px) {
  .container, .container-narrow { padding: 0 18px; }

  .hero h1 { font-size: 2.15rem; }
  .hero-sub { font-size: 1.02rem; }
  .hero-content { padding-top: 56px; padding-bottom: 44px; }
  /* Four service times now. auto-fit still asks for a 180px floor per column,
     which is 392px across on a 375px phone and clipped the headline. Two even
     columns that are allowed to shrink to zero fit any phone. */
  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    padding-top: 24px;
  }
  .hero-ctas { gap: 10px; margin-bottom: 40px; }
  .hero-ctas .btn { width: 100%; }

  .page-hero h1 { font-size: 1.9rem; }
  .page-hero .lede { font-size: 1.02rem; }



  /* Side by side, the field and the button each end up too small to tap
     comfortably. Stacked, both are full width, same as the hero buttons. */
  .newsletter-form { flex-direction: column; gap: 10px; }
  .newsletter-form .btn { width: 100%; justify-content: center; }

  section { padding: 56px 0; }
}

/* ============== WHAT CHANGES THIS MONTH ==============
   The standing rhythms are on the home page all year, so the thing a member
   actually needs from a monthly refresh is what is NOT normal: the week that
   moves, the night that is off, the service at a different time. This box is
   for that and nothing else. If a month changes nothing, delete it that
   month rather than filling it with something that was already true. */
.month-change {
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: #fffdf8;
  padding: 20px 24px;
  margin-bottom: 28px;
  max-width: 46ch;
}
.month-change .label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
.month-change p {
  margin: 0 0 8px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}
.month-change p:last-child { margin-bottom: 0; }

/* ============== REVIVAL (SEPTEMBER) ==============
   The four preachers, then the seed ask. Both are month-specific; when the
   revival is over they come out.

   The flyer used to sit above this row at full width, and it was the same
   four faces with the same four dates immediately above the same four faces
   with the same four dates. It is a link now. It also read badly here: it is
   a wide landscape image whose type is unreadable once a phone scales it
   down, where the row below stays legible at any width. */
.flyer-share {
  margin: 0 0 32px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}
.flyer-share a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.flyer-share a:hover { text-decoration: underline; }

.preacher-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 860px) { .preacher-row { grid-template-columns: repeat(2, 1fr); } }
.preacher-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* height:auto is load-bearing: the width/height attributes on the img would
   otherwise pin the height and stretch the portrait. */
.preacher-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}
.preacher-body { padding: 16px 18px 18px; }
.preacher-when {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 6px;
}
.preacher-body h4 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 4px; }
.preacher-body p { font-size: 0.88rem; line-height: 1.45; color: var(--muted); margin: 0; }

.seed-note {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 860px;
  margin: 34px auto 0;
  padding: 30px 34px;
  background: linear-gradient(135deg, #fffdf8 0%, #f6ecd6 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.seed-amt {
  flex: 0 0 auto;
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-dark);
}
.seed-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 6px;
}
.seed-body h3 { font-size: 1.25rem; margin-bottom: 8px; }
.seed-body p { margin: 0; color: var(--ink); font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 600px) {
  .seed-note { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px; }
}

/* ============== ADD TO CALENDAR ============== */
.cal-add {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
}
.cal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 50px;
  color: var(--gold-dark);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 16px 7px 12px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cal-add-btn:hover,
.cal-add.is-open .cal-add-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.cal-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gold-light);
  color: var(--gold-dark);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.cal-add-btn:hover .cal-add-icon,
.cal-add.is-open .cal-add-icon {
  background: rgba(255, 255, 255, 0.85);
}
/* While a menu is open, calendar.js puts .cal-card-open on the card that
   owns it. The cards animate in with a transform, which makes each one its
   own stacking context, so a z-index on the menu alone only ranks it inside
   its own card. Raising the card is what lifts the menu over its neighbours.
   The card also needs to be positioned for z-index to apply at all. */
.cal-card-open {
  position: relative;
  z-index: 60;
  /* Some cards clip their own decoration with overflow: hidden, which would
     cut the menu off at the bottom edge. Let it out while it is open. */
  overflow: visible;
}

.cal-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 232px;
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(42, 32, 19, 0.16);
  padding: 6px;
  /* Closed menus are taken out of the layout entirely. Hidden but still laid
     out, a menu on a card near the right edge made the page scroll sideways
     on phones. */
  display: none;
}
.cal-add.is-open .cal-menu {
  display: block;
  animation: cal-menu-in 0.16s ease;
}
@keyframes cal-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cal-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.cal-menu-item:hover {
  background: var(--gold-light);
  color: var(--ink);
}

/* ============== BIRTHDAY NOTE ==============
   The pastor's birthday is a note, not a gathering, so it does not sit in
   the events grid wearing a date box like something you attend. It gets its
   own warm block with a candle-lit mark. */
.bday-note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 860px;
  margin: 34px auto 0;
  padding: 32px 36px;
  background: linear-gradient(135deg, #fffdf8 0%, #f6ecd6 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* a soft glow behind the cake, like candlelight */
.bday-note::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -6%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(212, 165, 49, 0.16) 0%, transparent 68%);
  pointer-events: none;
}
.bday-tag {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
}
.bday-art {
  position: relative;
  flex: 0 0 auto;
  width: 86px;
}
.bday-body { position: relative; flex: 1; }
.bday-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--ink);
  margin: 2px 0 4px;
}
.bday-when {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
.bday-body p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 600px) {
  .bday-note { flex-direction: column; text-align: center; gap: 18px; padding: 34px 24px 28px; }
  .bday-art { width: 74px; }
  .bday-note .cal-add { margin-left: auto; margin-right: auto; }
}

/* The same birthday treatment, sized for the three-card row on the home page. */
.event-card.is-bday {
  background: linear-gradient(135deg, #fffdf8 0%, #f6ecd6 100%);
  border-color: var(--gold);
  align-items: center;
}
.event-card.is-bday .bday-art { width: 62px; }
.event-card.is-bday h4 { font-family: 'Fraunces', serif; font-weight: 500; }

/* Cards that calendar.js hides once their date has passed. The class rules
   above set display on these, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }
.events-empty {
  text-align: center;
  color: #6b6b6b;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  margin: 8px auto 0;
  max-width: 560px;
}

/* Netlify form results (app.js) */
.form-thanks {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold-dark);
  text-align: center;
  margin: 12px auto;
}
.form-error {
  flex-basis: 100%;
  width: 100%;
  color: #9b2c2c;
  font-size: 0.9rem;
  margin-top: 10px;
}