/* ═══════════════════════════════════════════════════════════════════════════
   ST. ANDREW ORTHODOX CHURCH - PENSACOLA
   Design system v3 - vibrant hero, larger eyebrow, simple text-card variant,
   tighter spacing, less-prominent give button, zero em-dashes in body text.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --navy-deep: #1a3a64;
  --navy-ink: #0c1f3a;   /* darkest navy; used for text on gold to clear WCAG AA */
  --navy-mid: #244a78;
  --navy-soft: #3a6196;
  --burgundy: #7a1f2b;
  --burgundy-deep: #5a1620;
  --gold: #b4914a;
  --gold-dark: #7a6122;
  --gold-light: #d8b96b;
  --gold-pale: #f0e3c0;
  --ivory: #faf6ee;
  --ivory-dim: #f3ecd9;
  --cream: #f7efe0;
  --text-dark: #1f1812;
  --text-body: #3a2f23;
  --text-muted: #6b5e4f;
  --text-on-dark: #ffffff;
  --text-on-dark-dim: rgba(255, 255, 255, 0.88);
  --rule: rgba(180, 145, 74, 0.32);
  --rule-light: rgba(180, 145, 74, 0.18);
  --shadow-sm: 0 1px 3px rgba(31, 24, 18, 0.08), 0 1px 2px rgba(31, 24, 18, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 24, 18, 0.10), 0 2px 4px rgba(31, 24, 18, 0.06);
  --shadow-lg: 0 12px 32px rgba(26, 58, 100, 0.16), 0 4px 12px rgba(26, 58, 100, 0.10);

  --font-display: 'Cormorant Garamond', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-accent: 'Cinzel', 'Cormorant Garamond', Georgia, serif;

  --container-narrow: 760px;
  --container: 1100px;
  --container-wide: 1280px;
  --header-h: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  /* Reduced ~45% per Mark's request - keeps in-section spacing intact, just trims the dead space at color-change boundaries */
  --section-pad-y: clamp(1.9rem, 3.8vw, 3.3rem);
  --gutter: clamp(1.25rem, 4vw, 2.25rem);

  color-scheme: light;
}

/* ────────────────────────── RESET ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--ivory);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
img { background: var(--ivory-dim); }
a { color: var(--burgundy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.15s; }
a:hover { color: var(--gold-dark); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
ul, ol { padding-left: 1.25rem; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--navy-deep); }

/* ────────────────────────── TYPOGRAPHY ────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.18;
  letter-spacing: -0.005em;
}

.section-title {
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-dark);
  line-height: 1.05;
  /* text-wrap: balance - modern CSS (Chrome 114+, Safari 17.5+, Firefox 121+) that auto-distributes
     words evenly across lines so titles like "A Living Community of the Ancient Faith" go to
     2 balanced lines instead of an awkward 3-line stack. Falls back gracefully on older browsers. */
  text-wrap: balance;
  max-width: 22ch;
}
/* Wider titles (the path-card section, etc.) get a roomier balance target */
.section-title:where(:not(.section-title--light)) { max-width: 24ch; }
.path-card__title { text-wrap: balance; }

/* Section titles inside narrow text columns (split layout) or narrow containers need a smaller
   max font-size or they cannot fit on 2 lines (e.g. "A Living Community of the Ancient Faith"
   was wrapping to 3 awkward lines because the text column is ~600px even on a 1280-wide viewport). */
.split__text .section-title,
.container--narrow .section-title,
.container--narrow h1.section-title { font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
.section-title--light { color: var(--text-on-dark); }

.subsection-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  /* balance keeps multi-line subheads evenly distributed instead of leaving a one-word last line */
  text-wrap: balance;
}
.section--navy .subsection-title { color: var(--gold-light); border-bottom-color: rgba(216, 185, 107, 0.4); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
}
.eyebrow--gold { color: var(--gold-light); }
.eyebrow--gold::before { background: var(--gold-light); }

