/* ═══════════════════════════════════════════════════════════
   Rev. Dr. Josephine Mutuota — concept page
   Design tokens transcribed from the brand system board.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 04 — Colour palette */
  --purple:      #4B2E83;   /* brand swatch */
  --purple-deep: #40316A;   /* applied: nameplate, hero buttons */
  --purple-dark: #281E53;   /* applied: hero headline */
  --purple-soft: #6B4FA8;
  --navy:        #0F1B3D;
  --cream:       #F5F0E6;
  --cream-deep:  #EFE7D6;
  --white:       #FEFCF7;
  --gold:        #D4AF37;   /* brand swatch */
  --gold-deep:   #B4843E;   /* applied: gold type + fills */
  --gold-text:   #7C5A29;   /* AA gold for small type. Was #85622E, which
                              measured 4.51 on --cream-deep — passing by 0.01,
                              and 4.43 on the painted foot of the .band--cream
                              gradient. This clears 5.0 on every cream. */
  --gold-rule:   #CCA278;   /* applied: hairline rules */
  --gold-pale:   #D2BA96;   /* applied: gilded corner band */

  --ink:         #2B2440;
  --ink-dark:    #221E30;
  --ink-soft:    #5C5470;
  --rule:        rgba(75,46,131,.14);

  /* 05 — Typography */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --shell: 1400px;
  --gutter: calc((100vw - min(100vw - var(--pad) * 2, var(--shell))) / 2);
  --pad: clamp(1.25rem, 3.5vw, 3.25rem);
  --r: 10px;
  --shadow: 0 18px 46px -26px rgba(15,27,61,.42);
  --ease: cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
/* picture() wraps images that have a WebP twin; display:contents keeps the
   wrapper out of layout so every `.thing img` rule below still applies.
   The <source> must then be hidden explicitly: with the wrapper's box gone
   it becomes a flex item of its own and collects the container's gap. */
