/* ==========================================================================
   "Night" color system: midnight plum and aubergine grounds, champagne-gold
   accents, ivory type, and occasional ivory panels.
   Active on pages whose <html> has data-palette="night" (the revised
   preview and the inner pages). index.html and the concept pages keep
   their own colors. Loaded last, so these tokens win.

   Rhythm: midnight is the ground. Aubergine sections rise out of it and
   fade back at both edges, so tone changes never cut hard. Ivory appears
   as an inset panel with rounded corners, like light through a doorway,
   used once per page at most.
   ========================================================================== */

html[data-palette="night"] {
  --midnight: #240a30;       /* dominant ground */
  --aubergine: #42174f;      /* raised sections */
  --royal: #692d85;          /* only inside light glows */
  --gold: #e6a64f;           /* accents, focus, primary actions */
  --gold-deep: #8f5a14;      /* gold text on ivory (5.4:1) */
  --champagne: #f3d9b1;
  --ivory: #fff7eb;
  --ivory-soft: #d8c6dd;     /* secondary text: 11.2:1 on midnight, 8.9:1 on aubergine */
  --plum: #692d85;
  --lavender: #42174f;       /* retire the pale lavender everywhere */
  --ink: #2a0d37;            /* text inside ivory panels */
  --ink-soft: #5e4a66;
  --on-dark: #fff7eb;
  --on-dark-soft: #d8c6dd;
  --line: rgba(255, 247, 235, 0.14);
  --line-dark: rgba(255, 247, 235, 0.14);
  --hairline-gold: rgba(230, 166, 79, 0.28);
  --fade: clamp(5rem, 10vw, 9rem);  /* how far tones blend at section edges */
}

[data-palette="night"] body { background: var(--midnight); color: var(--ivory); }
[data-palette="night"] ::selection { background: var(--gold); color: var(--midnight); }
[data-palette="night"] :focus-visible { outline-color: var(--gold); }

/* ---------- Header, menu, bars ---------- */

[data-palette="night"] .site-header { color: var(--ivory); }
[data-palette="night"] .site-header::before,
[data-palette="night"] .site-header.on-dark::before { background: rgba(36, 10, 48, 0.82); }
[data-palette="night"] .brand__mark { color: var(--gold); }
[data-palette="night"] .nav .btn { --btn-bg: var(--gold); --btn-fg: var(--midnight); }
[data-palette="night"] .nav .btn::before { background: var(--ivory); }
/* On the Plan your visit page, its button carries the "you are here" mark: a fine gold ring */
[data-palette="night"] .nav .btn[aria-current="page"] { box-shadow: 0 0 0 3px var(--midnight), 0 0 0 4px var(--gold); }
.nav__list { white-space: nowrap; }
[data-palette="night"] .nav__list a::after { background: var(--gold); }
/* Over an ivory panel the header turns dark-on-light */
[data-palette="night"] .site-header.on-light { color: var(--ink); }
[data-palette="night"] .site-header.on-light::before { background: rgba(255, 247, 235, 0.88); }
[data-palette="night"] .site-header.on-light .brand__mark { color: var(--gold-deep); }
[data-palette="night"] .mobile-menu { background: var(--midnight); }
[data-palette="night"] .visit-bar { background: var(--aubergine); border: 1px solid var(--hairline-gold); }
[data-palette="night"] .visit-bar .btn { --btn-bg: var(--gold); --btn-fg: var(--midnight); }
[data-palette="night"] .announce { background: var(--aubergine); border-color: var(--hairline-gold); }
[data-palette="night"] .announce h2 { color: var(--gold); }
[data-palette="night"] .announce p { color: var(--ivory-soft); }

/* ---------- Type and controls on dark grounds ---------- */

[data-palette="night"] .lede,
[data-palette="night"] .prose p,
[data-palette="night"] .facts dt,
[data-palette="night"] .give-item p,
[data-palette="night"] .privacy { color: var(--ivory-soft); }
[data-palette="night"] .kicker { color: var(--gold); }
[data-palette="night"] .page-hero h1,
[data-palette="night"] .split__aside h2,
[data-palette="night"] .pastor-feature__text h2,
[data-palette="night"] .facts dd,
[data-palette="night"] .give-item h2,
[data-palette="night"] .confirm h2,
[data-palette="night"] .privacy h2,
[data-palette="night"] .contact-email { color: var(--ivory); }
[data-palette="night"] .contact-email { border-color: var(--hairline-gold); }
[data-palette="night"] .contact-email:hover { color: var(--gold); border-color: var(--gold); }
[data-palette="night"] .text-link:hover { color: var(--gold); }
[data-palette="night"] .give-item__status { color: var(--gold); }
[data-palette="night"] .facts,
[data-palette="night"] .facts > div,
[data-palette="night"] .give-list,
[data-palette="night"] .give-item { border-color: var(--line); }

