/* ===== Fonts (self-hosted, 2026-09-27) =====
   Text: Google Fonts files (SIL Open Font License), Latin subset. Icons: Phosphor Icons 2.1.1 (MIT), trimmed to
   just the icons this site uses (fonts/phosphor-subset.woff, fonts/phosphor-fill-subset.woff). To use a NEW icon,
   it must be added to the subset first (tools/icon-subset/build_icons.py), or it will show as blank. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/outfit-var.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/marcellus-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-baskerville-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Phosphor"; font-style: normal; font-weight: normal; font-display: block; src: url("../fonts/phosphor-subset.woff?v=3") format("woff"); }
@font-face { font-family: "Phosphor-Fill"; font-style: normal; font-weight: normal; font-display: block; src: url("../fonts/phosphor-fill-subset.woff?v=4") format("woff"); }
.ph {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
.ph-fill {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Fill" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
.ph.ph-arrow-left:before { content: "\e058"; }
.ph.ph-arrow-right:before { content: "\e06c"; }
.ph.ph-arrow-up-right:before { content: "\e092"; }
.ph.ph-arrows-left-right:before { content: "\e0a0"; }
.ph.ph-book-bookmark:before { content: "\e0e4"; }
.ph.ph-book-open-text:before { content: "\e8f2"; }
.ph.ph-bowl-food:before { content: "\eaa4"; }
.ph.ph-caret-up:before { content: "\e13c"; }
.ph.ph-check-circle:before { content: "\e184"; }
.ph.ph-clock:before { content: "\e19a"; }
.ph.ph-compass:before { content: "\e1c8"; }
.ph.ph-copy:before { content: "\e1ca"; }
.ph.ph-cross:before { content: "\e8a0"; }
.ph.ph-envelope-simple:before { content: "\e218"; }
.ph.ph-facebook-logo:before { content: "\e226"; }
.ph.ph-gift:before { content: "\e276"; }
.ph.ph-globe-hemisphere-east:before { content: "\e28a"; }
.ph.ph-globe-hemisphere-west:before { content: "\e28c"; }
.ph.ph-graduation-cap:before { content: "\e62c"; }
.ph.ph-hand-heart:before { content: "\e810"; }
.ph.ph-hands-praying:before { content: "\ecc8"; }
.ph.ph-heart:before { content: "\e2a8"; }
.ph.ph-heartbeat:before { content: "\e2ac"; }
.ph.ph-images:before { content: "\e836"; }
.ph.ph-instagram-logo:before { content: "\e2d0"; }
.ph.ph-map-pin:before { content: "\e316"; }
.ph.ph-megaphone:before { content: "\e324"; }
.ph.ph-moon:before { content: "\e330"; }
.ph.ph-moon-stars:before { content: "\e58e"; }
.ph.ph-music-notes:before { content: "\e340"; }
.ph.ph-paper-plane-tilt:before { content: "\e398"; }
.ph.ph-path:before { content: "\e39c"; }

.ph.ph-puzzle-piece:before { content: "\e596"; }

.ph.ph-sun:before { content: "\e472"; }
.ph.ph-sun-horizon:before { content: "\e5b6"; }
.ph.ph-users-three:before { content: "\e68e"; }
.ph.ph-video-camera:before { content: "\e4da"; }
.ph.ph-x:before { content: "\e4f6"; }
.ph.ph-youtube-logo:before { content: "\e4fc"; }
.ph-fill.ph-map-pin:before { content: "\e316"; }

.ph-fill.ph-quotes:before { content: "\e660"; }
.ph-fill.ph-video-camera:before { content: "\e4da"; }

/* Tokens. Shape rule: images use the arch (door) frame or 18px, buttons are pills, inputs 12px. */
:root {
  --bg: #f5f9fc;
  --surface: #fdfeff;
  --surface-2: #e4eff7;
  --ink: #0f1d2a;
  --muted: #475a6b;
  --line: #d2e1ec;
  --blue: #0369a1;
  --blue-deep: #0b3b5c;
  --on-blue: #f1f7fc;
  --on-blue-muted: #d4e7f5;
  --gold-on-blue: #f8cf7a;
  --brand-ink: #0f2a73;
  --accent: #c9822b;
  --accent-ink: #0f1d2a;
  --accent-text: #9a5f16;
  --shadow: 0 24px 60px -28px rgba(3, 64, 105, .35);
  --radius: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --menu-ease: cubic-bezier(.33, 0, .19, 1);
  color-scheme: light;}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09141e; --surface: #0e1d2a; --surface-2: #14293a; --ink: #e6eef5; --muted: #a0b3c4;
    --line: #1f3a50; --blue: #0a4d78; --blue-deep: #06243a; --on-blue: #f1f7fc; --on-blue-muted: #c3dbee;
    --brand-ink: #e6eef5; --accent: #e0a052; --accent-ink: #0f1d2a; --accent-text: #e7ad65; --shadow: 0 24px 60px -28px rgba(0,0,0,.6);
    color-scheme: dark; }
}
:root[data-theme="dark"] {
  --bg: #09141e; --surface: #0e1d2a; --surface-2: #14293a; --ink: #e6eef5; --muted: #a0b3c4;
  --line: #1f3a50; --blue: #0a4d78; --blue-deep: #06243a; --on-blue: #f1f7fc; --on-blue-muted: #c3dbee;
  --brand-ink: #e6eef5; --accent: #e0a052; --accent-ink: #0f1d2a; --accent-text: #e7ad65; --shadow: 0 24px 60px -28px rgba(0,0,0,.6);
  color-scheme: dark;}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif; font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, blockquote { text-wrap: balance; }
h1, h2, h3 { font-family: "Marcellus", Georgia, serif; font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: 0; font-synthesis: none; }
/* Marcellus has one weight and no italic: keep b/em from being faked */
.next-date b, .event-date b, .story blockquote, .story blockquote em, .quote p { font-weight: 400; font-style: normal; font-synthesis: none; }
p { margin: 0; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 14px 26px; border-radius: 999px; font: 500 16px/1 "Outfit", sans-serif;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s, box-shadow .25s;}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { box-shadow: 0 10px 24px -10px var(--accent); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

/* Skip link: hidden until focused with the keyboard */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
main:focus { outline: none; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; overflow-x: clip; transition: box-shadow .5s var(--menu-ease); }
/* Header Bible: a closed blue book sits in the top-right corner (the closed book is the menu button).
   On scroll its cover swings open on the spine and the book itself lands as the open Bible -- the
   right-hand page is under the cover, the left-hand page is printed on the inside of the cover, so
   there is no hand-off to a second image. The menu button sits on the right-hand page. */
.nav {
  --menu-edge: 28px;}
.nav-book {
  position: absolute; top: var(--book-top); right: var(--book-right); z-index: -1; pointer-events: none;
  width: var(--book-w); height: var(--book-h); perspective: 600px;
  transition: opacity .45s var(--menu-ease);}
/* The two halves of the open Bible (recoloured from the supplied icon). Each face is the cover
   area; the page edges and ribbon spill past it vertically, clipped at the sides. The right half's
   spill stays tucked away while the book is closed and slides out as it opens. */
.book-page svg, .book-cover .inside svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.book-page { position: absolute; inset: 0; clip-path: inset(0 0 0 0 round 2px 12px 12px 2px); transition: clip-path .35s var(--menu-ease); }
.nav.scrolled .book-page { transition-delay: .45s; }
.book-cover {
  position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d;
  transition: transform .8s var(--menu-ease) .45s;}
.book-cover span { position: absolute; inset: 0; backface-visibility: hidden; }
.book-cover .inside { transform: rotateY(180deg); clip-path: inset(-9px 0 0 0); }
.nav.scrolled .book-cover { transform: rotateY(-180deg); transition-delay: 0s; }
/* Flat book cover: darker spine with two highlight marks, a pale-gold title band with two
   text lines, a curved gloss mark in the top-right corner, and a ribbon hanging below */
.book-cover .front {
  border-radius: 2px 12px 12px 2px;
  background:
    linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 3px 57% / 2px 4px no-repeat,
    linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 3px 76% / 2px 11px no-repeat,
    linear-gradient(#075f94, #075f94) 0 0 / 9px 100% no-repeat,
    linear-gradient(rgba(154, 95, 22, .5), rgba(154, 95, 22, .5)) 17px 60% / 22px 2px no-repeat,
    linear-gradient(rgba(154, 95, 22, .5), rgba(154, 95, 22, .5)) 17px 67% / 14px 2px no-repeat,
    linear-gradient(rgba(154, 95, 22, .5), rgba(154, 95, 22, .5)) 34px 67% / 4px 2px no-repeat,
    linear-gradient(#f8dd97, #f8dd97) 9px 64% / calc(100% - 9px) 14px no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, .2) 1.2px, transparent 1.6px) calc(100% - 4px) 20px / 4px 5px no-repeat,
    #0b7bbd;}
.book-cover .front::before { /* gloss curve */
  content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px;
  border-top: 2px solid rgba(255, 255, 255, .2); border-right: 2px solid rgba(255, 255, 255, .2);
  border-top-right-radius: 8px;}
.book-cover .front::after { /* ribbon marker */
  content: ""; position: absolute; left: 20px; bottom: -8px; width: 6px; height: 11px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);}
.nav-fill {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--blue);
  clip-path: inset(var(--book-top) var(--book-right) calc(72px - var(--book-top) - var(--book-h)) calc(100% - var(--book-right) - var(--book-w)) round 2px 12px 12px 2px);}
.nav.scrolled .nav-fill { clip-path: inset(0 0 0 0 round 0 0 0 0); }
/* Menu button pinned near the screen edge (on the book); header content keeps clear of it */
.nav .menu-btn { position: absolute; right: var(--menu-edge); z-index: 1; background: var(--blue); }

/* Menu button on the open book: gold, turning brand blue on hover (both read well on the white page) */
.nav #menuBtn { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.nav #menuBtn:hover, .nav #menuBtn:focus-visible { background: var(--blue); color: var(--on-blue); border-color: transparent; }
.menu-open .nav #menuBtn:hover, .menu-open .nav #menuBtn:focus-visible { border-color: rgba(255, 255, 255, .45); }
/* While the book is closed the menu icon stays hidden; the closed book itself is the button
   (hovering it lifts the cover a little). The icon appears on the page once the book opens. */

.nav:not(.scrolled) .menu-btn { opacity: 0; }
.nav .menu-btn:focus-visible, .menu-open .nav .menu-btn { opacity: 1; }
.nav:not(.scrolled):has(.menu-btn:hover) .book-cover { transform: rotateY(-24deg); transition: transform .5s var(--menu-ease); }
.nav-actions { margin-right: max(0px, calc(var(--menu-edge) + var(--menu-reserve, 112px) - (100vw - min(1240px, 100vw - 32px)) / 2)); }
.nav.scrolled { box-shadow: 0 12px 30px -22px rgba(3, 40, 70, .7); }
.brand-name, .brand-name small, .nav-links a, .icon-btn { transition: color .4s var(--menu-ease), background-color .4s var(--menu-ease), border-color .4s var(--menu-ease); }
.nav.scrolled .brand-name { color: var(--on-blue); }
.nav.scrolled .brand-name small { color: var(--on-blue-muted); }
.nav.scrolled .nav-links a { color: var(--on-blue-muted); }
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a:focus-visible { color: var(--on-blue); }
/* Text turns white only once the blue sweep has reached it (instantly on the way back) */
.nav.scrolled .brand-name, .nav.scrolled .brand-name small, .nav.scrolled .nav-links a, .nav.scrolled #themeBtn { transition-delay: .7s; }
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a:focus-visible, .nav.scrolled #themeBtn:hover,
.menu-open .nav.scrolled .brand-name, .menu-open .nav.scrolled .brand-name small { transition-delay: 0s; }
.nav.scrolled .icon-btn, .nav:not(.scrolled) .menu-btn { color: var(--on-blue); border-color: rgba(255, 255, 255, .32); }
.nav.scrolled .icon-btn:hover, .nav:not(.scrolled) .menu-btn:hover { background: rgba(255, 255, 255, .1); }
.nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
/* Brand: the logo emblem plus the wordmark in the logo's lettering (Libre Baskerville + Montserrat) */
.brand { gap: 10px; }
.brand-mark { height: 46px; width: auto; flex: none; display: block; }
.brand-name { font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; color: var(--brand-ink); }
.brand-name small { display: block; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--brand-ink); opacity: .85; margin-top: 5px; }
.foot-logo { display: inline-block; }
.foot-logo img { height: auto; display: block; }
.nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav-links { transition: opacity .3s var(--menu-ease); }
.nav-links a { position: relative; text-decoration: none; font-size: 15.5px; color: var(--muted); transition: color .5s var(--menu-ease); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
/* Underline grows out from the center on hover */
.nav-links a::after, .drawer-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 99px;
  background: currentColor; transform: scaleX(0); transition: transform .5s var(--menu-ease);}
.nav-links a:hover::after, .nav-links a:focus-visible::after,
.drawer-links a:hover::after, .drawer-links a:focus-visible::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 19px; }
.icon-btn:hover { background: var(--surface-2); }
/* Menu button: three bars. Opening: middle bar shrinks, then top/bottom rotate into an X.
   Closing runs the same steps in reverse. */