picture{ display:contents; }
picture > source{ display:none; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
button,input{ font:inherit; color:inherit; }
svg{ width:1em; height:1em; fill:currentColor; flex:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only,.skip:not(:focus){
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{ position:fixed; z-index:200; top:12px; left:12px; background:var(--purple);
  color:#fff; padding:.7rem 1.1rem; border-radius:6px; font-size:.8rem; }
/* The focus ring has to stand out against whatever it lands on. Gold reaches
   only 1.7–2.1 against the creams, which is most of the site, so light
   surfaces take purple and the purple surfaces take gold. Both clear 3:1. */
:focus-visible{ outline:2px solid var(--focus,var(--purple)); outline-offset:3px; border-radius:4px; }
.hero,.phero,.band--purple,.site-foot{ --focus:var(--gold); }

.shell{ width:min(100% - (var(--pad) * 2), var(--shell)); margin-inline:auto; }

/* ── Shared type ─────────────────────────────────────────── */
.eyebrow{
  font-size:.66rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:.85rem;
}
.h2{
  font-family:var(--serif); font-weight:600; color:var(--purple);
  font-size:clamp(1.65rem, 2.1vw, 2.15rem); line-height:1.18; letter-spacing:-.005em;
}
.h2--sm{ font-size:clamp(1.4rem, 1.65vw, 1.72rem); }
.prose{ font-size:.86rem; line-height:1.95; color:var(--ink-soft); max-width:46ch; }
.prose + .prose{ margin-top:.9rem; }

/* Ornament: gold rule(s) + dove — the brand's recurring divider */
.ornament{ display:flex; align-items:center; gap:.85rem; margin:1.15rem 0 1.35rem; }
.ornament__rule{ height:1px; background:linear-gradient(90deg,transparent,var(--gold-rule),transparent); flex:1 1 auto; }
.ornament--left .ornament__rule{ flex:0 0 68px; background:var(--gold); }
.ornament--left{ justify-content:flex-start; }
.ornament--wide{ max-width:380px; }
.ornament--wide .ornament__dove{ width:30px; height:29px; }
.ornament__dove{ width:22px; height:21px; color:var(--purple); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  --bg:var(--purple); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.8rem clamp(1rem,1.05vw,1.25rem); border-radius:10px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(15,27,61,.5); }
.btn:active{ transform:translateY(0); }
.btn__ico{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:#fff; color:var(--bg); margin-left:-.5rem; font-size:15px;
}
.btn__gly{ font-size:16px; }
.btn__gly--end{ font-size:12px; margin-left:.15rem; }
.btn--purple{ --bg:var(--purple-deep); box-shadow:0 6px 16px -8px rgba(40,30,83,.65); }
.btn--gold{ --fg:var(--purple-dark); border-radius:var(--r); padding:.85rem 1.6rem;
  background:linear-gradient(180deg,#D4AF37,#C49C2C); }
.btn--gold:hover{ background:linear-gradient(180deg,#C49C2C,#B08A26); }
.btn--outline{
  background:var(--white); color:var(--gold-text); border-color:var(--gold-rule);
  border-radius:10px; padding:.8rem 1.35rem;
}
.btn--outline:hover{ background:var(--purple-deep); border-color:var(--purple-deep); color:#fff; }
.btn--sm{ font-size:.6rem; padding:.66rem 1.1rem; }
/* Outline variant for the purple bands — cream on purple, no third colour */
.btn--on-purple{ background:transparent; color:var(--cream); border-color:rgba(212,175,55,.55); }
.btn--on-purple:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }

.link-more{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-end;
  font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--purple); padding-bottom:.28rem; border-bottom:1px solid var(--gold);
  transition:gap .25s var(--ease), color .2s;
}
.link-more svg{ font-size:11px; }
.link-more:hover{ gap:.8rem; color:var(--gold-text); }
.link-more--gold{ border-bottom:0; color:var(--purple); align-self:flex-start; }

/* ═══════════ HEADER ═══════════ */
.site-head{
  position:sticky; top:0; z-index:80;
  background:var(--cream); border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s, background .3s;
}
.site-head.is-stuck{ background:rgba(40,30,83,.95); backdrop-filter:blur(12px);
  border-bottom-color:var(--gold-rule); box-shadow:0 10px 30px -24px rgba(15,27,61,.7); }
.site-head.is-stuck .brand__name{ color:var(--cream); }
.site-head.is-stuck .nav__link{ color:rgba(245,240,230,.86); }
.site-head.is-stuck .nav__link:hover,
.site-head.is-stuck .nav__link.is-active{ color:#fff; }
.site-head.is-stuck .nav__link::after{ background:var(--gold); }
.site-head.is-stuck .nav__social a{ color:rgba(245,240,230,.8); }
.site-head.is-stuck .nav__social a:hover{ color:var(--gold); }
.site-head.is-stuck .burger{ color:var(--cream); }
.head__inner{ display:flex; align-items:center; gap:1.5rem; padding:.85rem 0; }

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand__mark{ width:auto; height:52px; }
.brand__type{ display:block; line-height:1; }
/* .brand__pre — the italic "Rev. Dr." above the name — was removed on
   22 September 2026 with the new mark; the lockup is her name and nothing
   else. SITE_NAME still carries the honorific everywhere it belongs: the
   link's accessible name, the tab, the footer's copyright line, the Person
   node. */
.brand__name{
  display:block; font-family:var(--serif); font-weight:600; font-size:1.05rem;
  color:var(--purple); line-height:1.12; letter-spacing:-.01em;
}

.nav{ display:flex; align-items:center; gap:1.5rem; margin-inline:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(.8rem,1.5vw,1.5rem); }
.nav__link{
  position:relative; padding:.3rem 0; transition:color .2s;
  font-family:var(--serif); font-weight:400; font-size:.98rem; color:var(--ink-dark);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--purple); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover{ color:var(--purple); }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--purple-dark); }
/* Facebook and YouTube sit where the Donate button used to */
.nav__social{ display:flex; align-items:center; gap:.55rem; flex:none; }
.nav__social a{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:var(--purple); border:1px solid var(--rule); font-size:15px;
  transition:color .2s, border-color .2s, background .2s, transform .25s var(--ease);
}
.nav__social a:hover{ color:#fff; background:var(--purple); border-color:var(--purple); transform:translateY(-2px); }
.burger{ display:none; background:none; border:0; color:var(--purple); font-size:26px;
  padding:.3rem; cursor:pointer; line-height:0; }
.burger__close{ display:none; }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 90% at 8% 18%, #FFFDF8 0%, rgba(255,253,248,0) 62%),
    linear-gradient(122deg, var(--cream) 0%, var(--cream) 40%, #F6EEDC 58%, #F0E2C6 100%);
}
.hero__grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:center;
  min-height:clamp(480px,74vh,660px); padding-block:clamp(2.5rem,5vw,4rem) 5.5rem;
}
.hero__copy{ padding:0 .5rem 0 clamp(0px,2.2vw,34px); text-align:center; }
.hero__copy .ornament,.hero__sub{ margin-inline:auto; }
.hero__cta{ justify-content:center; }
.hero__title{ font-family:var(--serif); font-weight:600; line-height:1.05; letter-spacing:-.012em; }
.hero__line1{ display:block; font-size:clamp(2.4rem,4.9vw,4.35rem); color:var(--purple-dark); }
.hero__sub{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.6; color:var(--ink-dark);
  max-width:36ch; margin-bottom:1.9rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.65rem; }

.hero__media{
  position:relative; align-self:stretch; min-height:clamp(360px,60vh,600px);
  margin-right:calc(var(--gutter) * -1);
  margin-block:calc(clamp(2.5rem,5vw,4rem) * -1) -5.5rem;
}
.hero__photo{ position:absolute; inset:0; overflow:hidden; }
.hero__photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:52% 22%;
  filter:sepia(.46) saturate(1.28) contrast(1.04) brightness(1.05) hue-rotate(-6deg);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 7%, rgba(0,0,0,.17) 13%, rgba(0,0,0,.38) 19%, rgba(0,0,0,.63) 25%, rgba(0,0,0,.85) 31%, rgba(0,0,0,.96) 37%, #000 44%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 7%, rgba(0,0,0,.17) 13%, rgba(0,0,0,.38) 19%, rgba(0,0,0,.63) 25%, rgba(0,0,0,.85) 31%, rgba(0,0,0,.96) 37%, #000 44%);
}
.hero__grade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(245,240,230,0) 40%, rgba(212,175,55,.10) 66%, rgba(75,46,131,.14) 100%);
}

.hero__base{
  position:absolute; left:0; bottom:0; z-index:2; pointer-events:none; line-height:0;
  width:clamp(190px,32%,540px); height:clamp(200px,52%,470px);
}
.hero__corner{ display:block; width:100%; height:100%; }
.hero__ghost{
  position:absolute; left:2%; top:34%; z-index:1; pointer-events:none;
  width:min(30vw,360px); height:auto; aspect-ratio:32/31;
  color:rgba(120,96,52,.05);
}
.hero__watermark{
  position:absolute; left:clamp(.9rem,3.2vw,2.9rem); bottom:clamp(.9rem,3vh,2.4rem);
  width:clamp(54px,6.6vw,88px); height:auto; opacity:.16;
}
.hero__plate{
  position:absolute; right:0; bottom:0; z-index:4; color:#fff;
  background:linear-gradient(158deg,#4A3A78 0%, var(--purple-deep) 45%, #382B5E 100%);
  border-radius:20px 0 0 0;
  box-shadow:0 0 0 1px rgba(212,175,55,.42) inset,
             1px 1px 0 1px rgba(235,216,180,.28),
             -20px -16px 46px -28px rgba(20,12,45,.85);
  padding:1.4rem clamp(1.5rem,3.5vw,3.5rem) 1.45rem clamp(2.4rem,5.5vw,5.5rem);
  text-align:right;
}
.hero__plate-name{ font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.3rem); font-weight:500;
  line-height:1.25; letter-spacing:.012em; }
.hero__plate-alt{
  font-family:var(--serif); font-style:italic; color:#DCB463;
  font-size:clamp(.95rem,1.28vw,1.2rem); line-height:1.4; margin-top:.15rem;
}
.hero__plate-alt span{ opacity:.7; }

/* ═══════════ HOME HERO CAROUSEL ═══════════
   Replaced the single portrait on 20 September 2026. The slides are stacked
   in the same box the portrait used, so every .hero__photo rule above — the
   sepia grade, the mask that fades the left edge into the cream, the mobile
   overrides — still applies to each one without being written twice.

   Crossfade only: nothing slides horizontally, because the masked left edge
   has no hard boundary to slide against and a translate would drag the fade
   across the headline. Opacity is also the one property that stays cheap on
   the phones this audience is on.

   Without JavaScript the first slide is the only one with .is-on and the
   control bar carries `hidden`, so the hero is exactly the still photograph
   it was — no dead arrows, no stack of four images piled up.
   ═══════════════════════════════════════════ */
.hero-car{
  --car-x: clamp(.9rem, 2.6vw, 2.1rem);   /* inset from the photo's right edge */
  --car-y: clamp(.9rem, 3vh, 1.9rem);     /* and from its top */
}
.hero-car__slide{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity .7s var(--ease);
}
.hero-car__slide.is-on{ opacity:1; }
/* `inert` already blocks the caption link on a hidden slide in current
   browsers. This is the same promise for the ones that do not support it —
   an invisible slide must never be clickable. */
.hero-car__slide:not(.is-on){ pointer-events:none; }

/* Slides carry no z-index: while they are transparent the paint order does
   not show, and leaving it alone keeps .hero__grade and the controls — both
   later siblings — on top without a stacking argument. */
.hero-car .hero__grade{ z-index:2; }

/* Images may crossfade over each other — two photographs blending is the
   effect. Two captions blending is just unreadable, so the label leaves
   quickly and the next one waits until the blend is mostly done before it
   arrives. Nothing is ever legible in both places at once. */
.hero-car__cap{
  position:absolute; right:var(--car-x); top:calc(var(--car-y) + 2.85rem);
  z-index:3; max-width:min(18rem, 62%); text-align:right;
  opacity:0; transition:opacity .18s linear;
}
.hero-car__slide.is-on .hero-car__cap{
  opacity:1; transition:opacity .3s var(--ease) .4s;
}
.hero-car__cap a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.44rem .9rem; border-radius:999px;
  background:rgba(40,30,83,.82); color:var(--cream);
  border:1px solid rgba(212,175,55,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.3; transition:background .25s, color .25s, transform .25s var(--ease);
}
.hero-car__cap a svg{ width:13px; height:13px; color:var(--gold); flex:none; transition:color .25s; }
.hero-car__cap a:hover,.hero-car__cap a:focus-visible{
  background:var(--gold); color:var(--purple-dark); transform:translateY(-1px);
}
.hero-car__cap a:hover svg,.hero-car__cap a:focus-visible svg{ color:var(--purple-dark); }

.hero-car__ui{
  position:absolute; right:var(--car-x); top:var(--car-y); z-index:4;
  display:flex; align-items:center; gap:.2rem;
  padding:.26rem .36rem; border-radius:999px;
  background:rgba(40,30,83,.6); border:1px solid rgba(212,175,55,.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero-car__ui[hidden]{ display:none; }

.hero-car__btn{
  width:27px; height:27px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--cream-deep); cursor:pointer;
  display:grid; place-items:center; transition:background .22s, color .22s;
}
.hero-car__btn svg{ width:14px; height:14px; }
.hero-car__btn--prev svg{ transform:rotate(180deg); }
.hero-car__btn:hover,.hero-car__btn:focus-visible{ background:var(--gold); color:var(--purple-dark); }

/* One button, two glyphs: the bar shows what pressing it will do. */
.hero-car__gly--play{ display:none; }
.hero-car.is-paused .hero-car__gly--pause{ display:none; }
.hero-car.is-paused .hero-car__gly--play{ display:block; }

.hero-car__dots{ display:flex; align-items:center; gap:.1rem; margin:0 .18rem; }
.hero-car__dot{
  position:relative; width:18px; height:24px;   /* a 7px dot needs a thumb-sized target */
  padding:0; border:0; background:none; cursor:pointer;
}
.hero-car__dot::before{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:7px; height:7px; border-radius:999px; background:rgba(239,231,214,.45);
  transition:width .3s var(--ease), background .25s;
}
.hero-car__dot.is-on::before{ width:15px; background:var(--gold); }
.hero-car__dot:hover::before{ background:var(--cream); }
.hero-car__dot.is-on:hover::before{ background:var(--gold); }

/* ═══════════ EVENTS ═══════════
   A calendar leaf beside each entry: month, day, weekday. It is aria-hidden
   because the full date is written out in the line below it, and a screen
   reader should hear "Sunday 11 October 2026" once, not "OCT 11 SUN" first. */
.ev-list{ display:grid; gap:1.1rem; }
.ev{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1rem,2.5vw,1.75rem);
  padding:clamp(1.2rem,2.4vw,1.75rem);
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow);
}
.ev__date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:5.1rem; padding:.75rem .6rem; border-radius:var(--r);
  background:linear-gradient(158deg,#4A3A78 0%, var(--purple-deep) 60%, #382B5E 100%);
  color:#fff; box-shadow:0 0 0 1px rgba(212,175,55,.35) inset; align-self:start;
}
.ev__mon{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#DCB463; }
.ev__day{ font-family:var(--serif); font-size:2.1rem; line-height:1.05; font-weight:600; }
.ev__dow{ font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; opacity:.75; }

.ev__flags{ margin-bottom:.5rem; }
.ev__tag{
  display:inline-block; padding:.26rem .62rem; border-radius:999px;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(75,46,131,.1); color:var(--purple); border:1px solid rgba(75,46,131,.2);
}
.ev__tag--hold{ background:rgba(180,132,62,.13); color:var(--gold-text); border-color:rgba(180,132,62,.3); }
.ev__tag--off{ background:rgba(120,40,40,.1); color:#8A2F2F; border-color:rgba(138,47,47,.28); }

.ev__h{ font-family:var(--serif); font-size:clamp(1.2rem,2.1vw,1.5rem); font-weight:600;
  color:var(--purple-dark); line-height:1.25; margin-bottom:.55rem; }
.ev__when,.ev__where{
  display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-soft);
  margin-bottom:.3rem;
}
.ev__when svg,.ev__where svg{ width:15px; height:15px; color:var(--gold-text); flex:none; }
.ev__p{ font-size:.9rem; line-height:1.75; color:var(--ink); margin-top:.7rem; max-width:62ch; }
.ev__update{
  margin-top:.85rem; padding:.7rem .9rem; border-radius:var(--r);
  background:rgba(180,132,62,.09); border-left:3px solid var(--gold-rule);
  font-size:.84rem; line-height:1.7; color:var(--ink);
}
.ev__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:1.1rem; }

/* An event with a photograph gives it a third column. Shown whole rather than
   cropped to a shape, because it is as often a poster as a photograph. */
.ev--photo{ grid-template-columns:auto minmax(0,1fr) minmax(0,15rem); }
.ev__img{ display:block; align-self:start; }
.ev__img img{ display:block; width:100%; height:auto; max-height:22rem; object-fit:contain;
  border-radius:var(--r); border:1px solid var(--rule); background:var(--white); }

/* A cancelled date stays on the page so nobody turns up, but it should not
   read as an invitation. */
.ev--cancelled{ opacity:.78; }
.ev--cancelled .ev__date{ filter:grayscale(.55); }
.ev--cancelled .ev__h{ text-decoration:line-through; text-decoration-thickness:1px; }

.ev-past{ display:grid; gap:.1rem; }
.ev-past__item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding:.72rem 0; border-bottom:1px solid rgba(212,175,55,.16);
  color:rgba(245,240,230,.9); font-size:.86rem;
}
.ev-past__item:last-child{ border-bottom:0; }
.ev-past__date{
  min-width:6.5rem; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold);
}
.ev-past__h{ font-family:var(--serif); font-size:1rem; }
.ev-past__where{ color:rgba(245,240,230,.6); font-size:.78rem; }