.section-intro {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  color: var(--text-body);
  max-width: 760px;
  margin: 0 0 2.75rem;
  line-height: 1.5;
}
.section--navy .section-intro { color: var(--text-on-dark-dim); }

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}
.lede--light { color: var(--text-on-dark); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.section--navy p, .section--navy li { color: var(--text-on-dark); }
.section--navy strong { color: #ffffff; font-weight: 600; }
.section--navy a { color: var(--gold-light); text-decoration-color: var(--gold-light); }
.section--navy a:hover { color: var(--gold-pale); }

.muted { color: var(--text-muted); font-size: 0.95rem; }
.muted--light { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; font-style: italic; margin-top: 2rem; }

em { font-style: italic; }
strong { font-weight: 600; color: var(--text-dark); }

/* ────────────────────────── UTILITIES ────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--navy-deep);
  color: var(--gold-light);
  padding: 0.6rem 1.1rem;
  z-index: 999;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ────────────────────────── HEADER / NAV ────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(26, 58, 100, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(180, 145, 74, 0.28);
  min-height: var(--header-h);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #ffffff;
  text-decoration: none;
  line-height: 1.15;
}
.brand__cross { font-size: 1.6rem; color: var(--gold-light); line-height: 1; flex-shrink: 0; }

/* Orthodox cross as artwork, not a character. U+2626 is in a Unicode block that Apple devices render
   from the colour emoji font, so on an iPhone the site's own gold cross came out as an emoji (Mark,
   2026-09-06: "No emoji pls"). This is the same three-bar geometry as favicon.svg, drawn inline so it
   inherits the surrounding colour and scales with the surrounding font size on every device.
   0.82em is the visual height the character occupied, so no spacing around it needed to change. */
.ortho-cross {
  display: inline-block;
  height: 0.82em;
  width: 0.56em;
  vertical-align: -0.06em;
  fill: currentColor;
  flex-shrink: 0;
}
.brand__words { display: flex; flex-direction: column; }
.brand__line1 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; }
.brand__line2 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.05em; line-height: 1.3; white-space: nowrap; }
.brand__line3 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.68); letter-spacing: 0.05em; line-height: 1.3; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid rgba(180, 145, 74, 0.45);
  border-radius: var(--radius-sm);
  padding: 0;
  position: relative;
}
.nav-toggle__bar {
  display: block;
  position: absolute;
  left: 11px;
  width: 24px;
  height: 2px;
  background: var(--gold-light);
  transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle__bar:nth-child(1) { top: 15px; }
.nav-toggle__bar:nth-child(2) { top: 23px; }
.nav-toggle__bar:nth-child(3) { top: 31px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.primary-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.25rem;
  align-items: stretch;
}
.primary-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  /* Two-line stacking when text would otherwise wrap awkwardly. line-height + min-height keep every link
     visually anchored to the same baseline whether it's one line ("Services") or two ("Becoming Orthodox"). */
  line-height: 1.15;
  min-height: 2.6rem;
  hyphens: none;
  word-break: keep-all;
}
.primary-nav a:hover { color: var(--gold-light); background: rgba(216, 185, 107, 0.12); }

/* Active-page styling that survives wrapping - gold underline + color, no half-highlighted background */
.primary-nav a[aria-current="page"] {
  color: var(--gold-light);
  box-shadow: inset 0 -2px 0 var(--gold-light);
  background: transparent;
}

/* Quieter Give button per Mark - not the most prominent thing, just a soft right-side accent */
.primary-nav .nav-give {
  color: var(--gold-light);
  border: 1px solid rgba(216, 185, 107, 0.45);
  margin-left: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
}
.primary-nav .nav-give:hover {
  background: rgba(216, 185, 107, 0.12);
  border-color: var(--gold-light);
  color: #ffffff;
}