/* Primary actions are gold; secondary actions are ivory outlines */
[data-palette="night"] .btn { --btn-bg: var(--gold); --btn-fg: var(--midnight); font-weight: 600; }
[data-palette="night"] .btn::before { background: var(--ivory); }
[data-palette="night"] .btn--light { --btn-bg: var(--ivory); --btn-fg: var(--midnight); }
[data-palette="night"] .btn--light::before { background: var(--gold); }
[data-palette="night"] .btn--ghost,
[data-palette="night"] .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  border-color: rgba(255, 247, 235, 0.45);
  font-weight: 500;
}
[data-palette="night"] .btn--ghost::before,
[data-palette="night"] .btn--outline-light::before { background: var(--ivory); }
[data-palette="night"] .btn--ghost:hover,
[data-palette="night"] .btn--ghost:focus-visible,
[data-palette="night"] .btn--outline-light:hover,
[data-palette="night"] .btn--outline-light:focus-visible { color: var(--midnight); border-color: var(--ivory); }
[data-palette="night"] .btn[aria-disabled="true"] {
  --btn-bg: transparent;
  --btn-fg: var(--ivory-soft);
  border: 1px dashed rgba(216, 198, 221, 0.55);
  font-weight: 500;
}

[data-palette="night"] .note {
  border-color: rgba(230, 166, 79, 0.5);
  background: rgba(230, 166, 79, 0.06);
  color: var(--ivory-soft);
}
[data-palette="night"] .note strong { color: var(--ivory); }

/* ---------- Grounds: midnight, aubergine, ivory ---------- */

/* Page openings: midnight with a soft wash of light from the upper right */
[data-palette="night"] .page-hero {
  background:
    radial-gradient(55% 70% at 88% 0%, rgba(105, 45, 133, 0.45), rgba(105, 45, 133, 0) 70%),
    radial-gradient(35% 45% at 80% 10%, rgba(230, 166, 79, 0.1), rgba(230, 166, 79, 0) 70%),
    var(--midnight);
}
[data-palette="night"] .page-hero h1 { font-size: clamp(3.4rem, 1.6rem + 7vw, 9.5rem); line-height: 0.92; letter-spacing: -0.035em; }

/* Aubergine rises out of midnight and settles back into it */
[data-palette="night"] .section--dark,
[data-palette="night"] [data-tone="aubergine"],
[data-palette="night"] .cta-band,
[data-palette="night"] .pv-journey,
[data-palette="night"] .pv-pastors {
  background: linear-gradient(180deg, var(--midnight) 0, var(--aubergine) var(--fade), var(--aubergine) calc(100% - var(--fade)), var(--midnight) 100%);
  color: var(--ivory);
}
[data-palette="night"] .cta-band { padding-block: clamp(6rem, 12vw, 10rem); }
[data-palette="night"] .cta-band h2 { font-size: var(--step-5); max-width: 13ch; }