.empty--inline .h2{ margin-bottom:.2rem; }

/* ═══════════ ARTICLE ═══════════
   One long read at /resources/<slug>. A single measured column — this is the
   only page on the site whose job is to be read straight through, so it gets
   a proper measure and nothing in the margins competing for attention. */
.art{ max-width:44rem; }
.art__date{
  font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:1.5rem;
}
.art__body{ margin-bottom:2.5rem; }
.art__p{
  font-size:1rem; line-height:1.85; color:var(--ink); margin-bottom:1.15rem;
  /* A measure of roughly 70 characters. The band is wider than this on a big
     screen and the column deliberately does not grow to fill it. */
  max-width:68ch;
}
.art__p:last-child{ margin-bottom:0; }
.art__h{
  font-family:var(--serif); font-weight:600; color:var(--purple-dark);
  font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.25;
  margin:2.4rem 0 .9rem; scroll-margin-top:calc(var(--head-h,76px) + 1rem);
}
.art__body > .art__h:first-child{ margin-top:0; }

.art__refs{
  padding-top:1.9rem; border-top:1px solid var(--rule);
}
.art__refs .art__h{ margin-top:0; font-size:1.05rem; }
.art__reflist{
  list-style:none; counter-reset:ref; margin:0; padding:0;
  font-size:.86rem; line-height:1.75; color:var(--ink-soft);
}
.art__reflist li{
  /* A hanging indent, which is what a reference list is for: the second line
     of an entry sits inside the first so the entries stay scannable. */
  padding-left:1.6rem; text-indent:-1.6rem; margin-bottom:.8rem;
}
.art__reflist li:last-child{ margin-bottom:0; }

.art__back{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--rule); }
.art__back-ico{ transform:rotate(180deg); }

/* The Resources card that links to one. */
.res--art .res__h a{ transition:color .2s; }
.res--art .res__h a:hover{ color:var(--gold-text); }

/* ═══════════ FLOATING WHATSAPP ═══════════
   A circle and the mark, nothing else — the word was dropped on 20 September
   2026 at the client's request. Losing the visible word costs nothing to a
   screen reader: the name has always come from aria-label on the link, which
   reads the number out too, and that is the accessible name whether or not
   anything is painted beside the icon.

   Below the sticky header (80) and the skip link (200), above everything that
   scrolls. The video player is a <dialog>, which sits in the top layer and is
   therefore over this regardless of the number. */