/* Tighter progression as viewport narrows - keeps the row from breaking apart at any one width */
@media (max-width: 1180px) { .primary-nav a { font-size: 0.86rem; padding: 0.5rem 0.55rem; } }
@media (max-width: 1080px) { .primary-nav a { font-size: 0.8rem; padding: 0.5rem 0.45rem; letter-spacing: 0; } .primary-nav ul { gap: 0.15rem; } }
@media (max-width: 1000px) { .primary-nav a { font-size: 0.76rem; padding: 0.45rem 0.4rem; } }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--navy-deep);
    border-top: 1px solid rgba(180, 145, 74, 0.28);
    border-bottom: 1px solid rgba(180, 145, 74, 0.28);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; padding: 1rem; gap: 0; }
  .primary-nav a { display: block; padding: 1rem 1rem; font-size: 1rem; border-bottom: 1px solid rgba(180, 145, 74, 0.15); }
  .primary-nav li:last-child a { border-bottom: 0; }
  .primary-nav .nav-give { margin: 0.75rem 1rem 0; text-align: center; }
  .brand__line2 { display: none; }
}
@media (max-width: 380px) {
  .brand__line1 { font-size: 1rem; }
  .brand__cross { font-size: 1.35rem; }
}

/* ────────────────────────── HERO (vibrant, larger eyebrow, text-shadow) ────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(520px, 75vh, 760px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-deep);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* True-to-life vibrancy per Mark - neutral brightness, slight saturation/contrast bump */
  filter: saturate(1.10) contrast(1.02);
}
/* Overlay set halfway between original (0.78/0.55/0.28/0.10) and the too-light v3 pass.
   Left side held a touch darker so the headlines + service times read cleanly over the icon screen. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(95deg,
      rgba(10, 18, 36, 0.74) 0%,
      rgba(10, 18, 36, 0.56) 35%,
      rgba(10, 18, 36, 0.28) 65%,
      rgba(10, 18, 36, 0.08) 100%);
  pointer-events: none;
}
/* Extra soft vignette directly behind the title/eyebrow/sub-headline column so smaller weights
   don't wash into the bright iconography in the photo. Hidden on small screens to keep mobile clean. */
.hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -1.5rem; left: -1.5rem;
  width: min(56rem, 72%);
  height: calc(100% + 3rem);
  background: radial-gradient(ellipse at 18% 50%,
    rgba(8, 15, 30, 0.42) 0%,
    rgba(8, 15, 30, 0.22) 45%,
    rgba(8, 15, 30, 0.00) 80%);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(8px);
}
@media (max-width: 720px) { .hero__inner::before { display: none; } }
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 3;
}

.hero__inner {
  position: relative;
  z-index: 4;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

/* Hero eyebrow - bumped one size larger per Mark; deeper text shadow compensates for lighter overlay */
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3.05rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.005em;
  /* --gold-pale, not --gold-light (Mark, 2026-09-06: the hero writing should read as bright as the buttons).
     Measured first: the hero gold text and the button fill are the SAME colour, rgb(216,185,107), to the pixel.
     The button looks brighter because it is a solid fill, while these are thin serif strokes ringed by three
     layers of near-black shadow, so the eye averages them darker. Raising the ink is what closes that gap;
     the shadows stay untouched because they are what keeps this legible over a busy photograph. */
  color: var(--gold-pale);
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 38px rgba(0, 0, 0, 0.45);
  line-height: 1.1;
}
.hero__eyebrow span { font-size: 0.9em; line-height: 1; color: var(--gold-pale); }

.hero__location {
  font-family: var(--font-accent);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin: 0.25rem 0 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7.2vw, 5.6rem);
  font-weight: 600;
  line-height: 1.02;
  color: #ffffff;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.96), 0 5px 28px rgba(0, 0, 0, 0.78), 0 0 56px rgba(0, 0, 0, 0.5);
}
@media (max-width: 520px) {
  .hero__title { white-space: normal; font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero__eyebrow { font-size: clamp(1.35rem, 6.2vw, 1.85rem); }
}

.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: #ffffff;
  max-width: 40rem;
  margin-bottom: 2.25rem;
  font-weight: 500;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 3px 18px rgba(0, 0, 0, 0.7), 0 0 32px rgba(0, 0, 0, 0.45);
}
.hero__sub em { color: var(--gold-pale); font-style: italic; }