/* Midnight sections */
[data-palette="night"] .pv-gather,
[data-palette="night"] .pv-sunday,
[data-palette="night"] .site-footer { background: var(--midnight); }
[data-palette="night"] .pv-sunday { border-top: 0; }
[data-palette="night"] .site-footer { border-top: 1px solid var(--hairline-gold); }
[data-palette="night"] .wordmark { color: #3a1446; }

/* Ivory: an inset panel of light with rounded corners, never an edge-to-edge white band */
[data-palette="night"] .section--tint,
[data-palette="night"] [data-tone="ivory"] {
  position: relative;
  margin: clamp(1rem, 3vw, 2.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
  border-radius: clamp(1.75rem, 4vw, 3.5rem);
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(230, 166, 79, 0.16), rgba(230, 166, 79, 0) 70%),
    var(--ivory);
  color: var(--ink);
  --line: rgba(42, 13, 55, 0.14);
}
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) :focus-visible { outline-color: var(--aubergine); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) :is(h2, h3, .facts dd, .give-item h2, .confirm h2, .privacy h2, .pastor-feature__text h2, .split__aside h2) { color: var(--aubergine); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) :is(.lede, .prose p, .privacy, p:not(.field__error):not(.form-status)) { color: var(--ink-soft); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .kicker { color: var(--gold-deep); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .text-link:hover { color: var(--aubergine); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .btn { --btn-bg: var(--aubergine); --btn-fg: var(--ivory); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .btn::before { background: var(--midnight); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .note { color: var(--ink-soft); background: rgba(143, 90, 20, 0.06); border-color: rgba(143, 90, 20, 0.45); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .note strong { color: var(--ink); }
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .field label span,
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .field__hint { color: var(--ink-soft); }
[data-palette="night"] .form-status.is-preview { background: #f3e5cf; color: var(--ink); }
[data-palette="night"] .field input:focus,
[data-palette="night"] .field textarea:focus { border-color: var(--aubergine); box-shadow: 0 0 0 4px rgba(66, 23, 79, 0.16); }

/* ---------- Light that arrives as you scroll ----------
   Sections marked data-light get a soft glow that fades in when they come
   into view (night.js adds .is-lit). Decorative only; content never waits. */

[data-light] { position: relative; isolation: isolate; }
[data-light]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(var(--lw, 45%) var(--lh, 60%) at var(--lx, 80%) var(--ly, 30%), var(--lc, rgba(230, 166, 79, 0.14)), rgba(230, 166, 79, 0) 70%);
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.6s ease, transform 1.8s var(--ease-out);
}
[data-light].is-lit::after,
.reduce-motion [data-light]::after { opacity: 1; transform: none; }
[data-light="royal"] { --lc: rgba(105, 45, 133, 0.55); }
[data-light="left"] { --lx: 10%; --ly: 70%; }
[data-light="low"] { --lx: 50%; --ly: 100%; --lw: 60%; --lh: 55%; --lc: rgba(230, 166, 79, 0.18); }

@media (prefers-reduced-motion: reduce) {
  [data-light]::after { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Revised homepage preview (pv-*) on the night palette
   ========================================================================== */

[data-palette="night"] .pv-journey__text > p { color: var(--ivory-soft); }
[data-palette="night"] .pv-journey__text .pv-h2,
[data-palette="night"] .pv-h2 { color: var(--ivory); }
[data-palette="night"] .pv-welcome__verse { color: var(--gold); border-color: var(--hairline-gold); }
[data-palette="night"] .pv-welcome__verse cite { color: var(--ivory-soft); }
[data-palette="night"] .pv-journey .placeholder--quiet { background: linear-gradient(160deg, #5a2270, var(--midnight)); }

/* Oversized heading gives the midnight gather section its own scale */
[data-palette="night"] .pv-gather .pv-h2 { font-size: clamp(3.2rem, 1.4rem + 6.4vw, 8.6rem); line-height: 0.92; max-width: 11ch; }
[data-palette="night"] .pv-item h3 { color: var(--ivory); }
[data-palette="night"] .pv-item p { color: var(--ivory-soft); }
[data-palette="night"] .pv-gather .placeholder--quiet { background: radial-gradient(80% 70% at 75% 15%, rgba(230, 166, 79, 0.2), rgba(230, 166, 79, 0) 60%), linear-gradient(160deg, #4f1c61, #2c0d3a); }
[data-palette="night"] .pv-item--worship .placeholder--quiet { background: radial-gradient(70% 50% at 50% 20%, rgba(246, 214, 160, 0.3), rgba(246, 214, 160, 0) 70%), linear-gradient(180deg, #5a2270, var(--midnight)); }
[data-palette="night"] .pv-item__img { box-shadow: 0 0 0 1px var(--hairline-gold); }

[data-palette="night"] .pv-pastors__text p { color: var(--ivory-soft); }
[data-palette="night"] .pv-pastors__photo .placeholder--quiet { background: linear-gradient(170deg, #5a2270, var(--midnight)); }

[data-palette="night"] .pv-sunday h2 { font-size: clamp(3rem, 1.4rem + 5vw, 7rem); }
[data-palette="night"] .pv-sunday__info p { color: var(--ivory-soft); }

/* The invite panel is the page's one moment of ivory */
[data-palette="night"] .pv-invite .pv-invite__item h2 { color: var(--aubergine); }
[data-palette="night"] .pv-invite .pv-invite__item p { color: var(--ink-soft); }
[data-palette="night"] .pv-invite__item + .pv-invite__item { border-color: var(--gold-deep); }

@media (max-width: 960px) {
  [data-palette="night"] .section--tint,
  [data-palette="night"] [data-tone="ivory"] { margin-inline: 0.5rem; }
}

/* Picture placeholders: no pale lavender plates */
[data-palette="night"] .placeholder--light {
  background:
    radial-gradient(110% 80% at 70% 0%, rgba(230, 166, 79, 0.22), transparent 60%),
    linear-gradient(180deg, #5a2270, var(--aubergine));
  color: var(--ivory);
}
[data-palette="night"] :is(.section--tint, [data-tone="ivory"]) .placeholder--light {
  background:
    radial-gradient(110% 80% at 70% 0%, rgba(230, 166, 79, 0.3), transparent 60%),
    linear-gradient(180deg, #f1e2cb, #e2c9a8);
  color: var(--ink);
}

/* ---------- Immersive hero in the preview (Concept A layout) ---------- */

.pv-immersive::after { background: linear-gradient(0deg, var(--midnight), rgba(36, 10, 48, 0)); }
.pv-immersive .pv-hero__church { margin-bottom: 1.2rem; }
.pv-immersive .video-toggle { top: calc(var(--header-h) + 1rem); bottom: auto; right: 1.25rem; }
.pv-immersive .chero__sunday span:first-child { color: var(--gold); }
.reduce-motion .chero .hl__text,
.reduce-motion .chero__halo,
.reduce-motion .chero .media--hero { animation: none !important; }

/* The welcome after the hero rises in aubergine */
[data-palette="night"] .pv-welcome {
  background: linear-gradient(180deg, var(--midnight) 0, var(--aubergine) var(--fade), var(--aubergine) calc(100% - var(--fade)), var(--midnight) 100%);
}
[data-palette="night"] .pv-welcome__text p { color: var(--ivory-soft); }
/* Words end before the middle of the screen, clear of the figure and the light */
.pv-immersive .chero__title { font-size: clamp(2.6rem, 0.8rem + 4.5vw, 6.8rem); }
.pv-immersive .chero__lede { max-width: 40rem; }
.is-local .pv-immersive [data-awaiting].is-awaiting::after { top: 24%; }
@media (max-width: 960px) {
  .pv-immersive .chero__title { font-size: clamp(2.3rem, 10.6vw, 4rem); }
  .is-local .pv-immersive [data-awaiting].is-awaiting::after { top: 45%; }
}

/* ==========================================================================
   Meet our pastors (preview.html)
   Transparent close-ups of both pastors, standing directly on the purple (no
   frame, no box). With motion, Pastor Susan's half slides in from the left
   and Pastor Calvin Sr.'s from the right until they line up exactly; then
   the couple close-up (pixel-identical to the two halves together) takes
   over, so the finished picture has no seam. With reduced motion only the
   couple close-up shows.
   ========================================================================== */

.pv-meet {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(34% 46% at 30% 48%, rgba(105, 45, 133, 0.55), rgba(105, 45, 133, 0) 72%),
    radial-gradient(22% 26% at 30% 30%, rgba(230, 166, 79, 0.1), rgba(230, 166, 79, 0) 70%),
    var(--midnight);
  color: var(--ivory);
}
.pv-meet__stage { padding-block: clamp(5rem, 9vw, 8rem); }
@media (min-width: 961px) {
  .pv-meet__stage { min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 1rem) 2rem; }
  .pv-meet__stage > .wrap { width: 100%; }
}
.pv-meet__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem var(--gutter);
  align-items: center;
}
.pv-meet__visual {
  grid-column: 1 / span 6;
  justify-self: center;
  position: relative;
  /* Close-up: as large as one screen allows (the picture's sides are transparent, so it can overhang its column) */
  width: min(62vw, calc((100vh - var(--header-h) - 6.5rem) * 1.089), 70rem);
}
/* The photograph's bottom edge melts into the purple instead of ending in a line */
.pv-meet__figure {
  position: relative;
  aspect-ratio: 1122 / 1030;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}
.pv-meet__figure img { display: block; width: 100%; height: 100%; }
/* Fuller close-up: zoom in toward their faces. The picture's sides are transparent
   and its bottom fades out, so the zoom only trims empty space and the faded edge. */
.pv-meet__figure img { scale: 1.16; transform-origin: 50% 28%; }
.pv-meet__whole { position: relative; }
.pv-meet__figure .pv-meet__half { display: none; position: absolute; inset: 0; }
.pv-meet--motion .pv-meet__figure .pv-meet__half { display: block; }
/* With motion, the couple close-up waits until the two halves have lined up */
.pv-meet--motion .pv-meet__whole { opacity: 0; }

.pv-meet__name {
  position: absolute;
  bottom: -2.6rem;
  margin: 0;
  font: italic 400 var(--step-1)/1.2 var(--serif);
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.pv-meet__name--susan { left: 20%; }
.pv-meet__name--calvin { right: 14%; text-align: right; }

.pv-meet__text { grid-column: 8 / span 5; }
.pv-meet__text h2 { margin: 0 0 1.5rem; font: 500 clamp(2.2rem, 0.8rem + 2.9vw, 4rem)/1.02 var(--serif); letter-spacing: -0.03em; }
.pv-meet__text h2 span { display: block; font-style: italic; }
.pv-meet__text p { max-width: 32rem; font-size: var(--step-1); line-height: 1.5; color: var(--ivory-soft); }

@media (max-width: 960px) {
  .pv-meet__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pv-meet__visual, .pv-meet__text { grid-column: 1 / -1; }
  /* Close-up on phones: the picture runs wider than the screen (its sides are transparent), so their faces stay large */
  .pv-meet__visual { width: 136vw; max-width: none; justify-self: start; margin-left: calc(50% - 68vw); }
  .pv-meet__name { font-size: 0.9rem; white-space: nowrap; line-height: 1.2; }
  .pv-meet__name--susan { left: 25%; }
  .pv-meet__name--calvin { right: 20%; }
}

/* Hero footage on phones: the still is the full wide frame, so keep the face and the reaching hand in view */
@media (max-width: 960px) {
  .pv-immersive .media--hero img { object-position: 43% 50%; }
}

/* Immersive page: the hero's bottom edge blends into midnight, matching the section below */
[data-palette="night"] .chero--a::after { background: linear-gradient(0deg, var(--midnight), rgba(36, 10, 48, 0)); }

/* Official homepage hero (desktop): the headline ends before the middle of the
   screen and the footage sits a little further right, so the faces never sit
   behind the words */
@media (min-width: 961px) {
  [data-palette="night"] .chero--a:not(.pv-immersive) .chero__title { font-size: clamp(3rem, 0.8rem + 4.5vw, 6.8rem); }
  [data-palette="night"] .chero--a:not(.pv-immersive) .chero__media {
    inset: 0 0 0 30%;
    /* feather the footage's left edge so no line shows when the purple lifts */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  [data-palette="night"] .chero--a:not(.pv-immersive) .chero__archwrap { left: 65%; }
}

/* Photo framing in "What we gather around": keep the praying hands and the embracing hand in view */
.pv-item--prayer .media__parallax > img { object-position: 92% 45%; }
.pv-item--fellowship .media__parallax > img { object-position: 75% 50%; }

/* ==========================================================================
   What we gather around: editorial gallery (index.html)
   A tall arched Worship photograph, a wide Word photograph and two smaller
   squares set lower and offset, so the eye moves down the page like a
   magazine spread. Motion (sections.js) reveals each picture differently;
   without motion the composition simply shows.
   ========================================================================== */

.pv-gather--editorial {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 4rem + 6vw, 10rem) clamp(5rem, 3rem + 6vw, 9rem);
  background:
    radial-gradient(40% 50% at 15% 60%, rgba(105, 45, 133, 0.32), rgba(105, 45, 133, 0) 70%),
    radial-gradient(30% 35% at 85% 20%, rgba(230, 166, 79, 0.06), rgba(230, 166, 79, 0) 70%),
    var(--midnight);
}
.pv-gather--editorial .pv-h2 {
  font-size: clamp(3.4rem, 1.2rem + 7vw, 9.8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  max-width: 10ch;
  margin-bottom: 0;
}
/* Words rise out of their own masks */
.pv-gather--editorial .gw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.06em 0.12em 0; margin-bottom: -0.12em; }
.pv-gather--editorial .gw > span { display: inline-block; }
.pv-gather__rule {
  display: block;
  width: min(24rem, 45%);
  height: 1px;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 clamp(3.5rem, 6vw, 6rem);
  background: linear-gradient(90deg, var(--gold), rgba(230, 166, 79, 0));
  transform-origin: left;
}

.pv-gather--editorial .pv-gather__grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gutter);
  align-items: start;
}
.pv-gather--editorial .pv-item--worship { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.pv-gather--editorial .pv-item--word { grid-column: 7 / span 6; grid-row: 1; margin-top: clamp(2rem, 6vw, 6rem); }
.pv-gather--editorial .pv-item--prayer { grid-column: 7 / span 3; grid-row: 2; margin-top: clamp(3rem, 6vw, 5.5rem); }
.pv-gather--editorial .pv-item--fellowship { grid-column: 10 / span 3; grid-row: 2; margin-top: clamp(7rem, 12vw, 12rem); }

.pv-gather--editorial .pv-item__img { box-shadow: 0 2.5rem 5rem -2rem rgba(10, 2, 14, 0.75), 0 0 0 1px var(--hairline-gold); }
.pv-gather--editorial .pv-item--worship .pv-item__img { aspect-ratio: 4 / 5.3; }
/* Pictures move inside their frames, so give them room to travel */
.pv-gather--editorial .pv-item__img .media__parallax { inset: -10% -4%; }

/* Captions: a gold line draws in above each title */
.pv-gather--editorial .pv-item h3 {
  position: relative;
  margin: 1.6rem 0 0.6rem;
  padding-top: 1rem;
  font-size: var(--step-2);
}
.pv-gather--editorial .pv-item h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
.pv-gather--editorial .pv-item--worship h3 { font-size: var(--step-3); }

@media (max-width: 960px) {
  .pv-gather--editorial .pv-gather__grid { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .pv-gather--editorial .pv-item--worship,
  .pv-gather--editorial .pv-item--word { grid-column: 1 / -1; grid-row: auto; margin-top: 0; margin-bottom: 3rem; }
  .pv-gather--editorial .pv-item--word { width: 92%; justify-self: end; }
  .pv-gather--editorial .pv-item--prayer { grid-column: 1; grid-row: auto; margin-top: 0; }
  .pv-gather--editorial .pv-item--fellowship { grid-column: 2; grid-row: auto; margin-top: 3.5rem; }
  .pv-gather--editorial .pv-item--worship .pv-item__img { aspect-ratio: 4 / 4.6; }
  .pv-gather--editorial .pv-item h3 { font-size: var(--step-1); }
  .pv-gather--editorial .pv-item--worship h3 { font-size: var(--step-2); }
}

/* ==========================================================================
   The glowing statement (after the globe, index.html)
   Its words light up as they're read (main.js), and on desktop a soft gold
   light follows the cursor behind them. It rises out of midnight into
   aubergine and settles back, so it joins the globe and the gallery smoothly.
   ========================================================================== */

[data-palette="night"] .pv-statement {
  padding-block: clamp(6rem, 4rem + 8vw, 11rem);
  background: linear-gradient(180deg, var(--midnight) 0, var(--aubergine) var(--fade), var(--aubergine) calc(100% - var(--fade)), var(--midnight) 100%);
}
.pv-statement .wrap { display: block; }
.pv-statement .statement {
  max-width: 25ch;
  margin-inline: auto;
  font-size: clamp(1.9rem, 0.9rem + 2.6vw, 3.8rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
/* Unread words wait at a soft lilac rather than near-invisible, so the sentence is always legible */
.js-motion .pv-statement .statement .w { opacity: 0.32; }
@media (max-width: 960px) {
  .pv-statement .statement { font-size: clamp(1.6rem, 6.4vw, 2.4rem); max-width: none; text-align: left; }
}

/* The statement's cursor light: warmer and more present, with a soft outer bloom.
   Its delayed follow comes from main.js (data-glow-lag). */
.pv-statement.glow::before {
  background:
    radial-gradient(20rem circle at var(--gx, 50%) var(--gy, 45%), rgba(246, 214, 160, 0.34), rgba(246, 214, 160, 0) 70%),
    radial-gradient(46rem circle at var(--gx, 50%) var(--gy, 45%), rgba(230, 166, 79, 0.2), rgba(230, 166, 79, 0) 65%);
  transition: none;
}