.wa-float{
  --wa-size: clamp(54px, 4.4vw, 62px);
  position:fixed; z-index:70;
  right:clamp(.9rem,2.5vw,1.75rem); bottom:clamp(.9rem,2.5vw,1.75rem);
  width:var(--wa-size); height:var(--wa-size);
  display:grid; place-items:center; border-radius:50%;
  /* Lit from the top left like the rest of the site's raised surfaces, rather
     than a flat fill — that is most of what makes it read as a button worth
     pressing at this size. */
  background:radial-gradient(118% 118% at 30% 18%, #1DA351 0%, #199447 52%, #14833F 100%);
  color:#fff;
  box-shadow:0 14px 28px -10px rgba(11,61,34,.6),
             0 3px 8px rgba(11,61,34,.28),
             inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s;
}
/* White glyph, and the gradient is picked so every stop clears 3:1 against it
   — measured, not eyeballed. This matters more than it did with a label: the
   icon is now the only thing carrying the meaning, so WCAG 1.4.11 applies to
   it rather than to text beside it.

       #1DA351  3.28   the lightest stop, the one that decides it
       #199447  3.91
       #14833F  4.83

   For comparison, WhatsApp's own #25D366 measures 1.98 and a brighter green
   gradient tried first measured 2.18 at its lightest point. Lighten these and
   the mark stops being legible against its own button. */
.wa-float__ico{ width:54%; height:54%; }

/* One ring, out and gone, three times when the page loads — enough to catch
   the eye on arrival without anything moving forever in the corner. It runs
   again on hover, so it stays alive to a cursor without being perpetual. */
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(29,163,81,.6); pointer-events:none;
  animation:wa-ring 2.6s cubic-bezier(0,0,.2,1) 3;
}
@keyframes wa-ring{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.75); opacity:0; }
  100% { transform:scale(1.75); opacity:0; }
}
.wa-float:hover,.wa-float:focus-visible{
  transform:translateY(-3px) scale(1.05); filter:saturate(1.08);
  box-shadow:0 20px 36px -12px rgba(11,61,34,.68),
             0 4px 10px rgba(11,61,34,.32),
             inset 0 1px 0 rgba(255,255,255,.45);
}
.wa-float:hover::before,.wa-float:focus-visible::before{
  animation:wa-ring 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.wa-float:active{ transform:translateY(-1px) scale(.99); }

/* The global reduced-motion rule squeezes every animation to 0.01ms, which
   would fire this ring as a flicker rather than not at all. */
@media (prefers-reduced-motion:reduce){
  .wa-float::before,
  .wa-float:hover::before,
  .wa-float:focus-visible::before{ animation:none; opacity:0; }
}

/* ═══════════ PAGE CHANGES ═══════════ */
/* A page change is a short crossfade rather than a white flash, which is
   most of what a slow-feeling site actually is. The header is named so it
   holds still while the page under it changes. Browsers without cross-document
   transitions navigate exactly as before. Left out under reduced motion
   entirely, rather than squeezed to 0.01ms by the rule at the end. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  .site-head{ view-transition-name:site-head; }
  ::view-transition-group(root){ animation-duration:.22s; }
}

/* Only for the navigation the prefetch did not beat: main.js adds .is-on
   200ms after a click, so a page that arrives sooner never shows it. It
   eases toward 85% and never claims to finish — the next page finishing is
   the finish. */
.nav-progress{
  position:fixed; top:0; left:0; right:0; z-index:200; height:3px;
  background:var(--gold); pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%; opacity:0;
}
.nav-progress.is-on{
  opacity:1; transform:scaleX(.85);
  transition:transform 8s cubic-bezier(.08,.7,.2,1), opacity .15s;
}

/* ═══════════ SMALL PIECES ═══════════ */
.res-thesis__meta{
  margin-top:.6rem; font-size:.68rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(245,240,230,.62);
}
.contact__hint{ color:var(--ink-soft); font-size:.92em; }
.social{ flex-wrap:wrap; }
.social__wa:hover{ background:#199447; border-color:#199447; }

/* ═══════════ BANDS ═══════════ */
.band{ position:relative; }
.band--split{ background:var(--white); padding-block:clamp(2.5rem,4.5vw,3.6rem); }
.split{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.75rem,3.5vw,3.25rem);
}
.split > .about{ padding-right:clamp(1.5rem,3vw,3rem); border-right:1px solid var(--rule); }

/* ── About ── */
.about{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.12fr); gap:clamp(1rem,2vw,1.6rem); align-items:center; }
.about__media{ display:grid; grid-template-columns:auto minmax(9.5rem,1fr); gap:clamp(.9rem,1.6vw,1.5rem); align-items:center; }
.arch{
  position:relative; width:clamp(128px,11.5vw,164px); aspect-ratio:3/4;
  border:1px solid var(--gold); border-radius:999px 999px var(--r) var(--r);
  padding:7px; background:var(--white);
}
.arch::after{
  content:""; position:absolute; inset:-11px -11px 12px -11px;
  border:1px solid rgba(212,175,55,.35); border-radius:999px 999px 4px 4px;
  border-bottom:0; pointer-events:none;
}
.arch img{ width:100%; height:100%; object-fit:cover; object-position:52% 18%;
  border-radius:999px 999px 5px 5px; }
.pullquote{ position:relative; }
.pullquote__mark{ font-size:26px; color:rgba(212,175,55,.5); margin-bottom:.35rem; width:1.35em; }
.pullquote p{
  font-family:var(--serif); font-size:clamp(.92rem,1.08vw,1.05rem); line-height:1.6; text-wrap:balance;
  color:var(--purple); font-weight:500;
}
.pullquote__dove{ width:20px; height:19px; color:var(--purple); opacity:.55; margin-top:.75rem; }

/* ── Sermons ── */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:1.5rem; }
/* The Bible Reflections badge beside the section heading — the programme's own
   mark, shown the same way on the home page and on /bible-reflections. */
.sec-head__id{ display:flex; align-items:center; gap:clamp(.85rem,1.6vw,1.15rem); min-width:0; }
.sec-head__id > picture{ flex:none; line-height:0; }
.rbadge{
  display:block; width:64px; height:64px; border-radius:var(--r);
  border:1px solid var(--gold-rule); box-shadow:0 10px 24px -16px rgba(15,27,61,.55);
}
@media (max-width:560px){ .rbadge{ width:56px; height:56px; } }
.sermon-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.75rem,1.3vw,1.05rem); }
.sermon{
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.sermon:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(212,175,55,.5); }
.sermon__thumb{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--purple); }
.sermon__thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 15%;
  /* mix-blend-mode has no interpolation, so it flips at the halfway point of
     the transition — while the wash above is at half opacity and hiding it. */
  mix-blend-mode:luminosity; opacity:.72;
  transition:transform .6s var(--ease), opacity .35s, mix-blend-mode .35s;
}
.sermon__thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(75,46,131,.92) 4%, rgba(75,46,131,.6) 44%, rgba(58,34,102,.2) 100%);
  transition:opacity .35s var(--ease);
}
/* Hovering hands the photograph back: the wash lifts and the image drops its
   blend, so a thumbnail that is decoration at rest becomes the real still.
   :focus-within because the thumbnail is a link — a keyboard reaches it too. */
.sermon:hover .sermon__thumb img,
.sermon:focus-within .sermon__thumb img{
  transform:scale(1.06); opacity:1; mix-blend-mode:normal;
}
.sermon:hover .sermon__thumb::after,
.sermon:focus-within .sermon__thumb::after{ opacity:0; }
.sermon__play{
  position:absolute; right:.75rem; bottom:.8rem; z-index:3;
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--purple); color:#fff; font-size:17px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6); transition:transform .3s var(--ease), background .25s;
}
.sermon:hover .sermon__play{ transform:scale(1.12); background:var(--purple-deep); }
.sermon__body{ padding:.9rem .95rem 1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.sermon__title{ font-size:.79rem; font-weight:600; color:var(--navy); line-height:1.35; }
.sermon__ref{ font-size:.7rem; color:var(--ink-soft); margin-bottom:.55rem; }
.sermon__body .link-more{ margin-top:auto; }

/* ═══════════ MINISTRY FOCUS ═══════════ */
.band--focus{ padding-block:clamp(2.6rem,4.6vw,3.8rem); overflow:hidden; }
.focus__watermark{
  position:absolute; right:-2%; top:-22%; width:min(24vw,290px); height:auto; aspect-ratio:1;
  color:rgba(212,175,55,.12); z-index:0; transform:rotate(16deg);
}
.focus{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,3fr); gap:clamp(1.5rem,3vw,3rem); align-items:center; }
.focus__intro .ornament{ margin-bottom:0; }
.pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.9rem); }
.pillar{ display:flex; gap:.9rem; align-items:flex-start; }
.pillar__ico{ font-size:32px; color:var(--gold-text); margin-top:2px; }
.pillar__label{
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--purple); margin-bottom:.4rem;
}
.pillar__copy{ font-size:.76rem; line-height:1.7; color:var(--ink-soft); max-width:22ch; }
.pillar__label a{ transition:color .2s; }
.band--purple .pillar__ico{ color:var(--gold); }
.band--purple .pillar__label{ color:var(--cream); }
.band--purple .pillar__label a:hover{ color:var(--gold); }
.band--purple .pillar__copy{ color:rgba(245,240,230,.7); }

/* ═══════════ FOOTER ═══════════ */
.site-foot{ background:var(--purple); color:rgba(255,255,255,.78); font-size:.78rem;
  padding-top:clamp(2.2rem,4vw,3rem); }