.hero__times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid rgba(216, 185, 107, 0.45);
  border-bottom: 1px solid rgba(216, 185, 107, 0.45);
  max-width: 46rem;
  margin-bottom: 2rem;
}
.hero__time { font-size: 1.02rem; color: #ffffff; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95), 0 3px 12px rgba(0, 0, 0, 0.6); }
/* Day labels - at least as large as the service-time detail per Mark, and heavier weight + darker shadow
   so SUNDAY / WEDNESDAY / SATURDAY don't wash into the photo. */
.hero__time-day {
  display: inline-block;
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-right: 0.7rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.98), 0 3px 14px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.5);
}
.hero__time-detail { font-family: var(--font-body); color: #ffffff; font-weight: 600; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95), 0 3px 14px rgba(0, 0, 0, 0.65); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .hero { min-height: 540px; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero__times { gap: 0.5rem 1.5rem; flex-direction: column; }
  /* On a phone the three-line subhead sat 20px under the title and 36px above the service times, so it
     read as stuck to the heading (Mark, 2026-09-06). Equal gaps drop it down and centre it in that band.
     The two margins still total the same 56px, so the hero does not change height. */
  .hero__title { margin-bottom: 1.75rem; }
  .hero__sub { margin-bottom: 1.75rem; }
}

/* ────────────────────────── BUTTONS ────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
  min-height: 48px;
  line-height: 1.2;
  white-space: nowrap;
}
/* EVERY primary button is bright at rest and deepens on hover (Mark, 2026-09-06: "all of the buttons that are
   like this need to be bright like the shop the bake sale one or the Meet the Parish council one ... they
   default to bright anywhere across the site"). This used to run the other way round, dark at rest and
   brightening on hover, so the two buttons Mark had already asked to invert stood out from the rest.
   Label stays --navy-ink (#0c1f3a), never --navy-deep: navy-deep on gold measures 3.87:1, under the 4.5:1 AA
   floor for this 14.7px/600 label. Measured now: navy-ink on gold-light 8.70:1 at rest, on gold 5.57:1 on
   hover. Both clear AA, and the resting state is markedly better than the 5.57:1 it used to be. */
.btn-primary { background: var(--gold-light); color: var(--navy-ink); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--gold); color: var(--navy-ink); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
/* Kept as an explicit alias so the pages that name it (the promo bar, "Meet the Parish Council") keep working
   and keep reading clearly. It now matches .btn-primary exactly, which is the point: one treatment sitewide. */
.btn-primary--light { background: var(--gold-light); color: var(--navy-ink); }
.btn-primary--light:hover, .btn-primary--light:focus-visible { background: var(--gold); color: var(--navy-ink); }
/* Default btn-ghost is now LIGHT-SECTION-friendly (navy text on transparent w/ gold border).
   The dark-section override is just below, and .btn-ghost--hero handles the hero case. */
.btn-ghost {
  background: transparent;
  color: var(--navy-deep);
  border: 1.5px solid var(--gold);
  text-shadow: none;
}
/* navy-ink, not navy-deep: this hover state filled with gold and kept a navy-deep label, which measures
   3.87:1 and fails AA. Same defect the primary button was fixed for on 2026-09-04; caught 2026-09-06. */