.menu-btn { position: relative; transition: color .5s var(--menu-ease), border-color .5s var(--menu-ease), background-color .25s; }
.burger { position: relative; display: block; width: 18px; height: 12px; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--menu-ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 5px; transition-delay: .3s; }
.burger span:nth-child(3) { top: 10px; }
.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(135deg); transition-delay: .3s; }
.menu-open .burger span:nth-child(2) { transform: scaleX(0); transition-delay: 0s; }
.menu-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-135deg); transition-delay: .3s; }

/* Drawer: slides in from the right over a dimmed page */
.scrim {
  position: fixed; inset: 0; z-index: 34; background: rgba(6, 24, 40, .42);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--menu-ease), visibility 0s linear .5s;}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 35; width: min(640px, 50vw);
  background: var(--blue-deep); color: var(--on-blue);
  padding: 120px clamp(32px, 6vw, 96px) 40px; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden;}
.menu-open .scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-open .drawer { transform: none; opacity: 1; visibility: visible; transition-delay: .05s, .05s, 0s; }
.drawer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.drawer-links a { position: relative; display: inline-block; font-family: "Marcellus", serif; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.2; color: var(--on-blue); text-decoration: none; transition: color .5s var(--menu-ease); }
.drawer-links a:hover, .drawer-links a:focus-visible { color: var(--gold-on-blue); }
.drawer-links li, .drawer-foot { opacity: 0; transform: translateX(32px); transition: opacity .45s var(--menu-ease), transform .6s var(--menu-ease); }
.menu-open .drawer-links li { opacity: 1; transform: none; transition-delay: calc(.22s + var(--i) * .06s); }
.menu-open .drawer-foot { opacity: 1; transform: none; transition-delay: .55s; }
.drawer-foot { margin-top: auto; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.drawer-foot p { color: var(--on-blue-muted); font-size: 15px; line-height: 1.7; }
.drawer-foot strong { color: var(--on-blue); font-weight: 500; }

/* Lock page scroll on body (not html): locking html turns body into the sticky header's scroll
   container, which pushed the header and its close button off-screen when opened mid-page */

.menu-open .nav, .menu-open .nav.scrolled { box-shadow: none; }
.menu-open .nav-fill, .menu-open .nav-book { opacity: 0; }
.menu-open .nav.scrolled .brand-name { color: var(--ink); }
.menu-open .nav.scrolled .brand-name small { color: var(--muted); }
.menu-open .nav-links, .menu-open .nav-actions > :not(.menu-btn) { opacity: 0; pointer-events: none; }
.menu-open .menu-btn { color: var(--on-blue); border-color: rgba(255, 255, 255, .3); }
.menu-open .menu-btn:hover { background: rgba(255, 255, 255, .08); }

/* Hero */
.hero { padding: 40px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; min-height: calc(100dvh - 200px); }
.hero h1 { font-size: clamp(42px, 5.4vw, 74px); line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero-sub { font-size: 19px; color: var(--muted); max-width: 44ch; margin: 26px 0 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { position: relative; justify-self: end; width: min(100%, 560px, calc((100dvh - 150px) * .7)); isolation: isolate; }
/* Hero frame: wide cloud shape (SVG clip-path, morphs slowly) */
.blob-shadow { filter: drop-shadow(0 30px 40px rgba(3, 64, 105, .28)); }
.blob { position: relative; aspect-ratio: .7 / 1; background: var(--surface-2); clip-path: url(#heroCloud); }
/* overflow: hidden keeps Firefox measuring the cloud shape (objectBoundingBox) against the cloud itself; without it,
   Firefox sizes the shape to the oversized photo inside and the cloud paints larger than its box, over the next band */
.blob { overflow: hidden; }
/* Mouse stretch (desktop): the cloud scales/leans toward the pointer while .blob-inner applies the
   exact inverse, so the photo holds still and more of the door is uncovered */
.blob-inner { position: absolute; inset: 0; }
.blob, .blob-inner { transform-origin: 50% 50%; will-change: transform; }
.blob img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 92%; }
.blob-defs { position: absolute; width: 0; height: 0; }
/* Desktop: wider cloud, still sized to fit the first screen */
@media (min-width: 901px) {
  /* Service card sits further right, off the cloud's edge, as far as the page margin allows (max 90px) */
  .hero-art .next-card { right: calc(-1 * clamp(12px, (100vw - min(1240px, 100vw - 32px)) / 2 - 24px, 90px)); }
  .hero-art { width: min(100%, 620px, calc((100dvh - 150px) * .78)); }
  .hero-art .blob { aspect-ratio: .78 / 1; position: relative; background: #070707; }
  /* Photo is narrower than the cloud: show the door from its top light to the floor,
     and fade the photo's dark side edges into a matching dark fill */
  .hero-art .blob img {
    position: absolute; }
}
.arch { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; background: var(--surface-2); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .blob img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.hero-art.is-in .blob img { transform: scale(1); }
.next-card {
  position: absolute; right: -12px; bottom: -28px; z-index: 2; background: var(--surface); border-radius: var(--radius);
  padding: 18px 22px; display: flex; gap: 16px; align-items: center; box-shadow: var(--shadow); border: 1px solid var(--line);}
.next-date { width: 56px; height: 60px; border-radius: 12px; background: var(--blue); color: var(--on-blue); display: grid; place-items: center; text-align: center; line-height: 1.05; flex: none; }
.next-date b { font-family: "Marcellus", serif; font-size: 23px; display: block; }
.next-date span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.next-card strong { display: block; font-weight: 500; }
.next-card .muted { font-size: 14.5px; }

/* Gathering band */
.band { background: var(--blue); color: var(--on-blue); }
.band-grid { display: grid; }
.band-item { padding: 34px 28px; border-left: 1px solid rgba(255,255,255,.1); display: flex; gap: 16px; align-items: flex-start; }
.band-item:first-child { border-left: 0; padding-left: 0; }
.band-item i { font-size: 26px; color: var(--gold-on-blue); margin-top: 2px; }
.band-item strong { display: block; font-weight: 500; font-size: 17px; }
.band-item span { color: var(--on-blue-muted); font-size: 15px; }
.band-item a { color: var(--on-blue); text-underline-offset: 4px; }

/* Story (manifesto) */
.story { padding: 140px 0 120px; text-align: center; }
.story blockquote { margin: 0 auto; max-width: 20ch; font-family: "Marcellus", serif; font-size: clamp(32px, 4vw, 54px); line-height: 1.2; font-weight: 400; }
.story blockquote em { color: var(--accent-text); white-space: nowrap; }
.story cite { display: block; font-style: normal; margin-top: 22px; color: var(--muted); font-size: 15px; letter-spacing: .06em; }
.story-body { max-width: 60ch; margin: 44px auto 0; color: var(--muted); font-size: 18px; }
.story-pics { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 20px; margin-top: 72px; align-items: end; }
.story-pics .arch:nth-child(1) { aspect-ratio: 3 / 4; }
.story-pics .arch:nth-child(2) { aspect-ratio: 4 / 4.4; }
.story-pics .arch:nth-child(3) { aspect-ratio: 3 / 3.6; }

/* Section heading */
.sec { padding: 110px 0; }
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(34px, 3.8vw, 50px); }
.sec-head p { color: var(--muted); margin-top: 16px; max-width: 52ch; }

/* Ministries bento: 5 items, 5 cells */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 18px; }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--on-blue); isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,24,40,0) 30%, rgba(6,24,40,.86) 100%); }
.tile:hover img { transform: scale(1.05); }
.tile h3 { font-size: 30px; }
.tile p { font-size: 15px; color: #d8e6f0; margin-top: 6px; max-width: 34ch; }
.tile .go { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); display: grid; place-items: center; font-size: 18px; transition: background-color .3s, transform .3s var(--ease); }
.tile:hover .go { background: var(--accent); color: var(--accent-ink); transform: rotate(-45deg); }
.tile-lg { grid-row: span 2; }
.tile-lg h3 { font-size: 40px; }