.foot__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  padding-bottom:clamp(1.5rem,2.5vw,2rem);
}
.foot__lockup{ display:flex; align-items:center; gap:.75rem; }
.foot__mark{ width:54px; height:54px; border-radius:12px; }
.site-foot .brand__name{ color:#fff; }
.foot__alt{
  font-family:var(--serif); font-style:italic; color:var(--gold);
  font-size:1rem; margin-top:.9rem; padding-top:.85rem;
  border-top:1px solid rgba(212,175,55,.35); max-width:19rem;
}
.foot__alt span{ opacity:.6; }
.foot__h{ font-size:.84rem; font-weight:600; color:#fff; margin-bottom:1rem; font-family:var(--serif); letter-spacing:.01em; }
.foot__links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1rem; grid-auto-flow:row; }
.foot__links a{ font-size:.74rem; transition:color .2s, padding-left .25s var(--ease); }
.foot__links a:hover{ color:var(--gold); padding-left:.2rem; }
.foot__copy{ font-size:.74rem; line-height:1.75; max-width:26ch; margin-bottom:1rem; }

.subscribe{ display:flex; max-width:19rem; border-radius:6px; overflow:hidden; flex-wrap:wrap; }
.subscribe input{
  flex:1 1 9rem; min-width:0; border:0; padding:.65rem .8rem; font-size:.74rem;
  background:var(--white); color:var(--navy);
}
.subscribe input::placeholder{ color:#9A93A8; }
.subscribe__btn{
  border:0; cursor:pointer; background:var(--gold); color:var(--purple-dark);
  font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.65rem 1rem; transition:background .2s;
}
.subscribe__btn:hover{ background:#C49C2C; }
.subscribe .form__note{ flex:1 0 100%; color:var(--gold); }

.social{ display:flex; gap:.6rem; margin-bottom:1.1rem; }
.social a{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.32); font-size:15px; color:#fff;
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.social a:hover{ background:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.contact li{ display:flex; align-items:center; gap:.6rem; font-size:.74rem; line-height:2.05; }
.contact svg{ font-size:13px; color:var(--gold); }
.contact a:hover{ color:var(--gold); }

.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16); padding-block:1rem 1.15rem;
  font-size:.7rem; color:rgba(255,255,255,.62);
}
.foot__credit{ display:flex; align-items:center; gap:.3rem; }
.foot__credit svg{ width:12px; height:12px; color:var(--gold); fill:currentColor; }
.foot__credit a{ color:rgba(255,255,255,.85); text-decoration:underline;
  text-decoration-color:rgba(212,175,55,.5); text-underline-offset:2px; }
.foot__credit a:hover{ color:var(--gold); }

/* ═══════════ MOTION ═══════════ */
/* Hidden only when .js says something is running that can show it again —
   see the inline script in head.php. Without that guard, JavaScript being
   off or main.js failing left every band on the site invisible. */
.js .reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
/* The failsafe head.php arms and main.js disarms. Last word on purpose. */
.reveal-all .reveal{ opacity:1; transform:none; }


/* ═══════════════════════════════════════════════════════════
   BAND SYSTEM — Phase 2 purple rebalance.
   Cream and purple alternate down the page; gold is the trim,
   never a competing block colour. No token values change.
   ═══════════════════════════════════════════════════════════ */
.band--cream{
  background:linear-gradient(180deg,var(--cream) 0%, var(--cream-deep) 100%);
  padding-block:clamp(2.6rem,5vw,4.2rem);
}
.band--purple{
  background:linear-gradient(168deg,var(--purple-deep) 0%, var(--purple-dark) 100%);
  border-block:1px solid rgba(212,175,55,.28);
  padding-block:clamp(2.6rem,5vw,4.2rem); overflow:hidden;
  color:rgba(245,240,230,.82);
}
.band--slim{ padding-block:clamp(2rem,3.6vw,3rem); }
.band--tall{ padding-block:clamp(4rem,9vw,7rem); }

/* Type inversions inside a purple band */
.band--purple .h2,
.band--purple h1,
.band--purple h2,
.band--purple h3{ color:var(--cream); }
.band--purple .prose{ color:rgba(245,240,230,.76); }
.band--purple .eyebrow{ color:var(--gold); }
.band--purple .ornament__dove{ color:var(--gold); }
.band--purple .ornament--left .ornament__rule{ background:var(--gold-rule); }
.band--purple .link-more{ color:rgba(245,240,230,.8); border-bottom-color:rgba(212,175,55,.4); }
.band--purple .link-more:hover{ color:var(--gold); }
.band--purple .btn--outline{
  background:transparent; color:var(--cream); border-color:rgba(212,175,55,.55);
}
.band--purple .btn--outline:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
/* Plain links in a purple band take the band's cream. Buttons must not:
   this rule outranks .btn{color:var(--fg)}, which left every button in a
   purple band wearing the band's text colour — purple on purple. */
.band--purple a:not(.btn){ color:inherit; }

.eyebrow--gold{ color:var(--gold); }
.sec-head--on-purple{ border-bottom:1px solid rgba(212,175,55,.24); padding-bottom:1.1rem; }

/* ═══════════ COMPACT INTERIOR HERO ═══════════
   A third of the home hero's height, same gilded corner, so the
   seven pages read as one set. */
.phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(168deg,var(--purple-deep) 0%, var(--purple-dark) 100%);
  padding-block:clamp(3.4rem,7vw,5.6rem) clamp(3.6rem,8vw,6rem);
}
.phero__bg{ position:absolute; inset:0; z-index:-2; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; opacity:.26; }
.phero__ghost{
  position:absolute; left:2%; top:26%; z-index:-1; pointer-events:none;
  width:min(20vw,230px); height:auto; aspect-ratio:32/31;
  color:rgba(212,175,55,.09);
}
.phero__inner{ position:relative; z-index:1; max-width:46rem; }
.phero .eyebrow{ color:var(--gold); }
.phero__title{
  font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.012em;
  font-size:clamp(1.9rem,4.1vw,3.35rem); color:var(--cream);
}
.phero__sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(.92rem,1.3vw,1.1rem);
  color:rgba(245,240,230,.72); line-height:1.6; max-width:40ch;
}
.phero .ornament__dove{ color:var(--gold); }
.phero .ornament--left .ornament__rule{ background:var(--gold); }
.phero__base{
  position:absolute; left:0; bottom:0; z-index:0; pointer-events:none; line-height:0;
  width:min(34vw,430px); height:min(15vw,190px); opacity:.5;
}
.phero__base .hero__corner{ display:block; width:100%; height:100%; }

/* ═══════════ ABOUT ═══════════ */
.bio{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:clamp(2rem,4vw,4rem); align-items:start; }
.prose--lead{ font-size:1rem; line-height:1.85; color:var(--ink); max-width:52ch; }
.bio .prose{ max-width:60ch; }
.pullquote--wide{ margin-top:2rem; border-top:1px solid var(--gold-rule); padding-top:1.5rem; }
.pullquote--wide p{ max-width:32ch; }
.arch__cap{
  display:block; margin-top:.9rem; text-align:center;
  font-family:var(--serif); font-size:.9rem; color:var(--purple);
}
.arch__cap span{
  display:block; font-style:italic; font-size:.74rem; color:var(--gold-text); margin-top:.2rem;
}
.arch--sm{ width:min(100%,17rem); }
.bio__media .arch{ width:100%; }

/* Credentials, on purple */
/* Post-nominals above the biography: small, gold, letter-spaced, so it reads
   as a credential strip rather than a first sentence that starts oddly. */
/* Her name, then her letters. Two sizes, because they are not the same kind
   of thing: the name is what this page is about and the post-nominals are a
   note underneath it. Set in the serif the headings use rather than the small
   capitals both lines shared before, which flattened them into one label. */
.bio__name{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.1vw,2rem);
  line-height:1.14; letter-spacing:-.012em; color:var(--purple);
}
.bio__post{
  font-size:.7rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-text); margin:.5rem 0 1.35rem;
}
.creds{ display:grid; grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:clamp(1.75rem,4vw,4rem); align-items:start; }
.creds__intro .ornament{ margin-bottom:0; }
.creds__list{ display:grid; gap:clamp(1.1rem,2vw,1.7rem); }
.cred{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:1rem; row-gap:.35rem;
  padding-bottom:clamp(1.1rem,2vw,1.6rem); border-bottom:1px solid rgba(212,175,55,.2);
}
.creds__list > .cred:last-child{ border-bottom:0; padding-bottom:0; }
.cred__ico{ grid-row:1 / span 2; font-size:30px; color:var(--gold); margin-top:3px; }
.cred__h{ font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--cream); }
.cred__p{ font-size:.8rem; line-height:1.85; color:rgba(245,240,230,.72); max-width:52ch; }
.creds__photo{ margin:1.75rem 0 0; max-width:18rem; }
.creds__photo img{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; object-position:50% 26%;
  border-radius:var(--r); border:1px solid rgba(212,175,55,.35);
}
.creds__photo figcaption{
  margin-top:.7rem; font-size:.68rem; line-height:1.6;
  color:rgba(245,240,230,.62); font-style:italic; font-family:var(--serif);
}

/* Onward links */
.onward--centred{ text-align:center; max-width:44rem; margin-inline:auto; }
.onward--centred .ornament,.onward--centred .prose{ margin-inline:auto; }
.onward__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1.6rem; }
.onward__grid a{
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.15rem; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--white); font-size:.82rem; color:var(--ink);
  transition:border-color .25s, transform .28s var(--ease), box-shadow .28s var(--ease);
}
.onward__grid a:hover{ border-color:var(--gold-rule); transform:translateY(-2px); box-shadow:var(--shadow); }
.onward__grid svg{ font-size:17px; color:var(--gold-text); }
.onward__go{ margin-left:auto; font-size:13px !important; color:var(--purple) !important; }