.btn-ghost:hover { background: var(--gold); color: var(--navy-ink); border-color: var(--gold); }
/* Hero variant - pre-applied hover styling so it doesn't get lost over the cropped photo */
.btn-ghost--hero {
  background: rgba(216, 185, 107, 0.22);
  border-color: var(--gold-light);
  color: var(--gold-pale);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.btn-ghost--hero:hover { background: rgba(216, 185, 107, 0.36); color: #ffffff; border-color: var(--gold-pale); }
/* Dark-section override - light text + transparent bg so it reads on navy backgrounds */
.section--navy .btn-ghost { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(216, 185, 107, 0.65); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.section--navy .btn-ghost:hover { background: rgba(216, 185, 107, 0.18); border-color: var(--gold-light); color: var(--gold-light); }
/* A gold .btn-primary inside a navy section: the ".section--navy a" link rule (gold-light) outranks .btn-primary
   and washed the label out to 1.56:1 (found 2026-09-04 on the homepage Giving teaser). Pin the label color. */
.section--navy .btn-primary, .section--navy .btn-primary:hover { color: var(--navy-ink); }
.btn--block { width: 100%; }

/* ────────────────────────── SECTIONS ────────────────────────── */
.section { padding: var(--section-pad-y) 0; }
.section--ivory { background: var(--ivory); }
.section--cream { background: var(--cream); }
.section--navy {
  background: var(--navy-deep);
  color: var(--text-on-dark);
  position: relative;
}
.section--navy::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

/* Spacing helpers - reduce top/bottom padding where two sections touch and the gap looks too big */
.section--tight-top { padding-top: clamp(1.1rem, 2.4vw, 1.9rem); }
.section--tight-bottom { padding-bottom: clamp(1.1rem, 2.4vw, 1.9rem); }

/* Decorative horizontal divider used between Hierarchs (clergy section) and First Visit section */
.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
  max-width: 22rem;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.85rem);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--reverse .split__text { order: 2; }
  .split--reverse .split__image { order: 1; }
}
.split__image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
}
.section--navy .split__image img { border-color: rgba(216, 185, 107, 0.2); }

/* ────────────────────────── CARDS ────────────────────────── */
.cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 600px) { .cards--2, .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-sm);
  /* no hover animation - they're not clickable */
}
.card--accent { border-top: 4px solid var(--gold); }
.card__title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-dark); }
.card__meta { font-family: var(--font-accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-dark); margin-bottom: 1rem; }
.card__body { font-size: 1rem; color: var(--text-body); line-height: 1.6; margin: 0; }
.card__note { display: block; color: var(--text-muted); font-style: italic; font-size: 0.92rem; margin-top: 0.6rem; }

.resource-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--burgundy);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
}
.resource-card__title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin-bottom: 0.9rem; color: var(--text-dark); }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: 0.5rem 0; border-bottom: 1px dashed var(--rule); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { color: var(--burgundy); font-weight: 500; }

.link-inline { display: inline-block; margin-top: 0.5rem; font-weight: 600; }

/* ────────────────────────── PEOPLE (photo cards keep hover) ────────────────────────── */
.people {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 600px) { .people--2, .people--3, .people--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .people--3 { grid-template-columns: repeat(3, 1fr); } .people--4 { grid-template-columns: repeat(4, 1fr); } }