/* Events: horizontal scroll-snap */
.events-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.events-top h2 { font-size: clamp(34px, 3.8vw, 50px); }
.scroller-ctrl { display: flex; gap: 10px; }
.events { display: grid; grid-auto-flow: column; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
.events::-webkit-scrollbar { display: none; }
.event { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.event-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.event-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.event:hover .event-img img { transform: scale(1.05); }
.event-body { padding: 22px 24px 26px; display: grid; grid-template-columns: 58px 1fr; gap: 18px; }
.event-date { text-align: center; border-right: 1px solid var(--line); padding-right: 14px; line-height: 1.05; }
.event-date b { font-family: "Marcellus", serif; font-size: 32px; display: block; color: var(--accent-text); }
.event-date span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.event h3 { font-size: 24px; }
.event .meta { color: var(--muted); font-size: 14.5px; margin-top: 8px; display: grid; gap: 4px; }
.event .meta i { color: var(--accent-text); margin-right: 6px; }

/* Give */
.give { background: var(--blue); color: var(--on-blue); overflow: hidden; }
.give-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(64px, 8vw, 112px); align-items: center; }
.give-art { width: min(100%, 600px); justify-self: start; }

/* The photo overhangs the cloud on every side (more than the mouse stretch can reach), so the
   cloud never uncovers the photo's straight edges */

.give h2 { font-size: clamp(36px, 4vw, 54px); }
.give .eyebrow { color: var(--gold-on-blue); font-weight: 600; }
.give-lead { color: var(--on-blue-muted); margin: 18px 0 36px; max-width: 48ch; font-size: 18px; }
.ways { display: grid; grid-template-columns: 1fr; gap: 14px; }
.way { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.way:first-child { background: rgba(255,255,255,.06); }
.way i { font-size: 24px; color: var(--on-blue); }
.way strong { display: block; font-weight: 500; color: var(--gold-on-blue); }
.way span { color: var(--on-blue-muted); font-size: 15px; }

/* Testimonies */
.testi { text-align: left; }
.testi-grid { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: center; }

.quote-stage { position: relative; }
.quote { margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; }
.quote.active { opacity: 1; transform: none; pointer-events: auto; }
.quote i.ph-quotes { font-size: 44px; color: var(--accent-text); }
.quote p { font-family: "Marcellus", serif; line-height: 1.3; margin: 12px 0 24px; }
.quote footer strong { font-weight: 500; display: block; }
.quote footer span { color: var(--muted); font-size: 15px; }
.testi-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.dots { display: flex; }
/* each dot is a 44px-tall tap target; the thin bar is drawn inside it */
.dots { gap: 4px; }
.dots button { position: relative; width: 32px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; transition: width .3s var(--ease); }
.dots button::before { content: ""; position: absolute; left: 2px; right: 2px; top: 20px; height: 4px; border-radius: 999px; background: var(--line); transition: background-color .3s; }
.dots button[aria-current="true"] { width: 48px; }
.dots button[aria-current="true"]::before { background: var(--accent); }

/* Prayer form */
.connect { background: var(--surface); }
.connect-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.connect h2 { font-size: clamp(34px, 3.8vw, 50px); }
.connect-lead { color: var(--muted); margin-top: 16px; max-width: 42ch; }
.contact-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list i { font-size: 22px; color: var(--accent-text); margin-top: 3px; }
.form { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 500; }
.field input, .field textarea, .field select {
  font: 400 16px/1.5 "Outfit", sans-serif; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; width: 100%;
  transition: border-color .2s, box-shadow .2s;}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .85; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field .help { font-size: 13.5px; color: var(--muted); }
.field .err { font-size: 13.5px; color: #b3261e; display: none; }
:root[data-theme="dark"] .field .err { color: #f2a19b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field .err { color: #f2a19b; } }
.field.invalid input, .field.invalid textarea { border-color: #b3261e; }
.field.invalid .err { display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.check input { width: 22px; height: 22px; accent-color: var(--blue); margin-top: 2px; flex: none; }
.check { cursor: pointer; }
.form-done { display: none; text-align: center; padding: 40px 10px; }
.form-done i { font-size: 48px; color: var(--accent-text); }
.form-done h3 { font-size: 34px; margin: 10px 0 8px; }
.form.sent > :not(.form-done) { display: none; }
.form.sent .form-done { display: block; }

/* Footer */
.footer { background: var(--blue-deep); color: var(--on-blue-muted); padding: 80px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; }

.footer h2.foot-h { font-family: inherit; line-height: inherit; font-weight: 500; font-size: 16px; margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--on-blue); }
.foot-about { margin-top: 20px; max-width: 34ch; font-size: 15.5px; }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; font-size: 18px; }
.socials a:hover { background: rgba(255,255,255,.08); }
.news { display: flex; gap: 8px; margin-top: 12px; }
.news input { flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: var(--on-blue); border-radius: 999px; padding: 12px 18px; font: 400 15px "Outfit", sans-serif; }
.news input::placeholder { color: var(--on-blue-muted); }
.news-msg { font-size: 14px; margin-top: 8px; min-height: 20px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 64px; padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; flex-wrap: wrap; }

/* Reveal motion: gated on reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .hero-art .blob img { transform: none; }
}

/* Responsive */
@media (max-width: 1080px) {
  .nav-links { gap: 22px; }

  .band-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .drawer { width: 100%; padding: 104px 24px 32px; }
  .nav { --menu-edge: 16px; --menu-reserve: 122px; }
  .nav-inner { gap: 10px; }
  .brand-mark { height: 40px; }
  .brand-name { font-size: 16px; }
  .brand-name small { font-size: 10px; letter-spacing: .18em; }
  .nav-inner > nav { display: none; }
  .menu-open .nav .brand-name, .menu-open .nav.scrolled .brand-name,
  .menu-open .nav .brand-name small, .menu-open .nav.scrolled .brand-name small { color: var(--on-blue); }
  .hero-grid, .give-grid, .testi-grid, .connect-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-grid { min-height: 0; }
  .hero-art { justify-self: center; width: min(100%, 480px); }
  .next-card { left: 12px; right: 12px; bottom: -36px; }
  .hero-art { margin-bottom: 36px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 240px; }
  .tile-lg { grid-column: span 2; grid-row: auto; }

  .testi-photo { max-width: 280px; }
  .give-art { max-width: 540px; }
}
@media (max-width: 360px) {
  .brand-mark { height: 34px; }
  .brand-name { font-size: 14px; }
  .brand-name small { font-size: 9.5px; letter-spacing: .12em; }
  .nav-inner { gap: 12px; }
  .nav { --menu-reserve: 112px; }
  /* no room for both on the narrowest phones: the open Bible takes the corner while scrolled */
  .nav.scrolled #themeBtn { opacity: 0; pointer-events: none; }
}
@media (max-width: 599.98px) {
  body { font-size: 16px; }
  .hero { padding: 24px 0 64px; }
  .sec, .story { padding: 76px 0; }

  .band-item { border-left: 0; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1); }
  .band-item:first-child { border-top: 0; }

  .story-pics .arch:nth-child(3) { display: none; }
  .bento { grid-template-columns: 1fr; }
  .tile-lg { grid-column: auto; }
  .events-top { flex-direction: column; align-items: flex-start; }
  .events { grid-auto-columns: 84%; }
  .ways { grid-template-columns: 1fr; }
  .way:first-child { grid-column: auto; }
  .form { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .quote-stage { min-height: 360px; }
}

/* Who we are (home): mission, vision, beliefs */
.about { background: var(--surface); border-block: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.about-lead { position: sticky; top: 110px; }
.about-lead h2 { font-size: clamp(34px, 3.8vw, 50px); }
.about-lead > p { color: var(--muted); margin-top: 20px; max-width: 46ch; }
.together { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.together li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius); background: var(--surface-2); }
.together i { font-size: 24px; color: var(--accent-text); margin-top: 2px; }
.together strong { display: block; font-weight: 500; }
.together span { color: var(--muted); font-size: 15px; }
.statement-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.statement { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.statement p { font-family: "Marcellus", Georgia, serif; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; text-wrap: pretty; }
.beliefs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.beliefs li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; color: var(--muted); }
.beliefs li i { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-2); color: var(--blue); display: grid; place-items: center; font-size: 21px; }
:root[data-theme="dark"] .beliefs li i { color: var(--gold-on-blue); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .beliefs li i { color: var(--gold-on-blue); } }
.beliefs li span { padding-top: 9px; }

/* ---------- Youth Outreach page ---------- */
.page-hero { padding: 48px 0 96px; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.page-hero h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.08; }
.page-hero h1 em { font-style: normal; color: var(--accent-text); }
.page-hero .lead { font-size: 19px; color: var(--muted); max-width: 48ch; margin: 24px 0 34px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); text-decoration: none; margin-bottom: 28px; min-height: 44px; }
.crumb:hover { color: var(--ink); }
.hero-photos { position: relative; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--blue); color: var(--on-blue); }
.fact { padding: 34px 28px; border-left: 1px solid rgba(255,255,255,.1); }
.fact:first-child { border-left: 0; }
.fact b { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--on-blue); }
.fact span { display: block; margin-top: 8px; color: var(--on-blue-muted); font-size: 15px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

.prose p { color: var(--muted); margin-top: 18px; max-width: 56ch; }

.verse { text-align: center; padding: 120px 0; }
.verse blockquote { margin: 0 auto; max-width: 24ch; font-family: "Marcellus", serif; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.22; }
.verse blockquote em { font-style: normal; color: var(--accent-text); }
.verse cite { display: block; font-style: normal; margin-top: 20px; color: var(--muted); font-size: 15px; letter-spacing: .06em; }
.verse p { max-width: 60ch; margin: 36px auto 0; color: var(--muted); font-size: 18px; }

.purpose { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.purpose li { counter-increment: p; grid-column: span 2; padding: 30px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.purpose li:nth-child(4), .purpose li:nth-child(5) { grid-column: span 3; }
.purpose li::before { content: counter(p, decimal-leading-zero); display: block; font-family: "Marcellus", serif; font-size: 34px; line-height: 1; color: var(--accent-text); margin-bottom: 18px; }
.purpose strong { display: block; font-weight: 500; font-size: 19px; }
.purpose span { display: block; color: var(--muted); font-size: 15.5px; margin-top: 6px; }

.week { background: var(--blue); color: var(--on-blue); }
.week .sec-head p { color: var(--on-blue-muted); }
.week .eyebrow { color: var(--gold-on-blue); }
.week-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; }
.day { border-radius: var(--radius); padding: 34px 32px; border: 1px solid rgba(255,255,255,.16); }
.day:first-child { background: rgba(255,255,255,.07); }
.day .when { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-on-blue); }
.day h3 { font-size: 30px; margin: 12px 0 12px; }
.day p { color: var(--on-blue-muted); }
.chips { display: flex; flex-wrap: wrap; margin-top: 44px; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); font-size: 15px; }
.chips i { color: var(--gold-on-blue); font-size: 18px; }

.journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--line); }
.journey li { position: relative; padding: 34px 24px 0 0; }
.journey li::before { content: ""; position: absolute; left: 0; width: 14px; height: 14px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 5px var(--bg); }
.journey b { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: 30px; line-height: 1; }
.journey strong { display: block; font-weight: 500; margin-top: 12px; }
.journey span { display: block; color: var(--muted); font-size: 15.5px; margin-top: 4px; }

.leader { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center; }

.leader .role { color: var(--accent-text); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.leader h2 { font-size: clamp(32px, 3.4vw, 44px); margin-top: 12px; }
.leader p { color: var(--muted); margin-top: 18px; max-width: 58ch; }

/* Gallery: masonry columns, each photo opens the lightbox */
.gallery { columns: 3 300px; column-gap: 16px; }

.gallery a { display: block; position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.gallery img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 100vw - 32px); width: 100%; color: var(--on-blue); }
.lightbox::backdrop { background: rgba(4, 14, 24, .88); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 12px; }
.lightbox figcaption { text-align: center; margin-top: 14px; color: #d4e7f5; font-size: 15px; }
.lb-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.lb-ctrl button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; font-size: 19px; cursor: pointer; }
.lb-ctrl button:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-inner h2 { font-size: clamp(30px, 3.4vw, 44px); max-width: 20ch; }
.cta-inner p { color: var(--muted); margin-top: 12px; max-width: 52ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .about-grid, .page-hero-grid, .split, .leader { grid-template-columns: 1fr; gap: 44px; }
  .about-lead { position: static; }
  .hero-photos { max-width: 460px; justify-self: center; width: 100%; }

  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .purpose { grid-template-columns: 1fr 1fr; }
  .purpose li, .purpose li:nth-child(4), .purpose li:nth-child(5) { grid-column: auto; }
  .purpose li:nth-child(5) { grid-column: span 2; }
  .week-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .leader-art { max-width: 340px; }
}
@media (max-width: 599.98px) {
  .page-hero { padding: 16px 0 72px; }
  .verse { padding: 76px 0; }
  .fact { padding: 24px 18px; }
  .fact b { font-size: 32px; }
  .purpose { grid-template-columns: 1fr; }
  .purpose li:nth-child(5) { grid-column: auto; }
  .journey { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--line); row-gap: 28px; }
  .journey li { padding: 0 0 0 26px; }

}

/* Seven header links need room: below 1180px the links live in the book menu; on wider screens the
   header buttons keep a little extra distance from the open book */
@media (max-width: 1180px) { .nav-inner > nav { display: none; } }
@media (min-width: 901px) { .nav { --menu-reserve: 130px; } }

/* Giving: Interac e-Transfer address with a copy button */
.etransfer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.etransfer code { font-family: inherit; font-size: 16px; font-weight: 500; color: var(--on-blue); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 10px 16px; border-radius: 999px; word-break: break-all; }
.etransfer .btn { min-height: 44px; }
.way .copy-msg { display: block; margin-top: 8px; color: var(--gold-on-blue); font-size: 14.5px; min-height: 1.4em; }

.field label .opt { font-weight: 400; color: var(--muted); }