/* ═══════════════════════════════════════════════════════════
   MINISTRIES — a browser, not a scroll.
   All nine stay visible in the rail; the pane shows one at a
   time. Without JavaScript every panel renders, so the page
   degrades to the long-form version rather than breaking.
   ═══════════════════════════════════════════════════════════ */
.band--browse{ padding-block:clamp(2.2rem,4vw,3.4rem); scroll-margin-top:var(--head-h,76px); }
.browse{
  display:grid; grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(1.75rem,3.5vw,3.5rem); align-items:start;
}

/* ── Video player ────────────────────────────────────────── */
/* A <dialog>, so the focus trap, the Escape key and the inertness of the page
   behind all come from the browser. Only the look is set here. */
.player{
  width:min(92vw, 1000px); max-width:none; padding:0; border:0; overflow:visible;
  background:transparent; color:var(--cream);
}
.player::backdrop{ background:rgba(40,30,83,.82); backdrop-filter:blur(3px); }
.player__frame{
  aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:#000; box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  border:1px solid rgba(212,175,55,.35);
}
.player__frame iframe{ width:100%; height:100%; border:0; display:block; }
.player__x{
  position:absolute; top:-2.6rem; right:0;
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(245,240,230,.12); border:1px solid rgba(212,175,55,.4);
  color:var(--cream); cursor:pointer; transition:background .25s, border-color .25s;
}
.player__x:hover{ background:rgba(245,240,230,.22); border-color:var(--gold); }
.player__x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.player{ --focus:var(--gold); }
/* showModal() leaves the page behind scrollable; this is what stops it. */
.has-modal{ overflow:hidden; }

@media (max-width:640px){
  .player{ width:96vw; }
  .player__x{ top:-2.4rem; }
}

/* ── Rail ────────────────────────────────────────────────── */
.browse__rail{
  position:sticky; top:calc(var(--head-h,76px) + 1.25rem);
  max-height:calc(100dvh - var(--head-h,76px) - 2.5rem);
  overflow-y:auto; overflow-x:clip; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--gold-rule) transparent;
}
.browse__rail::-webkit-scrollbar{ width:6px; }
.browse__rail::-webkit-scrollbar-thumb{ background:var(--gold-rule); border-radius:3px; }
.rail-group + .rail-group{ margin-top:1.15rem; }
.rail-group__h{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--sans); font-size:.6rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text);
  margin-bottom:.5rem;
}
.rail-group__rule{ flex:1 1 auto; height:1px; background:linear-gradient(90deg,var(--gold-rule),transparent); }
.rail{ display:grid; gap:.2rem; }
.rail__item{
  --rail-fg:var(--ink);
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.55rem .75rem; border:1px solid transparent; border-radius:var(--r);
  background:transparent; color:var(--rail-fg); cursor:pointer;
  transition:background .22s, border-color .22s, color .22s, transform .22s var(--ease);
}
.rail__item:hover{ background:var(--white); border-color:var(--gold-rule); }
.rail__item > *{ transition:transform .22s var(--ease); }
.rail__item:hover > *{ transform:translateX(2px); }
.rail__item[aria-expanded="true"]:hover > *{ transform:none; }
.rail__item:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.rail__n{
  font-family:var(--serif); font-size:.72rem; font-weight:600;
  color:var(--gold-text); line-height:1; min-width:1.4em;
}
.rail__ico{ font-size:19px; color:var(--gold-text); }
.rail__text{ display:grid; gap:.1rem; min-width:0; }
.rail__title{ font-size:.82rem; font-weight:600; color:var(--purple); line-height:1.3; }
.rail__sum{
  font-size:.68rem; line-height:1.5; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail__go{ font-size:12px; color:var(--gold-rule); opacity:0; transition:opacity .22s, transform .22s var(--ease); }
.rail__item:hover .rail__go{ opacity:1; }

/* Selected */
.rail__item[aria-expanded="true"]{
  background:linear-gradient(168deg,var(--purple-deep) 0%, var(--purple-dark) 100%);
  border-color:rgba(212,175,55,.42);
}
.rail__item[aria-expanded="true"] .rail__title{ color:var(--cream); }
.rail__item[aria-expanded="true"] .rail__sum{ color:rgba(245,240,230,.68); }
.rail__item[aria-expanded="true"] .rail__n,
.rail__item[aria-expanded="true"] .rail__ico{ color:var(--gold); }
.rail__item[aria-expanded="true"] .rail__go{ opacity:1; color:var(--gold); }

/* ── Pane ────────────────────────────────────────────────── */
.browse__pane{ min-width:0; position:sticky; top:calc(var(--head-h,76px) + 1.25rem); }
.detail{
  display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:clamp(1.25rem,2.5vw,2.25rem); align-items:start;
  scroll-margin-top:calc(var(--head-h,76px) + 1rem);
}
.detail__figure{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--gold-rule); }
.detail__figure img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; }
.detail__crest{
  display:grid; place-items:center; width:100%; aspect-ratio:4/5; border-radius:var(--r);
  border:1px solid rgba(212,175,55,.4);
  background:linear-gradient(168deg,var(--purple-deep) 0%, var(--purple-dark) 100%);
}
.detail__crest-ico{ font-size:clamp(52px,6vw,78px); color:rgba(212,175,55,.6); }

.detail__kicker{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:.35rem; }
.detail__n{ font-family:var(--serif); font-size:1.45rem; font-weight:600; color:var(--gold-text); line-height:1; }
.detail__group{
  font-size:.58rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-text);
}
.detail__note{
  font-family:var(--serif); font-style:italic; font-size:.78rem;
  color:var(--ink-soft); margin-bottom:.5rem; max-width:44ch;
}
.detail__h{ font-family:var(--serif); font-size:clamp(1.35rem,2.1vw,1.85rem); font-weight:600; color:var(--purple); line-height:1.2; }
.detail__text .ornament{ margin:.85rem 0 1.05rem; }
.detail__text .prose{ max-width:54ch; }
.detail__verse{
  margin-top:1.15rem; padding-left:1.1rem; border-left:2px solid var(--gold-rule);
  font-family:var(--serif); font-style:italic; font-size:.92rem;
  line-height:1.7; color:var(--purple); max-width:42ch;
}
.detail__verse cite{
  display:block; margin-top:.4rem; font-style:normal; font-family:var(--sans);
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text);
}
.detail__cta{ margin-top:1.5rem; }

/* Walk all nine without going back to the rail */
.stepper{
  display:flex; justify-content:space-between; align-items:stretch; gap:1rem;
  margin-top:1.75rem; padding-top:1.15rem; border-top:1px solid var(--rule);
}
.stepper__link{
  display:flex; align-items:center; gap:.6rem; max-width:48%;
  padding:.55rem .7rem; border-radius:8px; border:1px solid transparent;
  transition:background .22s, border-color .22s, transform .22s var(--ease);
}
.stepper__link:hover{ background:var(--white); border-color:var(--gold-rule); }
.stepper__link--prev{ margin-right:auto; }
.stepper__link--prev:hover{ transform:translateX(-2px); }
.stepper__link--next{ margin-left:auto; text-align:right; }
.stepper__link--next:hover{ transform:translateX(2px); }
.stepper__link svg{ font-size:13px; color:var(--gold-text); flex:none; }
.stepper__link--prev svg{ transform:rotate(180deg); }
.stepper__lbl{
  display:block; font-size:.56rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-text);
}
.stepper__name{
  display:block; font-size:.78rem; font-weight:600; color:var(--purple);
  line-height:1.35; margin-top:.1rem;
}

/* Enhanced state — only added once the script runs. */
.browse.is-live .detail{ display:none; }
.browse.is-live .detail.is-open{ display:grid; animation:detailIn .34s var(--ease) both; }
@keyframes detailIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Without JS the panels stack, so they need separating. */
.browse:not(.is-live) .detail + .detail{
  margin-top:clamp(2rem,4vw,3.25rem); padding-top:clamp(2rem,4vw,3.25rem);
  border-top:1px solid var(--rule);
}