/* ───────── "Choose your path" 2-up panel (Becoming Orthodox  /  Welcome) ───────── */
.paths {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .paths { grid-template-columns: 1fr 1fr; } }
.path-card {
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.path-card--light { background: var(--ivory); border: 1px solid var(--rule); color: var(--text-body); }
.path-card--dark  { background: var(--navy-deep); color: var(--text-on-dark); }
.path-card--dark::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.path-card .eyebrow, .path-card .path-card__eyebrow {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--gold-dark);
}
.path-card--dark .path-card__eyebrow { color: var(--gold-light); }
.path-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.85rem;
  color: var(--text-dark);
}
.path-card--dark .path-card__title { color: #ffffff; }
.path-card p { font-size: 1rem; line-height: 1.55; margin: 0 0 0.85rem; }
.path-card--dark p { color: var(--text-on-dark); }
.path-card .btn { margin-top: auto; align-self: flex-start; max-width: 100%; }
@media (max-width: 879px) {
  /* Mobile: stretched, centered, and ALLOWED to wrap so long button text never overflows the card */
  .path-card .btn { align-self: stretch; text-align: center; white-space: normal; line-height: 1.25; padding-top: 0.85rem; padding-bottom: 0.85rem; }
}
/* Defensive: any .btn placed inside narrow flex/grid columns can wrap its label rather than overflow */
.path-card .btn, .container--narrow .btn { min-width: 0; }

.person {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  /* No min-height - let cards size to content. Grid row-stretch keeps within-row siblings equal;
     trimming the longest bios manually keeps row-to-row close. Target visual height = Elizabeth Aghayan's card. */
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.person__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Plain white instead of the tan/ivory gradient so any micro-gap below the image blends with the figcaption */
  background: #fff;
  flex-shrink: 0;
}
.person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

/* figcaption sizes to its content; grid row-stretch handles within-row uniformity */
.person figcaption { padding: 1.25rem 1.4rem 1.5rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.person__bio { margin-top: 0; }
.person__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: 0 0 0.2rem; color: var(--text-dark); }
.person__role { font-family: var(--font-accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.85rem; }
/* hyphens deliberately OFF: auto-hyphenation was splitting ordinary words in the narrow
   4-up cards ("ser-vice", "mu-sic"), which reads as sloppy. overflow-wrap still breaks the
   one genuinely unbreakable string (the parish email address) so nothing escapes the card. */
.person__bio { font-size: 0.95rem; color: var(--text-body); line-height: 1.55; margin: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: manual; }
/* Narrower columns at the 4-up Ministry grid get scaled-down typography so long content
   (especially the email link in Pam's card) fits without overflowing the card border. */
@media (min-width: 880px) {
  .people--4 .person__name { font-size: 1.2rem; }
  .people--4 .person__role { font-size: 0.66rem; letter-spacing: 0.12em; }
  .people--4 .person__bio  { font-size: 0.85rem; line-height: 1.5; }
  .people--4 .person figcaption { padding: 1rem 1.1rem 1.25rem; }
  /* Links inside a 4-up bio (long emails / URLs) drop further so they sit comfortably in the narrow card */
  .people--4 .person__bio a {
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
  }
}

/* Text-only person card (per Mark's NEWSITE_02.jpg example) - no photo area, no initials box,
   keeps the same card chrome with a thin gold top accent so it visually belongs in the grid. */
.person--text-only {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 0;
  transition: none;
  /* Release the photo-card min-height - text-only cards size to their content (no 400px empty void) */
  min-height: auto;
}
.person--text-only:hover { transform: none; box-shadow: var(--shadow-sm); }
.person--text-only figcaption { padding: 1.5rem 1.6rem 1.75rem; flex: 0 0 auto; }
.person--text-only .person__bio { flex: 0 0 auto; }

/* ────────────────────────── FAQ ACCORDIONS (First Visit) ────────────────────────── */
.faq {
  background: #fff;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq__summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem 1.1rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: background 0.15s;
}
.faq__summary:hover { background: var(--ivory-dim); }
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { content: ""; }
.faq__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--text-dark); line-height: 1.25; }
.faq__chevron {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--gold-dark);
  transition: transform 0.2s ease;
}
.faq[open] .faq__chevron { transform: rotate(45deg); }
.faq__body {
  padding: 0 1.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
  animation: faqReveal 0.18s ease-out;
}
.faq__body p:first-child { margin-top: 0; }
.faq__body p:last-child { margin-bottom: 0; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .faq__chevron, .faq__body { transition: none; animation: none; }
}

/* Backwards-compatible - old .hint class kept in case any other page uses it */
.hint { background: #fff; border-left: 4px solid var(--gold); border-radius: var(--radius-md); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.hint__title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; margin: 0 0 0.6rem; color: var(--text-dark); }
.hint p:last-child { margin-bottom: 0; }

.cta-band {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--navy-deep);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  text-align: center;
}
.cta-band a { color: var(--gold-light); font-weight: 600; }
.cta-band a:hover { color: #fff; }
/* The band is navy even when it sits inside a light section, so <strong> must be forced white -
   the base rule paints strong dark, and the .section--navy override does not reach here. */
.cta-band strong, .cta-band b { color: #ffffff; }
.cta-band p { color: var(--text-on-dark); }

/* ────────────────────────── ASK ────────────────────────── */
.ask {
  margin-top: 3rem;
  padding: 2rem 2rem;
  background: linear-gradient(135deg, var(--gold-pale), var(--ivory-dim));
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  text-align: center;
}
.ask__title { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text-dark); }

/* ────────────────────────── CALENDAR / MAP ────────────────────────── */
.calendar-wrap {
  background: #fff;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule);
  margin-top: 1rem;
}
.calendar-wrap iframe { display: block; border-radius: var(--radius-sm); }
.calendar-note { margin-top: 1rem; font-size: 0.92rem; color: var(--text-muted); text-align: center; }
.calendar-note code { font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace; background: var(--ivory-dim); padding: 0.05em 0.4em; border-radius: 3px; font-size: 0.88em; }

.map-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule);
  background: var(--ivory-dim);
}
.map-wrap iframe { display: block; width: 100%; }