/* Story: the three doors (presence, new life, one another), each a labelled link */
.door { position: relative; display: block; text-decoration: none; color: #f1f7fc; isolation: isolate; }
.door img { transition: transform .9s var(--ease); }
.door::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(6,24,40,0) 45%, rgba(6,24,40,.78) 100%); }
.door:hover img { transform: scale(1.05); }
.door-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 16px 22px; text-align: center; font-family: "Marcellus", Georgia, serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.door-label small { display: block; font-family: "Outfit", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-on-blue); margin-bottom: 6px; }
.door-label em { display: block; font-style: normal; font-family: "Outfit", sans-serif; font-size: 14.5px; color: #d8e6f0; margin-top: 8px; }
@media (max-width: 599.98px) {
  .story-pics { grid-template-columns: 1fr; gap: 16px; }
  .story-pics .arch:nth-child(n) { display: block; aspect-ratio: 4 / 3.4; }
}

/* Back to top: appears after scrolling down a screen; gold on hover like the menu button */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 35; width: 48px; height: 48px; border-radius: 999px; border: 0; display: grid; place-items: center; font-size: 22px; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
/* hover look only for a real mouse: on iPhone a :hover change made the first tap "hover" and needed a second tap */

@media (hover: hover) and (pointer: fine) {
  .to-top:hover i { transform: translateY(-2px); }
}
.to-top { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.to-top i { transition: transform .25s var(--menu-ease); }
.menu-open .to-top { opacity: 0; pointer-events: none; }
@media (max-width: 599.98px) { .to-top { right: 16px; bottom: 16px; } }

/* Gallery as a story: six chapters of the conference, alternating sides like a magazine spread.
   Plain rounded frames: one lead photo, smaller photos beneath. */
.chapters { columns: auto; display: grid; }
.chapter { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.chapter:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.chapter:nth-child(even) .ch-text { order: 2; }
.ch-num { display: block; font-family: "Marcellus", Georgia, serif; font-size: clamp(52px, 6vw, 84px); line-height: .9; color: var(--accent-text); }
.ch-text h3 { font-size: clamp(28px, 2.8vw, 38px); margin-top: 12px; }
.ch-text p { color: var(--muted); margin-top: 14px; max-width: 40ch; }
.ch-photos { display: grid; gap: 12px; }
.ch-photos a { position: relative; display: block; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.ch-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ch-photos a:hover img { transform: scale(1.04); }
.chapters .ch-feature { aspect-ratio: 3 / 2; border-radius: var(--radius); }
/* small photos always take a third of the row, so chapters with one or two match those with three */
.ch-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chapters .ch-thumb { border-radius: 12px; }
@media (max-width: 900px) {
  .chapter, .chapter:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .chapter:nth-child(even) .ch-text { order: 0; }
}
@media (max-width: 480px) {
  .ch-small { grid-template-columns: 1fr 1fr; }
}

/* Youth Outreach hero: photos cut out in the shape of the YSC logo mark (head circle + swoosh),
   the crowd photo runs through both swooshes; the small one keeps a sky-blue outline */
.ysc-mark { justify-self: center; }
.ysc-mark svg { display: block; margin-inline: auto; height: min(72vh, 620px); width: auto; max-width: 100%; overflow: visible; }
.ysc-mark .mark-photo { filter: drop-shadow(0 14px 18px rgba(3, 40, 70, .35)); }
.ysc-mark .mark-head .mark-photo { filter: none; }
.ysc-mark .mark-edge { fill: none; stroke: var(--accent); stroke-width: .6; opacity: .9; }
.ysc-mark .mark-edge-blue { stroke: #3f8fc8; stroke-width: .8; }
@media (max-width: 900px) { .ysc-mark svg { height: min(64vh, 520px); } }

/* The Burden: bridge photo in the slowly morphing cloud (clip path #heroCloud). The photo overhangs
   the cloud on every side so the mouse stretch never uncovers its straight edges. */
.burden-art { justify-self: center; width: min(100%, 560px); }
.burden-art .blob { aspect-ratio: 1.12 / 1; background: #6f5a45; }
.burden-art .blob video { position: absolute; top: -5%; left: -11%; width: 122%; max-width: none; height: 111%; object-fit: cover; object-position: 50% 42%; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.burden-art.is-in .blob video { transform: scale(1); }

/* Director portrait: the brush painting is always what you see. On mouse-over his colours are blended
   onto it (mix-blend-mode: color takes only hue and saturation from the photo; the painting keeps its
   brushwork and lightness), so the picture never shrinks or shifts. The colour photo sits where it
   lines up with the painting (82.5% wide, 9.8% from the left, 11.9% from the top), softened slightly so
   any small misalignment only blurs where one colour meets the next. */
.brush-swap { position: relative; isolation: isolate; }
.brush-swap img { display: block; width: 100%; height: auto; }
.brush-swap .color-layer {
  position: absolute; inset: 0; mix-blend-mode: color; opacity: var(--tint, 0); transition: opacity .3s linear;
  -webkit-mask: url(../images/ysc/olayiwola-brush.webp) center / 100% 100% no-repeat;
          mask: url(../images/ysc/olayiwola-brush.webp) center / 100% 100% no-repeat;}
.brush-swap .color {
  position: absolute; left: 9.82%; top: 11.94%; width: 82.5%; height: auto;
  filter: blur(2px) saturate(1.15);
  -webkit-mask: linear-gradient(180deg, #000 0, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(180deg, #000 0, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;}
/* colour follows the scroll (--tint, set by site.js: full colour when he is centred on screen);
   hovering anywhere in his section brings the colour in straight away */
.leader:hover .brush-swap .color-layer { opacity: 1; transition: opacity 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .brush-swap .color-layer { opacity: 1; } }

/* YSC mark animation (motion allowed only):
   1. drawn on: the outlines trace themselves in (swoosh, small swoosh, then circle) and the photo fades up
   2. rising figure: the head circle rises into place with a soft settle
   3. window: the photo drifts slowly behind the fixed shapes; the mouse nudges it the other way (--mx/--my) */
@media (prefers-reduced-motion: no-preference) {
  .ysc-mark .mark-edge { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.6, 0, .2, 1) .15s; }
  .ysc-mark .mark-edge-blue { transition-delay: .45s; }
  .ysc-mark .mark-head .mark-edge { transition-delay: .8s; }
  .ysc-mark.is-in .mark-edge { stroke-dashoffset: 0; }
  .ysc-mark .mark-photo { opacity: 0; transition: opacity 1.1s ease .75s; }
  .ysc-mark.is-in .mark-photo { opacity: 1; }
  /* the head drops in and bounces four times, each bounce smaller, with a slight squash on landing */
  .ysc-mark .mark-head { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; }
  .ysc-mark.is-in .mark-head { animation: yscHeadBounce 2.3s .8s both; }
  .ysc-mark .mark-head .mark-photo { transition-delay: 1.05s; }
  .ysc-mark .pan { transform: translate(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -7px)); transition: transform 1s var(--ease); }
  .ysc-mark .drift { animation: yscDrift 20s ease-in-out infinite alternate; }
  .ysc-mark .mark-head .drift { animation-duration: 14s; animation-direction: alternate-reverse; }
}
@keyframes yscHeadBounce {
  0%   { transform: translateY(-140px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  6%   { opacity: 1; }
  30%  { transform: translateY(0) scale(1.1, .86); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  48%  { transform: translateY(-58px) scale(.97, 1.04); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  64%  { transform: translateY(0) scale(1.07, .9); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  76%  { transform: translateY(-26px) scale(.99, 1.02); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  86%  { transform: translateY(0) scale(1.04, .95); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
  93%  { transform: translateY(-9px) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  100% { transform: none; opacity: 1; }
}
@keyframes yscDrift { from { transform: translate(-8px, -5px); } to { transform: translate(8px, 5px); } }

/* The Burden: bridge on the left, text on the right (desktop); on phones the text still leads */
@media (min-width: 901px) { .burden .burden-art { order: -1; } }

/* Gold headings on the plain page background (darker gold in light mode, lighter in dark mode) */
#ministries .sec-head h2, #connect h2 { color: var(--accent-text); }

/* a low-resolution panoramic photo (1080 x 340) as a lead: shown at its own shape so it is never cropped or blown up */
.chapters .ch-feature.ch-wide { aspect-ratio: 1080 / 340; }

/* phones: the short, wide door shows her face above the label (still clear of the event badge) */
@media (max-width: 599.98px) { .story-pics .door:nth-child(2) img { object-position: 50% 44% !important; } }

/* Active menu state: the current page (or, on the home page, the section in view) is gold and keeps its underline */
.nav-links a[aria-current] { color: var(--accent-text); }
.nav.scrolled .nav-links a[aria-current] { color: var(--gold-on-blue); }
.nav-links a[aria-current]::after, .drawer-links a[aria-current]::after { transform: scaleX(1); }
.drawer-links a[aria-current] { color: var(--gold-on-blue); }

/* Gallery chapters: lead photo (and its row of small photos) at 85% of the column, kept beside the text */
.chapters .ch-photos { width: 85%; }
@media (min-width: 901px) { .chapter:nth-child(even) .ch-photos { justify-self: end; } }
@media (max-width: 900px) { .chapters .ch-photos { width: 100%; } }

/* Service-times band: four gatherings plus the address */
.band-grid { grid-template-columns: repeat(4, 1fr) 1.25fr; }
@media (max-width: 1080px) { .band-grid { grid-template-columns: repeat(3, 1fr); } .band-item:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 599.98px) { .band-grid { grid-template-columns: 1fr; } .band-item:nth-child(4) { padding: 22px 0; } }

/* Next-gathering card: a small live dot while a meeting is under way */
.next-card.is-live .next-when { color: var(--accent-text); font-weight: 500; }
.next-card.is-live .next-when::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #d64545; vertical-align: 1px; }

/* Outreach: its own page and ministry, so it reads as a gold pill rather than a plain link */
.nav-links .nav-outreach a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; line-height: 1; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-text); }
.nav-links .nav-outreach a::after { display: none; }
.nav-links .nav-outreach i { font-size: 13px; transition: transform .3s var(--menu-ease); }
.nav-links .nav-outreach a:hover, .nav-links .nav-outreach a:focus-visible, .nav-links .nav-outreach a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nav-links .nav-outreach a:hover i, .nav-links .nav-outreach a:focus-visible i { transform: translate(2px, -2px); }
.nav.scrolled .nav-links .nav-outreach a { border-color: var(--gold-on-blue); color: var(--gold-on-blue); }
.nav.scrolled .nav-links .nav-outreach a:hover, .nav.scrolled .nav-links .nav-outreach a:focus-visible, .nav.scrolled .nav-links .nav-outreach a[aria-current] { background: var(--gold-on-blue); color: var(--blue); }
.nav-links { align-items: center; }

/* Outreach in the side menu and footer: set apart in gold with the same arrow as the header pill */
.drawer-links .drawer-outreach { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(248, 207, 122, .35); }
.drawer-links .drawer-outreach a { color: var(--gold-on-blue); }
.drawer-links .drawer-outreach i, .footer .foot-outreach i { display: inline-block; font-size: .6em; vertical-align: .35em; transition: transform .3s var(--menu-ease); }
.footer .foot-outreach i { font-size: .8em; vertical-align: 0; }
.drawer-links .drawer-outreach a:hover i, .drawer-links .drawer-outreach a:focus-visible i,
.footer .foot-outreach a:hover i, .footer .foot-outreach a:focus-visible i { transform: translate(2px, -2px); }
.footer .foot-outreach a { color: var(--gold-on-blue); }
.footer .foot-outreach a:hover { color: var(--on-blue); }
@media (max-height: 820px) { .drawer-links { gap: 4px; } }

/* Testimonies: stack the quotes in one grid cell so the stage grows to the longest one (real quotes run longer) */
.quote-stage { display: grid; min-height: 0; }
.quote { position: relative; inset: auto; grid-area: 1 / 1; }
.quote p { font-size: clamp(21px, 2.1vw, 28px); max-width: 38ch; }
.testi-photo img { object-fit: cover; width: 100%; height: 100%; }
/* Testimony photo: a circle with a thin gold ring (was an arch) */
.testi-photo { aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); box-shadow: var(--shadow); outline-offset: 10px; }
/* Outreach page rhythm: testimonies take the tinted band (after the plain gallery), the closing CTA goes plain */
.testi { background: var(--surface); border-block: 1px solid var(--line); }
.cta-band { background: transparent; border-top: 0; }

/* About: what marks the ministry (six pills) and the fellowship lead-in */
.marks { list-style: none; padding: 0; margin: 4px 0 0; flex-wrap: wrap; }
.marks li { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--surface-2); font-size: 15px; }
.marks i { font-size: 18px; color: var(--accent-text); }
.together-intro { margin-top: 28px; font-weight: 500; }
.together-intro + .together { margin-top: 14px; }
/* Footer separator in gold (softened so it reads as a rule, not a border) */
.foot-bottom { border-top-color: rgba(248, 207, 122, .5); }
/* The cover ribbon belongs to the closed book only: hide its back so it does not show under the open pages (double ribbon) */
.book-cover .front::after { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Belt and braces for mobile browsers that ignore backface-visibility on pseudo-elements:
   fade the cover ribbon out as the book opens, and back in once the cover has closed again */
.book-cover .front::after { transition: opacity .2s var(--menu-ease) .9s; }
.nav.scrolled .book-cover .front::after { opacity: 0; transition: opacity .15s var(--menu-ease) .1s; }

/* Tablet (641-1180px): the menu links are hidden there, so keep the Outreach pill visible in the header */
.nav-quick-outreach { display: none; }
@media (min-width: 600px) and (max-width: 1180px) {
  .nav-quick-outreach { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; line-height: 1; font-size: 15px; text-decoration: none;
    border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-text); transition: color .4s var(--menu-ease), background-color .3s, border-color .4s var(--menu-ease); }
  .nav-quick-outreach i { font-size: 13px; transition: transform .3s var(--menu-ease); }
  .nav-quick-outreach:hover, .nav-quick-outreach:focus-visible, .nav-quick-outreach[aria-current] { background: var(--accent); color: var(--accent-ink); }
  .nav-quick-outreach:hover i, .nav-quick-outreach:focus-visible i { transform: translate(2px, -2px); }
  .nav.scrolled .nav-quick-outreach { border-color: var(--gold-on-blue); color: var(--gold-on-blue); }
  .nav.scrolled .nav-quick-outreach:hover, .nav.scrolled .nav-quick-outreach:focus-visible, .nav.scrolled .nav-quick-outreach[aria-current] { background: var(--gold-on-blue); color: var(--blue); }
  .nav-actions { gap: 12px; }
}

/* Hero "Youth Outreach" button: gold outline */

.btn-outreach i { color: var(--accent-text); }

/* Youth Outreach feature band (home page, between Ministries and Events) */
.ysc-band { background: var(--blue); color: var(--on-blue); padding: clamp(64px, 8vw, 104px) 0; }
.ysc-band-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.ysc-band .eyebrow { color: var(--gold-on-blue); }
.ysc-band h2 { font-size: clamp(34px, 3.8vw, 50px); margin-top: 10px; }
.ysc-band-text > p { color: var(--on-blue-muted); margin-top: 16px; max-width: 48ch; }
.ysc-band-stats { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.ysc-band-stats b { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); color: var(--gold-on-blue); line-height: 1.1; }
.ysc-band-stats span { font-size: 14px; color: var(--on-blue-muted); }
.ysc-band-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn-ghost-light { border-color: rgba(248, 207, 122, .6); color: var(--on-blue); background: transparent; }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { background: rgba(255, 255, 255, .08); border-color: var(--gold-on-blue); }

@media (max-width: 900px) { .ysc-band-grid { grid-template-columns: 1fr; }  }
@media (max-width: 480px) { .ysc-band-stats { gap: 12px 22px; } .ysc-band-stats b { font-size: 26px; } .ysc-band-stats span { font-size: 13px; } }

/* Band: the YSC logo cut-out as outlines on blue (reuses the Outreach hero's draw-on and bounce animation) */
.ysc-band-mark { display: block; justify-self: center; }
.ysc-band-mark svg { height: min(56vh, 440px); }

.ysc-band-mark .mark-edge { stroke: var(--gold-on-blue); stroke-width: 1.1; opacity: 1; }
.ysc-band-mark .mark-edge-blue { stroke: #8cc4ea; stroke-width: 1.1; }
@media (max-width: 900px) { .ysc-band-mark { order: -1; } .ysc-band-mark svg { height: 260px; } }

/* Events: the soonest event (first card) gets a gold border */
.event.is-next { border-color: var(--accent); }   
/* Events row: size the cards so a whole number always fits (no half-cut card at the edge);
   the arrows and swipe still scroll one card at a time and snap to whole cards */
.events { --cols: 4; grid-auto-columns: calc((100% - (var(--cols) - 1) * 22px) / var(--cols)); }
@media (max-width: 1240px) { .events { --cols: 3; } }
@media (max-width: 900px) { .events { --cols: 2; } }
@media (max-width: 599.98px) { .events { --cols: 1; } }
/* Footer credit link (NorthStack Digital) turns gold on hover */
.footer .foot-bottom a:hover, .footer .foot-bottom a:focus-visible { color: var(--gold-on-blue); }

/* Footer: the church address as its own small card under the meeting times */
.foot-address { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(248, 207, 122, .3); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.foot-address > i { font-size: 22px; color: var(--gold-on-blue); margin-top: 2px; }
.foot-label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-on-blue); margin-bottom: 4px; }
.foot-address address { font-style: normal; color: var(--on-blue); line-height: 1.5; }
.footer .foot-address a { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--gold-on-blue); }
.footer .foot-address a:hover, .footer .foot-address a:focus-visible { color: var(--on-blue); }
.foot-address a i { font-size: 13px; transition: transform .3s var(--menu-ease); }
.foot-address a:hover i { transform: translate(2px, -2px); }
.foot-address .nw { white-space: nowrap; }

/* Footer, tablet (641-1080px): logo + about beside the newsletter and address; links and times below.
   The Explore links sit in two short columns (also on phones) so the footer is not one long list. */
@media (min-width: 600px) and (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand news" "explore gather"; gap: 48px 48px; }
  .foot-brand { grid-area: brand; }
  .foot-news { grid-area: news; }
  .foot-explore { grid-area: explore; }
  .foot-gather { grid-area: gather; }
}
@media (max-width: 1080px) {
  .foot-explore ul { grid-template-columns: repeat(2, max-content); column-gap: 40px; }
}

/* tablet and phone: "Explore" heading centred over its two columns of links, like Outreach below them */
@media (max-width: 1080px) { .foot-explore { justify-self: start; width: max-content; } .foot-explore h2.foot-h { text-align: center; } }
/* iPhone Safari: nothing may widen the page sideways (it let the whole page drift left/right).
   1) The closed side menu no longer waits off-screen to the right (Safari counted it as page width);
      it stays in place, hidden, and is revealed with a right-to-left wipe instead of a slide.
   2) The page clips any horizontal overflow. overflow-x: clip does not create a scroll container,
      so the sticky header keeps working; older browsers fall back to the body's overflow-x: hidden. */
.drawer { transform: none; clip-path: inset(0 0 0 100%);
  transition: clip-path .6s var(--menu-ease) .05s, opacity .6s var(--menu-ease) .05s, visibility 0s linear .7s; }
.menu-open .drawer { clip-path: inset(0 0 0 0); }
html, body { overflow-x: clip; }

/* ---------- Cinematic photo treatment (all site photos; the files themselves are untouched) ----------
   grade: a touch more contrast, a little less saturation, so phone snapshots and stock photos read as one set
   vignette + fine film grain: an overlay drawn over each photo (pointer-events: none)
   hover: colour warms back up while the photo slowly pushes in */
:root {
  --cine-grade: contrast(1.07) saturate(.86) brightness(.97);
  --cine-grade-hover: contrast(1.04) saturate(1.02) brightness(1);
  --cine-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cine-vignette: radial-gradient(ellipse 85% 80% at 50% 45%, rgba(4, 14, 24, 0) 55%, rgba(4, 14, 24, .42) 100%);}
.event-img img, .ch-photos img, .gallery img, .door img, .testi-photo img, .blob-inner img, .blob-inner video {
  filter: var(--cine-grade);
  transition: transform 1.4s var(--ease), filter .9s var(--ease);}
.event:hover .event-img img, .ch-photos a:hover img, .gallery a:hover img, .door:hover img {
  filter: var(--cine-grade-hover);}
.event-img::after, .ch-photos a::after, .gallery a::after, .testi-photo::after, .blob-inner::after, .door::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cine-grain), var(--cine-vignette);}
.testi-photo { position: relative; }
/* Cinematic look on the YSC logo cut-outs (Outreach hero and the home-page band): the same grade on the photo,
   plus a fixed film-grain layer inside the shapes (it does not drift with the photo).
   The Mission Outreach Director's brush portrait is the one image left natural. */
.ysc-mark image.drift { filter: var(--cine-grade); }
.ysc-mark image.cine-grain { pointer-events: none; }

/* ---------- Gallery chapters as film stills ----------
   subtitle: the caption along the bottom over a soft fade (always on the main photo, on hover for the small ones)
   depth: a fine inner frame line and a deeper, softer shadow
   develop: photos ease from soft, muted and slightly zoomed to sharp and graded as they scroll in
   drift: the main photo of each chapter pushes in very slowly while on screen */
.ch-photos a { isolation: isolate; }
.ch-photos a::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.chapters .ch-feature { box-shadow: 0 34px 60px -30px rgba(2, 10, 20, .75), 0 10px 24px -12px rgba(2, 10, 20, .45); }
.ch-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 44px 18px 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 14, 24, 0), rgba(4, 14, 24, .78));
  color: #f1f7fc; font-size: 14px; line-height: 1.35; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ch-thumb .ch-cap { padding: 28px 10px 8px; font-size: 12px; opacity: 0; transform: translateY(6px); }
.ch-thumb:hover .ch-cap, .ch-thumb:focus-visible .ch-cap { opacity: 1; transform: none; }
@media (hover: none) { .ch-thumb .ch-cap { display: none; } }
/* develop on scroll (only when the script has switched it on) */
.chapters.dev-ready .ch-photos a img { opacity: .55; filter: blur(6px) grayscale(.6) brightness(.8); transform: scale(1.08);
  transition: opacity 1.2s var(--ease), filter 1.6s var(--ease), transform 2.2s var(--ease); }
.chapters.dev-ready .ch-small .ch-thumb img { transition-delay: .25s; }
.chapters.dev-ready .ch-photos a.is-dev img { opacity: 1; filter: var(--cine-grade); transform: scale(1); }
.chapters.dev-ready .ch-photos a.is-dev:hover img { filter: var(--cine-grade-hover); transform: scale(1.04); transition-delay: 0s; }
.chapters.dev-ready .ch-photos a .ch-cap { opacity: 0; transform: translateY(8px); }
.chapters.dev-ready .ch-feature.is-dev .ch-cap { opacity: 1; transform: none; transition-delay: .9s; }
.chapters.dev-ready .ch-thumb.is-dev:hover .ch-cap { opacity: 1; transform: none; }
/* slow push-in on the main photo (the separate "scale" property, so it combines with the hover zoom) */
@media (prefers-reduced-motion: no-preference) {
  .chapters.dev-ready .ch-feature.is-dev img { animation: chDrift 26s ease-in-out 2.2s infinite alternate; }
}
@keyframes chDrift { from { scale: 1; } to { scale: 1.06; } }
/* Footer Explore, re-arranged: with YSC added there are 8 links, so they pair up evenly in two columns
   (Outreach sits beside Plan a Visit instead of on its own line).
   Phones: the list uses the full width in two equal columns, heading aligned left like the other footer headings,
   and each link gets a taller tap target. */
@media (max-width: 1080px) { .foot-explore .foot-outreach { grid-column: auto; justify-self: start; } }
@media (max-width: 599.98px) {
  .foot-explore { width: auto; justify-self: stretch; }
  .foot-explore h2.foot-h { text-align: left; }
  .foot-explore ul { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 4px; }
  .foot-explore li a { display: inline-block; padding: 6px 0; }
}
/* Footer headings (Explore, Gather, Newsletter) and the social icons in the site's deep gold (the button gold, --accent).
   The very darkest gold (#9a5f16) is too dark to read on the footer blue (about 2.2:1), so the button gold is used. */
.footer h2.foot-h { color: var(--gold-on-blue); }   /* light gold: the darker gold was under 4.5:1 on the footer blue */
.socials a { color: var(--gold-on-blue); border-color: var(--gold-on-blue); }
.socials a:hover, .socials a:focus-visible { background: var(--gold-on-blue); color: var(--blue-deep); border-color: var(--gold-on-blue); }
/* Scroll lock while the side menu is open goes on the page root, not the body. (With html/body at
   overflow-x: clip, a body with overflow: hidden became its own scroll box, the sticky header scrolled
   away with it, and the menu opened from the open-book state lost its logo and close button.) */
body.menu-open { overflow: clip; }
html:has(> body.menu-open) { overflow: hidden; }

/* ---------- Gallery colour grade: saturation, warmth, tint ----------
   --g-sat  saturation multiplier (1 = the site's cinematic grade)
   --g-warm -1 cool blue ... 0 neutral ... 1 warm amber
   --g-tint -1 green ... 0 neutral ... 1 magenta
   Chosen look (2026-09-26): sat 1.02, warm .4, tint .06. */
.chapters {
  --g-sat: 1.02; --g-warm: .4; --g-tint: .06;
  --cine-grade: contrast(1.07) saturate(calc(.86 * var(--g-sat))) brightness(.97);
  --cine-grade-hover: contrast(1.04) saturate(calc(1.02 * var(--g-sat))) brightness(1);}
.ch-grade { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: soft-light;
  background:
    linear-gradient(rgba(255, 150, 60, calc(max(var(--g-warm), 0) * .55)), rgba(255, 150, 60, calc(max(var(--g-warm), 0) * .55))),
    linear-gradient(rgba(60, 140, 255, calc(max(var(--g-warm) * -1, 0) * .55)), rgba(60, 140, 255, calc(max(var(--g-warm) * -1, 0) * .55))),
    linear-gradient(rgba(230, 60, 200, calc(max(var(--g-tint), 0) * .45)), rgba(230, 60, 200, calc(max(var(--g-tint), 0) * .45))),
    linear-gradient(rgba(60, 200, 90, calc(max(var(--g-tint) * -1, 0) * .45)), rgba(60, 200, 90, calc(max(var(--g-tint) * -1, 0) * .45))); }
/* Header book, a little smaller (desktop about 7% smaller, phones about 16% smaller).
   The book stays centred on the menu button: the button's centre is 36px down, and the book sits
   4px to the right of the button's centre line, as before. On phones the button itself is 40px. */
.nav {
  --btn: 44px;
  --book-w: 54px; --book-h: 63px;
  --book-top: calc(36px - var(--book-h) / 2);
  --book-right: calc(var(--menu-edge) + var(--btn) / 2 - var(--book-w) / 2 - 4px);}
.nav .menu-btn { width: var(--btn); height: var(--btn); top: calc(36px - var(--btn) / 2); }
@media (max-width: 599.98px) {
  .nav { --btn: 40px; --book-w: 48px; --book-h: 56px; }
  .nav .menu-btn { font-size: 17px; }
}

/* Footer Gather: each meeting on two tidy lines, name first (kept whole), time underneath */
.gather-list { gap: 14px; }
.gather-list .g-name { display: block; color: var(--on-blue); white-space: nowrap; }
.gather-list .g-time { display: block; font-size: 14px; }
/* desktop footer: a little more room for Gather (its meeting names stay on one line), taken from the short Explore links */
@media (min-width: 1081px) { .foot-grid { grid-template-columns: 1.4fr .8fr 1.2fr 1.3fr; } }
@media (min-width: 1081px) and (max-width: 1240px) { .gather-list .g-name { font-size: 15px; } }
/* Hero door: the portrait photo does not reach the sides of the blob, so the blob's near-black background shows
   there. Grading only the photo made its blacks differ from that background and exposed the photo's straight edges.
   Grade the photo and the background together instead: the layer behind the photo takes the blob's colour and the
   grade is applied to that whole layer. */
.hero-art .blob-inner img { filter: none; }
/* The hero open-door photo is left out of the cinematic treatment altogether (no grade, grain or vignette):
   its black background has to match the blob exactly, or the photo's straight edges show. */
.hero-art .blob-inner { filter: none; background: none; }
.hero-art .blob-inner::after { content: none; }

/* Ministries: seven tiles now (the groups' real names), so the grid gains a third row */
.bento { grid-auto-rows: 280px; }
@media (max-width: 1080px) { .bento { grid-auto-rows: 240px; } }
/* Footer Gather: the Zoom line */
.gather-list .g-zoom a { display: block; }
.gather-list .g-zoom .g-name { color: var(--gold-on-blue); }
.gather-list .g-zoom i { font-size: 16px; vertical-align: -2px; margin-right: 2px; }
.gather-list .g-zoom a:hover .g-name { color: var(--on-blue); }
@media (min-width: 901px) { .bento .tile:last-child { grid-column: span 2; } }
/* Ministry tiles get the site's cinematic treatment: the grade on the photo, film grain and a vignette over it
   (under the title text), and the colour warming back up with the slow push-in on hover */
.tile img { filter: var(--cine-grade); transition: transform 1.4s var(--ease), filter .9s var(--ease); }
.tile:hover img, .tile:focus-visible img { filter: var(--cine-grade-hover); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--cine-grain), var(--cine-vignette); }
/* Conference activities: equal-width pills arranged symmetrically around the centre
   (desktop 4 + 3 centred, tablet 2 + 2 + 2 + 1 centred, phones one per line) */
.chips { justify-content: center; gap: 12px; }
.chips li { flex: 0 0 calc((100% - 3 * 12px) / 4); justify-content: center; text-align: center; padding: 12px 16px; }
@media (max-width: 900px) { .chips li { flex-basis: calc((100% - 12px) / 2); } }
/* phones: still two per line; the pills get a little tighter and the text may wrap inside them */
@media (max-width: 520px) {
  .chips { gap: 10px; }
  .chips li { flex-basis: calc((100% - 10px) / 2); min-height: 58px; padding: 10px 12px; gap: 6px; font-size: 14px; line-height: 1.3; }
  .chips i { font-size: 17px; flex: none; }
}
/* Two-per-line layouts (tablet and phone): pair the two long pills on one row.
   Rows: Career counselling + Academic seminars / Spiritual guidance and prayer + Leadership and mentorship /
   Health talks + Bible games / Inspirational songs (centred on its own) */
@media (max-width: 900px) {
  .chips li:nth-child(1) { order: 1; } .chips li:nth-child(3) { order: 2; }
  .chips li:nth-child(2) { order: 3; } .chips li:nth-child(5) { order: 4; }
  .chips li:nth-child(4) { order: 5; } .chips li:nth-child(7) { order: 6; }
  .chips li:nth-child(6) { order: 7; }
}
/* Ministry marks (About): pills in an even grid, every label on one line. The column count follows the
   space the list actually has (container query): 3 + 3 when wide, 2 + 2 + 2 equal columns in between, and on
   phones two columns where the right one is wider, so the long names (Biblical preaching, Community engagement)
   sit on the right and still fit on one line. */
div:has(> .marks) { container: marks / inline-size; }
.marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.marks li { justify-content: center; text-align: center; white-space: nowrap; padding: 10px 14px; min-height: 48px; }
.marks i { flex: none; }
@container marks (min-width: 620px) { .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 3 across but a tight fit (the About column on laptops): slightly smaller type keeps every label on one line */
@container marks (min-width: 620px) and (max-width: 719.98px) { .marks li { font-size: 14px; padding: 10px 10px; gap: 6px; } }
@container marks (max-width: 459.98px) {
  .marks { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .marks li { font-size: 14px; padding: 10px 10px; gap: 6px; }
  .marks li:nth-child(2) { order: 1; } .marks li:nth-child(1) { order: 2; }
  .marks li:nth-child(4) { order: 3; } .marks li:nth-child(3) { order: 4; }
  .marks li:nth-child(5) { order: 5; } .marks li:nth-child(6) { order: 6; }
}
/* very small phones (320px): not enough room even so, so the labels may wrap inside the pill */
@container marks (max-width: 329.98px) { .marks li { white-space: normal; line-height: 1.25; } }
/* Accessibility: "BIBLE CHURCH" under the name is tiny (10.5px), so on the blue header bar it is drawn at full strength */
.nav.scrolled .brand-name small { opacity: 1; }
/* Accessibility checkers (Lighthouse/axe) ignore clip-path, so while the blue header fill is folded into the
   book they treated it as the background behind "BIBLE CHURCH". The book covers it completely at rest, so it is
   hidden then: it shows the moment it starts to unfold, and hides again only after it has folded back. */
.nav-fill { visibility: hidden; transition: clip-path .8s var(--menu-ease), opacity .4s var(--menu-ease), visibility 0s linear .8s; }
.nav.scrolled .nav-fill { visibility: visible; transition-delay: .4s, 0s, 0s; }
/* <picture> wrappers (WebP with a JPG/PNG fallback) take no part in layout: the <img> inside is styled as before */
picture { display: contents; }
/* Open book symmetry: the ribbon hangs from the spine (the SVG ribbon sits across both page halves), and the menu
   button slides onto the spine so the spread is balanced around it. The button moves while it is invisible (it fades
   in after the book opens, and moves back only after it has faded out). */

.nav .menu-btn { transition: color .5s var(--menu-ease), border-color .5s var(--menu-ease), background-color .25s, opacity .3s var(--menu-ease) .3s, transform 0s linear 0s; }
.nav:not(.scrolled) .menu-btn { transition-delay: 0s, 0s, 0s, 0s, .3s; }
.nav .menu-btn:focus-visible, .menu-open .nav .menu-btn { transition-delay: 0s, 0s, 0s, 0s, 0s; }
/* ordinary phones: the header row is full, so a slightly tighter gap keeps the theme button off the open book's page */
@media (min-width: 361px) and (max-width: 420px) { .nav-inner { gap: 6px; } }
/* Header logo (mark + name) nudged a little left of the content edge */
.nav .brand { margin-left: -6px; }
/* Theme toggle follows the book: while the Bible is closed the header actions sit right beside it (shifted one
   book-width to the right); as the cover swings open they slide left to make room for the open spread, in step
   with the cover (same duration and easing; on the way back they wait for the pages to tuck in, like the cover). */
.nav-actions { transition: transform .8s var(--menu-ease) .45s; }
.nav:not(.scrolled) .nav-actions { transform: translateX(var(--book-w)); }
.nav.scrolled .nav-actions { transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .nav-actions { transition: none; } }
/* Header actions keep their colour transitions. (".nav-actions > *" only listed opacity, so the theme toggle turned
   white the instant the page scrolled -- invisible on the light page until the blue fill reached it.) The switch to
   the on-blue colours now waits until the blue fill has wiped in behind them; opacity (menu open) stays immediate. */
.nav-actions > * { transition: opacity .3s var(--menu-ease), color .4s var(--menu-ease), background-color .4s var(--menu-ease), border-color .4s var(--menu-ease); }
.nav.scrolled .nav-actions > *, .nav.scrolled #themeBtn { transition-delay: 0s, .7s, .7s, .7s; }

/* At the very top the header stays see-through (the hero art reaches up behind it); it turns solid the moment
   the page scrolls. While the menu is open, and while it slides away (body.menu-closing), it stays see-through. */
.nav { background-color: transparent; }
.nav.scrolled { background-color: var(--bg); }
.menu-open .nav, .menu-closing .nav { background-color: transparent; }
/* One ribbon, not two halves: iPhone Safari drew the half on the flipping cover separately, so two ribbons showed.
   The whole ribbon now lives on the right-hand page (which never flips) and hangs over the spine; the page's clip
   opens 8px past the spine so its left half shows (the open cover hides everything else there). */
.nav.scrolled .book-page { clip-path: inset(-9px 0 -12px -8px round 0); }
/* Theme switch: for the one frame the new theme is applied, no transitions anywhere (js adds .theme-switching) */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* ---------- Gallery as one story (2026-09-28) ----------
   A gold thread runs down the gallery and draws itself as you scroll; each chapter number is a marker on it that
   lights up as the thread reaches it. Chapters sit either side of the thread. "The decision" (03) breaks the
   pattern: centred, one full-width photo with a participant's words over it. Small photos form one even strip,
   the same height in every chapter. (The first child is now the thread, so chapters alternate with
   :nth-of-type rather than the older :nth-child rules.) */
.chapters { position: relative; gap: 60px; }
.chapters > .chapter { position: relative; grid-template-columns: 1fr 1fr; column-gap: 128px; align-items: center; }
.chapters > .chapter .ch-text { order: 0; }
.chapters > .chapter:nth-of-type(even) .ch-text { order: 2; }
.chapters > .chapter .ch-photos { width: 100%; justify-self: stretch; }
.chapters > .chapter:nth-of-type(odd):not(.ch-moment) .ch-text { justify-self: end; }
.chapters .ch-text p { max-width: 42ch; }
/* the thread (track + drawn gold part; the script sets its length and progress) */
.ch-thread { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); pointer-events: none;
  background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 2px; }
.ch-thread span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--accent), var(--accent-text));
  transform-origin: top; transform: scaleY(var(--p, 1)); }
/* chapter markers */
.chapters .ch-num { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--accent-text); background: var(--bg);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.chapters .ch-num.lit { background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
/* even strip of small photos: same height everywhere, 1-3 photos share it equally */
.chapters .ch-small { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); aspect-ratio: 3.6 / 1; gap: 12px; }
.chapters .ch-small[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.chapters .ch-small[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chapters .ch-thumb { aspect-ratio: auto; height: 100%; }
/* 03, the moment */
.chapters > .ch-moment { grid-template-columns: 1fr; row-gap: 28px; }
.chapters > .ch-moment .ch-num { top: 0; transform: translate(-50%, 0); }
.chapters > .ch-moment .ch-text { justify-self: center; text-align: center; margin-top: 76px; padding: 4px 28px 8px; max-width: 64ch; position: relative; z-index: 1; background: var(--bg); }
.chapters > .ch-moment .ch-text p { margin-inline: auto; max-width: 52ch; }
.ch-moment-media { position: relative; }
.chapters .ch-moment .ch-feature.ch-wide { aspect-ratio: 1600 / 702; }
.ch-moment .ch-feature .ch-cap { display: none; }
.ch-quote { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; width: min(50%, 560px); margin: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(90deg, rgba(4, 14, 24, .86) 0%, rgba(4, 14, 24, .62) 62%, rgba(4, 14, 24, 0) 100%); color: #f1f7fc; }
.ch-quote p { font-family: "Marcellus", Georgia, serif; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; margin: 0; text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.ch-quote footer { margin-top: 16px; font-size: 14px; letter-spacing: .02em; color: var(--gold-on-blue); }
.chapters > .ch-moment .ch-small { width: min(100%, 620px); justify-self: center; }
/* tablets and phones: one column, the thread down the left with the markers on it */
@media (max-width: 900px) {
  .chapters { gap: 56px; padding-left: 60px; }
  .ch-thread { left: 22px; }
  .chapters > .chapter, .chapters > .ch-moment { grid-template-columns: 1fr; row-gap: 18px; }
  .chapters > .chapter .ch-text, .chapters > .chapter:nth-of-type(even) .ch-text { order: 0; justify-self: stretch; }
  .chapters .ch-num, .chapters > .ch-moment .ch-num { left: -38px; top: 0; transform: translate(-50%, 0); width: 44px; height: 44px; font-size: 17px; }
  .chapters > .ch-moment .ch-text { text-align: left; margin-top: 0; padding: 0; justify-self: stretch; background: none; }
  .chapters > .ch-moment .ch-text p { margin-inline: 0; }
  .ch-quote { position: static; width: auto; padding: 16px 0 0 16px; background: none; color: var(--ink); border-left: 2px solid var(--accent); border-radius: 0; margin-top: 16px; }
  .ch-quote p { text-shadow: none; font-size: 20px; }
  .ch-quote footer { color: var(--accent-text); }
  .chapters > .ch-moment .ch-small { width: 100%; }
}

/* tablets: all four points in one horizontal row (phones keep the vertical timeline) */
@media (min-width: 600px) and (max-width: 900px) {
  .journey { grid-template-columns: repeat(4, 1fr); row-gap: 0; }
  .journey li { padding: 30px 18px 0 0; }
  .journey b { font-size: 24px; }
  .journey span { font-size: 14.5px; }
}
.journey { position: relative; }
.journey-fill { position: absolute; left: 0; width: 100%; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-text)); transform-origin: left center; transform: scaleX(var(--jp, 1)); }
@media (max-width: 599.98px) {
  .journey-fill { transform-origin: center top; transform: scaleY(var(--jp, 1));
    background: linear-gradient(180deg, var(--accent), var(--accent-text)); }
}
.journey li::before { z-index: 1; border: 2px solid var(--accent); box-sizing: border-box;
  transition: background-color .45s var(--ease), box-shadow .6s var(--ease), transform .45s var(--ease); }
.journey b { transition: color .6s var(--ease); }
.journey.live li:not(.lit)::before { background: var(--bg); transform: scale(.85); }
.journey.live li.lit::before { transform: scale(1.12); box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.journey.live li.lit b { color: var(--accent-text); }
/* Journey line: a hairline (1px) for both the track and the gold, dots re-centred on it */
.journey { border-top-width: 1px; }
.journey li::before { top: -7.5px; }
.journey-fill { top: -1px; height: 1px; }
@media (max-width: 599.98px) {
  .journey { border-top-width: 0; border-left-width: 1px; }
  .journey li::before { top: 6px; left: -7.5px; }
  .journey-fill { top: 0; left: -1px; width: 1px; height: 100%; }
}
/* the gold line is a span: keep the description-text rule (.journey span) off it */
.journey .journey-fill { margin: 0; font-size: 0; }
/* the Journey line eases toward the scroll position instead of snapping to it */
.journey-fill { transition: transform .5s cubic-bezier(.25, .6, .3, 1); }
@media (prefers-reduced-motion: reduce) { .journey-fill { transition: none; } }

/* ---------- Hero "Youth Outreach": sky-blue (light) / white (dark) outline that is drawn over in gold ----------
   The ring is a conic gradient masked to the border; --ring sweeps it clockwise from the top once the script adds
   .gilded (the first time the header turns blue). */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-outreach { position: relative; }

.btn-outreach::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 0deg, var(--accent) var(--ring), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* drawn and undrawn by a transition of --ring, so it reverses smoothly from wherever it is */

.btn-outreach.gilded::before { --ring: 360deg; }

/* Theme toggle: its ring morphs to gold as the header turns blue (after the fill has wiped in) */

.nav #themeBtn { transition: opacity .3s var(--menu-ease), color .4s var(--menu-ease), background-color .4s var(--menu-ease), border-color .9s var(--menu-ease); }

/* Events: the arrow that still has events behind it pulses gold */
.scroller-ctrl .icon-btn.pulse { border-color: var(--accent); color: var(--accent-text); animation: arrowPulse 1.8s ease-out infinite; }
@keyframes arrowPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.scroller-ctrl .icon-btn { transition: border-color .4s var(--ease), color .4s var(--ease), background-color .25s; }
@media (prefers-reduced-motion: reduce) { .scroller-ctrl .icon-btn.pulse { animation: none; } }

/* Gallery: each chapter heading turns gold together with its number */
.chapters .ch-text h3 { transition: color .5s var(--ease); }
.chapters > .chapter.lit .ch-text h3 { color: var(--accent-text); }
/* Hero "Youth Outreach" outline weights: the plain outline (sky blue / white) is a hairline, half the old weight;
   the gold ring grows from that hairline to the full 1px as it draws, and thins again as it undraws. Both are
   drawn inside the same 1px border box (the real border is transparent), so the button never changes size. */
.btn-outreach { --ol: #3f8fc8; border-color: transparent; isolation: isolate; }
:root[data-theme="dark"] .btn-outreach { --ol: var(--on-blue); border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-outreach { --ol: var(--on-blue); } }
.btn-outreach::after { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none;
  background: var(--ol);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.btn-outreach::before { z-index: 1; padding: .5px; transition: --ring 1.1s cubic-bezier(.55, .1, .3, 1), padding 1.1s cubic-bezier(.55, .1, .3, 1); }
.btn-outreach.gilded::before { padding: 1px; }
@media (prefers-reduced-motion: reduce) { .btn-outreach::before { transition: none; } }
/* Touch screens: no hover changes on the arrow links. On iPhone a :hover that changes anything makes the first tap
   only "hover" and the link needs a second tap. The press still gives feedback through :active. */
@media (hover: none) {
  .footer .foot-outreach a:hover i, .drawer-links .drawer-outreach a:hover i, .nav-links .nav-outreach a:hover i, .nav-quick-outreach:hover i, .foot-address a:hover i { transform: none; }
  .footer .foot-outreach a:hover { color: var(--gold-on-blue); }
  .footer .foot-outreach a:active { color: var(--on-blue); }
  .footer .foot-outreach a, .drawer-links .drawer-outreach a, .foot-address a { -webkit-tap-highlight-color: transparent; }
}
/* Outline weight done evenly: a half-pixel line can't be drawn evenly on standard screens (the curve came out
   heavier on some sides), so there the plain outline is a full 1px line at half strength, which reads just as
   light; the gold ring is a steady 1px. High-resolution screens (phones, Retina) keep the true hairline that
   thickens as the gold draws. */
.btn-outreach::after { padding: 1px; opacity: .5; }

@media (min-resolution: 2dppx) {
  .btn-outreach::after { padding: .5px; opacity: 1; }
  .btn-outreach::before { padding: .5px; }
  .btn-outreach.gilded::before { padding: 1px; }
}
/* Hero "Youth Outreach" before the gold: the same border as the other outline buttons (e.g. "See the gallery"),
   a plain 1px line in the theme's line colour; the gold ring (1px) draws over it on scroll and undraws on the way
   back. (Replaces the hairline / white / sky-blue outline.) */
.btn-outreach, :root[data-theme="dark"] .btn-outreach { border-color: var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-outreach { border-color: var(--line); } }
.btn-outreach::after { content: none; }
.btn-outreach::before, .btn-outreach.gilded::before { padding: 1px; }
@media (min-resolution: 2dppx) { .btn-outreach::before, .btn-outreach.gilded::before { padding: 1px; } }
/* Ministries: only International Youth Outreach links anywhere; the other six tiles are plain (no link, no arrow,
   no hover zoom or brightening) */
div.tile:hover img { transform: none; filter: var(--cine-grade); }
/* iPhone Safari left traces of the open book behind the closed one (3D layers it keeps painting after the flip).
   Once the book has fully closed (cover waits .45s, then swings for .8s), the parts that belong to the open book
   are switched off; they come back the instant it starts to open, so the animation itself is unchanged.
   The inside of the cover faces away while closed, so hiding it is safe everywhere. The right-hand page is hidden
   only on touch screens, because on a mouse screen hovering the menu button peeks the cover open onto it. */
.nav:not(.scrolled) .book-cover .inside { visibility: hidden; }
.nav.scrolled .book-cover .inside { visibility: visible; transition: visibility 0s; }
@media (hover: none) {
  .nav:not(.scrolled) .book-page { visibility: hidden; }
  .nav.scrolled .book-page { visibility: visible; transition: clip-path .35s var(--menu-ease) .45s, visibility 0s; }
}
/* after the sweep: a real 1px gold border (drawn evenly on the curves) replaces the masked ring */
:root .btn.btn-outreach.gold-done { border-color: var(--accent); }
.btn-outreach.gold-done::before { visibility: hidden; }
/* iPhone book traces, faster: when the book starts to close, the bits of the open book that stick out past the
   closed cover (ribbon, page edges) tuck away at once instead of animating (Safari did not redraw that clip
   animation cleanly), the ribbon is hidden straight away, and the inside of the cover is switched off as soon
   as it has turned away (about .8s into the close) rather than after the whole swing. */
.nav:not(.scrolled) .book-page { transition: none; }
.nav:not(.scrolled) .bk-ribbon { visibility: hidden; }
.nav:not(.scrolled) .book-cover .inside { transition: visibility 0s linear .8s; }
@media (hover: none) {
  .nav:not(.scrolled) .book-page { transition: visibility 0s linear 1.25s; }
}
/* Header Outreach pill on its gold fill (hover / focus / current page, before the header turns blue): white text */
.nav:not(.scrolled) .nav-links .nav-outreach a:hover, .nav:not(.scrolled) .nav-links .nav-outreach a:focus-visible,
.nav:not(.scrolled) .nav-links .nav-outreach a[aria-current],
.nav:not(.scrolled) .nav-quick-outreach:hover, .nav:not(.scrolled) .nav-quick-outreach:focus-visible,
.nav:not(.scrolled) .nav-quick-outreach[aria-current] { color: #fff; }
/* ...and on the blue header too: the darker gold fill with white text */
.nav.scrolled .nav-links .nav-outreach a:hover, .nav.scrolled .nav-links .nav-outreach a:focus-visible,
.nav.scrolled .nav-links .nav-outreach a[aria-current],
.nav.scrolled .nav-quick-outreach:hover, .nav.scrolled .nav-quick-outreach:focus-visible,
.nav.scrolled .nav-quick-outreach[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Back to top: the ring in the deeper gold (replaces the light ring) */

.to-top i { translate: 0 1px; }   

/* Event cards: "Join via Zoom" (every event except in-person-only ones such as the fellowship meal) */
.event-zoom { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14.5px; font-weight: 500;
  color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 1px; -webkit-tap-highlight-color: transparent; transition: border-color .25s, color .25s; }
.event-zoom i { font-size: 17px; }
.event-zoom:focus-visible, .event-zoom:active { border-bottom-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .event-zoom:hover { border-bottom-color: var(--accent); } }

/* Hero meeting card: the Zoom line. On the day: "You can join via Zoom"; once it has started: a blinking camera
   and "Join now on Zoom". */
.next-zoom { align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 500;
  color: var(--accent-text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.next-zoom[hidden] { display: none; }
.next-zoom i { font-size: 16px; }
.next-zoom:focus-visible, .next-zoom:active { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .next-zoom:hover { text-decoration: underline; text-underline-offset: 3px; } }
.next-zoom.is-live i { color: #d64545; font-size: 18px; animation: zoomBlink 1.1s ease-in-out infinite; }
@keyframes zoomBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .next-zoom.is-live i { animation: none; } }
.next-zoom { display: flex; width: fit-content; }   
/* the Burden video pauses while pressed on touch screens: no iPhone long-press menu or text selection on it */
.burden-video, .burden-art .blob { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Service-times band, tablets and small desktops: the four meetings in an even 2 x 2 grid (one divider down the
   middle, one across), and the address as a centred full-width row underneath */
@media (min-width: 600px) and (max-width: 1080px) {
  .band-grid { grid-template-columns: 1fr 1fr; }
  .band-item, .band-item:first-child, .band-item:nth-child(3), .band-item:nth-child(4) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); padding: 26px 28px; }
  .band-item:nth-child(-n+2) { border-top: 0; }
  .band-item:nth-child(odd) { padding-left: 0; }
  .band-item:nth-child(2), .band-item:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, .1); }
  .band-item:nth-child(5) { grid-column: 1 / -1; justify-content: center; padding-left: 0; padding-right: 0; }
}

/* 600-720px (foldables held upright): the footer's two columns are narrow, so meeting names may wrap there */
@media (min-width: 600px) and (max-width: 719.98px) { .gather-list .g-name { white-space: normal; } }
@media (min-width: 600px) and (max-width: 719.98px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 32px; }
}
/* Outreach pill on the blue header: white text and arrow, light-gold outline (hover / current page keep the gold fill) */
.nav.scrolled .nav-links .nav-outreach a, .nav.scrolled .nav-quick-outreach { color: #fff; }
/* Menu button: white hamburger lines (and the white X when the menu is open) */
.nav .menu-btn .burger span { background: #fff; }
/* Open book: the menu button sits on the optical centre of the pages. The pages curl up above the blue cover
   (the page art runs 32.5-362.5 in the SVG's 62.5-382.5 box), so their centre is 7.8% of the book's height
   above the box centre: about 4.9px on desktop, 4.4px on phones. */
.nav.scrolled .menu-btn { transform: translate(calc(4px - var(--book-w) / 2), calc(var(--book-h) * -.078)); }
/* Theme toggle: book closed = gold ring around the sun/moon; book open (blue header) = gold sun/moon in a white
   ring (the light gold, which reads on the blue) */
.nav #themeBtn { border-color: var(--accent); }
.nav.scrolled #themeBtn { border-color: var(--on-blue); color: var(--gold-on-blue); }

/* Outreach closing CTA: the bridge photo under a blue duotone (multiply turns the white sky into brand blue and keeps the
   cables and tower dark); a left-to-right shade keeps the heading readable, the tower stands in the gap between text and buttons */
.cta-band.cta-bridge { position: relative; isolation: isolate; overflow: hidden; background: var(--blue-deep); color: var(--on-blue); padding-block: clamp(88px, 11vw, 140px); }
.cta-bridge .cta-bg { position: absolute; inset: 0; z-index: -2; display: block; }
.cta-bridge .cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; mix-blend-mode: multiply; opacity: .85; filter: contrast(1.15); }
.cta-bridge::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 36, 58, .9) 0%, rgba(6, 36, 58, .6) 48%, rgba(6, 36, 58, .75) 100%); }
.cta-bridge .cta-bg { background: var(--blue); }
.cta-bridge .cta-inner h2 { color: var(--on-blue); }
.cta-bridge .cta-inner p { color: var(--on-blue-muted, #c3dbee); }
@media (max-width: 899.98px) {
  .cta-bridge::before { background: linear-gradient(180deg, rgba(6, 36, 58, .88) 0%, rgba(6, 36, 58, .7) 60%, rgba(6, 36, 58, .84) 100%); }
}

/* Testimony photo ring: a real element (not the outline) so it can widen and draw back smoothly with a transform,
   timed by the rotator in site.js. The photo no longer clips, so the image and its grain layer are rounded instead. */
.testi-photo { overflow: visible; outline: 0; }
.testi-photo img, .testi-photo::after { border-radius: 50%; }
.testi-ring { position: absolute; inset: -11px; z-index: 1; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; will-change: transform; }
/* phones: the photo sits on the 16px gutter, so nudge it in to leave room for the ring at its widest */
@media (max-width: 599.98px) { .testi-photo { margin-left: 12px; } }
/* the testimony photo stays still (only the ring moves), so drop its generic transform transition; the outgoing
   photo is a copy laid over it while it dissolves */
.testi-photo img { transition: filter .9s var(--ease); }
.testi-photo .testi-ghost { position: absolute; inset: 0; pointer-events: none; }
/* the photo zooms inside a round frame (the ring stays outside it, so the gap between them still opens up) */
.testi-frame { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; }
/* Testimony photos: most keep the site's usual grade; the ones marked data-tone in youth-outreach.html get a tinted
   duotone (navy shadows to warm cream highlights, shadows and faces lifted first so darker skin stays readable, reds and
   greens kept). A very dark original (data-tone="dim") gets a little more light. The filter is inline in that page. */
.testi-photo .testi-frame img { filter: var(--cine-grade); }
.testi-photo .testi-frame img.is-toned { filter: url(#testi-tone); }
.testi-photo .testi-frame img.is-dim { filter: url(#testi-tone) brightness(1.18) contrast(1.06); }
.testi-photo::after { background: var(--cine-grain), radial-gradient(ellipse 85% 80% at 50% 45%, rgba(4, 14, 24, 0) 62%, rgba(4, 14, 24, .2) 100%); }

/* Privacy notice: a narrow, readable column */
.legal-hero { padding-bottom: 40px; }
.legal-hero .lead { max-width: 60ch; margin-bottom: 14px; }
.legal-date { font-size: 14px; color: var(--muted); }
.legal { padding: 0 0 110px; }
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(23px, 2.3vw, 29px); margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); line-height: 1.7; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 1.2em; margin: 0 0 12px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-text); text-underline-offset: 3px; }
.prose a i { font-size: .85em; }

/* Error pages (400-500): the hero's cloud-shaped photo with the error number set behind it. The digits are spaced
   so the middle one sits behind the cloud and the outer two stand clear on either side. */
.nf .page-hero-grid { align-items: center; }
.nf-links { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.nf-links a { color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.nf-links a i { transition: transform .3s var(--ease); }
@media (hover: hover) { .nf-links a:hover i { transform: translateX(3px); } }
.nf-art { position: relative; isolation: isolate; justify-self: center; width: min(100%, 272px); }
.nf-art .blob { aspect-ratio: .8 / 1; background: #e7e2dc; clip-path: url(#nfCloud); }
.nf-art .blob img { object-position: 50% 50%; }
.nf-code { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; font-family: "Marcellus", serif;
  font-size: clamp(120px, 14vw, 200px); line-height: 1; letter-spacing: .5em; padding-left: .5em; color: var(--nf-digit); white-space: nowrap; }
@media (max-width: 899.98px) { .nf-art { width: 170px; margin-top: 32px; } .nf-code { font-size: 110px; letter-spacing: .62em; padding-left: .62em; } }
.form-note { font-size: 14px; color: var(--muted); }
.form-note a { color: var(--accent-text); text-underline-offset: 3px; }
.lead-links a { color: var(--accent-text); text-underline-offset: 3px; }
/* Error-page digits: navy on the light theme, white on the dark theme */
:root { --nf-digit: #0b3b5c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nf-digit: #fff; } }
:root[data-theme="dark"] { --nf-digit: #fff; }
/* Footer bottom line: the privacy link sits with the copyright, set apart by a small gold dot; the credit stays on the right */
.foot-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.foot-legal a::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-on-blue); opacity: .7; margin: 0 14px; vertical-align: middle; }
/* Approved church badge (2026-09-28): the round emblem in the header, the full badge in the footer */
.brand-mark { border-radius: 50%; }
.foot-logo img { width: 180px; }
@media (max-width: 599.98px) { .foot-logo img { width: 160px; } }

/* Hero (2026-09-29): the carved archway view photo fills the cloud edge to edge, so the old black-photo
   positioning (narrow strip, side fades, black backing) no longer applies */
.hero-art .blob { background: #e7e2dc; }
.hero-art .blob img { object-position: 50% 50%; }
@media (min-width: 901px) {
  .hero-art .blob img { translate: none; aspect-ratio: auto; object-fit: cover;
    -webkit-mask-image: none; mask-image: none; }
}

/* Light gold for the ring and caret: brighter and more saturated than --gold-on-blue, at full strength. */
.to-top { --to-top-gold: #ffd23a; }
.to-top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--to-top-gold); box-shadow: none; transition: opacity .3s var(--menu-ease), transform .3s var(--menu-ease), color .25s; }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; pointer-events: none; }
.to-top-ring circle { fill: none; stroke-width: 2.5; }
.to-top-ring .track { stroke: #9c5f16; opacity: .7; }   /* dim deep bronze, so the bright fill stands out */
.to-top-ring .fill { stroke: var(--to-top-gold); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .12s linear; }
.to-top i { position: relative; }
.to-top:focus-visible, .to-top:active { background: transparent; color: var(--accent); }
.to-top:focus-visible { outline: 2px solid var(--to-top-gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { background: transparent; color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .to-top-ring .fill { transition: none; } }
/* The cloud stretches toward the pointer (up to ~12% wider and ~18% taller, plus a small lean) while the photo
   inside holds still, so the photo is oversized with spare picture on every side and the cloud never runs
   past its edges */
@media (min-width: 901px) {
  .hero-art .blob img { top: -14%; left: -11%; width: 122%; height: 128%; max-width: none; }
}

/* Give: the two verses between the lead and the ways to give */
.give-verses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: -8px 0 32px; }
.give-verses figure { margin: 0; padding-left: 18px; border-left: 2px solid var(--gold-on-blue); }
.give-verses blockquote { margin: 0; font-family: "Marcellus", serif; font-size: 19px; line-height: 1.4; color: var(--on-blue); }
.give-verses figcaption { margin-top: 8px; color: var(--gold-on-blue); font-size: 13.5px; letter-spacing: .06em; }
@media (max-width: 600px) { .give-verses { grid-template-columns: 1fr; } }

/* Events: photos are black and white except on the next event (the gold-bordered first card) and any event that is
   on, which show their photo in colour */
.event:not(.is-lit) .event-img img { filter: grayscale(1) contrast(1.06) brightness(.97); }
/* ...and the gold-bordered card's colour fades in from black and white when the row comes into view (and again
   whenever the gold border moves to the next event) */
.events.reveal:not(.is-in) .event.is-lit .event-img img { filter: grayscale(1) contrast(1.07) saturate(.86) brightness(.97); }
.events.is-in .event.is-lit .event-img img { animation: eventLit 1.6s .35s var(--ease) both; }
@keyframes eventLit {
  from { filter: grayscale(1) contrast(1.07) saturate(.86) brightness(.97); }
  to   { filter: grayscale(0) contrast(1.07) saturate(.86) brightness(.97); }
}
@media (prefers-reduced-motion: reduce) { .events.is-in .event.is-lit .event-img img { animation: none; } }
/* Give: the gift photo is shown whole, as a plain portrait photo with rounded corners, a thin gold edge and a soft
   shadow */
.give-photo { width: min(100%, 420px); justify-self: center; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-on-blue) 45%, transparent), 0 30px 60px -20px rgba(2, 30, 52, .6); }
.give-photo img { display: block; width: 100%; height: auto; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.give-photo.is-in img { transform: scale(1); }
@media (max-width: 899.98px) { .give-photo { width: min(100%, 380px); } }
/* Service times band: a time never splits across lines; when it does not fit beside the day it drops to the next line whole */
.band-item .band-time { white-space: nowrap; }