/* ═══════════ SERMON + REFLECTION ARCHIVES ═══════════ */
.sermon-grid--archive{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.sermon-cell{ display:flex; }
.sermon-cell > .sermon{ width:100%; }
.sermon__date{ font-size:.66rem; color:var(--ink-soft); letter-spacing:.04em; }
.sermon__audio{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.sermon__audio-ico{ font-size:15px; color:var(--gold-text); flex:none; }
.sermon__audio audio{ width:100%; height:32px; }

.archive-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:1px solid var(--rule);
}
.archive-bar__count{
  margin-left:auto; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-text);
}
.field{ position:relative; display:grid; gap:.4rem; }
.field label{
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--purple);
}
.field input,.field select,.field textarea{
  width:100%; background:var(--white); color:var(--ink);
  border:1px solid var(--rule); border-radius:8px;
  padding:.72rem .9rem; font-size:.82rem; font-family:var(--sans);
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:8rem; line-height:1.7; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(75,46,131,.12);
}
/* The soft treatment above is for the mouse. A keyboard user needs a ring
   they can actually see, so put the outline back for :focus-visible only. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.subscribe input:focus-visible{
  outline:2px solid var(--focus,var(--purple)); outline-offset:2px;
}
.field--search{ flex:1 1 18rem; }
.field--search input{ padding-left:2.35rem; }
.field__ico{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--gold-text); pointer-events:none;
}
.field--year{ flex:0 0 auto; min-width:9rem; }

/* The reflections archive has two forms in its bar — the search and the month
   picker — each laid out like the single form on /sermons. */
.archive-bar__form{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.archive-bar__form--search{ flex:1 1 24rem; }
/* On /bible-reflections the count sits under the bar rather than inside it. */
.archive-bar + .archive-bar__count{ margin:-.75rem 0 1.5rem; }
.archive-bar__count a{ color:var(--purple); text-decoration:none; border-bottom:1px solid var(--gold-rule); }
.archive-bar__count a:hover{ border-bottom-color:var(--purple); }

/* ── Paging: the sermon archive, search results, and reflections month by month ── */
.paging{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1rem;
  margin-top:clamp(1.75rem,3vw,2.5rem); padding-top:clamp(1.25rem,2.2vw,1.75rem);
  border-top:1px solid var(--rule);
}
.paging--months{ justify-content:space-between; }
.paging__step{
  display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.05rem;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--purple); background:var(--white); border:1px solid var(--rule); border-radius:999px;
  text-decoration:none; transition:border-color .2s, background .2s;
}
a.paging__step:hover{ border-color:var(--purple); }
.paging__step.is-off{ color:var(--ink-soft); background:transparent; border-color:transparent; }
.paging__arrow{ font-size:11px; }
.paging__arrow--back{ transform:scaleX(-1); }
.paging__list{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin:0; padding:0; list-style:none; }
.paging__num{
  display:inline-grid; place-items:center; min-width:2.5rem; height:2.5rem; padding:0 .5rem;
  border-radius:999px; border:1px solid transparent; font-size:.8rem; font-weight:600;
  color:var(--purple); text-decoration:none; font-variant-numeric:tabular-nums;
}
a.paging__num:hover{ border-color:var(--gold-rule); background:var(--white); }
.paging__num[aria-current]{ background:var(--purple-deep); border-color:var(--purple-deep); color:#fff; }
.paging__gap{ color:var(--ink-soft); padding:0 .15rem; }
@media (max-width:560px){
  .paging{ gap:.5rem; }
  .paging__step{ padding:.62rem .85rem; }
  .paging--months{ justify-content:center; }
}

.week-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(.7rem,1.2vw,1rem); }
.band--purple .sermon{
  background:rgba(245,240,230,.06); border-color:rgba(212,175,55,.28);
}
.band--purple .sermon:hover{ border-color:rgba(212,175,55,.6); }
.band--purple .sermon__title{ color:var(--cream); }
.band--purple .sermon__ref,.band--purple .sermon__date{ color:rgba(245,240,230,.62); }
.band--purple .sermon__body .link-more{ color:var(--gold); border-bottom:0; }

.month + .month{ margin-top:clamp(2rem,3.5vw,3rem); }
.month__h{
  display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem;
  font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--purple);
}
.month__rule{ flex:1 1 auto; height:1px; background:linear-gradient(90deg,var(--gold-rule),transparent); }
.month__n{
  flex:none; font-family:var(--sans); font-size:.6rem; font-weight:700;
  letter-spacing:.12em; color:var(--gold-text);
}

/* ═══════════ RESOURCES ═══════════ */
.res-thesis{ display:flex; align-items:flex-start; gap:clamp(1rem,2.5vw,2rem); }
.res-thesis__ico{ font-size:clamp(40px,5vw,62px); color:var(--gold); flex:none; margin-top:.2rem; }
/* The printed jacket, standing on the purple band. A book has a spine edge
   and a shadow; without them a cover on a flat colour reads as a poster. The
   gold hairline is the same one the buttons on this band carry. */
.res-thesis__cover{ flex:none; display:block; border-radius:3px 6px 6px 3px; }
.res-thesis__jacket{
  display:block; width:clamp(112px,13vw,168px); height:auto; border-radius:3px 6px 6px 3px;
  box-shadow:0 1px 0 rgba(212,175,55,.34) inset,
             -3px 0 0 rgba(0,0,0,.24) inset,
             0 14px 30px -12px rgba(0,0,0,.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.res-thesis__cover:hover .res-thesis__jacket,
.res-thesis__cover:focus-visible .res-thesis__jacket{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(212,175,55,.5) inset,
             -3px 0 0 rgba(0,0,0,.24) inset,
             0 20px 36px -12px rgba(0,0,0,.6);
}
.res-thesis__sub{
  font-family:var(--serif); font-style:italic; font-size:.92rem;
  color:rgba(245,240,230,.72); margin:.5rem 0 1.35rem;
}
.res-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:clamp(.9rem,1.6vw,1.35rem); }
.res{
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.4rem 1.35rem; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--white);
  transition:border-color .25s, transform .28s var(--ease), box-shadow .28s var(--ease);
}
.res:hover{ border-color:var(--gold-rule); transform:translateY(-3px); box-shadow:var(--shadow); }
.res__ico{ font-size:26px; color:var(--gold-text); }
.res__h{ font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--purple); }
.res__p{ font-size:.78rem; line-height:1.8; color:var(--ink-soft); }
.res .link-more{ margin-top:auto; padding-top:.35rem; }
.res-grid--on-purple .res{
  background:rgba(245,240,230,.06); border-color:rgba(212,175,55,.28);
}
.res-grid--on-purple .res:hover{ border-color:rgba(212,175,55,.62); }
.res-grid--on-purple .res__ico{ color:var(--gold); }
.res-grid--on-purple .res__h{ color:var(--cream); }
.res-grid--on-purple .res__p{ color:rgba(245,240,230,.72); }

.audio-list{ display:grid; gap:.85rem; }
.audio{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.1rem 1.25rem; border:1px solid var(--rule); border-radius:var(--r); background:var(--white);
}
.audio__ico{ font-size:24px; color:var(--gold-text); flex:none; margin-top:.15rem; }
.audio__body{ flex:1 1 auto; display:grid; gap:.4rem; }
.audio__h{ font-family:var(--serif); font-size:.98rem; font-weight:600; color:var(--purple); }
.audio__date{ font-size:.68rem; color:var(--ink-soft); }
.audio audio{ width:100%; max-width:32rem; height:36px; }