/* Give-card note (used by JS fallback when ParishSoft URL not yet filled) */
.give-card__note {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.85rem;
  line-height: 1.5;
}

/* ────────────────────────── EMBED PLACEHOLDERS (calendar + give) ──────────────────────────
   Polished "embed code goes here" zone - keeps the page looking finished while waiting for
   Mark to paste the real Google Calendar iframe or ParishSoft form. Sits inside the existing
   calendar-wrap white card chrome, so the surrounding layout is preserved.
*/
.embed-placeholder {
  background: linear-gradient(155deg, #ffffff 0%, var(--ivory) 60%, var(--gold-pale) 100%);
  border-radius: var(--radius-sm);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border: 1px dashed var(--rule);
}
.embed-placeholder--give {
  background: linear-gradient(155deg, var(--ivory) 0%, var(--cream) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  min-height: 280px;
  padding: clamp(2rem, 4vw, 2.75rem);
  margin: 1.5rem 0 1rem;
}
.embed-placeholder__cross {
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.embed-placeholder__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-dark);
}
.embed-placeholder__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-body);
  max-width: 36rem;
  margin: 0 0 1.5rem;
}
.embed-placeholder__schedule {
  background: rgba(26, 58, 100, 0.04);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0 1.5rem;
  max-width: 32rem;
  text-align: left;
  width: 100%;
}
.embed-placeholder__schedule-heading {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 0.65rem;
}
.embed-placeholder__schedule ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.embed-placeholder__schedule li {
  padding: 0.4rem 0;
  font-size: 0.98rem;
  color: var(--text-dark);
  border-bottom: 1px dashed rgba(180, 145, 74, 0.18);
}
.embed-placeholder__schedule li:last-child { border-bottom: 0; }
.embed-placeholder__contact {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
  max-width: 38rem;
}
.embed-placeholder__contact a { color: var(--burgundy); }

/* ────────────────────────── CONTACT ────────────────────────── */
.contact-block { font-size: 1.05rem; margin-bottom: 1.5rem; line-height: 1.65; }
.contact-block__heading {
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 1.5rem 0 0.5rem;
}
.contact-block__heading:first-of-type { margin-top: 1.25rem; }

.social-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem;
  min-height: 48px;
  background: var(--navy-deep);
  color: var(--gold-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.18s;
}
.social-link:hover { background: var(--navy-mid); color: #fff; }

/* ────────────────────────── FOOTER ────────────────────────── */
.site-footer {
  background: var(--navy-deep);
  color: var(--text-on-dark-dim);
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
  border-top: 1px solid rgba(180, 145, 74, 0.28);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer-brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--gold-light); margin-bottom: 0.5rem; }
.footer-tagline { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); margin: 0; font-style: italic; }

.footer-heading { font-family: var(--font-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1rem; }

.footer-text { font-size: 0.94rem; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.footer-text a { color: var(--gold-light); }
.footer-text a:hover { color: #fff; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.45rem; }
.footer-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--gold-light); }

.footer-bottom {
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(216, 185, 107, 0.2);
  margin: 0;
}
.footer-bottom__cross { color: var(--gold-light); margin-left: 0.4rem; }

/* ────────────────────────── PRINT ────────────────────────── */
@media print {
  .site-header, .nav-toggle, .calendar-wrap, .map-wrap, .hero__bg, .hero::before, .btn, .social-row, .site-footer .footer-links { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  .section, .hero { padding: 1rem 0; min-height: 0; }
  .hero { background: #fff; }
  .hero__title, .hero__sub, .hero__eyebrow, .hero__location, .section-title, h1, h2, h3 { color: #000; text-shadow: none; }
  .section--navy { background: #fff; color: #000; }
  .section--navy p, .section--navy strong, .section--navy a { color: #000; }
}

/* Long priest-verbatim subheads (e.g. "The Path of Salvation from Non-Orthodox to
   Reception into the Church") need a smaller size on phones so they settle to two
   readable lines instead of three cramped ones. */
@media (max-width: 480px) {
  .subsection-title { font-size: 1.35rem; line-height: 1.22; }
}

/* Long email addresses / URLs inside the embed-placeholder schedule list were overflowing the
   card on 375px phones (measured: 30px past the edge). Allow them to break anywhere. */
.embed-placeholder__schedule ul,
.embed-placeholder__schedule li,
.embed-placeholder__contact { overflow-wrap: anywhere; word-break: break-word; }
.embed-placeholder__schedule li a { overflow-wrap: anywhere; }

/* ────────────────────────── LIVE EMBEDS (2026-09-04) ──────────────────────────
   Google Calendar (calendar page), Google Form (Sunday School registration) and the ParishSoft giving
   form replaced the "embed code goes here" placeholders. Each sits inside the existing white card chrome. */
.calendar-wrap--live { padding: 0.5rem; }
.calendar-embed { display: block; width: 100%; height: 650px; border: 0; border-radius: var(--radius-sm); background: #fff; }
.form-embed { display: block; width: 100%; height: 1748px; border: 0; background: #fff; }
/* Google's form re-flows to one column on phones and grows; a taller frame means fewer answers hide behind the inner scrollbar. */
@media (max-width: 600px) { .form-embed { height: 2050px; } .calendar-embed { height: 600px; } }
.giving-embed {
  margin: 1.5rem 0 1rem;
  min-height: 640px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
}
/* The ministryforms.net loader sets the iframe height itself (postMessage "resize"); the min-height only covers the moment before that arrives. */
.giving-embed iframe { display: block; width: 100%; min-height: 620px; border: 0; }

/* ────────────────────────── PROMO BAR: 2026 Sweet Shop & Freezer Sale ──────────────────────────
   Sits directly under the sticky header on every page except the store itself. Persistent (no dismiss)
   during the ordering period; js/main.js hides it automatically after the data-promo-until instant. */
.promo-bar {
  background: linear-gradient(90deg, var(--gold-pale), var(--ivory-dim));
  border-bottom: 1px solid var(--rule);
}
.promo-bar__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  text-align: center;
}
.promo-bar__text { margin: 0; font-size: 0.98rem; line-height: 1.4; color: var(--navy-ink); }
.promo-bar__text strong { color: var(--navy-ink); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-right: 0.35rem; }
.promo-bar__btn { padding: 0.6rem 1.15rem; min-height: 40px; font-size: 0.85rem; }
@media (max-width: 600px) {
  .promo-bar__inner { flex-direction: column; gap: 0.6rem; padding: 0.8rem var(--gutter) 0.9rem; }
  .promo-bar__text { font-size: 0.92rem; }
  .promo-bar__text strong { display: block; margin: 0 0 0.15rem; }
  .promo-bar__btn { width: 100%; max-width: 22rem; }
}

/* ────────────────────────── PARISH COUNCIL CARDS (2026-09-04) ──────────────────────────
   Square portraits, name + council position only, centered. Same card chrome as the ministry grid. */
.person--council figcaption { text-align: center; padding: 1.1rem 1rem 1.25rem; }
.person--council .person__role { margin-bottom: 0; }
@media (min-width: 880px) { .people--4 .person--council .person__name { font-size: 1.15rem; } }