/* ═══════════ CONTACT ═══════════ */
.contact-split{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(2rem,4vw,4rem); align-items:start; }
.enquiry{ display:grid; gap:1.1rem; max-width:38rem; margin-top:.5rem; }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.enquiry .btn{ justify-self:start; }
/* Shown when a ministry page sent the visitor here with a subject */
.field-prefill{
  display:flex; align-items:center; gap:.55rem; margin:-.35rem 0 0;
  padding:.6rem .85rem; border-radius:8px; font-size:.76rem; color:var(--purple);
  background:rgba(75,46,131,.06); border:1px solid var(--rule);
}
.field-prefill svg{ font-size:12px; color:var(--gold-text); flex:none; }
.field-prefill strong{ font-weight:600; }
.form__note{ font-size:.72rem; color:var(--purple); margin-top:.75rem; font-weight:600; }
.form__note.is-error{ color:#A81F1F; }
.band--purple .form__note,.site-foot .form__note{ color:var(--gold); }
.band--purple .form__note.is-error,.site-foot .form__note.is-error{ color:#F0A9A5; }
.contact--lg li{ font-size:.82rem; line-height:2.2; color:var(--ink); }
.contact--lg svg{ font-size:15px; color:var(--gold-text); }
.contact--lg a:hover{ color:var(--purple); }
.contact-aside .foot__h{ color:var(--purple); margin-top:1.75rem; }
.contact-aside > .arch{ margin-bottom:1.5rem; }
.social--lg{ flex-direction:column; gap:.55rem; }
.social--lg a{
  width:auto; height:auto; border-radius:var(--r); justify-content:flex-start;
  display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem;
  border:1px solid var(--rule); color:var(--purple); background:var(--white);
  font-size:.78rem; font-weight:600;
}
.social--lg a svg{ font-size:16px; }
.social--lg a:hover{ background:var(--purple); border-color:var(--purple); color:#fff; transform:translateY(-2px); }

/* ═══════════ EMPTY STATES ═══════════ */
.empty{
  font-size:.85rem; line-height:1.9; color:var(--ink-soft);
  padding:1.25rem 0; max-width:56ch;
}
/* Inline links inside an empty state, not the buttons that sit in them —
   this rule outranks .btn and was recolouring and underlining them. */
.empty a:not(.btn){ color:var(--purple); border-bottom:1px solid var(--gold-rule); }
.empty--page{
  display:grid; justify-items:center; text-align:center; gap:.9rem;
  max-width:44rem; margin-inline:auto; padding:clamp(2rem,5vw,4rem) 0;
}
.empty--page .prose{ margin-inline:auto; }
.empty--page .btn{ margin-top:.5rem; }
.empty__ico{ font-size:clamp(44px,6vw,68px); color:rgba(212,175,55,.55); }
.empty__badge{ width:clamp(90px,12vw,132px); height:auto; border-radius:var(--r); }
.empty--filter{ text-align:center; margin-inline:auto; padding-top:2rem; }
/* Empty state that has to hold down a column beside filled content */
.empty--inline{
  display:grid; justify-items:start; gap:1rem; max-width:none;
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.35rem,2.5vw,2rem);
  border:1px dashed var(--gold-rule); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(245,240,230,.55),rgba(245,240,230,.15));
}
.empty--inline .empty__ico{ font-size:38px; }
.empty--inline .prose{ max-width:44ch; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1400px){
  .hero__grid{ grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); }
}
@media (max-width:1180px){
  .split{ grid-template-columns:minmax(0,1fr); }
  .creds{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); }
  .week-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .split > .about{ border-right:0; padding-right:0; padding-bottom:2.25rem; border-bottom:1px solid var(--rule); }
  .focus{ grid-template-columns:minmax(0,1fr); }
  .pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nav__list{ gap:.75rem; }
  .nav__link{ font-size:.72rem; }
}
@media (max-width:1120px){
  .head__inner{ gap:1rem; }
  .nav{
    position:fixed; inset:0 0 auto 0; top:var(--head-h,76px);
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--cream); border-bottom:1px solid var(--rule);
    padding:1rem var(--pad) 1.6rem; box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    max-height:calc(100dvh - var(--head-h,76px)); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__link{ display:block; padding:.8rem .25rem; font-size:.92rem; border-bottom:1px solid var(--rule); }
  .nav__link::after{ display:none; }
  .nav__social{ justify-content:center; margin-top:1.2rem; }
  /* The panel is cream whether or not the header has turned purple, so it
     keeps its own dark type. Without this, scrolling first and then opening
     the menu gave the stuck header's cream links on a cream panel — every
     item invisible, which is what "the menu text is not visible" was. */
  .site-head.is-stuck .nav__link{ color:var(--ink-dark); }
  .site-head.is-stuck .nav__link:hover,
  .site-head.is-stuck .nav__link.is-active{ color:var(--purple-dark); }
  .site-head.is-stuck .nav__social a{ color:var(--purple); }
  .burger{ display:block; margin-left:auto; }
  .burger[aria-expanded="true"] .burger__open{ display:none; }
  .burger[aria-expanded="true"] .burger__close{ display:block; }
  .sermon-grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  .bio,.contact-split{ grid-template-columns:minmax(0,1fr); }
  .bio__media{ max-width:22rem; }
  .contact-aside{ max-width:26rem; }
  .browse{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .browse__rail{ position:static; max-height:none; overflow:visible; }
  .browse__pane{ position:static; }
  .detail{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); }
}
@media (max-width:860px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); min-height:0; padding-block:2rem 0; gap:0; }
  .hero__copy{ padding-right:0; text-align:center; }
  .ornament--wide{ margin-inline:auto; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__cta .btn{ flex:1 1 15rem; justify-content:center; }
  .hero__media{ margin:2rem calc(var(--pad) * -1) 0; }
    .arch{ width:clamp(160px,46vw,210px); }
  .hero__photo{ min-height:min(60vh,420px); }
  .hero__photo img{ -webkit-mask-image:none; mask-image:none; object-position:52% 16%; }
  .hero__grade{ background:linear-gradient(180deg,rgba(245,240,230,.5) 0%, rgba(245,240,230,0) 30%, rgba(75,46,131,.2) 100%); }
  .hero__base,.hero__ghost{ display:none; }
  .hero__plate{ position:static; border-radius:0; text-align:center; padding:1rem 1.25rem;
    margin-inline:calc(var(--pad) * -1); }
  /* The photo is a full-width band here and the nameplate has dropped below
     it, so the controls can hold the top-right corner unchallenged. */
  .hero-car{ --car-x: clamp(.8rem, 4vw, 1.4rem); --car-y: clamp(.8rem, 2.5vh, 1.3rem); }
  .hero-car__cap{ max-width:70%; }
  .about,.about__media{ grid-template-columns:minmax(0,1fr); }
  .about__media{ justify-items:center; text-align:center; gap:1.25rem; margin-top:1.75rem; }
  .pullquote{ text-align:center; }
  .pullquote__mark,.pullquote__dove{ margin-inline:auto; }
  .ornament--left{ justify-content:center; }
  .about__text{ text-align:center; }
  .about__text .prose{ margin-inline:auto; }
  .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creds{ grid-template-columns:minmax(0,1fr); }
  .detail{ grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .detail__media{ max-width:15rem; }
  .stepper{ flex-direction:column; gap:.4rem; }
  .stepper__link,.stepper__link--next{ max-width:none; text-align:left; }
  .stepper__link--next{ flex-direction:row-reverse; justify-content:flex-end; }
  .detail__figure img,.detail__crest{ aspect-ratio:16/11; }
  .week-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .onward__grid{ grid-template-columns:minmax(0,1fr); }
  .field-row{ grid-template-columns:minmax(0,1fr); }
  .res-thesis{ flex-direction:column; }
  /* The leaf beside a narrow column leaves too little for the title, so it
     goes above instead, laid out as a row. */
  .ev,.ev--photo{ grid-template-columns:minmax(0,1fr); gap:.9rem; }
  .ev__date{ flex-direction:row; gap:.5rem; align-items:baseline; justify-self:start;
    min-width:0; padding:.45rem .8rem; }
  .ev__day{ font-size:1.3rem; }
  .phero__base{ opacity:.32; }
  .archive-bar__count{ margin-left:0; flex:1 0 100%; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:.85rem; }
  .link-more{ align-self:flex-start; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .hero__line1{ font-size:clamp(2.1rem,10vw,2.9rem); }
  /* Already a circle at every width; just a little tighter into the corner
     so it covers less of what it floats over on a small screen. */
  .wa-float{ --wa-size:52px; }
  .hero-car__cap a{ font-size:.63rem; padding:.38rem .72rem; }
  .pillars,.foot__grid{ grid-template-columns:minmax(0,1fr); }
  .sermon-grid,.week-strip{ grid-template-columns:minmax(0,1fr); }
  .sermon-grid--archive{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .detail__verse{ font-size:.86rem; }
  .foot__bar{ justify-content:center; text-align:center; }
  /* The footer is one column here, so the 19rem cap that suits the desktop
     column only left a gap on the right. Full width, button still beside. */
  .subscribe,.foot__copy{ max-width:none; }
  .subscribe input{ font-size:.82rem; padding-block:.8rem; }
  .subscribe__btn{ padding-inline:1.2rem; }
  .brand__mark{ height:44px; }
  .brand__name{ font-size:.95rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.js .reveal{ opacity:1; transform:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}