/* ============================================================================
   MT. PLEASANT BAPTIST CHURCH — STYLESHEET
   ----------------------------------------------------------------------------
   LAYERS, in order. Later layers win by specificity, so if a rule looks like it
   is not applying, check further down the file.
     1  Tokens        colour, type scale, spacing, radii, shadows
     2  Reset & base  element defaults, typography
     3  Layout        wrap, section, grid, split
     4  Chrome        header, nav, mobile nav, footer
     5  Components    buttons, cards, events, accordion, forms, people
     6  Sections      hero, series, vision, cta band
     7  Draft         placeholder flags (only visible while draft mode is on)
     8  Responsive    tablet then mobile
   ========================================================================== */

/* =========================================================================
   1. TOKENS
   Warm, rural, unfussy. Deep pine green as the anchor, brass as the accent,
   warm paper rather than white. Chosen to feel like a country church in north
   Alabama, not a tech company and not a megachurch.
   ========================================================================= */
:root {
  /* colour — light and warm. Cream and white carry the page; the deep forest
     green is reserved for actions and the two dark bands, so it reads as
     emphasis rather than as the background. Gold is for eyebrows and accents
     only, never for body text (it fails contrast at small sizes). */
  --cream:      #FAF7F1;   /* page background */
  --cream-2:    #F4F0E7;   /* alternating band */
  --paper:      #FFFFFF;   /* cards */
  --forest:     #2E4030;   /* primary buttons, giving band */
  --forest-dk:  #23311F;
  --forest-lt:  #40563F;
  --gold:       #B8945C;   /* accent, eyebrows, gold buttons */
  --gold-dk:    #856839;   /* clears 4.5:1 on BOTH creams — 4.87 on --cream, 4.57 on --cream-2.
                              #896C39 cleared cream at 4.60 but only managed 4.33 on the
                              alternating band, which every sand section uses. */
  --gold-lt:    #DCC8A2;
  --ink:        #1C2620;   /* headings */
  --text:       #4F5650;   /* body copy */
  --text-mute:  #6C726B;   /* darkened from #767D75 to clear 4.5:1 on cream */
  --line:       #E6E0D3;   /* hairlines */
  --line-2:     #EFEAE0;
  --stone:      #D8D4CA;   /* warm neutral band — the sermon series */
  /* The standard gold falls under AA on --stone, which is darker than cream,
     and the small caps it is used for there need 4.5:1. This one clears it
     (4.54:1). It has to be re-checked whenever --stone changes — darkening the
     band pushes the accent down with it. */
  --gold-on-stone: #70582E;
  --footer:     #21231F;   /* near-black warm charcoal */
  --footer-mute:#9AA097;
  --line-dark:  rgba(255,255,255,.12);
  --white:      #FFFFFF;


  /* type */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  3.75rem;

  /* spacing — an 8px-derived scale used everywhere for vertical rhythm */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.5rem; --s-8: 3rem;
  --s-9: 4rem;   --s-10: 5rem;  --s-11: 6.5rem; --s-12: 8rem;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,38,32,.04), 0 2px 10px rgba(28,38,32,.035);
  --shadow-md: 0 2px 6px rgba(28,38,32,.05), 0 14px 34px rgba(28,38,32,.07);
  --shadow-lg: 0 10px 26px rgba(28,38,32,.07), 0 34px 70px rgba(28,38,32,.10);

  --head-h: 78px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* How far the Education hero image runs on past the hero and down into the
     tab bar. The bar is 66px tall, so 17px is the 25% Ryan asked for. Defined
     here rather than on .eduh because the bar is its SIBLING — a property set
     on .eduh does not reach it, which is why the first attempt silently did
     nothing. */
  --edu-overlap: 17px;
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 999; background: var(--ink); color: var(--white);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; transition: transform .2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* 1px marker the sticky-header observer watches. Not focusable, not readable,
   takes no space — it only needs to leave the viewport at the right moment. */
#head-sentinel { position: absolute; top: 40px; left: 0; width: 1px; height: 1px; pointer-events: none; }

.muted { color: var(--text-mute); }
.small { font-size: var(--fs-sm); }
.body-lg { font-size: var(--fs-md); line-height: 1.7; color: var(--text); }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* =========================================================================
   3. LAYOUT
   ========================================================================= */
.wrap { width: 100%; margin-inline: auto; padding-inline: var(--s-6); }
.wrap--wide { max-width: 1240px; }
.wrap--mid  { max-width: 860px; }
.wrap--narrow { max-width: 660px; }

.sec { position: relative; }
.sec--pad-lg { padding-block: var(--s-11); }
.sec--pad-md { padding-block: var(--s-9); }
.sec--pad-sm { padding-block: var(--s-7); }
.sec--tight  { padding-block: var(--s-9); }

.sec--cream { background: var(--cream); }
.sec--sand  { background: var(--cream-2); }
.sec--paper { background: var(--paper); }
.sec--stone { background: var(--stone); }
.sec--ink   { background: var(--forest); color: var(--gold-lt); }
.sec--ink h1, .sec--ink h2, .sec--ink h3 { color: var(--white); }

/* section heading */
.sec-head { max-width: 62ch; margin-bottom: var(--s-7); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-title { font-size: var(--fs-2xl); }
.lede { margin-top: var(--s-4); font-size: var(--fs-md); color: var(--text-mute); line-height: 1.65; }
.sec--ink .lede { color: var(--footer-mute); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: var(--s-3);
}
.eyebrow--light { color: var(--gold-lt); }
.eyebrow--sm { font-size: .6875rem; margin-bottom: var(--s-2); }

.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-7);
}
.sec-head-row .sec-head { margin-bottom: 0; }

/* grid */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* split — text beside media */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-9); align-items: center; }
.split--balanced { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s-9); }
.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  aspect-ratio: 9 / 10; object-fit: cover;
}
.split__cap { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-mute); font-style: italic; }

.prose > * + * { margin-top: var(--s-5); }
.prose p { max-width: 68ch; }

/* =========================================================================
   4. CHROME — header, nav, footer
   ========================================================================= */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-head__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--head-h); }

/* Over the homepage hero the header sits on the same cream the hero uses, so
   unlike the old dark treatment nothing needs to invert — it only gains a
   hairline and a shadow once you scroll past the top. */
.site-head--over { position: fixed; left: 0; right: 0; background: transparent; }
.site-head--over.is-stuck { background: var(--cream); border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(28,38,32,.06); }

/* brand */
.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; color: var(--ink); }
/* The logo is a fixed-height image now, not an inline SVG that inherits
   colour. `height` drives it and `width: auto` keeps the square aspect. */
.brand__glyph { height: 40px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.brand__sub {
  font-family: var(--font-body); font-size: .625rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px;
}

/* primary nav */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 4px;
  padding: var(--s-2) var(--s-3);
  font-size: .9375rem; font-weight: 500; color: var(--ink);
  border-radius: var(--r-sm);
  transition: color .18s var(--ease);
}
.nav__link .ico { width: .8em; height: .8em; opacity: .55; transition: transform .2s var(--ease); }
.nav__link:hover { color: var(--gold-dk); }
.nav__link.is-active { color: var(--gold-dk); font-weight: 600; }

/* dropdown */
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px; padding: var(--s-2);
  background: var(--paper); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__menu::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav__item--has-menu:hover > .nav__menu,
.nav__item--has-menu:focus-within > .nav__menu,
.nav__item--has-menu.is-open > .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav__item--has-menu:hover > .nav__link .ico { transform: rotate(180deg); }
.nav__menu a {
  display: block; padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm); border-radius: var(--r-sm); color: var(--text);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__menu a:hover { background: var(--cream-2); color: var(--gold-dk); }

.site-head__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* mobile toggle */
.mnav-toggle { display: none; padding: var(--s-2); border-radius: var(--r-sm); color: inherit; }
.mnav-toggle .ico { width: 26px; height: 26px; }
.mnav-toggle .ico:last-child { display: none; }
.mnav-toggle[aria-expanded="true"] .ico:first-of-type { display: none; }
.mnav-toggle[aria-expanded="true"] .ico:last-child { display: block; }

/* mobile panel */
.mnav {
  position: fixed; inset: var(--head-h) 0 0; z-index: 99;
  background: var(--cream);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mnav[hidden] { display: none; }
.mnav__inner { padding: var(--s-6) var(--s-6) var(--s-10); }
.mnav__list > li + li { border-top: 1px solid var(--line); }
.mnav__link {
  display: block; padding: var(--s-4) 0;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--ink);
}
.mnav__link.is-active { color: var(--gold-dk); }
.mnav__sub { padding: 0 0 var(--s-4) var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.mnav__sub a { font-size: var(--fs-sm); color: var(--text-mute); }
.mnav__foot { margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-3); }
.mnav__addr { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-mute); }

/* footer — near-black warm charcoal, four columns, quiet hairline bottom bar */
.site-foot { background: var(--footer); color: var(--footer-mute); padding-top: var(--s-10); }
.site-foot__grid {
  display: grid; grid-template-columns: 1.1fr .8fr 1.5fr 1.2fr;
  gap: var(--s-8); padding-bottom: var(--s-9);
}
/* The mark is dark green and the footer is near-black, so it would vanish.
   brightness(0) crushes it to pure black, invert(1) flips that to pure white —
   the standard trick for recolouring a single-colour image, and it needs no
   second file to keep in sync. */
.brand--foot { color: var(--white); }
.brand--foot .brand__glyph { height: 46px; filter: brightness(0) invert(1); }
.brand--foot .brand__name { color: var(--white); }
.brand--foot .brand__sub { color: var(--footer-mute); }

.site-foot__h {
  font-family: var(--font-body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--white);
  margin-bottom: var(--s-5);
}
.site-foot__col--links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); }
.site-foot__col--links .site-foot__h { grid-column: 1 / -1; }
.foot-links li a { display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--footer-mute); }
.foot-links li a:hover { color: var(--white); }

.foot-addr { font-size: var(--fs-sm); line-height: 1.7; margin: var(--s-3) 0; color: var(--footer-mute); }
.foot-link { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--footer-mute); padding: 4px 0; }
.foot-link:hover { color: var(--white); }

.soc-row { display: flex; gap: var(--s-2); }
.soc {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-dark); border-radius: 50%; color: var(--footer-mute);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.soc:hover { background: var(--white); border-color: var(--white); color: var(--footer); }

.site-foot__bar { border-top: 1px solid var(--line-dark); padding-block: var(--s-5); }
.site-foot__bar-in { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-xs); color: var(--footer-mute); flex-wrap: wrap; }

/* =========================================================================
   5. COMPONENTS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: .8125rem 1.5rem;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .01em; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn .ico { width: 1em; height: 1em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .5rem 1rem; font-size: var(--fs-xs); }

.btn--primary { background: var(--forest); color: var(--white); }
.btn--primary:hover { background: var(--forest-dk); box-shadow: var(--shadow-md); }

/* Gold — reserved for giving, where it should out-shout everything nearby. */
.btn--gold { background: var(--gold); color: var(--forest-dk); }
.btn--gold:hover { background: var(--gold-lt); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: var(--paper); border-color: var(--ink); }

.btn--secondary { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--secondary:hover { background: var(--forest); color: var(--white); }

.btn--ghost { background: transparent; color: var(--forest); border-color: transparent; padding-inline: .5rem; }
.btn--ghost:hover { color: var(--gold-dk); background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.sec--ink .btn--ghost, .cta-band .btn--ghost { color: var(--gold-lt); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.btn-row--center { justify-content: center; }

/* card */
.card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-lt); }
.card-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--cream-2); border: 1px solid var(--line);
  color: var(--gold-dk); margin-bottom: var(--s-4);
}
.card--link:hover .card-icon { background: var(--forest); border-color: var(--forest); color: var(--gold-lt); }
.card-title { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.card-body { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.65; }
.card-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3); }
.card-meta__row { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-mute); }
.card-meta__row .ico { margin-top: .22em; color: var(--gold); }
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: var(--s-5);
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk);
}
.card-link .ico { transition: transform .2s var(--ease); }
.card--link:hover .card-link .ico { transform: translateX(3px); }

/* service list */
.svc-list { display: flex; flex-direction: column; gap: var(--s-1); }
.svc {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
}
.svc--primary { border-color: var(--gold); background: linear-gradient(0deg, var(--cream-2), var(--paper)); }
.svc__day { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dk); }
.svc__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.svc__time { font-weight: 600; color: var(--ink); white-space: nowrap; }
.svc__note { grid-column: 2 / -1; font-size: var(--fs-sm); color: var(--text-mute); }

/* event card */
.ev-list { display: flex; flex-direction: column; gap: var(--s-4); }
.ev {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s-6);
  padding: var(--s-6);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ev:hover { border-color: var(--gold-lt); box-shadow: var(--shadow-sm); }
.ev__date {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink);
  padding-right: var(--s-5); border-right: 1px solid var(--line);
}
.ev__time { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--gold-dk); }
.ev__title { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.ev__loc { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: var(--s-3); }
.ev__loc .ico { color: var(--gold); }
.ev__excerpt { font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: var(--s-4); }
.ev__more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk); }
.ev__more .ico { transition: transform .2s var(--ease); }
.ev__more:hover .ico { transform: translateX(3px); }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q .ico { color: var(--gold-dk); transition: transform .25s var(--ease); flex: none; }
.acc__item[open] .acc__q .ico { transform: rotate(180deg); }
.acc__a { padding-bottom: var(--s-5); color: var(--text-mute); max-width: 68ch; }

/* pull quote */
.pull {
  margin-top: var(--s-8); padding: var(--s-7);
  border-left: 3px solid var(--gold);
  background: var(--cream-2); border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.pull p { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.35; color: var(--ink); }
.pull cite { display: block; margin-top: var(--s-4); font-size: var(--fs-xs); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dk); }

/* note — used to state plainly what the site cannot do yet */
.note {
  padding: var(--s-5) var(--s-6); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--paper);
  font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: var(--s-7);
}
.note--warn { border-color: #DCC38A; background: #FDF6E7; }
.note--info { border-color: var(--line); background: var(--cream-2); }
.note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; background: rgba(22,33,28,.07); padding: 1px 5px; border-radius: 4px; }

/* people */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.person__photo { aspect-ratio: 4 / 5; background: var(--cream-2); display: grid; place-items: center; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__mono { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--line); font-weight: 700; }
.person__body { padding: var(--s-5); }
.person__name { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.person__bio { font-size: var(--fs-sm); color: var(--text-mute); }
.person__mail { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--gold-dk); }
.deacons { text-align: center; font-size: var(--fs-md); line-height: 2; }

/* One person alone in a three-column grid reads as a mistake — a lone card
   stranded in the left third. With a single entry the card goes horizontal
   instead, which balances the section and gives the bio somewhere to live. */
.people--single { grid-template-columns: 1fr; max-width: 760px; }
.people--single .person { display: grid; grid-template-columns: 280px 1fr; align-items: stretch; }
.people--single .person__photo { aspect-ratio: auto; min-height: 340px; }
.people--single .person__body { padding: var(--s-7); display: flex; flex-direction: column; justify-content: center; }
.people--single .person__name { font-size: var(--fs-xl); }
@media (max-width: 680px) {
  .people--single .person { grid-template-columns: 1fr; }
  .people--single .person__photo { aspect-ratio: 4 / 5; min-height: 0; }
  .people--single .person__body { padding: var(--s-5); }
}


/* ministry rows */
/* --- the ministries section ------------------------------------------------
   The tab strip that used to open this section — All Ministries plus one tab
   per ministry, sitting down into the hero on a negative margin — was removed
   with its markup on 12 October 2026 at Ryan's request, and its rules went
   with it rather than staying here unused. The tabs were same-page anchors,
   not filters; every row still carries its id, so /ministries/#bible-study
   still works from the home page and the nav. .edu-bar, which the strip was
   built to match, is untouched and still carries the Education pages.

   .msec had padding-top: 0 so the strip could overlap the hero. With the strip
   gone that zero was pure leftover, and on a wide screen it put the Wednesday
   Bible Study card hard against the bottom edge of the photograph — Ryan's
   words, "almost touching". I had argued it read better tight; looking at it
   on a desktop, it does not. The section takes its normal sec--pad-lg top
   padding back.

   The phone is untouched by this, and not because anything here protects it:
   the mobile block further down sets .sec--pad-lg { padding-block: var(--s-8) }
   at the same specificity and later in the file, so a phone took 24px top
   whatever this rule said. It did before the change and it does after. A
   `@media (max-width: 680px) { .msec { padding-top: 0 } }` written here to
   "keep mobile as it was" is dead on arrival for the same reason — it was
   tried, it measured 24px, and it came out rather than stay as a rule that
   reads like it does something. */
/* The fixed header would otherwise land on top of the first row, the same
   offset .mrow already carries. */
.mrows { scroll-margin-top: calc(var(--head-h) + 2rem); }

/* --- the Ministries hero ---------------------------------------------------
   The photograph is subject-centred, so the frame is pulled right and the
   green laid down the left. Two layers for the same reason the About hero has
   two: a flat wash over a warm picture reads grey, so one darkens and one
   recolours. */
.mhero .phero__media img { object-position: 62% 55%; }
/* Forest green, which is what the other photographic heroes use. It went
   black on 14 October 2026 and came back the same day — Ryan tried it and
   preferred the green, which keeps this hero in family with Visit, About,
   Sermons and Prayer.

   Two stacked gradients: one does the work on the left where the words sit,
   the second evens the join so the right does not fall off a cliff. */
.mhero .phero__scrim {
  background:
    linear-gradient(95deg, rgba(10,20,13,.90) 0%, rgba(12,22,15,.76) 32%, rgba(14,24,17,.44) 60%, rgba(16,26,19,.26) 100%),
    linear-gradient(95deg, rgba(46,64,48,.55) 0%, rgba(46,64,48,.34) 55%, rgba(46,64,48,.18) 100%);
}
/* pageHero centres its words in a 860px measure. Here they line up with the
   ministry bar and the rows beneath instead, so the left edge of the page is
   one line from the hero all the way down. */
/* THE FOUR PHOTOGRAPHIC HEROES ARE ONE HEIGHT.
   Ministries and Sermons are built on pageHero, so their height comes from the
   inner block's floor. Events and Prayer are split heroes with their own
   construction, so they take the finished height directly. Both routes land on
   506px, and --hero-h is where that number lives so it cannot be changed in one
   place and forgotten in the other. */
:root { --hero-h: 506px; }
/* Ryan tried 400px here on 14 October and went back to 250 — the taller band
   showed more of each photograph but cost page height on two pages, and the
   split hero below answers "show more of the picture" better than height does. */
.mhero .phero__inner,
.sxhero .phero__inner {
  max-width: 1240px; min-height: 250px;
  display: flex; flex-direction: column; justify-content: center;
}

.mhero .phero__lede { max-width: 42ch; }

.mrows { display: flex; flex-direction: column; gap: var(--s-8); }
.mrow { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-8); align-items: center; scroll-margin-top: calc(var(--head-h) + 2rem); }
/* FLIPPING THE ROW HAS TO FLIP THE COLUMNS TOO. The grid is .9fr 1.1fr and
   order: 2 moves the picture to the SECOND cell — which, left alone, is the
   wide one. So every other ministry photograph came out bigger than the one
   above it: 508px wide, then 620, then 508. Ryan asked for them all at the
   smaller size. Reversing the track widths on a flipped row keeps the
   picture in a .9fr column whichever side it sits on, and the text in the
   1.1fr column, which is the proportion the design wanted in the first
   place. */
.mrow--flip { grid-template-columns: 1.1fr .9fr; }
.mrow--flip .mrow__media { order: 2; }
.mrow__media { position: relative; }
/* 16:9, matching the artwork. These graphics have their titles composed into
   the left of the frame, and a 4:3 crop sliced the first letter off — "OUTH
   Ministry". The image is a designed unit; crop it and you break the design. */
.mrow__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.mrow__icon {
  position: absolute; left: var(--s-5); bottom: var(--s-5);
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--r-md); background: var(--cream); color: var(--gold-dk);
  box-shadow: var(--shadow-md);
}
.mrow__icon .ico { width: 26px; height: 26px; }
.mrow__title { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
.mrow__meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-5); }
.mrow__meta li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-mute); }
.mrow__meta .ico { color: var(--gold); }
.mrow__blurb { font-size: var(--fs-md); color: var(--text); line-height: 1.7; }

/* The named Sunday School classes. A quiet list under the blurb, not a second
   heading — it is detail for somebody already reading, not a nav target. */
/* "Ask about this ministry" is a ghost button, so its own padding already
   reads as space; the global .btn-row margin on top of that left it drifting
   away from the paragraph it belongs to. Scoped here — the same button sits
   at a normal distance everywhere else. */
.mrow__body .btn-row { margin-top: var(--s-3); }
/* The ghost button's own inline padding set the label 8px right of the
   paragraph. That passed unnoticed at the old distance; sitting this close it
   reads as a misalignment, so the padding is pulled back off the left edge. */
.mrow__body .btn-row .btn--ghost { margin-left: -.5rem; }
.mrow__classes { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mrow__classes-lede {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 0.5rem;
}
.mrow__class-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.mrow__class-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  font-size: var(--fs-sm); line-height: 1.5;
}
.mrow__class-name { font-weight: 600; color: var(--text); }
.mrow__class-teacher { color: var(--text-mute); }
.mrow__class-teacher::before { content: '\2014\00a0'; }
.mrow__classes-note { margin: 0.6rem 0 0; font-size: var(--fs-sm); color: var(--text-mute); }

/* forms */
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld--wide, .fld--radio { grid-column: 1 / -1; }
.fld__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.req { color: var(--gold-dk); }
.fld__input {
  font: inherit; font-size: var(--fs-sm); color: var(--text);
  padding: .75rem .875rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.fld__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(180,136,74,.16); outline: none; }
.fld__help { font-size: var(--fs-xs); color: var(--text-mute); }
.fld--radio { border: 0; padding: 0; }
.radio { display: inline-flex; align-items: center; gap: 8px; margin-right: var(--s-5); font-size: var(--fs-sm); }
.form .btn { margin-top: var(--s-5); }
.form__note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-mute); }

.form-placeholder { padding: var(--s-7); background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.form-placeholder h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.form-placeholder p { font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: var(--s-5); }
.form-placeholder .btn { margin-right: var(--s-2); margin-bottom: var(--s-2); }
.form-placeholder__dev { margin-top: var(--s-5); font-size: var(--fs-xs); }
.form-placeholder__dev summary { cursor: pointer; color: var(--gold-dk); font-weight: 600; }
.form-placeholder__dev p { margin-top: var(--s-3); }

/* contact list */
.contact-list { display: flex; flex-direction: column; gap: var(--s-5); margin-bottom: var(--s-8); }
.contact-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-list .ico { color: var(--gold-dk); margin-top: .3em; width: 1.3em; height: 1.3em; }
.contact-list a { color: var(--gold-dk); }
.contact-list a:hover { text-decoration: underline; }
.addr-block { font-size: var(--fs-md); line-height: 1.7; margin-bottom: var(--s-4); }

/* give */

/* =========================================================================
   6. SECTIONS — hero, series, vision, cta band, page hero
   ========================================================================= */
/* Tall enough to show the building properly, capped so a large monitor does
   not get a hero you have to scroll past. The service strip still peeks in
   below the fold on a laptop, which is what invites the first scroll. */
.hero {
  position: relative; background: var(--cream); overflow: hidden;
  min-height: min(78vh, 820px);
  display: flex; align-items: center;
}

/* The image occupies the right of the frame and is masked away toward the
   left, so it fades into the page instead of ending on a hard edge. Two
   properties because Safari still wants the -webkit- form. */
.hero__media { position: absolute; inset: 0 0 0 42%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--cream) 0%, rgba(250,247,241,.86) 18%, rgba(250,247,241,.22) 46%, rgba(250,247,241,0) 72%);
}
.hero__inner { position: relative; width: 100%; padding-top: calc(var(--head-h) + var(--s-8)); padding-bottom: var(--s-9); }
.hero__text { max-width: 34rem; }
.hero__title { font-size: var(--fs-4xl); color: var(--ink); margin-bottom: var(--s-5); line-height: 1.08; }
.hero__sub { font-size: var(--fs-md); color: var(--text); max-width: 30rem; line-height: 1.65; }

/* service strip */
.hstrip-band { background: var(--cream-2); border-block: 1px solid var(--line); }
.hstrip-band__in { display: grid; grid-template-columns: repeat(3, 1fr); }
/* Dividers are SHORT centred rules, drawn as a pseudo-element rather than a
   border. A full-height border-left reaches the top and bottom edges of the
   band and turns the row into a table; a rule floating in the middle of the
   whitespace separates without boxing anything in. */
.hstrip { position: relative; display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-7) var(--s-6) var(--s-7) 0; }
.hstrip + .hstrip, .hstrip + .hstrip--link { padding-left: var(--s-7); }
.hstrip + .hstrip::before, .hstrip + .hstrip--link::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 52%; background: var(--line);
}
.hstrip__ico {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--gold-dk);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.hstrip__k { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 4px; }
.hstrip__v { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); line-height: 1.25; }
.hstrip__sub { font-size: var(--fs-sm); color: var(--text-mute); margin-top: 3px; }
.hstrip--link { transition: background .2s var(--ease); }
.hstrip--link:hover { background: rgba(255,255,255,.5); }
.hstrip--link:hover .hstrip__ico { background: var(--forest); border-color: var(--forest); color: var(--gold-lt); }
.hstrip--link:hover .hstrip__v { color: var(--gold-dk); }

/* interior page hero */
.phero { background: var(--forest); color: var(--gold-lt); padding-block: var(--s-10) var(--s-9); }
.has-over-head .phero { padding-top: calc(var(--head-h) + var(--s-9)); }
.phero__title { font-size: var(--fs-3xl); color: var(--white); margin-bottom: var(--s-4); }
.phero__lede { font-size: var(--fs-md); color: rgba(255,255,255,.78); max-width: 60ch; line-height: 1.7; }

/* sermon series feature */
/* Neutral, not forest. The band sits between two cream sections, so it is a
   touch deeper than --cream-2 or it would not read as a separate band at all. */
/* Same alternating cream as every other sand band. It used to be --stone,
   a full shade darker, which made the sermon series its own island partway
   down the page.

   The section directly above it is sand too, so with the stone gone there was
   nothing left to mark where one ends and the other begins — the two ran
   together as a single long field. A hairline does that job now, and matches
   the one already dividing the series from the education row inside. */
.series { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-9); align-items: center; }
.series__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.series__title { font-size: var(--fs-2xl); color: var(--ink); margin-bottom: var(--s-3); }
.series__meta { font-size: var(--fs-sm); color: var(--gold-dk); letter-spacing: .04em; margin-bottom: var(--s-4); }
.series__blurb { color: var(--text); line-height: 1.75; }

/* Explore the Bible — the second row of the stone band.
   Mirrored against .series above: body on the left, links on the right, so
   the two rows alternate instead of stacking the same shape twice. */
.series-rule {
  border: 0; border-top: 1px solid var(--line); margin: var(--s-9) 0; height: 0;
}


/* cta band */
.cta-band { background: var(--forest); color: var(--gold-lt); padding-block: var(--s-10); text-align: center; }
.cta-band__title { font-size: var(--fs-2xl); color: var(--white); margin-bottom: var(--s-4); }
.cta-band__body { color: rgba(255,255,255,.78); }
.cta-band .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.45); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* =========================================================================
   7. DRAFT FLAGS
   Only meaningful while draft mode is on. These make unconfirmed content
   impossible to mistake for confirmed content.
   ========================================================================= */
/* Pinned to the BOTTOM of the viewport on purpose: the homepage header is
   fixed to the top and overlays the hero, and a top-anchored bar would either
   sit under it or force every page to do layout maths for a temporary,
   development-only affordance. Bottom is out of the design's way entirely. */
.draftbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: .625rem var(--s-6);
  box-shadow: 0 -4px 18px rgba(0,0,0,.28);
  background: #2A2013; color: #F3E2C0;
  font-size: var(--fs-xs); line-height: 1.5;
  border-top: 1px solid #4A3A22;
}
/* keep the real footer clear of the fixed bar */
.is-draft { padding-bottom: 3.25rem; }
@media (max-width: 680px) { .is-draft { padding-bottom: 5.5rem; } }

.draftbar b { color: #FFD79A; letter-spacing: .04em; text-transform: uppercase; }
.draftbar__how { margin-left: auto; opacity: .8; }
.draftbar code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 4px; }

/* Placeholder marks.
   A hairline dotted underline, not a filled highlight — enough to see at a
   glance which words nobody has confirmed, quiet enough to judge the design
   through. The toggle in the draft bar turns them off entirely. */
.c-todo {
  background: none;
  box-shadow: none;
  border-bottom: 1px dotted rgba(184,148,92,.85);
  cursor: help;
}
.c-todo--empty {
  display: inline-block;
  background: transparent;
  border: 1px dashed rgba(184,148,92,.55);
  color: var(--gold-dk);
  font-size: var(--fs-xs); font-style: italic;
  padding: 2px 8px; border-radius: var(--r-sm);
}

/* On the dark bands the same marks need a lighter ink to stay visible. */
.sec--ink .c-todo, .phero .c-todo,
.vsplit .c-todo, .cta-band .c-todo {
  border-bottom-color: rgba(220,200,162,.75);
}
.sec--ink .c-todo--empty, .phero .c-todo--empty,
.vsplit .c-todo--empty, .cta-band .c-todo--empty {
  border-color: rgba(220,200,162,.55); color: var(--gold-lt);
}

/* Markers off: placeholder text reads exactly as it will in production, and
   the "still needed" chips drop back to a quiet note so nothing looks broken
   or silently disappears. */
.marks-off .c-todo { border-bottom: 0; cursor: inherit; }
.marks-off .c-todo--empty {
  border: 0; padding: 0; font-size: var(--fs-sm);
  color: var(--text-mute); opacity: .75;
}
/* Light text for the chips, on the bands that are actually dark. .series is
   not one of them any more — it is the stone band — and .vision no longer
   exists; leaving either here rendered white chips on a light ground, which
   is invisible rather than quiet. */
.marks-off .sec--ink .c-todo--empty, .marks-off .phero .c-todo--empty,
.marks-off .vsplit .c-todo--empty,
.marks-off .cta-band .c-todo--empty {
  color: rgba(255,255,255,.6);
}

/* draft bar */
.draftbar__toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.28); color: #F3E2C0;
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.draftbar__toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.draftbar__toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: #FFD79A; }
.marks-off .draftbar__toggle .dot { background: transparent; box-shadow: inset 0 0 0 1px #8C8375; }
.draftbar__how { margin-left: 0; opacity: .8; }

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  :root { --fs-4xl: 3rem; --fs-3xl: 2.5rem; --fs-2xl: 2rem; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero__media { inset: 0 0 0 52%; }
  .hero__text { max-width: 30rem; }
}

/* --- TABLET: nav collapses to the mobile panel here --- */
@media (max-width: 960px) {
  .nav { display: none; }
  .mnav-toggle { display: block; }
  .site-head__actions { margin-left: auto; }

  .split, .split--balanced, .series, .mrow { grid-template-columns: 1fr; gap: var(--s-7); }
  .series-rule { margin: var(--s-7) 0; }
  .hstrip-band__in { grid-template-columns: 1fr 1fr; }
  .hstrip-band__in .hstrip:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s-5); }
  /* the vertical rule is a ::before, so stacking must remove it explicitly —
     zeroing border-left is not enough now and would leave a stray line */
  .hstrip-band__in .hstrip:nth-child(3)::before { display: none; }
  .mrow--flip .mrow__media { order: 0; }
  .split__media img { aspect-ratio: 16 / 10; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(2, 1fr); }
  .hero__strip-in { grid-template-columns: 1fr 1fr; }
  .sec--pad-lg { padding-block: var(--s-9); }
}

/* --- MOBILE --- */
@media (max-width: 680px) {
  /* SCALED DOWN, 12 October 2026. Ryan, looking at this on a phone: "zoom
     everything out a little bit more it doesn't need to be that large."
     Roughly one step off each size.

     --fs-base stops at 1rem and goes no lower. 16px is the threshold where
     iOS Safari stops zooming the whole page when a form field takes focus,
     and body copy below it to save a few pixels of height is a bad trade on
     the one class of device this breakpoint exists for. --fs-xs is left alone
     at 13px: it is already the smallest text on the page.

     SECOND PASS, same day: "again zoom the page out more. the blocks are too
     large." The first pass only moved type and the big section gaps, which
     made the words smaller inside cards that stayed the same size. So the
     middle of the spacing scale comes down too, and that is what actually
     shrinks a block: --s-6 is the padding on .card, .ev and .mitem, --s-7 is
     .pull and .sec--pad-sm, --s-8 is the mobile section padding. --s-5 goes
     with them because it is the page gutter at this width, and 4px back on
     each side is 8px of text column.

     --s-1..--s-4 are left alone. They are the gaps between a label and the
     line under it; taking those down stops looking smaller and starts looking
     cramped, which is a different thing from what was asked for.

     The headings take a second step down as well. --fs-base and --fs-md hold
     at 1rem for the iOS reason above, so the gap between a heading and the
     body text closes a little at this size — intended, since the blocks are
     what is meant to come down, not the readability of the copy.

     THIRD PASS, same day: "also zoom out even more on all pages." These
     tokens are declared on :root inside the phone breakpoint, so they reach
     every page on the site, not just the home page — the ask is already
     satisfied by changing them here.

     --hero-h joins them this time. It is a flat 506px used as a min-height by
     the page heroes, and being a fixed pixel figure it sat out the first two
     passes entirely: the type inside those heroes shrank twice while the band
     holding it stayed exactly as tall, which is most of why some pages still
     felt oversized after the second pass.

     FOURTH PASS, same day: "zoom out even more."

     This one needed a correction first. The last three passes held body copy
     at 16px on the grounds that iOS Safari zooms the page below it. That rule
     is real but narrower than I had it: Safari zooms when a FORM FIELD under
     16px takes focus. It has nothing to do with paragraphs. So the floor only
     ever applied to inputs, selects and textareas, and holding every word on
     the site to it was costing size for no reason. Body copy goes to 15px and
     the form controls are pinned at 16px explicitly at the end of this block,
     which is what the rule actually asks for.

     13px is where the secondary line stops for real. Below that it stops
     being small and starts being hard to read, and this is a church website
     whose visitors are not all twenty-five. */
  :root {
    --fs-4xl: 1.625rem;  --fs-3xl: 1.375rem; --fs-2xl: 1.1875rem;
    --fs-xl:  1.0625rem; --fs-lg:  1rem;     --fs-md:  .9375rem;
    --fs-base: .9375rem; --fs-sm:  .8125rem; --fs-xs: .75rem;
    --s-5: 1rem;     --s-6: 1.125rem;  --s-7: 1.375rem; --s-8: 1.5rem;
    --s-9: 1.75rem;  --s-10: 1.875rem; --s-11: 2rem;    --s-12: 2.5rem;
    --hero-h: 260px;
    --head-h: 66px;
  }

  .wrap { padding-inline: var(--s-5); }

  /* The brand is a logo + two stacked lines now, not one long name. The old
     max-width was sized for the full church name and forces "MT. PLEASANT" to
     break across three lines here, which overflows the fixed-height header and
     lands on top of the hero. Nowrap, and the sub-line goes at this width —
     the logo and the name carry it, and the row is genuinely tight once the
     Give button and the menu button have taken their share. */
  /* The brand link's height is just the logo's, which lands under the 44px
     touch guideline. Padding lifts the target without moving anything. */
  .brand { padding-block: 6px; }
  .brand__name { font-size: .9375rem; letter-spacing: .04em; white-space: nowrap; }
  .brand__sub { display: none; }
  .brand__glyph { height: 34px; }
  .site-head__actions .btn { padding: .625rem 1.125rem; }

  /* Mobile: the photo stops sitting behind the text (unreadable over a crop
     at this width) and becomes its own band.

     ORDER, 12 October 2026: plain `column` — image first, then the eyebrow,
     the headline and the buttons. It was column-reverse, on the argument that
     someone checking service times should not have to scroll past a picture.
     That was a guess about the visitor; Ryan asked for the title and the
     church-family line to sit under the image, and the owner's call beats the
     guess.

     Stacked either way, so the desktop min-height and vertical centring both
     come off — centring a column would centre the text horizontally, and the
     min-height would strand the copy in the middle of an empty screen. */
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  /* The homepage header is FIXED and transparent until you scroll past the top
     (.site-head--over), and the brand and the Give button inside it are dark
     ink on the assumption that cream sits behind them. The image leads the
     hero now, so it starts BELOW the header instead of running up underneath
     it. Full-bleed would read better as a picture and would put dark text over
     whatever happens to be in the top of the crop — a contrast bug that would
     arrive silently with the next photo swap. */
  .hero__media { position: relative; inset: auto; height: 270px; margin-top: var(--head-h); }
  /* Fades into the cream the copy sits on, which is now directly below it. */
  .hero__media::after { background: linear-gradient(to bottom, rgba(250,247,241,0) 55%, var(--cream) 100%); }
  /* No --head-h offset here any more: .hero__media carries the header
     clearance now. Keeping it in both places left a band of empty cream
     between the picture and the headline. */
  .hero__inner { padding-top: var(--s-6); padding-bottom: var(--s-8); }
  .hero__text { max-width: none; }

  .hstrip-band__in { grid-template-columns: 1fr; }
  /* CENTRED, 12 October 2026 — Ryan asked for service time, location and
     directions to be centred on the phone.

     Stacked column rather than a centred icon-beside-text row: the three
     blocks are different widths, so centring the rows would leave the three
     icons at three different left edges, which reads as misalignment rather
     than as centring. With the icon above the text, all three sit on the one
     axis the text is centred on. */
  /* Scoped to .hstrip-band__in on purpose. Written as a bare `.hstrip` this
     centred the first and third items and left the MIDDLE one pushed right by
     32px, because `.hstrip + .hstrip { padding-left: var(--s-7) }` higher up
     is 0,2,0 and a bare `.hstrip` is only 0,1,0 — so the desktop indent won on
     the one element that has a preceding sibling AND is not nth-child(3).
     Matching that specificity and sitting later in the file is what makes all
     three line up. This is the layering the file header warns about. */
  .hstrip-band__in .hstrip {
    padding: var(--s-5) 0; padding-left: 0;
    flex-direction: column; align-items: center; text-align: center; gap: var(--s-3);
  }
  .hstrip + .hstrip, .hstrip-band__in .hstrip:nth-child(3) { border-top: 1px solid var(--line); }
  .hstrip::before, .hstrip + .hstrip::before, .hstrip + .hstrip--link::before { display: none; }

  .site-foot__col--links { grid-template-columns: 1fr 1fr; }

  .grid--2, .grid--3, .grid--4, .people { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }

  .ev { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); }
  .ev__date { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: var(--s-3); flex-direction: row; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }

  .svc { grid-template-columns: 1fr auto; }
  .svc__day { grid-column: 1 / -1; }

  .serm { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .sec-head-row { flex-direction: column; align-items: flex-start; }
  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }
  .site-foot__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .draftbar__how { margin-left: 0; width: 100%; }

  /* Comfortable touch targets. Inline text links sit near 25px at this size,
     which is fine with a mouse and fiddly with a thumb — pad them out on
     touch-sized screens rather than everywhere, so desktop rhythm is kept. */
  .ev__more, .foot-link, .card-link, .sxr__meta a, .contact-list a, .person__mail, .feat__link {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .foot-links li a { padding-block: 10px; }
  /* Padding rather than min-height: .lcard__role is redefined later in the
     file as inline-block, so align-items never applies and a min-height would
     just strand the text at the top of an empty 44px box. */
  .lcard__role { padding-block: 12px; }
  .mnav__sub a { min-height: 40px; display: inline-flex; align-items: center; }
  .pull { padding: var(--s-5); }
  .sec--pad-lg, .sec--tight { padding-block: var(--s-8); }

  /* EXPLORE THE BIBLE is desktop only, 13 October 2026. Ryan asked for the
     band back on wide screens and kept off phones — an intro, four picture
     cards and a wide feature stack into roughly a screen and a half here,
     between the ministries list and the closing call.

     display:none rather than omitting it from the build. The markup is
     identical for every device, so the section and its five links to
     /education/ are in the HTML Googlebot fetches whichever way it crawls;
     building it conditionally would hide them from the mobile-first index.
     /education/ is also in the nav on every page, so the links are not
     load-bearing either way — but there is no reason to spend them. */
  .series-sec { display: none; }
}

/* print — a service order or directions someone actually prints */
@media print {
  .site-head, .mnav, .draftbar, .skip, .btn, .hero__media, .soc-row { display: none !important; }
  body { background: #fff; color: #000; }
  .sec--ink, .cta-band, .site-foot, .vsplit, .sxlive { background: #fff !important; color: #000 !important; }
  .sec--ink h1, .sec--ink h2, .phero__title, .series__title { color: #000 !important; }
}

/* --- detail pages (event / sermon) ---------------------------------------
   Appended after the component layer so these win where they overlap. */
.ev-facts { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.ev-facts li {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.ev-facts .ico { color: var(--gold-dk); width: 1.35em; height: 1.35em; margin-top: .1em; flex: none; }
.ev-facts__k {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 3px;
}
.ev-facts__v { display: block; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ev-facts__sub { display: block; font-size: var(--fs-sm); color: var(--text-mute); margin-top: 2px; }


.serm-links { border-top: 1px solid var(--line); margin-bottom: var(--s-6); }
.serm-links li { border-bottom: 1px solid var(--line); }
.serm-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 600; color: var(--ink);
}
.serm-links a .ico { color: var(--gold-dk); transition: transform .2s var(--ease); }
.serm-links a:hover { color: var(--gold-dk); }
.serm-links a:hover .ico { transform: translateX(3px); }

@media (min-width: 681px) { .ev-facts { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   FEATURE ROW + FULL-BLEED SPLIT
   Appended after the component layer, so these win where they overlap.
   ========================================================================= */

/* Three panels under the service strip: watch / belong / attend. Divided by
   hairlines rather than boxed as cards — the row should read as one band. */
.feat-band { background: var(--cream); border-bottom: 1px solid var(--line); }
.feat-band .wrap { padding-inline: var(--s-5); }
.feat-row { display: grid; grid-template-columns: repeat(3, 1fr); }
/* Spacing here is tight on purpose: three panels across 1240px leaves roughly
   390px each, and the thumbnail claims a third of that. Every extra 8px of
   padding comes straight out of the text column and pushes titles to a third
   line, so the gaps are deliberately smaller than the site's usual rhythm. */
.feat {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding: var(--s-8) var(--s-5) var(--s-8) 0;
}
.feat + .feat { padding-left: var(--s-6); }
.feat + .feat::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 56%; background: var(--line);
}
.feat__thumb { flex: none; width: 118px; }
.feat__thumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
/* The upcoming-event card only. Its thumbnail may be an event POSTER, which
   is portrait and puts the event's name at the top — cropped to this card's
   4:3 from the centre, a poster shows its middle and never its name. Scoped by
   id so the sermon and ministry cards beside it keep centre-cropping their
   photographs, where the centre is the subject. */
#feat-event .feat__thumb img { object-position: top center; }
.feat__body { min-width: 0; }
.feat__title { font-size: var(--fs-md); line-height: 1.3; margin-bottom: var(--s-3); text-wrap: balance; }
.feat__line { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.65; text-wrap: pretty; }
.feat__line + .feat__line { margin-top: 4px; }
.feat__body .btn { margin-top: var(--s-4); white-space: nowrap; }
.feat__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk);
  white-space: nowrap;   /* "Explore Ministries →" must not break before the arrow */
}
.feat__link .ico { transition: transform .2s var(--ease); }
.feat__link:hover { color: var(--forest); }
.feat__link:hover .ico { transform: translateX(3px); }

/* --- FIRST-TIME VISITOR: when / where / what -----------------------------
   One dark panel holding all three, not three cards and not a bare list.

   It has been both of those. Cards made it the fourth white-box-with-an-icon
   in a row and Ryan said so; a borderless list on the sand went too far the
   other way and read as unfinished. A single inverted panel is the middle: it
   is obviously one object, it cannot be mistaken for the card decks above and
   below it, and the contrast does the work that a fourth border treatment
   could not.

   The ink and the light text are the footer's and the closing band's, reused
   rather than reinvented, so there is one dark on this site and not three.
   Light-on-dark here measures about 8.5:1, comfortably past AA. */
.vpanel {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  background: var(--forest-dk); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* start, not center: the rows are different depths — "Where to find us" runs
   to five lines on a phone and "When we gather" to three — so centring put
   the icon halfway down a block of text instead of beside the heading it
   belongs to. The link keeps its own centring on the wide layout. */
.vpanel__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: var(--s-5); padding: var(--s-6) var(--s-7);
}
.vpanel__link { align-self: center; }
.vpanel__row + .vpanel__row { border-top: 1px solid rgba(255,255,255,.12); }
.vpanel__ico {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--gold-lt);
}
.vpanel__ico .ico { width: 20px; height: 20px; }
.vpanel__main { min-width: 0; }
.vpanel__term {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  color: #FBF9F5; margin: 0 0 .25rem; line-height: 1.25;
}
.vpanel__body { font-size: var(--fs-base); color: rgba(245,243,238,.78); line-height: 1.65; margin: 0; }
.vpanel__lines { list-style: none; margin: .3rem 0 0; padding: 0; }
.vpanel__lines li { font-size: var(--fs-base); color: rgba(245,243,238,.78); line-height: 1.6; }
.vpanel__lines li + li { margin-top: 3px; }
.vpanel__lines b { color: #FBF9F5; font-weight: 600; }
.vpanel__link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-lt);
}
.vpanel__link .ico { transition: transform .2s var(--ease); }
.vpanel__link:hover { color: #FBF9F5; }
.vpanel__link:hover .ico { transform: translateX(3px); }

@media (max-width: 860px) {
  /* The link drops to its own line rather than squeezing the answer: at this
     width "See the full schedule" and the service times were fighting over
     the same inch. Full row width also gives it the 44px touch target. */
  .vpanel__row { grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-5); }
  .vpanel__link { grid-column: 1 / -1; min-height: 44px; }
}

/* Full-bleed split: photo owns one half edge-to-edge, copy sits on the other.
   Grid rather than two floats so both halves are always exactly equal height,
   whatever the copy does. */
.wsplit { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream-2); }
/* 400, not 460. This floor only matters when the copy beside it is short;
   the band's real height is set by the panel below. It is lowered in step
   with that padding so it does not quietly become the taller of the two and
   undo the change. */
.wsplit__media { margin: 0; position: relative; min-height: 400px; overflow: hidden; }
.wsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The photo dissolves into the copy instead of stopping at a hard seam, the
   way the hero does on the other side of the page. The gradient runs to the
   panel's own background colour, so the join is invisible — if the panel tone
   ever changes, change this with it or a band will appear. */
.wsplit__fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(244,240,231,0) 45%, rgba(244,240,231,.55) 74%, rgba(244,240,231,.92) 92%, var(--cream-2) 100%);
}
/* THIS PADDING IS WHAT SETS THE HEIGHT OF THE WHOLE BAND. The two columns
   are grid siblings, so they are always the same height, and measuring showed
   the panel winning at 521px — 361px of copy between 80px of padding top and
   bottom — while the photograph's own 460px floor never came into play. So
   the way to make the photo strip thinner is here, not on the image: 80px
   becomes 40px and the band comes down to about 440. The horizontal padding
   is unchanged; var(--s-8) was already its value. */
.wsplit__panel { display: flex; align-items: center; padding: var(--s-7) var(--s-8); }
.wsplit__inner { max-width: 30rem; }
.wsplit__title { font-size: var(--fs-2xl); margin-bottom: var(--s-4); line-height: 1.15; }
.wsplit__body { font-size: var(--fs-base); color: var(--text); line-height: 1.7; }

@media (max-width: 960px) {
  .feat-row { grid-template-columns: 1fr; }
  .feat { padding: var(--s-6) 0; }
  .feat + .feat { border-top: 1px solid var(--line); padding-left: 0; }
  .feat + .feat::before { display: none; }   /* vertical rule off once stacked */
  .wsplit { grid-template-columns: 1fr; }
  .wsplit__media { min-height: 300px; }
  /* Stacked, the copy sits BELOW the photo, so the fade has to run downward
     rather than sideways or it would feather the wrong edge entirely. */
  .wsplit__fade {
    background: linear-gradient(to bottom,
      rgba(244,240,231,0) 55%, rgba(244,240,231,.7) 85%, var(--cream-2) 100%);
  }
  .wsplit__panel { padding: var(--s-8) var(--s-5); }
  .wsplit__inner { max-width: none; }
}

@media (max-width: 680px) {
  /* The congregation photo above "Come as you are", thinner on a phone at
     Ryan's request. 300px is the tablet height and is deeper than it needs to
     be here, where it pushes the copy under it off the first screen.

     This rule has to live in THIS 680 block and not the big one earlier in the
     file: @media (max-width: 960px) sets .wsplit__media to 300px and sits
     between them, so an identical selector up there loses to it on order alone
     and silently does nothing. Both blocks match on a phone; the last one in
     the file is the one that counts. */
  .wsplit__media { min-height: 175px; }

  /* SHRUNK, 12 October 2026 — Ryan asked for the latest sermon, get connected
     and upcoming event cards to come down in size on the phone.

     The thumbnail is the lever, not the type. These three cards are as tall as
     they are because the title wraps, and the title wraps because the picture
     is taking 104px off a 327px text column. Narrowing it gives the words back
     the width, so most titles land on one line and the card loses a whole row
     of height — a smaller picture AND a shorter card, where shrinking the font
     would have cost legibility and saved almost nothing.

     The copy gaps tighten with it. --fs-sm and the 44px touch target on
     .feat__link are deliberately left alone: the link is the thing a thumb has
     to hit, and that minimum is the reason it is comfortable. */
  .feat { gap: var(--s-4); padding: var(--s-5) 0; }
  .feat__thumb { width: 88px; }
  .feat__title { font-size: var(--fs-md); margin-bottom: var(--s-2); }
  .feat__line { line-height: 1.5; }
  .feat__link { margin-top: var(--s-3); }
}

/* --- leadership -----------------------------------------------------------
   Leaders get photo cards; deacons stay a plain list of names. A monogram
   stands in until a picture exists, so the grid never looks half-built while
   photos trickle in one at a time. */
.leaders-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }

/* Five leaders in a four-column grid strand one card alone on a second row.
   Five columns keeps them on one line. Musicians are a separate, narrower
   grid so two cards do not stretch across the full measure. */
.leaders-grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 520px; margin-inline: auto; }
.lcard {
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.lcard:hover { box-shadow: var(--shadow-md); border-color: var(--gold-lt); }
.lcard__photo {
  aspect-ratio: 4 / 5; background: var(--cream-2);
  display: grid; place-items: center;
}
.lcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.lcard__mono {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 600;
  color: var(--gold); letter-spacing: .02em;
}
.lcard__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.lcard__name { font-size: var(--fs-md); margin-bottom: 4px; line-height: 1.25; }
.lcard__role { display: inline-block; font-size: var(--fs-sm); color: var(--text-mute); }
.lcard__role:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; }

.deacon-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-6);
  font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink);
}
.deacon-note { margin-top: var(--s-5); text-align: center; font-size: var(--fs-sm); color: var(--text-mute); }

@media (max-width: 1080px) { .leaders-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  {
  .leaders-grid { grid-template-columns: repeat(2, 1fr); }
  .leaders-grid--pair { max-width: none; }
}

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   hidden outright, and the whole point is that they fill it in. aria-hidden
   and tabindex="-1" on the markup keep it away from screen readers and the
   tab order, so nobody real ever meets it. */
.form__trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* Form result, shown in place rather than on the form service's own page. */
.form__status {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.55;
}
.form__status--error { background: #FBEEE8; border: 1px solid #E3BFAE; color: #7A3B22; }

.form-done {
  padding: var(--s-7); text-align: center;
  background: var(--paper); border: 1px solid var(--gold-lt); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.form-done h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.form-done p { font-size: var(--fs-sm); color: var(--text-mute); max-width: 44ch; margin-inline: auto; }

.form-done__links {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; margin-top: var(--s-6);
}
@media (max-width: 680px) {
  .form-done__links { flex-direction: column; }
}

/* A single photograph given room to breathe on an otherwise text-only page. */
.about-photo { margin: 0; max-width: 900px; margin-inline: auto; }
.about-photo img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.about-photo figcaption {
  margin-top: var(--s-3); text-align: center;
  font-size: var(--fs-sm); color: var(--text-mute); font-style: italic;
}

/* --- series artwork as a play target (homepage only) ----------------------
   The Sermons page keeps a plain <figure>: linking the art there would point
   at the page you are already on. */
.series__art--play { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); }
.series__art--play img { display: block; transition: transform .5s var(--ease); }

.series__scrim {
  position: absolute; inset: 0;
  background: rgba(11, 18, 15, 0);
  transition: background .3s var(--ease);
}
.series__art--play:hover .series__scrim,
.series__art--play:focus-visible .series__scrim { background: rgba(11, 18, 15, .3); }
.series__art--play:hover img { transform: scale(1.02); }

.series__play {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--forest-dk);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.series__play svg { width: 34px; height: 34px; margin-left: 3px; }  /* optical centring */
.series__art--play:hover .series__play,
.series__art--play:focus-visible .series__play {
  transform: scale(1.08);
  background: #fff;
}
.series__art--play:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (max-width: 680px) {
  .series__play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .series__play svg { width: 28px; height: 28px; }
}

/* =========================================================================
   MINISTRIES: sticky heading, scrolling list
   The left column pins while the list moves past it, so the section keeps
   announcing itself the whole way down. `align-self: start` is what makes
   position:sticky work inside a grid — without it the item stretches to the
   row height and has nothing to stick within.
   ========================================================================= */
.mstick { padding-block: var(--s-11); }
.mstick__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-9); }

.mstick__aside {
  position: sticky;
  top: calc(var(--head-h) + var(--s-7));
  align-self: start;
}
.mstick__title { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
.mstick__lede { font-size: var(--fs-md); color: var(--text-mute); line-height: 1.65; max-width: 34ch; }

.mstick__list { display: flex; flex-direction: column; gap: var(--s-5); }

/* 240px was the picture column until 12 October 2026; Ryan asked for the
   ministry images smaller in this home-page section. .mitem is only used
   here — /ministries/ renders its own markup — so this does not reach the
   ministries page itself. */
.mitem {
  display: grid; grid-template-columns: 180px 1fr; align-items: center;
  gap: var(--s-5);
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.mitem:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-lt); }

.mitem__media { display: block; overflow: hidden; border-radius: var(--r-md); }
.mitem__media img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .5s var(--ease);
}
.mitem:hover .mitem__media img { transform: scale(1.04); }

.mitem__body { display: block; }
.mitem__title {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; color: var(--ink); line-height: 1.2;
}
.mitem__when { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-mute); }
.mitem__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk);
}
.mitem__cta .ico { transition: transform .2s var(--ease); }
.mitem:hover .mitem__cta { color: var(--forest); }
.mitem:hover .mitem__cta .ico { transform: translateX(3px); }

@media (max-width: 960px) {
  /* Stacked, there is no second column for the heading to sit beside, so
     sticky would just pin it over the list it is meant to introduce. */
  .mstick__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .mstick__aside { position: static; }
  .mstick__lede { max-width: none; }
}

@media (max-width: 680px) {
  .mstick { padding-block: var(--s-8); }
  /* Stays two columns on a phone with a small thumbnail, rather than going
     full-width. Stacked, each of the five items led with a picture the width
     of the screen, which is what made this section feel enormous. */
  .mitem { grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center; }
  .mitem__media img { aspect-ratio: 4 / 3; }
  .mitem__cta { min-height: 44px; }
}

/* =========================================================================
   MISSION: statement on green, photograph bleeding off the right
   The mirror of .wsplit — text first, image second — and the gradient runs
   the other way so the photo dissolves into the green on its LEFT edge,
   where it meets the words.
   ========================================================================= */
.vsplit { display: grid; grid-template-columns: 1fr 1fr; background: var(--forest); }
.vsplit__panel { display: flex; align-items: center; padding: var(--s-11) var(--s-8); }
.vsplit__inner { max-width: 30rem; margin-left: auto; }
.vsplit__text {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500;
  line-height: 1.45; color: var(--white);
}

.vsplit__media { position: relative; margin: 0; min-height: 460px; overflow: hidden; }
.vsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Runs to the panel's own colour so the join is invisible. Change one and the
   other has to change with it, or a band appears down the seam. */
.vsplit__fade {
  position: absolute; inset: 0; pointer-events: none;
  /* Starts later and ramps harder than the welcome band's fade. That one
     covers a wide room where the edge is just more room; this one is a group
     photograph, and every inch the gradient eats is somebody's face. Enough
     to dissolve the seam, not enough to bury the front row. */
  background: linear-gradient(to left,
    rgba(46,64,48,0) 62%, rgba(46,64,48,.45) 82%, rgba(46,64,48,.9) 95%, var(--forest) 100%);
}

@media (max-width: 960px) {
  .vsplit { grid-template-columns: 1fr; }
  .vsplit__panel { padding: var(--s-9) var(--s-5); }
  .vsplit__inner { max-width: none; margin-left: 0; }
  .vsplit__media { min-height: 300px; }
  /* Stacked, the photo sits BELOW the words, so it has to feather at its top
     edge into the green above rather than at the side. */
  .vsplit__fade {
    background: linear-gradient(to top,
      rgba(46,64,48,0) 55%, rgba(46,64,48,.7) 85%, var(--forest) 100%);
  }
}

/* =========================================================================
   LIVE STREAM DIALOG
   ========================================================================= */
.lsm { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--s-5); }
.lsm[hidden] { display: none; }
.lsm__backdrop { position: absolute; inset: 0; background: rgba(11,18,15,.72); backdrop-filter: blur(3px); }

.lsm__panel {
  position: relative; width: min(960px, 100%);
  background: var(--footer); color: var(--white);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lsm__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-dark);
}
.lsm__title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-md); color: var(--white); margin: 0;
}
.lsm__title .ico { color: #E4564B; }   /* the one red on the site: it means live */
.lsm__close {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: var(--footer-mute);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lsm__close:hover { background: rgba(255,255,255,.12); color: var(--white); }

.lsm__video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lsm__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lsm__note {
  padding: var(--s-4) var(--s-5); font-size: var(--fs-sm);
  color: var(--footer-mute); line-height: 1.55;
}
.lsm__note--lead { border-bottom: 1px solid var(--line-dark); color: #C9CEC6; }
.lsm__note a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }
.lsm__note a:hover { color: var(--white); }

@media (max-width: 680px) {
  .lsm { padding: 0; place-items: stretch; }
  .lsm__panel { width: 100%; border-radius: 0; align-self: center; }
}

/* --- LIVE state on the hero button ---------------------------------------
   Applied only when /api/live has confirmed a broadcast is running. Nothing
   below shows otherwise, so an idle Tuesday looks exactly as it did. */
.btn__live {
  display: none;
  padding: 2px 7px; border-radius: 4px;
  background: #D64134; color: #fff;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em;
}
.is-live .btn__live { display: inline-block; }
.is-live .ico { color: #D64134; animation: live-pulse 1.6s ease-in-out infinite; }

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Someone who has asked the system not to animate should get a steady red
   dot, not a flashing one — the colour and the label already carry it. */
@media (prefers-reduced-motion: reduce) {
  .is-live .ico { animation: none; }
}

/* --- page hero over a photograph ----------------------------------------- */
.phero--photo { position: relative; isolation: isolate; padding-block: var(--s-12); overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: -1; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Weighted toward the bottom, where the type sits, so the photograph keeps
   its own light at the top instead of being flattened evenly. */
.phero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12,18,14,.55) 0%, rgba(12,18,14,.62) 55%, rgba(12,18,14,.78) 100%);
}
/* --- SPLIT PAGE HERO: half colour, half photograph -----------------------
   The give page's shape, made reusable. Ryan asked for it on Ministries and
   Sermons on 14 October 2026, after a full-bleed photograph behind the words
   could not be "zoomed out" of — object-fit cover scales the picture to the
   band's WIDTH and crops top and bottom, so those heroes always showed a
   2000x790 window of their source whatever the file's own ratio was, and the
   only dial was band height. Standing the picture beside the words instead of
   behind them shows far more of it at the same height.

   No markup change: pageHero already emits .phero__media and .phero__inner as
   siblings, so this is the same component rearranged. Pass
   `className: 'mhero phero--split'`.

   The photograph's left edge is MASKED to nothing over a fifth of its width
   rather than meeting the colour at a hard line, which is what .gv-hero does
   and why the two halves read as one band. White at the opaque end, not black:
   a luminance-masking engine reads black as hidden and would blank the
   picture, and white is opaque under both readings. */
.phero--split {
  display: grid; grid-template-columns: 45fr 55fr;
  /* --forest, not the #0A0D0B that .gv-hero, .pr-hero and .evx-hero use. That
     near-black (RGB 10,13,11) read as too heavy beside the photograph on these
     two pages — Ryan's word was overwhelming. --forest is the colour every
     other page hero on this site already sits on, so the panel now matches
     them, and the picture fades into a green rather than into a hole.
     --forest-dk (#23311F) is the step between if this goes too light. */
  background: var(--forest); position: relative; isolation: isolate;
  /* --hero-h, the same floor .gv-hero and .pr-hero use, so these heroes keep
     the height they had as full-bleed bands. padding-block comes off because
     .phero--photo sets --s-12 top and bottom and the inner carries its own. */
  min-height: var(--hero-h);
  padding-block: 0; overflow: hidden;
}
.phero--split .phero__media {
  position: relative; inset: auto; z-index: 0;
  grid-column: 2; grid-row: 1; overflow: hidden;
}
.phero--split .phero__media img {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 9%, #fff 22%);
          mask-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 9%, #fff 22%);
}
/* The full-bleed scrim has nothing to darken here — the words sit on flat
   colour, not on the picture. */
.phero--split .phero__scrim { display: none; }
.phero--split .phero__inner {
  grid-column: 1; grid-row: 1;
  margin-left: auto; margin-right: 0; max-width: calc(1240px * 0.45);
  padding-top: calc(var(--head-h) + var(--s-6)); padding-bottom: var(--s-8);
}

@media (max-width: 900px) {
  /* Stacked: words first, picture beneath. The mask comes off — it fades the
     LEFT edge, which is the wrong edge once the join is horizontal — and a
     downward gradient takes over. Same decision as .gv-hero and .pr-hero. */
  .phero--split { grid-template-columns: 1fr; }
  .phero--split .phero__media { grid-column: 1; grid-row: 2; min-height: 240px; }
  .phero--split .phero__media img {
    -webkit-mask-image: none; mask-image: none;
  }
  .phero--split .phero__inner { grid-column: 1; grid-row: 1; max-width: none; }
  .phero--split .phero__scrim {
    display: block; inset: 0;
    /* Fades from the panel colour, not from the old near-black — a black
       gradient over a green panel leaves a dark band across the join. */
    background: linear-gradient(180deg, var(--forest) 0%, rgba(46,64,48,.5) 22%, rgba(46,64,48,0) 55%);
  }
}

.phero--center .phero__inner { text-align: center; }
.phero--center .phero__lede { margin-inline: auto; }

/* --- page introduction, below the hero ----------------------------------- */
.sec--intro { text-align: center; }
.page-intro__lede {
  font-size: var(--fs-md); color: var(--text); line-height: 1.7;
  max-width: 58ch; margin-inline: auto;
}
/* Half width, centred — closes the introduction off without drawing a full
   line across the page, which would read as a section break rather than a
   pause. */
.rule-half {
  width: 50%; max-width: 420px; height: 1px;
  margin: var(--s-8) auto 0; border: 0; background: var(--line);
}

@media (max-width: 680px) {
  /* :not(.phero--split) — a split hero runs its photograph to the bottom edge
     of the band, and 28px of padding under it left a strip of panel colour
     between the picture and the next section. That strip is what made it read
     as a block pasted in rather than part of the hero. */
  .phero--photo:not(.phero--split) { padding-block: var(--s-9); }
  .rule-half { width: 60%; margin-top: var(--s-6); }
}

/* =========================================================================
   THE STORY OF SCRIPTURE  —  /about/story-of-scripture/
   Scoped entirely to .edu-* so nothing here can reach the rest of the site.
   Uses the existing tokens: cream ground, charcoal type, olive, warm gold.
   ========================================================================= */
:root {
  --edu-ink:    #14171A;   /* the hero only — charcoal, not the site's forest */
}

/* --- hero ---------------------------------------------------------------- */
.edu-hero {
  background: var(--edu-ink); color: #F3F1EC;
  padding-block: calc(var(--head-h) + var(--s-11)) var(--s-11);
  text-align: center;
}
/* Font pinned so this reads identically as a <p> or as an <h2>. On the front
   door "Start exploring" and "Where would you like to begin?" ARE the section
   headings and are marked up as such; the global h1..h4 rule would otherwise
   put them in Playfair and wreck the eyebrow. */
.edu-eyebrow {
  font-family: var(--font-body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dk);
  margin: 0 0 var(--s-5);
}
.edu-eyebrow--light { color: #B79A62; }
.edu-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.05;
  color: #FBF9F5; margin-bottom: var(--s-5); letter-spacing: -.01em;
}
.edu-hero__sub {
  font-size: var(--fs-md); color: #B9B7B0; line-height: 1.65;
  max-width: 46ch; margin: 0 auto var(--s-10);
}

.edu-cross { display: block; margin-inline: auto; color: #D8D3C6; }
/* The church's own mark, in a cream copy generated by tools/recolour-logo.mjs
   — the green original vanishes against this background. */
.edu-hero__mark {
  display: block; margin-inline: auto; height: auto;
  width: clamp(104px, 13vw, 158px);
  animation: edu-mark 1.4s var(--ease) both;
}
@keyframes edu-mark {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.edu-begin {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-3);
  margin-top: var(--s-9); color: #9C988E;
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  transition: color .25s var(--ease);
}
.edu-begin:hover { color: #E8E4DA; }
/* On the cream subhero instead of the retired dark panel: gold on cream, and
   left-aligned because that hero is left-aligned where the old one was centred. */
.edu-begin--light { color: var(--gold-dk); align-items: flex-start; margin-top: var(--s-6); }
.edu-begin--light:hover { color: var(--ink); }
.edu-begin svg { width: 22px; height: 22px; animation: edu-nudge 2.4s ease-in-out infinite; }
@keyframes edu-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* --- shared section furniture -------------------------------------------- */
.edu-head { max-width: 62ch; margin-bottom: var(--s-9); }
.edu-head--center { margin-inline: auto; text-align: center; }
.edu-head__title { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }
.edu-head__lede { font-size: var(--fs-md); color: var(--text-mute); line-height: 1.65; }
.edu-facts__list { display: flex; flex-direction: column; gap: 5px; }
.edu-facts__list li {
  font-size: var(--fs-sm); color: var(--text); line-height: 1.5;
  padding-left: var(--s-4); position: relative;
}
.edu-facts__list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 1px; background: var(--gold);
}

/* --- timeline ------------------------------------------------------------ */
.edu-timeline { background: var(--cream); padding-block: var(--s-11); }
.edu-timeline__grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-9); }

.edu-rail-wrap { position: sticky; top: calc(var(--head-h) + var(--s-6)); align-self: start; }
.edu-rail__label {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: var(--s-4);
}
.edu-rail__list { border-left: 1px solid var(--line); }
.edu-rail__item {
  display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: var(--s-2);
  padding: 7px 0 7px var(--s-4); margin-left: -1px;
  border-left: 2px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.edu-rail__n { font-size: .625rem; letter-spacing: .1em; color: var(--text-mute); }
.edu-rail__t { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.3; transition: color .3s var(--ease); }
.edu-rail__item:hover .edu-rail__t { color: var(--ink); }
.edu-rail__item.is-active { border-left-color: var(--gold); }
.edu-rail__item.is-active .edu-rail__t { color: var(--ink); font-weight: 600; }
.edu-rail__item.is-active .edu-rail__n { color: var(--gold-dk); }

.edu-periods { display: flex; flex-direction: column; gap: var(--s-10); }
.edu-period { scroll-margin-top: calc(var(--head-h) + 2rem); }
/* Entrance is opt-in: the class is added by script, so with JS off every
   period is simply visible rather than stuck at zero opacity. */
.js-reveal .edu-period { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .edu-period.is-in { opacity: 1; transform: none; }

.edu-period__meta { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.edu-period__n {
  font-family: var(--font-display); font-size: var(--fs-md); color: var(--gold-dk);
}
.edu-period__era {
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute);
  padding-left: var(--s-3); border-left: 1px solid var(--line);
}
.edu-period__title { font-size: var(--fs-2xl); line-height: 1.15; margin-bottom: var(--s-2); }
.edu-period__dates { font-size: var(--fs-sm); color: var(--gold-dk); margin-bottom: var(--s-4); }
.edu-period__summary { font-size: var(--fs-md); color: var(--text); line-height: 1.7; max-width: 62ch; }

/* the pivot — more weight, no glow */
.edu-period--pivot {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-8);
  box-shadow: var(--shadow-sm);
}
.edu-pivot { padding: var(--s-7) 0 var(--s-4); }
.edu-cross--pivot { width: 74px; color: var(--forest); }
.js-reveal .edu-period--pivot.is-in .edu-cross--pivot { animation: edu-rise 1.2s var(--ease) both; }
@keyframes edu-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- period detail ------------------------------------------------------- */
.edu-more { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.edu-more__toggle {
  display: flex; align-items: center; gap: 8px; padding: var(--s-4) 0;
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk);
}
.edu-more__toggle::-webkit-details-marker { display: none; }
.edu-more__toggle .ico { transition: transform .3s var(--ease); }
.edu-more__shut { display: none; }
.edu-more[open] .edu-more__open { display: none; }
.edu-more[open] .edu-more__shut { display: inline; }
.edu-more[open] .edu-more__toggle .ico { transform: rotate(180deg); }
.edu-more__body { padding-bottom: var(--s-6); }

.edu-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-bottom: var(--s-6); }
.edu-facts__h {
  font-family: var(--font-body); font-size: .625rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: var(--s-3);
}
.edu-context {
  background: var(--cream-2); border-left: 2px solid var(--gold);
  padding: var(--s-5) var(--s-6); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.edu-context__label {
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk); margin-bottom: var(--s-3);
}
.edu-context__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; max-width: 74ch; }

/* --- life of Jesus ------------------------------------------------------- */
.edu-jesus { background: var(--cream-2); padding-block: var(--s-11); }
.edu-life { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-6); }
.edu-life__step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.edu-life__n { font-family: var(--font-display); font-size: var(--fs-md); color: var(--gold-dk); }
.edu-life__t { font-size: var(--fs-md); margin-bottom: 2px; }
.edu-life__p { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--s-3); }
.edu-life__x { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }
/* The last two carry the weight of the section without any extra decoration. */
.edu-life__step.is-weighted .edu-life__t { color: var(--forest); }
.edu-life__step.is-weighted .edu-life__n { color: var(--forest); }

/* --- map ----------------------------------------------------------------- */
.edu-mapsec { background: var(--cream); padding-block: var(--s-11); }
.edu-mapsec__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-8); align-items: start; }
.edu-map__frame {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: #EFE9DA;
}
/* The plate is a drawn map with its own relief, coastline and lettering. */
.edu-map__plate { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
/* Only used below 680px, where the pin labels are hidden. */
.edu-map__legend { display: none; }
.edu-places { position: relative; }
/* With JS off every place is stacked and readable; script shows one at a time. */
/* THE PANEL IS FOCUSED BY SCRIPT, and that is why it was drawing a focus ring.
   main.js gives the panel tabindex="-1" and focuses it when a pin is clicked,
   so that a screen reader announces the place you just chose instead of
   silently swapping text somewhere below. The browser cannot tell that focus
   apart from focus you asked for, so Safari painted its default blue ring
   around the card on every click.

   :focus-visible is the whole answer here — NOT `outline: none`, which would
   have taken the ring away from the keyboard user it is actually for. These
   panels are out of the tab order, so the only way to reach one is to activate
   a pin: click it and the ring stays away, press Enter on it and the ring
   comes back, which is exactly the rule. */
[data-place-panel]:focus,
[data-person-panel]:focus,
[data-belief-panel]:focus,
[data-era-panel]:focus { outline: none; }
[data-place-panel]:focus-visible,
[data-person-panel]:focus-visible,
[data-belief-panel]:focus-visible,
[data-era-panel]:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }

/* Same contract as the place and person panels: visible until script says
   otherwise, then one at a time. */
.js-panels .jt__panel { opacity: 0; visibility: hidden; }
.js-panels .jt__panel.is-shown { opacity: 1; visibility: visible; animation: edu-panel .45s var(--ease) both; }

.js-panels .edu-place { display: none; }
.js-panels .edu-place.is-shown { display: block; animation: edu-panel .45s var(--ease) both; }
@keyframes edu-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.edu-place { padding: var(--s-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.edu-place + .edu-place { margin-top: var(--s-4); }
.edu-place__region { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: var(--s-2); }
.edu-place__name { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.edu-place__blurb { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; margin-bottom: var(--s-5); }
.edu-place__h {
  font-family: var(--font-body); font-size: .625rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
  margin: var(--s-5) 0 var(--s-3);
}
.edu-place__books { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-5); }
.edu-place__books span {
  font-size: .6875rem; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--cream-2); color: var(--text-mute);
}

/* --- people -------------------------------------------------------------- */
.edu-people { background: var(--cream-2); padding-block: var(--s-11); }
.edu-people__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-9); align-items: start; }
/* The panel follows you down the list. With thirty-seven names the list is far
   taller than the card, so without this, choosing someone near the bottom
   updates a card you can no longer see. */
.edu-person-panel { position: sticky; top: calc(var(--head-h) + var(--s-6)); align-self: start; }
.edu-names { border-top: 1px solid var(--line); }
.edu-names__item {
  display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease);
}
.edu-names__n { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-mute); transition: color .25s var(--ease); }
.edu-names__r { display: block; font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }
.edu-names__item:hover { padding-left: var(--s-3); }
.edu-names__item:hover .edu-names__n { color: var(--ink); }
.edu-names__item.is-active { padding-left: var(--s-3); border-bottom-color: var(--gold); }
.edu-names__item.is-active .edu-names__n { color: var(--ink); }
.edu-names__item.is-major .edu-names__n { font-size: var(--fs-xl); color: var(--forest); }

.js-panels .edu-person { display: none; }
.js-panels .edu-person.is-shown { display: block; animation: edu-panel .45s var(--ease) both; }
.edu-person { padding: var(--s-7); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.edu-person + .edu-person { margin-top: var(--s-4); }
.edu-person__era { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: var(--s-2); }
.edu-person__name { font-size: var(--fs-2xl); margin-bottom: 2px; }
.edu-person__role { font-size: var(--fs-sm); color: var(--text-mute); }
.edu-person__why { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; }

/* --- early church -------------------------------------------------------- */
.edu-church { background: var(--cream); padding-block: var(--s-11); }
.edu-church__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.edu-church__step { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.edu-church__n { display: block; font-size: .625rem; letter-spacing: .14em; color: var(--gold-dk); margin-bottom: var(--s-3); }
.edu-church__t { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.edu-church__x { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }

/* --- how we received the Bible ------------------------------------------
   Set in columns with a hairline between, echoing a manuscript page without
   resorting to parchment textures. */
.edu-canon { background: var(--stone); padding-block: var(--s-11); }
.edu-canon__list { columns: 2; column-gap: var(--s-9); column-rule: 1px solid var(--line); }
.edu-canon__item { break-inside: avoid; padding-bottom: var(--s-7); }
.edu-canon__n {
  display: inline-block; font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--gold-on-stone); margin-bottom: var(--s-2);
}
.edu-canon__t { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.edu-canon__x { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; }

/* --- closing ------------------------------------------------------------- */
.edu-end { background: var(--cream); padding-block: var(--s-12); text-align: center; }
.edu-end__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.2;
  max-width: 20ch; margin: 0 auto var(--s-5);
}
.edu-end__text { font-size: var(--fs-md); color: var(--text); line-height: 1.7; max-width: 52ch; margin: 0 auto; }
.edu-end .btn-row { justify-content: center; margin-top: var(--s-8); }


/* ==========================================================================
   EDUCATION — the shared section kit
   Everything below is used by more than one page in /education/. Page-specific
   rules stay above this block. Tones reuse the site's own band colours so the
   section reads as part of the site rather than as a separate application.
   ========================================================================== */

.edu-band { padding-block: var(--s-11); }
.edu-band--cream { background: var(--cream); }
.edu-band--stone { background: var(--cream-2); }
.edu-band--sand  { background: var(--stone); }
.edu-band--tight { padding-block: var(--s-9); }
/* On the darker sand band the standard gold falls under AA. */
.edu-band--sand .edu-eyebrow { color: var(--gold-on-stone); }

.edu-centered { margin-inline: auto; text-align: center; }
.edu-fineprint {
  margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--text-mute);
  line-height: 1.7; max-width: 68ch;
}

/* --- the light page hero --------------------------------------------------
   Every Education page except the section front door and the timeline. The
   dark hero stays rare so that it still means something. */
.edu-subhero {
  background: var(--cream);
  padding-block: calc(var(--head-h) + var(--s-9)) var(--s-9);
  border-bottom: 1px solid var(--line);
}
.edu-subhero__title {
  font-size: clamp(2.1rem, 5vw, var(--fs-3xl)); line-height: 1.1;
  margin: var(--s-3) 0 var(--s-4); max-width: 20ch;
}
.edu-subhero__lede { font-size: var(--fs-md); color: var(--text-mute); line-height: 1.65; max-width: 60ch; }

/* --- landing: the four ways in ------------------------------------------- */
.edu-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.edu-feature {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-7); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.edu-feature:hover { border-color: var(--gold-lt); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.edu-feature__eyebrow {
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk);
}
.edu-feature__title { font-size: var(--fs-xl); line-height: 1.2; }
.edu-feature__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.65; flex: 1; }
.edu-feature__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.edu-feature__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--forest);
}
.edu-feature__cta svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.edu-feature:hover .edu-feature__cta svg { transform: translateX(4px); }
.edu-feature__count { font-size: var(--fs-xs); color: var(--text-mute); }

/* --- landing: go deeper --------------------------------------------------- */
.edu-deeps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.edu-deep {
  position: relative; display: block; padding: var(--s-6) var(--s-7) var(--s-8);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.edu-deep:hover { border-color: var(--gold-lt); box-shadow: var(--shadow-md); }
.edu-deep__title { font-size: var(--fs-lg); line-height: 1.25; margin: var(--s-2) 0 var(--s-3); }
.edu-deep__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.65; }
.edu-deep__arrow { position: absolute; right: var(--s-6); bottom: var(--s-5); color: var(--forest); }
.edu-deep__arrow svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.edu-deep:hover .edu-deep__arrow svg { transform: translateX(4px); }

/* --- landing: the progression -------------------------------------------- */

/* --- grouped selector list ------------------------------------------------
   Used where the groups carry meaning — the people page. Ungrouped selectors
   use .edu-names directly and need none of this. */
.edu-names__groups { list-style: none; margin: 0; padding: 0; }
.edu-names__group + .edu-names__group { margin-top: var(--s-7); }
.edu-names__glabel {
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk); padding-bottom: var(--s-3); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

/* --- questions ------------------------------------------------------------ */
.edu-qa { border-top: 1px solid var(--line); }
.edu-qa__item { border-bottom: 1px solid var(--line); }
.edu-qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink);
  transition: color .25s var(--ease);
}
.edu-qa__q::-webkit-details-marker { display: none; }
.edu-qa__q:hover { color: var(--forest); }
.edu-qa__q .ico { width: 20px; height: 20px; flex: none; color: var(--gold-dk); transition: transform .3s var(--ease); }
.edu-qa__item[open] .edu-qa__q .ico { transform: rotate(180deg); }
.edu-qa__a { padding-bottom: var(--s-6); max-width: 74ch; }
.edu-qa__a p { font-size: var(--fs-sm); color: var(--text); line-height: 1.75; }
.edu-qa__a p + p { margin-top: var(--s-4); }
.edu-qa__a .edu-place__books { margin-top: var(--s-5); }

/* --- themed cards (teaching, miracles) ------------------------------------ */
/* SIX COLUMNS, CARDS SPANNING TWO — which is still three cards to a row, but
   it buys half-column steps, and that is what a short last row needs.

   Seven teaching themes and five miracles are both awkward counts: three to a
   row leaves one card stranded at the left of a final row, and two cards
   hanging off the left of another. Neither can be fixed by choosing a
   different column count, because five and seven are prime. Widening the
   stragglers to fill the row was the other option and it is worse now that
   these cards carry artwork — a full-width card would show a 1176px drawing
   beside 374px ones.

   So the last row is CENTRED instead, and the rules below are arithmetic on
   how many cards are in it rather than a count of how many exist. Nothing here
   needs editing when a theme is added or removed. */
.edu-themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-5); }
.edu-themes > * { grid-column: span 2; }
/* A final row holding ONE card: start it at column 3, so it sits in the middle
   third. Reads as: it is the last, and it begins a row. */
.edu-themes > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
/* A final row holding TWO: start the pair at column 2 and the second follows,
   filling columns 2-5 of 6. */
.edu-themes > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
/* The card holds its plate to the top edge, so padding moves off the card and
   onto the text. Same 16/9 field and same cream ground as .edu-study__media,
   because these sit two sections apart on the same page and a second, slightly
   different picture box would read as a mistake. */
.edu-theme {
  background: var(--paper); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column;
}
/* The svg is taken OUT OF FLOW so aspect-ratio gets to decide the box. Left in
   flow it is a flex item whose height comes from the drawing's own 400x250,
   and the declared 16/9 never applies — 374 wide rendered 235 tall instead of
   210. The same trap the Events hero fell into. */
.edu-theme__art {
  display: block; position: relative; aspect-ratio: 16 / 9;
  background: var(--cream-2); border-bottom: 1px solid var(--line-2);
  color: var(--gold-dk);
}
.edu-theme__art svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; opacity: .5;
}
.edu-theme > :not(.edu-theme__art) { margin-inline: var(--s-6); }
.edu-theme > .edu-theme__t { margin-top: var(--s-6); }
.edu-theme > :last-child { margin-bottom: var(--s-6); }
.edu-theme__t { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.edu-theme__x { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; }
.edu-theme .edu-place__books { margin-top: var(--s-4); }

/* --- the teaching orbit (Jesus) --------------------------------------------
   Words on the left, a ring of themes on the right with the open one in the
   middle. The ring only exists once main.js has added .js-panels: without it
   every panel is visible and stacked, which is the page this section shipped
   as before, and the buttons stay hidden rather than sitting there doing
   nothing.
   -------------------------------------------------------------------------- */
.jt { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--s-9); align-items: center; }
.jt__words .edu-head { margin-bottom: var(--s-6); }
/* Set in from the lede rather than ruled off it — the reference hangs it to
   the right of the column's own left edge, which reads as an aside instead of
   a pull quote. */
.jt__quote { margin: var(--s-7) 0 0 var(--s-8); }
.jt__quote p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--ink); line-height: 1.45; margin: 0 0 var(--s-2); }
.jt__quote cite {
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}

/* The square the ring is drawn in. aspect-ratio keeps it circular at any
   width, so the satellites' percentage positions stay on the circle. */
.jt__orbit { position: relative; aspect-ratio: 1; width: 100%; max-width: 40rem; margin-inline: auto; }
/* The line joining them. It is one continuous circle rather than six arcs,
   struck at exactly the radius the satellites sit on — inset 2% because they
   are placed at 48% from the centre, so 2%..98% is their own circle. Each
   satellite's disc is opaque and covers the line where it crosses, which is
   what leaves the arcs between them. Behind everything, and decorative. */
.jt__orbit::before {
  content: ''; position: absolute; inset: 2%; border-radius: 50%;
  border: 1px solid var(--line); opacity: .75; z-index: 0;
}
.jt__ring > li, .jt__stage { z-index: 1; }

/* --- the middle --------------------------------------------------------- */
.jt__stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54%; aspect-ratio: 1; border-radius: 50%;
  background: var(--cream-2); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2); overflow: hidden;
}
.jt__panel { position: absolute; inset: 0; display: grid; }
.jt__panelart { position: absolute; inset: 0; color: var(--gold-dk); }
.jt__panelart svg, .jt__panelart img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jt__panelart svg { opacity: .45; }
/* A wash over the art so the words hold at any tone beneath them. */
.jt__panelart::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(250,247,241,.94) 38%, rgba(250,247,241,.72) 68%, rgba(250,247,241,.5) 100%);
}
.jt__panelbody {
  position: relative; z-index: 1; align-self: center; text-align: center;
  padding: 0 16%; display: flex; flex-direction: column; gap: var(--s-2); align-items: center;
}
.jt__panelt { font-size: var(--fs-lg); line-height: 1.15; margin: 0; }
.jt__panelx { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; margin: 0; max-width: 30ch; }
.jt__panel .edu-place__books { margin-top: var(--s-2); justify-content: center; }

/* --- the ring ------------------------------------------------------------ */
.jt__ring { display: none; list-style: none; margin: 0; padding: 0; }
.js-panels .jt__ring { display: block; }
/* THE ANCHOR IS THE DISC, NOT THE BUTTON. Centring the whole button puts its
   middle on the circle — but the button is a disc with three lines of text
   under it, so the disc rides above that middle, and by a different amount at
   the top of the ring than at the bottom. Measured before this: the drawn line
   at radius 307, the discs at 336. Shifting up by half a disc instead of half
   a button lands every disc exactly on the line. */
.jt__ring { --sat-art: 5rem; }
.jt__ring > li {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, calc(var(--sat-art) / -2));
}
.jt__sat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 9.5rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
  transition: transform .25s var(--ease);
}
.jt__satart {
  display: block; width: var(--sat-art); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--cream-2); border: 1px solid var(--line-2);
  color: var(--gold-dk); box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.jt__satart svg, .jt__satart img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jt__satart svg { opacity: .5; }
.jt__satlabel {
  font-family: var(--font-display); font-size: var(--fs-sm); line-height: 1.25;
  color: var(--ink); text-align: center;
}
.jt__satcap {
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); text-align: center; line-height: 1.35;
}
/* The mark under each theme. Nearly invisible until its theme is the open one,
   which is the only state it is there to carry. */
.jt__satdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); opacity: .16;
  transition: opacity .25s var(--ease), background .25s var(--ease);
}
.jt__sat:hover .jt__satdot { opacity: .38; }
.jt__sat.is-active .jt__satdot { background: var(--gold); opacity: 1; }
.jt__sat:hover { transform: translateY(-3px); }
.jt__sat:hover .jt__satart { border-color: var(--gold); }
.jt__sat.is-active .jt__satart { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 148, 92, .22), var(--shadow-md); }
.jt__sat.is-active .jt__satlabel { color: var(--gold-dk); }
.jt__sat:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 4px; border-radius: var(--r-sm); }
/* Focused by script when a satellite is pressed, same as the other panels. */
[data-theme-panel]:focus { outline: none; }
[data-theme-panel]:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: -4px; }

@media (max-width: 1180px) {
  .jt { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .jt__words { max-width: 46ch; }
  .jt__quote { margin-left: var(--s-6); }
}
/* Below this the ring cannot hold its labels without collisions, so it stops
   being a ring: the satellites become a plain row of chips above the panel,
   which is the same control in a shape that fits. */
@media (max-width: 720px) {
  .jt__orbit { aspect-ratio: auto; max-width: none; display: flex; flex-direction: column-reverse; gap: var(--s-6); }
  .js-panels .jt__ring {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4);
    position: static;
  }
  .jt__ring > li { position: static; transform: none; }
  /* The ring line is a circle struck across the orbit box. Once the orbit
     stops being a square and becomes a stacked column, that circle turns into
     a wide ellipse drawn over the chips and the panel. It has nothing to join
     here anyway. */
  .jt__orbit::before { display: none; }
  .jt__ring { --sat-art: 3.5rem; }
  .jt__ring > li { transform: none; }
  .jt__sat { width: 6rem; }
  .jt__satlabel { font-size: var(--fs-xs); }
  .jt__satcap { display: none; }
  .jt__quote { margin-left: 0; }
  .jt__stage { position: static; transform: none; width: 100%; aspect-ratio: auto; border-radius: var(--r-lg); }
  .jt__panel { position: static; }
  .jt__panelbody { padding: var(--s-7) var(--s-6); }
  .js-panels .jt__panel { display: none; }
  .js-panels .jt__panel.is-shown { display: grid; }
}

/* --- the miracles strip (Jesus) --------------------------------------------
   Header with the verse beside it, then a connected row of five, then the open
   account. Same contract as the ring above: the row is a control and stays
   hidden until main.js adds .js-panels, and without script every account is
   simply visible in order.
   -------------------------------------------------------------------------- */
/* The verse hangs level with the paragraph rather than the headline: end
   alignment puts its last line on the lede's last line, which is what reads as
   "level with it" when the two blocks are different lengths. */
.jm__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s-8); align-items: end; }
.jm__head .edu-head { margin-bottom: 0; }
.jm__quote { margin: 0; text-align: right; }
.jm__quote p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-base); color: var(--ink); line-height: 1.5; margin: 0 0 var(--s-2); }
.jm__quote cite {
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}

.jm { margin-top: var(--s-9); }
.jm__bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-4); }
.jm__barlabel { margin: 0; }
.jm__count { margin: 0; font-size: var(--fs-sm); color: var(--text-mute); letter-spacing: .06em; }
.jm__count span { color: var(--ink); font-weight: 600; }
.jm__count i { font-style: normal; opacity: .5; margin: 0 2px; }
.jm__steps { display: flex; gap: var(--s-2); }
.jm__step {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.jm__step svg { width: 18px; height: 18px; }
.jm__step:hover { border-color: var(--gold); background: var(--paper); }
.jm__step:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

/* The row. Hidden until script, like the ring — and the steppers with it,
   since they drive the same thing. */
.jm__strip, .jm__steps, .jm__count { display: none; }
.js-panels .jm__strip { display: grid; }
.js-panels .jm__steps { display: flex; }
.js-panels .jm__count { display: block; }
.jm__strip {
  grid-column: 1 / -1; margin: var(--s-6) 0 0; padding: 0; list-style: none;
  grid-auto-flow: column; grid-auto-columns: 1fr; position: relative;
}
/* The line joining them, drawn behind at the circles' centre. */
.jm__strip::before {
  content: ''; position: absolute; top: 44px; left: 12%; right: 12%;
  border-top: 1px solid var(--line); z-index: 0;
}
.jm__strip > li { position: relative; z-index: 1; display: grid; justify-items: center; }
.jm__dot {
  display: grid; justify-items: center; gap: var(--s-3);
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
}
.jm__dotart {
  width: 88px; height: 88px; border-radius: 50%; display: block; overflow: hidden;
  background: var(--cream); border: 1px solid var(--line);
  color: var(--gold-dk);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.jm__dotart svg, .jm__dotart img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jm__dotart svg { opacity: .55; }
.jm__dotlabel { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--ink); text-align: center; }
.jm__dot:hover .jm__dotart { border-color: var(--gold); }
.jm__dot.is-active .jm__dotart { background: var(--forest); border-color: var(--forest); color: #F3F1EC; }
.jm__dot.is-active .jm__dotart svg { opacity: .9; }
/* AN ICON BRINGS ITS OWN RING AND ITS OWN CREAM FILL, so the disc stops
   drawing either — two rings a pixel apart is the sort of thing that looks
   like a rendering fault rather than a decision. It also means the active
   state can no longer be a background colour, because the artwork is opaque
   and would cover it: it becomes a ring around the outside instead, which is
   the same language the teaching satellites use. */
.jm__dotart:has(img) { background: none; border-color: transparent; }
.jm__dotart img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jm__dot:hover .jm__dotart:has(img) { border-color: transparent; }
.jm__dot.is-active .jm__dotart:has(img) {
  background: none; border-color: transparent;
  box-shadow: 0 0 0 3px rgba(184, 148, 92, .5), var(--shadow-md);
}
.jm__dot.is-active .jm__dotlabel { font-weight: 600; }
.jm__dot:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 4px; border-radius: var(--r-sm); }

/* The open account. */
.jm__stage { margin-top: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.jm__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.js-panels .jm__panel { display: none; }
.js-panels .jm__panel.is-shown { display: grid; animation: edu-panel .45s var(--ease) both; }
.jm__art { display: block; position: relative; background: var(--cream-2); border-right: 1px solid var(--line); color: var(--gold-dk); min-height: 20rem; }
.jm__art svg, .jm__art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.jm__art svg { opacity: .45; }
.jm__body { padding: var(--s-8); align-self: center; }
.jm__n { margin: 0 0 var(--s-3); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em; color: var(--gold-dk); }
.jm__t { font-size: var(--fs-2xl); line-height: 1.1; margin: 0 0 var(--s-4); }
.jm__x { font-size: var(--fs-base); color: var(--text); line-height: 1.75; margin: 0 0 var(--s-5); max-width: 46ch; }

@media (max-width: 1080px) {
  .jm__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .jm__quote { text-align: left; border-left: 2px solid var(--gold-lt); padding-left: var(--s-5); }
  .jm__dotart { width: 68px; height: 68px; }
  .jm__strip::before { top: 34px; }
}
/* The row stops being a row: five circles cannot hold their labels here. */
@media (max-width: 760px) {
  .jm__bar { grid-template-columns: 1fr auto; }
  .jm__count { order: 2; }
  .jm__steps { order: 3; }
  .js-panels .jm__strip {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    grid-auto-columns: auto; gap: var(--s-4);
  }
  .jm__strip::before { display: none; }
  .jm__dotart { width: 56px; height: 56px; }
  .jm__dotlabel { font-size: var(--fs-xs); }
  .jm__panel { grid-template-columns: minmax(0, 1fr); }
  .jm__art { min-height: 12rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .jm__body { padding: var(--s-6); }
}

/* --- numbered points (Bible overview) ------------------------------------- */
.edu-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-9); }
.edu-point__t { font-size: var(--fs-lg); margin: var(--s-2) 0 var(--s-3); }
.edu-point__x { font-size: var(--fs-sm); color: var(--text); line-height: 1.75; }

/* --- stat row ------------------------------------------------------------- */
.edu-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5);
  margin: 0; padding: 0;
}
.edu-stat {
  flex: 1 1 130px; max-width: 190px; text-align: center;
  padding: var(--s-5) var(--s-4); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.edu-stat dt { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.edu-stat dd { margin: var(--s-2) 0 0; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); }

/* --- books of the Bible --------------------------------------------------- */
.edu-testament__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-4); margin-bottom: var(--s-8); border-bottom: 1px solid var(--line);
}
.edu-testament__title { font-size: var(--fs-2xl); }
.edu-testament__count { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.edu-bookgroup { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-8); }
.edu-bookgroup + .edu-bookgroup { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--line); }
.edu-bookgroup__title { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.edu-bookgroup__note { font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.7; }
.edu-books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-6); }
.edu-book { padding-top: var(--s-3); border-top: 1px solid var(--line-2); }
.edu-book__name {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink);
}
.edu-book__ch { font-family: var(--font-body); font-size: .6875rem; color: var(--text-mute); white-space: nowrap; }
.edu-book__x { font-size: var(--fs-xs); color: var(--text); line-height: 1.6; margin-top: 2px; }

/* --- Baptists ------------------------------------------------------------- */
.edu-baptists { display: grid; gap: var(--s-7); }
.edu-baptist { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.edu-baptist__t { font-size: var(--fs-lg); margin: var(--s-2) 0 var(--s-3); }
.edu-baptist__x p { font-size: var(--fs-sm); color: var(--text); line-height: 1.75; max-width: 74ch; }
.edu-baptist__x p + p { margin-top: var(--s-3); }

/* --- belief panel body ---------------------------------------------------- */
.edu-belief__body { margin-top: var(--s-4); }
.edu-belief__body p { font-size: var(--fs-sm); color: var(--text); line-height: 1.75; }
.edu-belief__body p + p { margin-top: var(--s-3); }

/* --- primary scripture line on a timeline period -------------------------- */
.edu-period__scripture { font-size: var(--fs-xs); color: var(--text-mute); margin-bottom: var(--s-4); }
.edu-period__scripture span {
  letter-spacing: .14em; text-transform: uppercase; font-size: .625rem;
  color: var(--gold-dk); margin-right: var(--s-2);
}

/* --- step grids at other column counts ------------------------------------ */
.edu-cols-3 { grid-template-columns: repeat(3, 1fr); }
.edu-cols-2 { grid-template-columns: repeat(2, 1fr); }

/* --- moving on ------------------------------------------------------------ */
.edu-sectionnav { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.edu-sectionnav__list {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
}
.edu-sectionnav__link {
  display: block; padding: 8px var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-sm); color: var(--text); text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.edu-sectionnav__link:hover { border-color: var(--gold-lt); color: var(--ink); }
.edu-sectionnav__link.is-current { border-color: var(--gold); color: var(--ink); font-weight: 600; }

/* ==========================================================================
   THE WORLD OF THE BIBLE — the exhibit at /education/places/
   A museum placard beside a plate, not a dashboard beside a widget. The whole
   design rests on typography, spacing and one good map; there is nothing here
   that needs to move to be interesting.
   ========================================================================== */

.wtb { background: var(--cream); padding-block: calc(var(--head-h) + var(--s-7)) var(--s-9); }
/* The plate takes roughly two thirds. It is the reason the page exists. */
.wtb__grid {
  display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  gap: var(--s-7); align-items: end;
}

/* --- the hero, in the left column above the plate ------------------------- */
.wtb__hero { max-width: 34ch; margin-bottom: var(--s-7); }
.wtb__title {
  font-size: clamp(2.2rem, 4.4vw, 3.35rem); line-height: 1.04;
  margin: var(--s-3) 0 var(--s-5); letter-spacing: -0.012em;
}
/* Two lines by design; the browser's own break lands in the wrong place. */
.wtb__title span { display: block; }
.wtb__lede {
  position: relative; padding-top: var(--s-5);
  font-size: var(--fs-md); color: var(--text-mute); line-height: 1.5; max-width: 30ch;
}
.wtb__lede::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3.5rem; height: 2px; background: var(--gold);
}
.wtb__intro {
  margin-top: var(--s-4); font-size: var(--fs-sm);
  color: var(--text); line-height: 1.65; max-width: 34ch;
}

/* --- the plate ------------------------------------------------------------ */
.wtb .edu-map__frame { box-shadow: var(--shadow-sm); }

/* --- the location marker -------------------------------------------------
   ONE component. Every place on the map is this and nothing else: a pin and a
   name. Only the coordinate, the name and the side the label runs on differ.

   ANCHORING. The coordinate is the TIP of the pin. The element is a padded
   flex row, so the shift needed to put the tip on the point is
   (padding + half the pin) horizontally and (padding at the foot) vertically —
   mirrored when the label runs left. Anchoring the whole row instead would sit
   every pin a label-width away from the place it names.

   The padding is the hit area: 48px tall, and the label is part of the target,
   so the thing you aim at is the thing you read. */
.wtb-pin {
  --pin-w: 26px;      /* drawn width of the teardrop */
  --pin-h: 34px;
  --pad-x: 8px;
  --pad-y: 7px;
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--pad-y) var(--pad-x);
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.wtb-pin--r { transform: translate(calc(-1 * (var(--pad-x) + var(--pin-w) / 2)), calc(-100% + var(--pad-y))); }
.wtb-pin--l {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + var(--pad-x) + var(--pin-w) / 2), calc(-100% + var(--pad-y)));
}

.wtb-pin__icon {
  width: var(--pin-w); height: var(--pin-h); flex: none; display: block;
  filter: drop-shadow(0 1px 1.5px rgba(60, 48, 28, .28));
  transition: transform .22s var(--ease);
  transform-origin: 50% 100%;      /* grows from the tip, so the point never moves */
}
.wtb-pin__body {
  fill: #F7F2E5; stroke: #A8823C; stroke-width: 1.7;
  transition: fill .22s var(--ease), stroke .22s var(--ease);
}
.wtb-pin__eye { fill: #A8823C; transition: fill .22s var(--ease); }

.wtb-pin__name {
  /* Where two labels would collide, this leans one aside. The pin does not
     move — see labelDy in content/education/places.js. */
  transform: translateY(var(--label-dy, 0));
  padding: 5px 10px; border-radius: 7px;
  background: #F7F2E5; border: 1px solid rgba(168, 130, 60, .38);
  box-shadow: 0 1px 2px rgba(60, 48, 28, .16);
  /* 13px, not 14: sixteen names on a 750px plate is genuinely tight, and the
     hit area is 48px regardless of how big the type is. */
  font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.15;
  color: #3F3729; white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}

.wtb-pin:hover, .wtb-pin:focus-visible { z-index: 4; }
.wtb-pin:hover .wtb-pin__icon, .wtb-pin:focus-visible .wtb-pin__icon { transform: scale(1.12); }
.wtb-pin:hover .wtb-pin__name, .wtb-pin:focus-visible .wtb-pin__name {
  border-color: var(--gold); color: var(--ink);
}

/* Selected — the same component, turned up. */
.wtb-pin.is-active { z-index: 5; }
.wtb-pin.is-active .wtb-pin__icon { transform: scale(1.2); }
.wtb-pin.is-active .wtb-pin__body { fill: #A8823C; stroke: #7A5D28; }
.wtb-pin.is-active .wtb-pin__eye { fill: #F7F2E5; }
.wtb-pin.is-active .wtb-pin__name {
  background: #A8823C; border-color: #7A5D28; color: #FBF7EC; font-weight: 600;
  box-shadow: 0 2px 6px rgba(60, 48, 28, .26);
}

/* --- the instruction ------------------------------------------------------ */
.wtb-hint {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 13.5rem; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(250, 247, 241, .88);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.4;
}
.wtb-hint svg { width: 20px; height: 20px; flex: none; color: var(--gold-dk); }

/* --- the placard ---------------------------------------------------------- */
.wtb__aside { position: relative; }
.wtb-compass {
  position: absolute; right: var(--s-4); top: -13rem; width: 11rem; height: 11rem;
  color: var(--gold-dk); opacity: .30; pointer-events: none;
}
.wtb-compass text { font-family: var(--font-body); font-size: 13px; letter-spacing: 1px; }

/* Overrides the shared .edu-place look; the show/hide rule still keys off
   .edu-place, so that class has to stay on the element. */
.wtb-card {
  padding: var(--s-7); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.wtb-card + .wtb-card { margin-top: var(--s-4); }
/* The name on the left, its engraving on the right. */
.wtb-card__head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  align-items: start; margin-bottom: var(--s-5);
}
.wtb-card__art {
  width: 8.5rem; height: auto; flex: none;
  color: rgba(122, 93, 40, .5);
  /* Sits behind the words, not beside them competing. */
  opacity: .85;
}
.wtb-card__region {
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dk); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--gold-lt); display: inline-block;
}
.wtb-card__name { font-size: var(--fs-2xl); line-height: 1.1; margin: var(--s-4) 0 0; }
.wtb-card__blurb { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; }
/* A ruled divider with a lozenge, the way a printed label breaks a block. */
.wtb-card__rule {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-6) 0; color: var(--line);
}
.wtb-card__rule::before, .wtb-card__rule::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.wtb-card__rule span {
  width: 7px; height: 7px; transform: rotate(45deg);
  border: 1px solid var(--gold-lt); flex: none;
}
.wtb-card__h {
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: var(--s-3);
}
.wtb-card__list { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.wtb-card__list li {
  position: relative; padding-left: var(--s-5); margin-bottom: 7px;
  font-size: var(--fs-sm); color: var(--text); line-height: 1.55;
}
.wtb-card__list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.wtb-card__read { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wtb-card__read a {
  padding: 9px var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text); text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.wtb-card__read a:hover { border-color: var(--gold); color: var(--ink); }

/* --- Explore the Bible ---------------------------------------------------- */
.wtb-explore-band { background: var(--cream); padding-block: 0 var(--s-10); }
.wtb-explore__title {
  display: flex; align-items: center; gap: var(--s-5);
  margin-bottom: var(--s-6);
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mute);
}
.wtb-explore__title::before, .wtb-explore__title::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.wtb-explore__list {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3);
  list-style: none; margin: 0; padding: 0;
}
.wtb-explore__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start; height: 100%;
  padding: var(--s-5); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background .3s var(--ease);
}
.wtb-explore__item:hover { background: rgba(184, 148, 92, .07); }
.wtb-explore__item.is-current { background: rgba(184, 148, 92, .10); }
.wtb-explore__icon { width: 30px; height: 30px; color: var(--text-mute); transition: color .3s var(--ease); }
.wtb-explore__item:hover .wtb-explore__icon, .wtb-explore__item.is-current .wtb-explore__icon { color: var(--gold-dk); }
.wtb-explore__label {
  display: block; font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--ink); margin-bottom: 4px;
}
.wtb-explore__item.is-current .wtb-explore__label { color: var(--gold-dk); }
.wtb-explore__text { display: block; font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.5; }
.wtb-explore__arrow {
  grid-column: 2; width: 18px; height: 18px; margin-top: var(--s-3);
  color: var(--gold-dk); opacity: .8;
  transition: transform .3s var(--ease);
}
.wtb-explore__item:hover .wtb-explore__arrow { transform: translateX(4px); }

@media (max-width: 1080px) {
  .wtb__grid { grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
  .wtb__hero { max-width: 44ch; }
  .wtb-compass { display: none; }
  .wtb-explore__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .wtb { padding-block: calc(var(--head-h) + var(--s-5)) var(--s-8); }
  .wtb-card { padding: var(--s-5); }
  .wtb__title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  /* The plate is small here and the hint would cover a third of it. */
  .wtb-hint { position: static; max-width: none; margin-top: var(--s-4); background: none; border: 0; padding: 0; }
  /* Sixteen labels cannot fit legibly across 330px, so the markers keep their
     pins — still tappable, still anchored — and the legend below names them. */
  .wtb-pin__name { display: none; }
  .wtb-pin { --pin-w: 20px; --pin-h: 26px; --pad-x: 11px; --pad-y: 11px; }
  .wtb-card__head { grid-template-columns: 1fr; }
  .wtb-card__art { width: 7rem; }
  .wtb-explore__list { grid-template-columns: 1fr; gap: 0; }
  .wtb-explore__item { padding: var(--s-4) var(--s-3); border-radius: var(--r-sm); }
  .wtb-explore__arrow { display: none; }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .edu-facts { grid-template-columns: repeat(2, 1fr); }
  .edu-life { grid-template-columns: repeat(2, 1fr); }
  .edu-church__list, .edu-cols-3, .edu-cols-2 { grid-template-columns: repeat(2, 1fr); }
  /* Two to a row here, so four columns and the same half-step. Only a final
     row of one can be short when the rows hold two. */
  .edu-themes { grid-template-columns: repeat(4, 1fr); }
  .edu-themes > :last-child:nth-child(3n + 1),
  .edu-themes > :nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }
  .edu-themes > :last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
  .edu-deeps { grid-template-columns: 1fr; }
  .edu-bookgroup { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 960px) {
  /* The rail becomes a horizontal strip pinned under the header — a sticky
     column has nowhere to sit once the layout is one column wide. */
  .edu-timeline__grid, .edu-mapsec__grid, .edu-people__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  /* A 1fr track sizes to its content's min-content width, and the rail's
     horizontal scroller reports its full 2400px as min-content — which drags
     the whole document that wide. min-width:0 lets the track shrink and the
     scroller actually scroll. Applied to every direct child for safety. */
  .edu-timeline__grid > *, .edu-mapsec__grid > *, .edu-people__grid > * { min-width: 0; }
  /* One column: the panel sits under the list, so sticking it would pin it
     over the very list you are choosing from. Script scrolls to it instead. */
  .edu-person-panel { position: static; }
  .edu-rail-wrap {
    position: sticky; top: var(--head-h); z-index: 20;
    background: var(--cream); margin-inline: calc(var(--s-5) * -1);
    padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line);
  }
  .edu-rail__label { display: none; }
  .edu-rail__list { display: flex; gap: var(--s-2); overflow-x: auto; border-left: 0; scrollbar-width: none; }
  .edu-rail__list::-webkit-scrollbar { display: none; }
  .edu-rail__item {
    grid-template-columns: auto; padding: 6px var(--s-4); margin: 0;
    border: 1px solid var(--line); border-radius: var(--r-pill); white-space: nowrap;
  }
  .edu-rail__n { display: none; }
  .edu-rail__item.is-active { border-color: var(--gold); background: var(--paper); }
  .edu-canon__list { columns: 1; }
  .edu-period--pivot { padding: var(--s-6); }

  /* Everything in the shared kit collapses to one column here. The rule above
     about min-width:0 applies to these grids too — any child that can scroll
     sideways will otherwise drag the document out with it. */
  .edu-features, .edu-points { grid-template-columns: 1fr; }
  .edu-band { padding-block: var(--s-9); }
  .edu-subhero { padding-block: calc(var(--head-h) + var(--s-7)) var(--s-7); }
}

@media (max-width: 680px) {
  .edu-hero { padding-block: calc(var(--head-h) + var(--s-8)) var(--s-9); }
  .edu-facts, .edu-life, .edu-church__list { grid-template-columns: 1fr; }
  .edu-timeline, .edu-jesus, .edu-mapsec, .edu-people, .edu-church, .edu-canon { padding-block: var(--s-9); }
  .edu-end { padding-block: var(--s-10); }
  /* Labels crowd badly at this width, so the map shows dots only and the
     panel below carries the names. */
  .edu-map__legend {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    list-style: none; margin: var(--s-4) 0 0; padding: 0;
  }
  .edu-map__legend a {
    display: block; padding: 6px var(--s-3);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: var(--fs-xs); color: var(--text); text-decoration: none;
  }
  .edu-map__legend a.is-active { border-color: var(--gold); background: var(--paper); color: var(--ink); }
  .edu-person { padding: var(--s-5); }

  .edu-themes, .edu-church__list, .edu-cols-3, .edu-cols-2 { grid-template-columns: 1fr; }
  /* One column: nothing to centre, and every span above has to stand down or
     a card would try to occupy a column that no longer exists. */
  .edu-themes > *,
  .edu-themes > :last-child:nth-child(3n + 1),
  .edu-themes > :nth-last-child(2):nth-child(3n + 1),
  .edu-themes > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .edu-books { grid-template-columns: 1fr; }
  .edu-feature { padding: var(--s-5); }
  .edu-feature__foot { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .edu-deep { padding: var(--s-5) var(--s-5) var(--s-8); }
  .edu-deep__arrow { right: var(--s-5); bottom: var(--s-4); }
  .edu-testament__head { flex-direction: column; gap: var(--s-1); }
  .edu-stat { flex: 1 1 44%; max-width: none; }
  /* The label and the destination need their own lines at this width. */
  .edu-progression__list li { flex-wrap: wrap; }
  .edu-progression__list a { width: 100%; padding-left: 2.4em; }
  .edu-qa__q { font-size: var(--fs-base); }
}

@media (prefers-reduced-motion: reduce) {
  .edu-hero__mark { animation: none; }
  .edu-begin svg { animation: none; }
  .js-reveal .edu-period { opacity: 1; transform: none; transition: none; }
  .js-panels .edu-place.is-shown, .js-panels .edu-person.is-shown { animation: none; }
}

/* ============================================================================
   BIBLE STUDIES  —  /education/studies/ and every study page
   ----------------------------------------------------------------------------
   Sits inside the Education section's register: ivory ground, charcoal and
   forest type, muted gold accents, serif headings, thin rules. Nothing here
   introduces a new colour — every value is an existing token.

   [data-find-only] is display:none until assets/main.js adds .js-find to the
   root, so the search field never appears unless it can actually search.
   ========================================================================== */

.stu-hero { padding-bottom: var(--s-7); }
.edu-subhero__intro {
  font-size: var(--fs-base); color: var(--text); line-height: 1.75;
  max-width: 62ch; margin-top: var(--s-4);
}

/* --- find ---------------------------------------------------------------- */
.stu-find { background: var(--cream); padding-block: var(--s-7) var(--s-9); }
/* THE SEARCH SITS BESIDE THE QUESTION, and FILLS the rest of the line.

   Two earlier attempts got this wrong in opposite directions. Stacked, the
   field was a 30rem box alone on a full-width row and read as squeezed. Moved
   to the right as a fixed-width box it read as randomly placed, because
   space-between left a wide dead gap in the middle of the row and the field
   looked like it had drifted there.

   So the heading takes only the width it needs and the field takes everything
   else, edge to edge. There is no gap left over to look accidental, and the
   field is as wide as the row allows rather than an arbitrary 30rem.

   THE FIELD SHARES A ROW WITH THE HEADING ALONE. It used to be centred against
   the eyebrow and the heading together, which put it in the gap between the
   two lines — level with neither. The eyebrow takes the full width of its own
   row above, so the second row holds just the question and the field and their
   centres line up. */
.stu-find__top {
  display: grid;
  grid-template-columns: auto minmax(18rem, 1fr);
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-5);
}
.stu-find__top .edu-eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.stu-find__title { grid-column: 1; grid-row: 2; }
.stu-find__top .stu-search { grid-column: 2; grid-row: 2; }
.stu-find__title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); margin: 0; }

[data-find-only][hidden] { display: none; }
.js-find [data-find-only][hidden] { display: block; }

.stu-search { max-width: none; margin-bottom: 0; }
/* HIDDEN, NOT REMOVED. A second uppercase label on this row competed with
   "Browse the library" — two eyebrows at two different heights, which is most
   of what made the row look uneven. The input still needs its accessible name,
   and the placeholder is not one: placeholders vanish on the first keystroke
   and are not reliably announced. So the label stays in the document and only
   leaves the screen. */
.stu-search__label {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stu-search__field { position: relative; display: flex; align-items: center; }
.stu-search__ico {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--gold-dk); pointer-events: none;
}
.stu-search__input {
  width: 100%; font: inherit; font-size: var(--fs-base); color: var(--ink);
  padding: .7rem .9rem .7rem 2.6rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stu-search__input::placeholder { color: var(--text-mute); }
.stu-search__input:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 148, 92, .18);
}

.stu-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.stu-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text); text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.stu-chip:hover { border-color: var(--gold-lt); color: var(--ink); }
.stu-chip.is-on {
  background: var(--gold-dk); border-color: var(--gold-dk); color: var(--cream); font-weight: 600;
}
.stu-chip:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }

.stu-count { margin: var(--s-5) 0 0; font-size: var(--fs-sm); color: var(--text-mute); }

/* --- cards --------------------------------------------------------------- */
.stu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-4);
}
/* Four featured studies in an auto-fill grid land 3 + 1, with two empty
   columns under them. Two by two is the shape four things actually make. */
.stu-grid--feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 760px) { .stu-grid--feat { grid-template-columns: minmax(0, 1fr); } }

.stu-card { display: flex; }
/* .stu-card sets display, which beats the browser's own [hidden] rule on equal
   specificity — so a filtered-out card stayed on screen. The script hides cards
   with the hidden attribute, so that attribute has to win here. */
.stu-card[hidden] { display: none; }
.stu-card__link {
  display: flex; flex-direction: column; width: 100%;
  padding: var(--s-5); gap: var(--s-2);
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stu-card__link:hover { border-color: var(--gold-lt); transform: translateY(-2px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.stu-card__link:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }

.stu-card__top { display: flex; align-items: center; gap: var(--s-2); }
.stu-ico { width: 22px; height: 22px; color: var(--gold-dk); flex: none; }
.stu-card__cat {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dk);
}
.stu-card__title {
  font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.25;
  color: var(--ink); margin: 0;
}
.stu-card__desc { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; margin: 0; }

.stu-card__refs { display: flex; flex-wrap: wrap; gap: .35rem; margin: var(--s-2) 0 0; }
.stu-card__refs span {
  font-size: .75rem; letter-spacing: .02em; color: var(--text-mute);
  padding: .18rem .5rem; border: 1px solid var(--line); border-radius: var(--r-pill);
}
/* The flag that a study touches a contested question. Small on purpose — it
   signals that the note exists; the study page carries the note itself. */
.stu-card__flag {
  margin: var(--s-2) 0 0; font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
}
.stu-card__flag::before { content: '§'; margin-right: .4em; color: var(--gold-dk); }

.stu-card__cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--forest);
}
.stu-arrow { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.stu-card__link:hover .stu-arrow { transform: translateX(3px); }

.stu-card--feat .stu-card__link { padding: var(--s-6); }
.stu-card--feat .stu-card__title { font-size: var(--fs-xl); }
.stu-card--feat .stu-card__desc { font-size: var(--fs-base); }

/* --- shelves ------------------------------------------------------------- */
.stu-band { padding-block: var(--s-10); }
.stu-library { padding-block: var(--s-10) var(--s-11); }
.stu-shelf { margin-top: var(--s-9); scroll-margin-top: calc(var(--head-h) + var(--s-5)); }
.stu-shelf__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.stu-shelf__head .stu-ico { width: 26px; height: 26px; margin-top: 2px; }
.stu-shelf__title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); margin: 0; }
.stu-shelf__blurb { font-size: var(--fs-sm); color: var(--text-mute); margin: .2rem 0 0; }

.stu-empty { margin-top: var(--s-8); font-size: var(--fs-md); color: var(--text-mute); text-align: center; }
.stu-empty a { color: var(--forest); }
.stu-review { margin-top: var(--s-5); font-size: var(--fs-sm); }

/* --- study page ---------------------------------------------------------- */
.stu-detail__hero { padding-bottom: var(--s-7); }
.stu-detail__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute); margin: 0 0 var(--s-4);
}
.stu-detail__crumbs a { color: var(--gold-dk); text-decoration: none; }
.stu-detail__crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.stu-detail { padding-block: var(--s-9); }
.stu-detail__h {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute); margin: 0 0 var(--s-5);
  font-family: var(--font-body);
}

.stu-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stu-step {
  display: grid; grid-template-columns: 3.25rem 1fr; align-items: baseline;
  padding: var(--s-4) 0; border-top: 1px solid var(--line-2);
}
.stu-step:last-child { border-bottom: 1px solid var(--line-2); }
.stu-step__n {
  font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--gold-dk); font-variant-numeric: tabular-nums;
}
.stu-step__t { font-size: var(--fs-md); color: var(--ink); line-height: 1.5; }

.stu-rule { margin: var(--s-8) 0; text-align: center; }
.stu-rule span { display: inline-block; width: 100%; height: 1px; background: var(--line); }

.stu-read { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.stu-read a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--forest); text-decoration: none;
  transition: border-color .2s var(--ease);
}
.stu-read a:hover { border-color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }

.stu-related__h {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute);
  font-family: var(--font-body); margin: var(--s-8) 0 var(--s-4);
}
.stu-related { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.stu-related__item {
  display: flex; align-items: center; gap: var(--s-3); min-height: 56px;
  padding: var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); text-decoration: none;
  transition: border-color .2s var(--ease);
}
.stu-related__item:hover { border-color: var(--gold-lt); }
.stu-related__cat {
  display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-dk);
}
.stu-related__t { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); }
.stu-back { margin: var(--s-8) 0 0; font-size: var(--fs-sm); }
.stu-back a { color: var(--forest); }

@media (max-width: 680px) {
  .stu-find { padding-block: var(--s-6) var(--s-7); }
  .stu-find__top { grid-template-columns: minmax(0, 1fr); }
  .stu-find__top .edu-eyebrow,
  .stu-find__title,
  .stu-find__top .stu-search { grid-column: 1; grid-row: auto; }
  .stu-search { max-width: none; }
  .stu-shelf { margin-top: var(--s-7); }
  .stu-step { grid-template-columns: 2.5rem 1fr; }
  .stu-card--feat .stu-card__link { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .stu-card__link, .stu-arrow, .stu-search__input, .stu-chip { transition: none; }
  .stu-card__link:hover { transform: none; }
  .stu-card__link:hover .stu-arrow { transform: none; }
}



/* --- the study itself ----------------------------------------------------
   Set as an editorial page rather than a stack of cards: a hanging number in
   the margin, a serif heading, the passage as a link, then the text. The
   passage link is the most important element on the page — it is what the
   whole study exists to send you to — so it is the only coloured thing in
   the block. */
.stu-orient {
  font-size: var(--fs-md); color: var(--text); line-height: 1.75;
  max-width: 62ch; margin: 0 0 var(--s-8);
  padding-left: var(--s-4); border-left: 2px solid var(--gold-lt);
}

.stu-steps a { text-decoration: none; }
.stu-step a.stu-step__t { color: var(--ink); }
.stu-step:hover a.stu-step__t { text-decoration: underline; text-underline-offset: 3px; }
.stu-step a:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; border-radius: 2px; }

.stu-body { display: grid; gap: var(--s-8); }
.stu-sec {
  display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--s-4);
  scroll-margin-top: calc(var(--head-h) + var(--s-5));
}
.stu-sec__n {
  font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2;
  color: var(--gold-lt); margin: 0; font-variant-numeric: tabular-nums;
}
.stu-sec__t {
  font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.3;
  color: var(--ink); margin: 0 0 var(--s-3);
}
.stu-sec__read {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 0 0 var(--s-3);
}
.stu-sec__read > span {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute);
}
.stu-sec__read a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk);
  text-decoration: none; border-bottom: 1px solid var(--gold-lt);
}
.stu-sec__read a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.stu-sec__text { margin: 0; font-size: var(--fs-base); color: var(--text); line-height: 1.8; max-width: 66ch; }

.stu-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 62ch; }
.stu-qs li {
  padding-left: var(--s-5); position: relative;
  font-size: var(--fs-md); color: var(--ink); line-height: 1.6;
}
.stu-qs li::before {
  content: '?'; position: absolute; left: 0; top: 0;
  font-family: var(--font-display); color: var(--gold-dk);
}

@media (max-width: 680px) {
  .stu-sec { grid-template-columns: minmax(0, 1fr); }
  .stu-sec__n { font-size: var(--fs-sm); margin-bottom: var(--s-1); }
  .stu-body { gap: var(--s-7); }
  .stu-orient { padding-left: var(--s-3); }
}

/* ============================================================================
   EDUCATION — the section bar, and the destination cards
   ========================================================================== */

/* --- the section bar -----------------------------------------------------
   Sits directly under the site header, above the page's own hero. Scrolls
   sideways on a narrow screen instead of wrapping into ragged rows. */
/* A bordered card rather than a strip: white ground, hairline, soft radius,
   the current destination filled. It runs wider than .wrap--wide because ten
   destinations need the room — "Scripture Through History" alone is 240px. */
.edu-bar {
  background: var(--cream);
  padding: 0 var(--s-6) var(--s-3);
}
.edu-bar__scroll {
  max-width: 1440px; margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.edu-bar__scroll::-webkit-scrollbar { display: none; }
.edu-bar__list {
  list-style: none; margin: 0; padding: 6px;
  display: flex; align-items: stretch; gap: 2px;
  width: max-content; min-width: 100%;
}
.edu-bar__list > li { display: flex; flex: 1 0 auto; }
.edu-bar__item {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; white-space: nowrap; width: 100%;
  /* Ten full labels came to 1288px against 1214 available at 1280 — the width
     this page is checked at — so Church History fell off the end. Trimmed the
     item padding and the wrapper gutter rather than dropping to short labels
     that early; the bar still scrolls below the breakpoint. */
  padding: .9rem .5rem;
  font-size: .875rem; color: var(--text); text-decoration: none;
  border-radius: calc(var(--r-md) - 4px);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.edu-bar__item:hover { color: var(--ink); background: var(--cream); }
.edu-bar__item.is-current {
  color: var(--ink); font-weight: 600;
  background: var(--cream-2); box-shadow: inset 0 0 0 1px var(--line);
}
.edu-bar__item:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: -2px; }
.edu-bar__ico { width: 18px; height: 18px; flex: none; color: var(--gold-dk); }
.edu-bar__short { display: none; }

/* On every page except the section front door the bar is the first thing on
   the page, so it carries the fixed header's offset. On /education/ the hero
   is above it and has already done that. */
.edu-bar { padding-top: calc(var(--head-h) + var(--s-3)); }
.eduh + .edu-bar { padding-top: 0; }

.edu-bar + .edu-hero { padding-top: var(--s-9); }
.edu-bar + .edu-subhero { padding-top: var(--s-8); }

@media (max-width: 1340px) { .edu-bar { padding-inline: var(--s-4); } }
@media (max-width: 1100px) {
  .edu-bar__full { display: none; }
  .edu-bar__short { display: inline; }
  .edu-bar__item { padding-inline: var(--s-3); }
}
@media (max-width: 680px) {
  .edu-bar { padding-inline: var(--s-5); }
  .edu-bar__list > li { flex: 0 0 auto; }
}

/* The engraved plate's own class, still used by every card that renders one
   from content/education/plates.js. The card shell it used to belong to is
   gone; this rule is not. */
.edu-plate__art { width: 100%; height: 100%; display: block; }

/* --- the Education hero --------------------------------------------------
   Light, wide, and the artwork bleeds off the right edge and dissolves into
   the cream on its left, so there is no seam between drawing and page. Same
   treatment as .hero on the homepage; a gradient over the art rather than a
   mask on it, because a mask would take the cream with it. */
.eduh { position: relative; background: var(--cream); }
.eduh__media { position: absolute; inset: 0 0 0 46%; color: var(--gold-dk); opacity: .62; }
.eduh__art { width: 100%; height: 100%; display: block; }

/* The photograph is already sepia and already fades toward its own left, so it
   needs no tinting — full opacity, and the gradient below does the dissolving.
   object-position holds the ruins and the book in frame as the panel narrows;
   left-of-centre, because the right edge is just wall. */
.eduh__media--photo { opacity: 1; }
.eduh__media--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; display: block; }
.eduh__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--cream) 0%, rgba(250,247,241,.9) 16%, rgba(250,247,241,.35) 44%, rgba(250,247,241,0) 74%);
}
.eduh__inner {
  position: relative;
  padding-top: calc(var(--head-h) + var(--s-7));
  padding-bottom: var(--s-8);
}
/* The image runs on PAST the bottom of the hero and the tab bar sits down into
   it, so the bar reads as floating on the hero rather than stacked under it.

   The first attempt grew the hero and pulled the bar up by the same amount,
   which cancelled to nothing. So: the media bleeds twice the overlap below the
   section, and the bar takes one overlap of transparent top padding. The image
   is therefore visible for one overlap into the bar's space, and the card
   covers the last one. Raise --edu-overlap to sink it further in.

   overflow is visible here for the bleed; the media is inset from the left and
   the image is object-fit: cover, so nothing escapes sideways. The bar needs a
   stacking context or the absolutely-positioned media paints over the card. */
.eduh { overflow: visible; }
.eduh .eduh__media { bottom: calc(-2 * var(--edu-overlap)); }
.eduh + .edu-bar {
  padding-top: var(--edu-overlap);
  background: transparent;
  position: relative; z-index: 1;
}
.eduh__text { max-width: 36rem; }
/* The type is pinned here rather than inherited, because this heading is an
   <h1> on the section front door and a <p> on the other nine — the page's own
   title is the h1 there. The global h1..h4 rule supplies the display face and
   600 weight; a <p> was picking up the body sans at 400, so the hero changed
   font when you switched tabs. It cannot now: the tag no longer decides. */
.eduh__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4xl); line-height: 1.06; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 var(--s-5);
}
.eduh__title span { display: block; }
.eduh__lede { font-size: var(--fs-md); color: var(--text); line-height: 1.65; max-width: 32rem; }

@media (max-width: 960px) { .eduh__media { inset: 0 0 0 54%; } }
@media (max-width: 680px) {
  /* Under the text rather than beside it, and quieter, so the words stay first. */
  .eduh__media { inset: auto 0 0 0; height: 46%; opacity: .3; }
  .eduh__media--photo { opacity: .55; }
  .eduh__media::after {
    background: linear-gradient(to bottom, var(--cream) 0%, rgba(250,247,241,.55) 40%, rgba(250,247,241,0) 100%);
  }
  .eduh__inner { padding-bottom: calc(var(--s-9) + 6vh); }
  .eduh__text { max-width: none; }
}

/* ============================================================================
   EDUCATION FRONT DOOR
   ----------------------------------------------------------------------------
   The hierarchy is made here, mostly with area and type size. The Story card
   is about four times the area of a supporting card; the supporting cards are
   larger than a study card; the three longer reads are a list, not cards.
   Nothing on this page is the same size as the thing next to it by accident.
   ========================================================================== */

.edu-explore { padding-block: var(--s-10) var(--s-9); }

/* A twelve-column bed. The feature takes eight and People four; Places and
   Jesus take six each on the row below. `span` comes from the record, so the
   proportions live with the content rather than being hard-coded per card. */
.edu-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5); margin-top: var(--s-6);
}
.edu-feat { grid-column: span 8; }
.edu-exp--4 { grid-column: span 4; }
.edu-exp--6 { grid-column: span 6; }

/* --- shared card surface -------------------------------------------------- */
.edu-feat, .edu-exp, .edu-study {
  position: relative; display: flex; text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.edu-feat:hover, .edu-exp:hover, .edu-study:hover {
  border-color: var(--gold-lt); transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
.edu-feat:focus-visible, .edu-exp:focus-visible, .edu-study:focus-visible {
  outline: 2px solid var(--gold-dk); outline-offset: 3px;
}
.edu-arrow { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.edu-feat:hover .edu-arrow, .edu-exp:hover .edu-arrow,
.edu-study:hover .edu-arrow, .edu-deeper__item:hover .edu-arrow { transform: translateX(4px); }

/* The plate sits in the card rather than on it: no border, no frame, and it
   lifts a little on hover. */
.edu-feat .edu-plate__art, .edu-exp .edu-plate__art, .edu-study .edu-plate__art,
.edu-feat__media svg, .edu-exp__media svg, .edu-study__media svg, .edu-keep__art svg {
  width: 100%; height: 100%; display: block; color: var(--gold-dk); opacity: .5;
  transition: opacity .25s var(--ease), transform .4s var(--ease);
}
.edu-feat:hover .edu-feat__media svg, .edu-exp:hover .edu-exp__media svg,
.edu-study:hover .edu-study__media svg { opacity: .66; transform: scale(1.03); }
.edu-feat__media img, .edu-exp__media img, .edu-study__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.edu-feat:hover .edu-feat__media img, .edu-exp:hover .edu-exp__media img,
.edu-study:hover .edu-study__media img { transform: scale(1.03); }

/* --- the dominant card ---------------------------------------------------- */
.edu-feat { align-items: stretch; min-height: 268px; }
.edu-feat__body {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 1 1 46%; padding: var(--s-7) var(--s-6);
}
.edu-feat__media { flex: 1 1 52%; align-self: stretch; background: var(--cream-2); }
.edu-feat__eyebrow, .edu-exp__eyebrow, .edu-study__cat {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-dk); margin-bottom: var(--s-3);
}
.edu-feat__title {
  font-family: var(--font-display); font-weight: 600;
  /* Sized so the authored two lines stay two lines in this column. At --fs-2xl
     "to the early church" broke again inside its own line and the card grew a
     third row it did not need. */
  font-size: var(--fs-xl); line-height: 1.18; color: var(--ink);
  margin-bottom: var(--s-4);
}
.edu-feat__title span, .edu-exp__title span { display: block; }
.edu-feat__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.65; margin-bottom: var(--s-6); }
.edu-feat__cta, .edu-exp__cta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: auto;
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dk);
}

/* --- the three that support it -------------------------------------------- */
.edu-exp { align-items: stretch; min-height: 176px; }
.edu-exp__body {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 1 1 58%; padding: var(--s-6) var(--s-5);
}
.edu-exp__media { flex: 1 1 46%; align-self: stretch; background: var(--cream-2); }
.edu-exp__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); line-height: 1.22; color: var(--ink); margin-bottom: var(--s-4);
}

/* --- the three longer reads ----------------------------------------------- */
.edu-deeper {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--line);
}
.edu-deeper li { border-bottom: 1px solid var(--line); }
.edu-deeper li + li { border-left: 1px solid var(--line); }
/* EVERY CELL IS PLACED BY HAND HERE, and it has to be. The first version gave
   the arrow a definite ROW (1 / 3) and no column, and the description a
   definite COLUMN (1) and no row. Auto-placement resolves definite-row items
   before the rest, so the arrow took column 1 — the left — the title was
   bumped into column 2 on the right, and the description, pinned to column 1
   and finding both its rows taken, dropped into a third row that was never
   meant to exist. The three cards then disagreed about where the arrow sat,
   because each one was centring it over row tracks of a different height.

   Rows are auto then 1fr, so the title sits on its own line at the top of
   every card and the description takes the rest. That is what keeps the three
   titles level with each other and the arrows, centred over the full height,
   level too — the cards are already equal height, so centre means the same
   place in all three. */
.edu-deeper__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: var(--s-4); row-gap: 2px; height: 100%;
  padding: var(--s-5) var(--s-5) var(--s-5) 0; text-decoration: none;
  transition: padding-left .25s var(--ease);
}
.edu-deeper li + li .edu-deeper__item { padding-left: var(--s-5); }
.edu-deeper__item:hover { padding-left: var(--s-3); }
.edu-deeper li + li .edu-deeper__item:hover { padding-left: calc(var(--s-5) + var(--s-3)); }
.edu-deeper__t { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); }
.edu-deeper__x { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.45; }
.edu-deeper__go { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--gold-dk); }
.edu-deeper__go svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.edu-deeper__item:hover .edu-deeper__go svg { transform: translateX(4px); }
.edu-deeper__item:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: -2px; }

/* --- Bible Studies -------------------------------------------------------- */
.edu-studyband { padding-block: var(--s-10); }
.edu-studyband__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); margin-bottom: var(--s-7);
}
.edu-studyband__title {
  font-size: var(--fs-2xl); color: var(--ink); margin: 0 0 var(--s-3); max-width: 24ch;
}
.edu-studyband__lede { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; max-width: 56ch; margin: 0; }
.edu-studyband__all {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--gold-on-stone); text-decoration: none;
}
.edu-studyband__all svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.edu-studyband__all:hover svg { transform: translateX(4px); }
.edu-studyband__all:focus-visible { outline: 2px solid var(--gold-on-stone); outline-offset: 3px; }

.edu-studies-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.edu-study { flex-direction: column; }
.edu-study__media { aspect-ratio: 16 / 9; background: var(--cream-2); border-bottom: 1px solid var(--line-2); }
.edu-study__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.edu-study__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); line-height: 1.24; color: var(--ink); margin-bottom: var(--s-3);
}
.edu-study__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }
.edu-study__foot {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: auto; padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
}
.edu-study__refs { display: flex; flex-wrap: wrap; gap: .3rem; }
.edu-study__refs span {
  font-size: .75rem; color: var(--text-mute);
  padding: .16rem .5rem; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.edu-study__go {
  display: grid; place-items: center; flex: none; margin-left: auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--forest);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.edu-study:hover .edu-study__go { background: var(--gold-dk); border-color: var(--gold-dk); color: var(--cream); }

/* --- where would you like to begin ---------------------------------------- */
.edu-beginband { padding-block: var(--s-9) var(--s-10); }
.edu-steps {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
  counter-reset: none;
}
.edu-step { position: relative; }
/* A hairline chevron between steps. Decorative — the <ol> carries the order. */
.edu-step + .edu-step::before {
  content: ''; position: absolute; left: calc(-1 * var(--s-5) / 2 - 4px); top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  transform: rotate(45deg);
}
.edu-step__link {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--s-5); text-decoration: none;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.edu-step__link:hover { border-color: var(--gold-lt); transform: translateY(-2px); }
.edu-step__link:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.edu-step__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.edu-step__n {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--gold-lt); font-variant-numeric: tabular-nums; line-height: 1;
}
.edu-step__ico { width: 22px; height: 22px; color: var(--gold-dk); margin-left: auto; }
.edu-step__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-base); line-height: 1.25; color: var(--ink); margin-bottom: var(--s-2);
}
.edu-step__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.55; }

/* --- keep going ----------------------------------------------------------- */
.edu-keep { position: relative; background: var(--stone); overflow: hidden; }
.edu-keep__art { position: absolute; inset: 0 56% 0 0; color: var(--forest); opacity: .3; }
.edu-keep__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edu-keep__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to left, var(--stone) 0%, rgba(216,212,202,.7) 34%, rgba(216,212,202,0) 82%);
}
.edu-keep__inner { position: relative; padding-block: var(--s-10); }
.edu-keep__text { margin-left: auto; max-width: 34rem; }
.edu-keep__title { font-size: var(--fs-2xl); color: var(--ink); margin: 0 0 var(--s-3); }
.edu-keep__sub { font-size: var(--fs-md); color: var(--text); line-height: 1.6; margin: 0 0 var(--s-6); }
/* Gold rather than forest, as in the reference. Cream on --gold-dk is 4.87:1,
   which clears AA; the standard --gold is far too light to carry text. */
.edu-keep__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: var(--r-pill);
  background: var(--gold-dk); color: var(--cream);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: background .25s var(--ease);
}
.edu-keep__cta:hover { background: var(--forest); }
.edu-keep__cta:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .edu-feat { grid-column: span 12; }
  .edu-exp--4, .edu-exp--6 { grid-column: span 6; }
  .edu-studies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-step + .edu-step::before { display: none; }
}
@media (max-width: 860px) {
  .edu-deeper { grid-template-columns: minmax(0, 1fr); }
  .edu-deeper li + li { border-left: 0; }
  .edu-deeper li + li .edu-deeper__item { padding-left: 0; }
  .edu-deeper li + li .edu-deeper__item:hover { padding-left: var(--s-3); }
  .edu-studyband__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
  .edu-explore { padding-block: var(--s-8) var(--s-7); }
  .edu-grid { gap: var(--s-4); }
  .edu-feat, .edu-exp--4, .edu-exp--6 { grid-column: span 12; }
  /* Media above the words on a phone: side by side leaves a 140px column of
     text, which is not a card, it is a receipt. */
  .edu-feat, .edu-exp { flex-direction: column-reverse; min-height: 0; }
  .edu-feat__media, .edu-exp__media { flex: none; aspect-ratio: 16 / 9; width: 100%; }
  .edu-feat__body, .edu-exp__body { flex: none; padding: var(--s-5); }
  .edu-studies-grid, .edu-steps { grid-template-columns: minmax(0, 1fr); }
  .edu-keep__art { inset: auto 0 0 0; height: 42%; opacity: .22; }
  .edu-keep__art::after {
    background: linear-gradient(to top, var(--stone) 0%, rgba(216,212,202,.6) 45%, rgba(216,212,202,0) 100%);
  }
  .edu-keep__text { max-width: none; }
  .edu-keep__inner { padding-block: var(--s-9) calc(var(--s-9) + 8vh); }
}

@media (prefers-reduced-motion: reduce) {
  .edu-feat, .edu-exp, .edu-study, .edu-step__link, .edu-arrow,
  .edu-feat__media svg, .edu-exp__media svg, .edu-study__media svg,
  .edu-feat__media img, .edu-exp__media img, .edu-study__media img,
  .edu-deeper__item, .edu-study__go, .edu-keep__cta { transition: none; }
  .edu-feat:hover, .edu-exp:hover, .edu-study:hover, .edu-step__link:hover { transform: none; }
  .edu-feat:hover .edu-arrow, .edu-exp:hover .edu-arrow, .edu-study:hover .edu-arrow,
  .edu-deeper__item:hover .edu-deeper__go svg, .edu-studyband__all:hover svg { transform: none; }
  .edu-feat:hover .edu-feat__media svg, .edu-exp:hover .edu-exp__media svg,
  .edu-study:hover .edu-study__media svg,
  .edu-feat:hover .edu-feat__media img, .edu-exp:hover .edu-exp__media img,
  .edu-study:hover .edu-study__media img { transform: none; }
  .edu-deeper__item:hover, .edu-deeper li + li .edu-deeper__item:hover { padding-left: 0; }
}

/* ============================================================================
   PLAN YOUR VISIT
   ----------------------------------------------------------------------------
   The old page was sparse in the worst way: full-height sections holding one
   short paragraph each. The fix is not more decoration, it is answering the
   visitor's questions closer together — the quick card straddles the hero so
   when and where are settled before any scroll.
   ========================================================================== */

/* --- hero ----------------------------------------------------------------- */
.v-hero { position: relative; isolation: isolate; }
.v-hero__media { position: absolute; inset: 0; overflow: hidden; }
.v-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.v-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,23,26,.62) 0%, rgba(20,23,26,.5) 45%, rgba(20,23,26,.66) 100%);
}
.v-hero__inner {
  position: relative; text-align: center;
  /* Roughly 460px of hero on desktop, and it shrinks with the viewport rather
     than being pinned to a fixed height that crops badly on a laptop. */
  padding-top: calc(var(--head-h) + var(--s-9));
  padding-bottom: calc(var(--s-10) + var(--s-9));
}
.v-hero__title {
  font-size: var(--fs-3xl); line-height: 1.1; color: #FBF9F5;
  margin: 0 auto var(--s-5); max-width: 16ch; letter-spacing: -.01em;
}
.v-hero__rule {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  margin: 0 auto var(--s-5); max-width: 15rem;
}
.v-hero__rule span { flex: 1; height: 1px; background: rgba(232,228,218,.42); }
.v-hero__rule i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.v-hero__sub { font-size: var(--fs-base); color: rgba(245,243,238,.9); margin: 0; }

/* --- the quick-answer card ------------------------------------------------ */
/* The card straddles the hero's bottom edge, and its shadow used to cut a hard
   horizontal line there: invisible over the dark photograph, visible the moment
   it crossed onto the cream. The fix is to stop the two backgrounds meeting at
   the card's edge — the wrap is transparent for the height of the overlap and
   only then becomes cream, so the seam happens BEHIND the card. */
.v-quick-wrap {
  --v-lift: var(--s-8);
  background: linear-gradient(to bottom, transparent 0 var(--v-lift), var(--cream) var(--v-lift));
  margin-top: calc(-1 * var(--v-lift));
  /* The hero is positioned, so it paints over static siblings — the old
     translateY happened to lift this above it, and a plain negative margin
     does not. Say it outright instead of relying on a transform. */
  position: relative; z-index: 1;
}
.v-quick {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* Softer and more diffuse than --shadow-lg, which read as a hard band where
     it crossed the seam. */
  box-shadow: 0 2px 6px rgba(28,38,32,.05), 0 18px 44px rgba(28,38,32,.11);
  overflow: hidden;
}
/* Dividers as borders on the cells, so the first one has none and nothing has
   to know how many cells there are. */
.v-quick__cell {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px; padding: var(--s-6) var(--s-4);
}
.v-quick__cell + .v-quick__cell { border-left: 1px solid var(--line-2); }
.v-quick__ico { color: var(--gold-dk); margin-bottom: var(--s-2); }
.v-quick__ico svg { width: 22px; height: 22px; }
.v-quick__k {
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--s-2);
}
.v-quick__v { font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.v-quick__v:last-child:not(:nth-child(3)) { color: var(--text); }

/* Breathing room under the card before the introduction, rather than the
   collapsed gap the pull-up used to leave. */
.v-welcome { padding-top: var(--s-9); }
.v-welcome__lede {
  max-width: 60ch; margin: 0 auto; text-align: center;
  font-size: var(--fs-md); color: var(--text); line-height: 1.7;
}

/* --- the four steps ------------------------------------------------------- */
.v-stepband { padding-top: var(--s-8); }
.v-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
}
.v-step {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 var(--s-3);
}
/* Number and icon on one row, with real space between them. They used to be
   stacked in the same place — the number absolutely positioned over the disc —
   which put the digits on top of the glyph. */
.v-step__head {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
/* The hairline between steps. It used to be one long rule at the row's centre,
   which ran straight through the numerals of the next step along — so it is
   drawn as a short segment in the GAP between two steps instead, sized to the
   grid gutter and nothing more. It cannot reach any content now. */
.v-step + .v-step::before {
  content: ''; position: absolute; top: 27px;
  left: calc(-1 * var(--s-5) - var(--s-4)); width: calc(var(--s-5) + var(--s-4) * 2);
  height: 1px; background: var(--line);
}
.v-step__n {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: var(--gold-lt); font-variant-numeric: tabular-nums;
}
.v-step__ico {
  display: grid; place-items: center; flex: none;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--gold-dk);
}
.v-step__ico svg { width: 24px; height: 24px; }
.v-step__label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-2);
}
.v-step__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; max-width: 22ch; }

/* --- service times + finding the church ----------------------------------- */
.v-where__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--s-6); }
.v-panel {
  display: flex; flex-direction: column;
  padding: var(--s-6); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.v-panel .sec-head { margin-bottom: var(--s-5); }
.v-panel__link { margin: auto 0 0; padding-top: var(--s-5); }
.v-panel__link a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--forest); text-decoration: none;
}
.v-arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.v-panel__link a:hover .v-arrow { transform: translateX(4px); }

.v-find { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: var(--s-5); align-items: start; }
.v-find__note { font-size: var(--fs-sm); color: var(--text); line-height: 1.65; }
.v-map {
  display: block; border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; text-decoration: none; background: var(--cream-2);
  transition: border-color .25s var(--ease);
}
.v-map:hover { border-color: var(--gold-lt); }
.v-map:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.v-map img { display: block; width: 100%; height: 190px; object-fit: cover; }
.v-map__cap {
  display: block; text-align: center;
  padding: .55rem .6rem; font-size: var(--fs-xs); font-weight: 600;
  color: var(--forest); background: var(--paper); border-top: 1px solid var(--line);
}
.v-photo { margin: var(--s-5) 0 0; border-radius: var(--r-sm); overflow: hidden; }
.v-photo img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: center 62%; }

/* --- FAQ, two columns ------------------------------------------------------ */
.v-faq .acc { columns: 2; column-gap: var(--s-6); }
.v-faq .acc__item { break-inside: avoid; -webkit-column-break-inside: avoid; }

/* --- closing -------------------------------------------------------------- */
.v-close { position: relative; isolation: isolate; }
.v-close__media { position: absolute; inset: 0; overflow: hidden; }
.v-close__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.v-close__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35,49,31,.9) 0%, rgba(35,49,31,.84) 100%);
}
.v-close__inner { position: relative; text-align: center; padding-block: var(--s-10); }
.v-close__title { font-size: var(--fs-2xl); color: #FBF9F5; margin: 0 0 var(--s-3); }
.v-close__sub { font-size: var(--fs-base); color: rgba(245,243,238,.86); margin: 0 0 var(--s-6); }
.v-close .btn--outline { color: #FBF9F5; border-color: rgba(255,255,255,.5); }
.v-close .btn--outline:hover { background: rgba(255,255,255,.12); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .v-where__grid { grid-template-columns: minmax(0, 1fr); }
  .v-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-8); }
  .v-step + .v-step::before { display: none; }
}
@media (max-width: 780px) {
  .v-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-quick__cell:nth-child(odd) { border-left: 0; }
  .v-quick__cell:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .v-find { grid-template-columns: minmax(0, 1fr); }
  .v-faq .acc { columns: 1; }
}
@media (max-width: 680px) {
  .v-hero__inner { padding-top: calc(var(--head-h) + var(--s-7)); padding-bottom: calc(var(--s-9) + var(--s-7)); }
  .v-hero__title { font-size: var(--fs-2xl); }
  .v-quick { grid-template-columns: minmax(0, 1fr); transform: translateY(calc(-1 * var(--s-7))); }
  .v-quick__cell { border-left: 0 !important; }
  .v-quick__cell + .v-quick__cell { border-top: 1px solid var(--line-2); }
  .v-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); }
  .v-step__n { font-size: 2rem; }
  .v-panel { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .v-arrow { transition: none; }
  .v-panel__link a:hover .v-arrow { transform: none; }
}

/* A line of context under a contact route — which one is quickest, and what to
   expect. Added when the church turned out to have no phone or email, so the
   remaining routes had to explain themselves. */
.contact-list__sub { margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.5; }

/* ============================================================================
   EXPLORE THE BIBLE — the homepage section
   ----------------------------------------------------------------------------
   Introduction left, four picture cards right, one wide card beneath them.
   Replaces the .hedu strip above, whose rules are removed separately and by
   exact match — an earlier attempt cut this region out by string index and
   took 1,900 unrelated lines of stylesheet with it.
   ========================================================================== */
.xb { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.55fr); gap: var(--s-9); align-items: start; }

.xb__title { font-size: var(--fs-2xl); color: var(--ink); margin: 0 0 var(--s-4); line-height: 1.1; }
.xb__rule { width: 54px; height: 3px; background: var(--gold-dk); margin: 0 0 var(--s-5); border-radius: 2px; }
.xb__lede { font-size: var(--fs-base); color: var(--text); line-height: 1.75; margin: 0 0 var(--s-6); max-width: 34ch; }
.xb__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: var(--r-pill);
  background: var(--forest); color: var(--cream);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: background .25s var(--ease);
}
.xb__cta:hover { background: var(--forest-dk); }
.xb__cta:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.xb-arrow { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.xb__cta:hover .xb-arrow, .xb-feature:hover .xb-arrow { transform: translateX(4px); }

.xb__main { display: grid; gap: var(--s-5); }
.xb__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4);
}
.xb__cards > li { display: flex; }

/* --- a picture card -------------------------------------------------------- */
.xb-card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  text-decoration: none; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.xb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-lt); }
.xb-card:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.xb-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.xb-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.xb-card:hover .xb-card__media img { transform: scale(1.045); }

/* The disc straddles the join between picture and card. It is anchored to the
   BODY's top edge, not the card's — the picture takes its height from an
   aspect-ratio, so the join is not a number this rule could otherwise know. */
.xb-card__body {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex: 1; padding: calc(var(--s-6) + 6px) var(--s-4) var(--s-5);
}
.xb-card__badge {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--forest); color: var(--gold-lt);
  border: 3px solid var(--paper);
}
.xb-card__badge svg { width: 22px; height: 22px; }
.xb-card__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-md); color: var(--ink); line-height: 1.2; margin-bottom: var(--s-2);
}
.xb-card__text {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); line-height: 1.5;
}

/* --- the wide one ---------------------------------------------------------- */
.xb-feature {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line-2); border-left: 3px solid var(--gold-dk);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.xb-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.xb-feature:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.xb-feature__badge {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--forest); color: var(--gold-lt); flex: none;
}
.xb-feature__badge svg { width: 28px; height: 28px; }
.xb-feature__label {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xl); color: var(--ink); line-height: 1.2; margin-bottom: .3rem;
}
.xb-feature__text { display: block; font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }
.xb-feature__cta {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--forest);
  border-bottom: 2px solid var(--gold-lt); padding-bottom: 3px;
}

@media (max-width: 1180px) {
  .xb { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--s-7); }
  /* Four abreast here would be 160px each. Two by two instead. */
  .xb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .xb { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .xb__lede { max-width: 60ch; }
}
@media (max-width: 700px) {
  /* One column, and the cards keep their pictures rather than becoming tiles. */
  .xb__cards { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .xb-card__media { aspect-ratio: 16 / 9; }
  .xb-feature { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-4); padding: var(--s-5); }
  .xb-feature__cta { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .xb-card, .xb-feature, .xb-card__media img, .xb-arrow, .xb__cta { transition: none; }
  .xb-card:hover, .xb-feature:hover { transform: none; }
  .xb-card:hover .xb-card__media img { transform: none; }
  .xb__cta:hover .xb-arrow, .xb-feature:hover .xb-arrow { transform: none; }
}

/* ============================================================================
   SERMON SERIES — the current one and the last one, on /sermons/
   ----------------------------------------------------------------------------
   Both use the .series block the homepage already had. What is added here is
   the list of messages inside it, and a quieter treatment for the past series
   so the current one still leads the page.
   ========================================================================== */

/* ============================================================================
   OUR STORY
   ----------------------------------------------------------------------------
   Photograph-led and wider than the old page, which ran everything through a
   narrow column and left the sides empty.
   ========================================================================== */
.ab-sec { padding-block: var(--s-10); }
.ab-sec--tight { padding-top: 0; }
.ab-rule { width: 54px; height: 3px; background: var(--gold-dk); border-radius: 2px; margin: var(--s-5) 0; }
.ab-rule--center { margin-inline: auto; }
.ab-arrow { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }

.ab-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.6rem; border-radius: var(--r-pill);
  background: var(--forest); color: var(--cream);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: background .25s var(--ease);
}
.ab-btn:hover { background: var(--forest-dk); }
.ab-btn:hover .ab-arrow { transform: translateX(4px); }
.ab-btn:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.ab-btn--gold { background: var(--gold-dk); }
.ab-btn--gold:hover { background: var(--gold); color: var(--forest-dk); }

/* --- hero ------------------------------------------------------------------ */
.ab-hero { position: relative; isolation: isolate; }
.ab-hero__media { position: absolute; inset: 0; overflow: hidden; }
.ab-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
/* Black, not green. A forest wash plus a `color` blend did turn the photograph
   green, but green over a bright midday sky lands somewhere between olive and
   grey — it never read as the deep forest of the rest of the site, and the
   building lost its own colour to get there. A near-neutral ramp is darker,
   quieter and lets the stone stay stone. One layer is enough for that.

   Darker on the left, where the words are, clear on the right so the building
   stays visible. */
.ab-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,11,9,.94) 0%, rgba(8,11,9,.86) 34%, rgba(8,11,9,.56) 62%, rgba(8,11,9,.30) 100%);
}
.ab-hero__inner {
  position: relative;
  padding-top: calc(var(--head-h) + var(--s-9));
  padding-bottom: var(--s-10);
  max-width: 1280px;
  /* Our Story's title runs to two lines and Leadership's to one, so the two
     heroes came out 519px and 427px. A floor holds them level whatever the
     heading turns out to be — set above BOTH natural heights, since a floor
     equal to the taller one still lets that page grow past it. */
  min-height: 545px;
  display: flex; flex-direction: column; justify-content: center;
}
.ab-hero__title {
  font-size: var(--fs-4xl); line-height: 1.06; color: #FBF9F5;
  margin: 0 0 var(--s-2); letter-spacing: -.01em; max-width: 18ch;
}
.ab-hero__title span { display: block; }
.ab-hero__rule { width: 60px; height: 2px; background: var(--gold); margin: var(--s-5) 0; }
.ab-hero__lede { font-size: var(--fs-base); color: rgba(245,243,238,.9); line-height: 1.7; max-width: 44ch; margin: 0; }
/* The optional second line. It keeps the lede's measure so it stays inside the
   scrim rather than running out onto the bright half of the photograph. */
.ab-hero__sub { font-size: var(--fs-sm); color: rgba(245,243,238,.72); line-height: 1.7; max-width: 44ch; margin: var(--s-3) 0 0; }

/* --- about ----------------------------------------------------------------- */
.ab-about { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: var(--s-9); align-items: center; }
.ab-about__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.12; margin: 0; }
.ab-about__title span { display: block; }
.ab-about__p { font-size: var(--fs-base); color: var(--text); line-height: 1.8; margin: 0 0 var(--s-4); max-width: 42ch; }
.ab-about__p + .ab-about__p { margin-bottom: var(--s-6); }
/* Three photographs in the right column: the first runs its full width, the
   other two share the row beneath. The separate collage that used to sit under
   this block is folded in here. */
.ab-about__media {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}
.ab-about__media .ab-shot--big { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ab-about__media .ab-shot { aspect-ratio: 4 / 3; }

/* The mural is a portrait among landscapes. Rather than crop it into a 4:3
   box, it takes one column and BOTH rows beside the two shots stacked next to
   it. No aspect-ratio of its own, on purpose — it stretches to whatever those
   two define, and two 4:3 shots plus the gap come out at almost exactly the
   2:3 the file already is, so object-fit: cover trims next to nothing.

   Give it an aspect-ratio here and the two columns stop agreeing the moment
   the gap or the shots beside it change. */
.ab-about__media .ab-shot--tall { grid-row: span 2; aspect-ratio: auto; }

.ab-shot { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.ab-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.ab-shot:hover img { transform: scale(1.03); }

.ab-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  font-size: var(--fs-xs); color: #F5F3EE; line-height: 1.45;
  background: linear-gradient(to top, rgba(18,24,20,.82), rgba(18,24,20,0));
}

/* --- mission --------------------------------------------------------------- */
.ab-mission { position: relative; isolation: isolate; }
.ab-mission__media { position: absolute; inset: 0; overflow: hidden; }
.ab-mission__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.ab-mission__scrim { position: absolute; inset: 0; background: rgba(30, 44, 30, .93); }
.ab-mission__inner {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-7); align-items: center; padding-block: var(--s-10); max-width: 1280px;
}
.ab-mission__mark { color: var(--gold); flex: none; }
.ab-mission__mark svg { width: 72px; height: 72px; }
.ab-mission__text {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); line-height: 1.28; color: #FBF9F5; margin: 0; max-width: 26ch;
}

/* --- journey --------------------------------------------------------------- */
.ab-journey__head { text-align: center; max-width: 56ch; margin: 0 auto var(--s-9); }
.ab-journey__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.12; margin: 0; }
.ab-journey__title span { display: block; }
.ab-journey__lede { font-size: var(--fs-base); color: var(--text); line-height: 1.7; margin: 0; }

.ab-stages {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
}
.ab-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The gold line runs between the discs and stops clear of both. */
.ab-stage + .ab-stage::before {
  content: ''; position: absolute; top: 66px;
  left: calc(-50% - var(--s-5) / 2 + 74px); width: calc(100% - 148px + var(--s-5));
  height: 1px; background: var(--gold-lt);
}
.ab-stage__disc {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  overflow: hidden; background: var(--cream-2); border: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.ab-stage__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A stage nobody has written yet: a ruled circle with the era in it, rather
   than a photograph of somebody else's church standing in for this one. */
.ab-stage--nophoto .ab-stage__disc {
  border: 1px dashed var(--gold-lt); background: var(--cream);
}
.ab-stage__mark { color: var(--gold-lt); display: grid; place-items: center; }
.ab-stage__mark svg { width: 30px; height: 30px; }
/* Not uppercased: "1900s" became "1900S", which is not a decade. */
.ab-stage__era-label {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
  color: var(--gold-dk); margin-bottom: var(--s-2);
}
.ab-stage__title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink); margin-bottom: var(--s-3); }
.ab-stage__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; max-width: 26ch; }

/* --- invitation ------------------------------------------------------------ */
.ab-invite { position: relative; isolation: isolate; }
.ab-invite__media { position: absolute; inset: 0; overflow: hidden; }
.ab-invite__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.ab-invite__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,44,28,.94) 0%, rgba(28,44,28,.8) 48%, rgba(28,44,28,.55) 100%);
}
.ab-invite__inner { position: relative; padding-block: var(--s-10); max-width: 1280px; }
.ab-invite__title { font-size: var(--fs-2xl); color: #FBF9F5; margin: 0 0 var(--s-3); }
.ab-invite__text { font-size: var(--fs-base); color: rgba(245,243,238,.88); line-height: 1.7; margin: 0 0 var(--s-6); max-width: 40ch; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .ab-about { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .ab-mission__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .ab-mission__mark svg { width: 54px; height: 54px; }
}
@media (max-width: 860px) {
  /* A four-across timeline becomes a column, with the gold line running down
     the left of it instead of between the discs. */
  .ab-stages { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  /* Grid, not a flex row: the era, title and text are three separate spans,
     and in a row they laid out side by side beside the disc and overflowed.
     The disc takes column one and spans all three rows; the words stack in
     column two. */
  .ab-stage {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-5); align-items: start; text-align: left;
  }
  .ab-stage__disc { grid-row: 1 / span 3; }
  /* The connector turns vertical and runs up the gap between two stacked
     stages, centred on the disc. `top: -(var(--s-6))` was invalid CSS and was
     being silently dropped; this says it once, correctly. */
  .ab-stage + .ab-stage::before {
    top: calc(-1 * var(--s-6)); left: 48px; width: 1px; height: var(--s-6);
  }
  .ab-stage__disc { width: 96px; height: 96px; flex: none; margin-bottom: 0; }
  .ab-stage__text, .ab-stage__title, .ab-stage__era-label { max-width: none; }
}
@media (max-width: 680px) {
  .ab-hero__inner { padding-top: calc(var(--head-h) + var(--s-7)); padding-bottom: var(--s-8); }
  .ab-hero__title { font-size: var(--fs-2xl); }
  /* The desktop ramp runs left-to-right, which on a narrow screen would leave
     the bottom corner untouched. Same idea, turned vertical. */
  .ab-hero__scrim {
    background: linear-gradient(180deg, rgba(8,11,9,.62) 0%, rgba(8,11,9,.86) 100%);
  }
  .ab-sec { padding-block: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-shot img, .ab-arrow, .ab-btn { transition: none; }
  .ab-shot:hover img { transform: none; }
  .ab-btn:hover .ab-arrow { transform: none; }
}

/* --- the 1944 photograph and the milestones -------------------------------
   The photograph is the only picture of the wooden building the church's
   history describes, so it runs large beside the facts rather than being
   cropped into a circle. */
.ab-history { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.ab-history__fig { margin: 0; position: sticky; top: calc(var(--head-h) + var(--s-5)); }
.ab-history__fig img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.ab-history__fig figcaption {
  margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.55;
}
.ab-history__title { font-size: var(--fs-xl); color: var(--ink); line-height: 1.2; margin: 0; }

.ab-mile + .ab-mile { margin-top: var(--s-6); }
.ab-mile__label {
  font-family: var(--font-body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-on-stone);
  margin: 0 0 var(--s-3);
}
.ab-mile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ab-mile__list li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--fs-sm); color: var(--text); line-height: 1.7;
}
.ab-mile__list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-lt);
}

@media (max-width: 900px) {
  .ab-history { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .ab-history__fig { position: static; }
}

/* ============================================================================
   LEADERSHIP
   ----------------------------------------------------------------------------
   Weight descends down the page: the pastor largest, then two card grids, then
   the musicians in a different register, then the deacons as plain names. No
   arrows anywhere — nothing here is a link except the two closing buttons.
   ========================================================================== */
.ld-sec { padding-block: var(--s-9); }
.ld-sec--pastor { padding-top: var(--s-10); }
.ld-rule { width: 48px; height: 3px; background: var(--gold-dk); border-radius: 2px; margin: var(--s-4) 0 var(--s-5); }

.ld-head { margin-bottom: var(--s-6); }
.ld-head--center { text-align: center; }
.ld-head--center .ld-rule { margin-inline: auto; }
.ld-head__title { font-size: var(--fs-xl); color: var(--ink); margin: 0; }

/* The initials placeholder. Deliberate rather than broken: a ruled frame with
   the person's initials, waiting for a photograph. */
.ld-initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); color: var(--gold-dk);
  letter-spacing: .04em; background: var(--cream-2);
}

/* --- the pastor ------------------------------------------------------------ */
/* A fixed 340px column rather than a fraction: at .8fr the portrait came out
   nearly 500px wide and 600 tall, and swallowed the section. */
.ld-pastor { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.ld-pastor__photo {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--cream-2);
}
.ld-pastor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-pastor__photo .ld-initials { font-size: 4.5rem; }
.ld-pastor__name { font-size: var(--fs-2xl); color: var(--ink); margin: 0 0 var(--s-2); line-height: 1.1; }
.ld-pastor__role { font-size: var(--fs-md); color: var(--gold-dk); margin: 0; }
/* 68ch, not 46. Measured: at 46 the bio set to 493px inside a column 788px
   wide and left 295px of nothing beside it, which reads as a column that
   failed to fill rather than as a deliberate measure — and it got worse the
   wider the window, which is how Ryan saw it. text-wrap: pretty evens the
   right edge and keeps a lone word off the last line; browsers that do not
   know it ignore it. */
.ld-pastor__bio {
  font-size: var(--fs-base); color: var(--text); line-height: 1.8; margin: 0;
  max-width: 68ch; text-wrap: pretty;
}
.ld-pastor__bio + .ld-pastor__bio { margin-top: var(--s-4); }

/* His lifelong verse. Set as a quotation and not as a third paragraph of
   biography, because it is not one — it is the thing he pointed to. The
   register follows .jt__quote on the Jesus page rather than the full-bleed
   band on /beliefs/: display face, italic, a gold rule down the side. Loud
   enough to read as Scripture, quiet enough to sit inside a bio. */
.ld-pastor__verse {
  margin: var(--s-6) 0 0; padding-left: var(--s-5); max-width: 68ch;
  border-left: 2px solid var(--gold);
}
.ld-pastor__verse-label {
  margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk);
}
.ld-pastor__verse blockquote { margin: 0; }
.ld-pastor__verse blockquote p {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.ld-pastor__verse figcaption {
  margin-top: var(--s-3); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk);
}
.ld-pastor__mail { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }

/* --- the two card grids ---------------------------------------------------- */
/* The two groups on one plane, a rule between them. They stay two groups —
   the heading over each says which — but the page reads as one band. */
.ld-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.ld-pair__col + .ld-pair__col {
  padding-left: var(--s-8); margin-left: calc(-1 * var(--s-8) / 2);
  border-left: 1px solid var(--line);
}
.ld-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }

/* The deacons, one band of the same cards. Seven of them, and seven divides
   evenly into no sensible column count — a four-column grid leaves a hole at
   the end of the second row, which reads as a missing person rather than as
   a layout. So this wraps with flex and centres the wrap: four on the first
   line, three centred beneath. The basis is the four-up width, so the cards
   are the same size on both lines and the second line is genuinely centred
   rather than stretched. */
.ld-deacon-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3);
  max-width: 72rem; margin-inline: auto;
}
.ld-deacon-grid > * { flex: 0 1 calc((100% - 3 * var(--s-3)) / 4); min-width: 0; }

/* Four across is a desktop count. Held all the way down it gave 75px-wide
   cards on a 375px phone — portraits the size of a postage stamp with the
   names breaking across three lines underneath. The basis steps down with the
   screen instead.

   Seven people never divide evenly, so there is a short last row at every
   count: 4+3 centred on a desktop, 3+3+1 on a tablet, 2+2+2+1 on a phone. The
   wrap is centred, so the short row sits under the middle of the ones above
   rather than leaving a hole at the end — which was the whole reason this is
   a centred flex wrap and not a grid. */
/* MUSICIANS AND STAFF — the deacon card, one size down.

   Three people rather than seven, and a smaller basis, so they sit in a row
   of three at a comfortable size instead of three quarters of a four-up row
   with a gap where the fourth would be. The max-width stops three cards
   stretching across the full measure on a wide screen, which is what made
   them look oversized next to the deacons above.

   46rem, not 50. At 50 the cards came out 259px against the deacons' 279 —
   a 7% difference, which does not read as a decision, it reads as something
   that went slightly wrong. 46rem gives 237px, clearly and deliberately the
   smaller card.

   The difference is a WIDE-SCREEN one only. At 680px and below both grids go
   two-up and the cards are identical, which is right: on a phone two-up is
   two-up, and shrinking these would only open gaps beside them.

   Everything else — the card, the 4:5 portrait, the initials fallback, the
   role pinned to the bottom — is inherited, which is the point. Ryan asked
   for the same UI, slightly smaller. */
.ld-deacon-grid--sm { max-width: 46rem; }
.ld-deacon-grid--sm > * { flex-basis: calc((100% - 2 * var(--s-3)) / 3); }
.ld-deacon-grid--sm .ld-card__name { font-size: var(--fs-base); }

@media (max-width: 680px) {
  /* Two up, matching the deacons at this width. */
  .ld-deacon-grid--sm > * { flex-basis: calc((100% - var(--s-3)) / 2); }
}

@media (max-width: 900px) {
  .ld-deacon-grid > * { flex-basis: calc((100% - 2 * var(--s-3)) / 3); }
}
@media (max-width: 680px) {
  .ld-deacon-grid > * { flex-basis: calc((100% - var(--s-3)) / 2); }
}
/* Column flex so the role line can be pinned to the bottom — see
   .ld-card__name below for why that matters. */
.ld-card {
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
}
.ld-card__photo {
  display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2);
  border-bottom: 1px solid var(--line-2);
}
.ld-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-card__photo .ld-initials { font-size: 2.75rem; }

/* A warm glow on hover. These are NOT links — nothing here navigates — so the
   cursor stays default and there is no lift or arrow; the glow is only a sign
   that the page is alive under the pointer. */
.ld-pastor__photo, .ld-card, .ld-player {
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ld-card:hover, .ld-player:hover {
  border-color: var(--gold-lt);
  box-shadow: 0 2px 8px rgba(28,38,32,.06), 0 0 0 4px rgba(184,148,92,.13), 0 14px 34px rgba(133,104,57,.16);
}
.ld-pastor__photo:hover {
  box-shadow: var(--shadow-lg), 0 0 0 5px rgba(184,148,92,.15), 0 18px 44px rgba(133,104,57,.2);
}
.ld-card__photo { flex: none; }
.ld-card__body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1; }

/* EVEN ROLE LINES, 12 October 2026. Ryan: "the deacons names and titles look
   uneven."

   He was looking at a width where some surnames wrap and others do not.
   Between roughly 560px and 880px "Greg Easterling" takes two lines while
   "Steve Cox" takes one, so the gold "Deacon" underneath sat at two different
   heights in the same row — measured at 760px, 22px apart. Above 900px every
   name fits on one line and below 560px every name takes two, which is why it
   looks fine at both ends and ragged in the middle.

   The cards already stretch to equal height within a row, so the slack is
   there to use: the name box takes it and the role is pinned to the bottom of
   the body. Every role in a row then starts on the same line whether the name
   above it ran to one line or two.

   A min-height of two lines on the name would also have levelled them, and
   was rejected — it reserves an empty second line on all seven cards at every
   size where the names do fit on one, which is most of them. */
.ld-card__name {
  font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink);
  margin: 0 0 .2rem; flex: 1;
}
.ld-card__role { font-size: var(--fs-sm); color: var(--gold-dk); margin: 0; }

/* --- the musicians, alternating ------------------------------------------- */
.ld-players {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5); max-width: 66rem; margin-inline: auto;
}
.ld-player {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  align-items: center;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.ld-player__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.ld-player__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-player__photo .ld-initials { font-size: 3rem; }
.ld-player__body { padding: var(--s-5); }
.ld-player__name { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); margin: 0 0 .2rem; }
.ld-player__role { font-size: var(--fs-sm); color: var(--gold-dk); margin: 0; }

/* --- the deacons, quiet ---------------------------------------------------- */
/* A wrapping row with hairlines between, not a grid. Seven names in a
   four-column grid leaves an empty eighth cell that reads as a missing
   person. */
.ld-deacons {
  list-style: none; margin: 0; padding: var(--s-4) 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ld-deacons li {
  flex: 1 1 8.5rem; min-width: 8.5rem;
  padding: var(--s-3) var(--s-4); text-align: center;
}
.ld-deacons li + li { border-left: 1px solid var(--line); }
.ld-deacons__name { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); }
.ld-deacons__role { display: block; font-size: var(--fs-xs); color: var(--gold-on-stone); margin-top: .15rem; }

/* A night-by-night lineup on an event page. Two columns on a rule, so the
   dates line up and the names line up and the eye can run down either one. */
.ev-lineup { list-style: none; margin: var(--s-6) 0 0; padding: 0; max-width: 34rem; }
.ev-lineup li {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.ev-lineup li:first-child { border-top: 1px solid var(--line); }
.ev-lineup__when { font-weight: 600; color: var(--ink); }
.ev-lineup__who { color: var(--gold-dk); }

/* --- closing --------------------------------------------------------------- */
.ld-close { position: relative; isolation: isolate; }
.ld-close__media { position: absolute; inset: 0; overflow: hidden; }
/* 28%, not 38%. The band is 1360x384 over a 1600x1280 photograph, so cover
   shows a 35%-tall slice of it and WHERE that slice sits is the whole
   question. At 38% it began 24.6% down and took the tops off the back row's
   heads. 28% starts it at 18% and clears them with a little headroom.
   Measured by rendering the exact crop the band takes, not by eye. */
.ld-close__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.ld-close__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,44,28,.95) 0%, rgba(28,44,28,.82) 46%, rgba(28,44,28,.5) 100%);
}
.ld-close__inner { position: relative; padding-block: var(--s-10); max-width: 1280px; }
.ld-close__title { font-size: var(--fs-2xl); color: #FBF9F5; margin: 0 0 var(--s-3); }
.ld-close__text { font-size: var(--fs-base); color: rgba(245,243,238,.88); line-height: 1.7; margin: 0 0 var(--s-6); max-width: 44ch; }
.ld-close .btn--outline { color: #FBF9F5; border-color: rgba(255,255,255,.5); }
.ld-close .btn--outline:hover { background: rgba(255,255,255,.12); }

/* --- responsive ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ld-pastor__photo, .ld-card, .ld-player { transition: none; }
}

@media (max-width: 960px) {
  .ld-pastor { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .ld-pastor__photo { max-width: 26rem; }
  .ld-deacons li { flex-basis: 8rem; min-width: 8rem; }
}
@media (max-width: 760px) {
  .ld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-deacons li { flex-basis: 45%; min-width: 45%; }
  /* Once they wrap to two per row the vertical rule between rows is wrong. */
  .ld-deacons li:nth-child(odd) { border-left: 0; }
  /* Both musicians read the same way once stacked; the flip only makes sense
     while they are side by side. */
  .ld-player, .ld-player--flip { grid-template-columns: minmax(0, 1fr); }
  .ld-player--flip .ld-player__photo { order: 0; }
  .ld-player--flip .ld-player__body { order: 0; text-align: left; padding: var(--s-5); }
  .ld-player__body { padding: var(--s-5); }
  .ld-player__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .ld-grid { grid-template-columns: minmax(0, 1fr); }
  .ld-sec { padding-block: var(--s-8); }
}

/* ============================================================================
   WHAT WE BELIEVE
   ----------------------------------------------------------------------------
   Eight statements in two weights, a Scripture as a pause, then the practical
   information. No expand controls: each card already shows its whole statement.
   ========================================================================== */
.bl-sec { padding-block: var(--s-10); }

/* Wide enough for the two authored lines to stay two lines. At 60ch the first
   one broke in the middle and the heading came out three deep. */
.bl-head { max-width: 50rem; margin: 0 auto var(--s-7); text-align: center; }
.bl-head--center { max-width: 56rem; }
.bl-head__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.18; margin: 0; }
.bl-head__title span { display: block; }
.bl-head__lede { font-size: var(--fs-base); color: var(--text); line-height: 1.75; margin: var(--s-5) 0 0; }

/* --- hero ------------------------------------------------------------------ */
.bl-hero { position: relative; isolation: isolate; }
.bl-hero__media { position: absolute; inset: 0; overflow: hidden; }
.bl-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.bl-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,22,18,.9) 0%, rgba(16,22,18,.74) 36%, rgba(16,22,18,.34) 66%, rgba(16,22,18,.16) 100%);
}
.bl-hero__inner {
  position: relative; max-width: 1280px;
  padding-top: calc(var(--head-h) + var(--s-8)); padding-bottom: var(--s-9);
}
.bl-hero__title { font-size: var(--fs-4xl); line-height: 1.04; color: #FBF9F5; margin: 0; letter-spacing: -.01em; }
.bl-hero__rule { width: 60px; height: 2px; background: var(--gold); margin: var(--s-5) 0; }
.bl-hero__lede { font-size: var(--fs-md); color: rgba(245,243,238,.94); line-height: 1.6; margin: 0 0 var(--s-4); max-width: 42ch; }
.bl-hero__sub { font-size: var(--fs-sm); color: rgba(245,243,238,.76); line-height: 1.65; margin: 0; max-width: 40ch; }

/* --- the belief cards ------------------------------------------------------ */
.bl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.bl-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
/* The four longer statements take half a row each, icon beside the words. */
.bl-card--wide {
  grid-column: span 2; flex-direction: row; align-items: flex-start; gap: var(--s-5);
  padding: var(--s-6);
}
.bl-card__icon { color: var(--gold-dk); flex: none; }
.bl-card__icon svg { width: 38px; height: 38px; }
.bl-card--wide .bl-card__icon svg { width: 42px; height: 42px; }
.bl-card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); color: var(--ink); margin: 0 0 var(--s-2); line-height: 1.2;
}
.bl-card__body { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; margin: 0; }

/* --- the Scripture --------------------------------------------------------- */
.bl-verse { position: relative; isolation: isolate; }
.bl-verse__media { position: absolute; inset: 0; overflow: hidden; }
.bl-verse__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
.bl-verse__scrim { position: absolute; inset: 0; background: rgba(28, 44, 30, .93); }
.bl-verse__inner { position: relative; text-align: center; padding-block: var(--s-10); }
.bl-verse__mark {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); margin-bottom: var(--s-3);
}
/* The rules are pseudo-elements so the mark stays one element in the markup
   and nothing decorative reaches a screen reader. */
.bl-verse__mark::before,
.bl-verse__mark::after {
  content: ''; height: 1px; width: clamp(46px, 8vw, 78px);
  background: var(--gold); opacity: .55;
}
/* A left double quote sits at the TOP of its em box, so centring the box puts
   the rules below the ink. The nudge aligns them with the glyph, not its box. */
.bl-verse__glyph {
  font-family: var(--font-display); font-size: 4rem; line-height: 1;
  color: var(--gold); opacity: .85; transform: translateY(.28em);
}
.bl-verse__quote {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); line-height: 1.3; color: #FBF9F5;
}
.bl-verse__quote span { display: block; }
.bl-verse__ref {
  margin: var(--s-5) 0 0; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.bl-verse__ref::after {
  content: ''; display: block; height: 1px; width: clamp(120px, 20vw, 196px);
  background: var(--gold); opacity: .55; margin: var(--s-5) auto 0;
}

/* --- affiliations ---------------------------------------------------------- */
.bl-affil {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  /* auto-fit, not a hardcoded 3. There were three affiliations and the count
     was written into the CSS, so removing one left an empty third of the row
     that reads as a card that failed to load. This tracks whatever is in the
     list. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4);
}
.bl-affil li {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
/* A fixed slot, so a card with a logo and a card without stay the same shape
   and the names keep a common left edge. */
.bl-affil__mark {
  color: var(--gold-dk); flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
}
.bl-affil__mark svg { width: 30px; height: 30px; }
.bl-affil__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bl-affil__name { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); line-height: 1.25; }
.bl-affil__note { display: block; font-size: var(--fs-xs); color: var(--text-mute); margin-top: .2rem; }
.bl-confession { margin: var(--s-6) auto 0; max-width: 62ch; text-align: center; font-size: var(--fs-sm); color: var(--text); }

/* --- closing --------------------------------------------------------------- */
.bl-close { padding-block: var(--s-9); }
.bl-close__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  padding: var(--s-6) var(--s-7);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.bl-close__in .btn-row { margin-top: 0; flex: none; }
.bl-close__title { font-size: var(--fs-xl); color: var(--ink); margin: 0 0 var(--s-2); }
.bl-close__text { font-size: var(--fs-sm); color: var(--text); margin: 0; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-card--wide { grid-column: span 2; }
  .bl-affil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .bl-sec { padding-block: var(--s-8); }
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-card--wide { grid-column: span 1; flex-direction: column; gap: var(--s-4); }
  .bl-hero__title { font-size: var(--fs-2xl); }
  .bl-hero__scrim { background: linear-gradient(180deg, rgba(16,22,18,.7) 0%, rgba(16,22,18,.9) 100%); }
  .bl-verse__quote { font-size: var(--fs-xl); }
  .bl-close__in { flex-direction: column; align-items: flex-start; padding: var(--s-5); }
}

/* ============================================================================
   THE SERMONS PAGE — .sx-*
   ----------------------------------------------------------------------------
   Its own namespace. The old page borrowed the homepage's .series block, which
   meant the two could not be changed independently: every adjustment here had
   to be checked against the front page. The homepage keeps .series untouched.

   Structure of the page, top to bottom: photographic hero, the current series
   as one large feature, a forest livestream band, a grid of recent messages,
   series tiles, the full archive, and a closing panel.
   ========================================================================== */

/* The heading wraps after "Word," on its own, given a measure to wrap in. */
.sxhero .phero__title { max-width: 15ch; }
.sxhero .phero__media img { object-position: 62% 55%; }
/* The left-weighted 96deg scrim that used to sit here is GONE. It belonged to
   the full-bleed Sermons hero, and this page became a split hero on 14 October
   — where the words sit on flat colour and there is nothing for a scrim to
   darken.

   It was not merely unused. .phero--split hides the scrim on desktop, but when
   the layout stacks on a phone the scrim comes back to fade the photograph
   into the panel, and this rule — later in the file, same specificity — was
   overriding that vertical fade with its sideways one. The photograph landed
   as a hard-edged block with a horizontal gradient across it. Deleting the
   rule is the fix; adding specificity to beat it would have left a dead
   gradient in the file for someone to trip over again. */
.sx-sec { padding-block: var(--s-9); }

/* --- the current series ---------------------------------------------------- */
.sxf {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8);
  align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: 0 1px 3px rgba(28,38,32,.05);
}
.sxf__art { margin: 0; }
/* 16:9, matching the tiles, the archive and the homepage. It was 16/10, which
   with object-fit: cover trims 5% off EACH SIDE of a 16:9 cover — and a series
   cover is exactly where wide lettering lives, so the current series was the
   one place a title could lose its first and last letter. Every surface that
   shows a cover now shows the whole cover. */
.sxf__art img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--r-md);
}
.sxf__title { font-size: var(--fs-2xl); color: var(--ink); margin: var(--s-1) 0 var(--s-3); line-height: 1.1; }
.sxf__blurb { color: var(--text); line-height: 1.7; margin: 0 0 var(--s-4); max-width: 46ch; }
/* One fact list, two sizes. Icons are the only ornament in this panel. */
.sxf__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.sxf__facts li { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--text-mute); }
.sxf__facts .ico { width: 16px; height: 16px; flex: none; color: var(--gold-dk); }
/* The divider the brief asks for, drawn as a border rather than an <hr> so it
   belongs to the block below it and cannot drift. */
.sxf__latest { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.sxf__msg { font-size: var(--fs-xl); color: var(--ink); margin: var(--s-1) 0 var(--s-3); line-height: 1.2; }
.sxf__act { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); flex-wrap: wrap; }
.sxf__all { font-size: var(--fs-sm); font-weight: 600; color: var(--forest); }
.sxf__all:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 4px; }

/* --- the livestream band --------------------------------------------------- */
.sxlive { position: relative; isolation: isolate; background: var(--forest-dk); }
.sxlive__media { position: absolute; inset: 0; overflow: hidden; }
.sxlive__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
/* Heavy: the photograph here is texture, not subject. */
.sxlive__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,38,28,.97) 0%, rgba(24,38,28,.93) 55%, rgba(24,38,28,.86) 100%); }
.sxlive__inner {
  position: relative; display: flex; align-items: center; gap: var(--s-6);
  padding-block: var(--s-7);
}
.sxlive__mark {
  flex: none; width: 62px; height: 62px; display: grid; place-items: center;
  border: 1px solid rgba(212,175,110,.45); border-radius: var(--r-md); color: var(--gold);
}
.sxlive__mark .ico { width: 28px; height: 28px; }
.sxlive__text { flex: 1 1 auto; }
.sxlive__title { font-size: var(--fs-xl); color: #FBF9F5; margin: var(--s-1) 0 .35rem; }
.sxlive__note { font-size: var(--fs-sm); color: rgba(245,243,238,.82); margin: 0; max-width: 46ch; }
.sxlive__act { display: flex; gap: var(--s-3); flex: none; flex-wrap: wrap; }
.sxlive__act .btn--ghost { color: #FBF9F5; border-color: rgba(255,255,255,.4); }
.sxlive__act .btn--ghost:hover { background: rgba(255,255,255,.1); color: #FBF9F5; text-decoration: none; }

/* --- a section header with a link on the right ----------------------------- */
.sx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); }
.sx-head__title { font-size: var(--fs-xl); color: var(--ink); margin: var(--s-1) 0 0; }
.sx-head__link { font-size: var(--fs-sm); font-weight: 600; color: var(--forest); white-space: nowrap; }
.sx-head__link:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 4px; }

/* --- message cards ---------------------------------------------------------
   Five across. The rows are declared on the grid, not left to the content, so
   a three-word title and an eleven-word one produce cards of the same shape
   and the "Listen Now" line stays level across the row. */
.sxgrid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5);
}
.sxc { display: grid; grid-template-rows: auto auto auto auto auto; gap: .4rem; }
/* Each card is its own grid, so a two-line title in one and a one-line title
   in the next put their passage and date at different heights across the row.
   subgrid hands the row's tracks to every card, which lines them up whatever
   the words do. The min-height below is the fallback where subgrid is missing:
   it holds two lines of title, which covers all but the longest. */
.sxc__title { min-height: 2.6em; }
@supports (grid-template-rows: subgrid) {
  .sxgrid { grid-auto-rows: auto; }
  .sxc { grid-row: span 5; grid-template-rows: subgrid; }
  .sxc__title { min-height: 0; }
}
.sxc__art {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); margin-bottom: var(--s-2);
}
.sxc__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.sxc:hover .sxc__art img { transform: scale(1.03); }
.sxc__play {
  position: absolute; left: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(252,250,246,.92); color: var(--forest);
  box-shadow: 0 1px 4px rgba(12,18,14,.3);
}
.sxc__play .ico { width: 20px; height: 20px; }
.sxc__title { font-size: var(--fs-base); line-height: 1.3; margin: 0; align-self: start; }
.sxc__title a { color: var(--ink); }
.sxc__title a:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; }
.sxc__ref { font-size: var(--fs-sm); color: var(--text-mute); margin: 0; }
.sxc__meta { font-size: var(--fs-xs); color: var(--text-mute); margin: 0; }
.sxc__go { margin: .2rem 0 0; font-size: var(--fs-sm); align-self: end; }
.sxc__go a { color: var(--forest); font-weight: 600; }
.sxc__go a:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; }

/* --- series tiles ----------------------------------------------------------
   Deliberately not cards: art, a name, a line. The picture is the tile. */
.sxtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-5); }
.sxt { display: block; }
.sxt__art { display: block; overflow: hidden; border-radius: var(--r-md); }
.sxt__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.sxt:hover .sxt__art img { transform: scale(1.03); }
.sxt__title { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink); margin-top: var(--s-3); }
.sxt:hover .sxt__title { color: var(--gold-dk); }
.sxt__meta { display: block; font-size: var(--fs-xs); color: var(--text-mute); margin-top: .15rem; }
.sxt:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 4px; border-radius: var(--r-md); }

/* --- the archive ----------------------------------------------------------- */
.sxlist { border-top: 1px solid var(--line); }
.sxr {
  display: flex; align-items: center;
  gap: var(--s-4); padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
/* Small, so the archive stays a list rather than becoming a second grid of
   cards — but present, so every message shows the artwork its book carries. */
.sxr__art { flex: none; width: 84px; border-radius: var(--r-sm); overflow: hidden; }
.sxr__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.sxr__main { flex: 1 1 16rem; }
.sxr__title { font-size: var(--fs-md); margin: 0 0 3px; }
.sxr__title a { color: var(--ink); }
.sxr__title a:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; }
.sxr__meta { font-size: var(--fs-sm); color: var(--text-mute); margin: 0; }
.sxr__go { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--forest); flex: none; }
.sxr__go .ico { width: 17px; height: 17px; }
.sxr__go:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; }

/* --- closing --------------------------------------------------------------- */
.sx-cta__in {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-7);
}
.sx-cta__in > div { flex: 1 1 auto; }
.sx-cta__mark {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--forest); color: var(--gold-lt);
}
.sx-cta__mark .ico { width: 27px; height: 27px; }
.sx-cta__title { font-size: var(--fs-lg); color: var(--ink); margin: var(--s-1) 0 .3rem; }
.sx-cta__text { font-size: var(--fs-sm); color: var(--text); margin: 0; }

@media (max-width: 1100px) {
  .sxgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sxf { grid-template-columns: 1fr; gap: var(--s-6); }
  .sxlive__inner { flex-wrap: wrap; }
  .sxlive__act { width: 100%; }
}
@media (max-width: 680px) {
  .sxgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sxtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sxlive__mark { display: none; }
  .sx-cta__in { flex-wrap: wrap; }
  .sx-head { flex-wrap: wrap; align-items: flex-start; }
}

/* ============================================================================
   THE EVENTS PAGE — .evx-*
   ----------------------------------------------------------------------------
   Its own namespace: .ev, .ev-list and .ev-facts belong to the event CARD,
   which the homepage and the event detail pages both use, and must not move.
   ========================================================================== */

/* --- hero: two halves, blended ---------------------------------------------
   A split rather than text-on-photo. The green is flat and the photograph is
   whole; a gradient carries one into the other so there is no seam. */
/* One band, no columns, since the photograph that held the right half came
   off on 12 October 2026. The 45fr/55fr split and the --hero-h floor went with
   it: both existed to give the picture room, and a text-only hero held to a
   506px minimum is just a lot of empty green. */
.evx-hero { background: #0A0D0B; position: relative; isolation: isolate; }
.evx-hero__text { display: flex; align-items: center; }
.evx-hero__in {
  margin-inline: auto; width: 100%;
  max-width: 1240px; padding: var(--s-8) var(--s-6);
  padding-top: calc(var(--head-h) + var(--s-7));
}
.evx-hero__title {
  font-size: var(--fs-3xl); line-height: 1.08; color: #FBF9F5;
  margin: var(--s-2) 0 var(--s-4); letter-spacing: -.01em;
}
.evx-hero__title span { display: block; }
.evx-hero__lede { color: rgba(245,243,238,.84); font-size: var(--fs-base); line-height: 1.7; max-width: 34ch; margin: 0; }
.evx-hero__act { margin: var(--s-4) 0 0; }
.evx-hero__act .btn--outline { color: #FBF9F5; border-color: rgba(255,255,255,.42); }
.evx-hero__act .btn--outline:hover { background: rgba(255,255,255,.1); color: #FBF9F5; }

.evx-sec { padding-block: var(--s-9); }
.evx-sec--top { padding-top: var(--s-7); }

/* --- featured event, and its empty state ----------------------------------- */
.evx-feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-9); align-items: center; }
.evx-feat__title { font-size: var(--fs-2xl); color: var(--ink); margin: var(--s-2) 0 var(--s-4); line-height: 1.1; }
.evx-feat__text { color: var(--text); line-height: 1.75; max-width: 42ch; margin: 0 0 var(--s-5); }
.evx-feat__facts { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); }
.evx-feat__facts li { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--text); }
.evx-feat__facts .ico { width: 17px; height: 17px; flex: none; color: var(--gold-dk); }
.evx-feat__art { margin: 0; }
.evx-feat__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--r-lg); }
/* A poster is portrait and is artwork, not a photograph — cropping it to a
   4:3 letterbox would cut the title off the top and the Scripture off the
   bottom. This variant sizes to the image and caps its height instead, so the
   whole poster is shown whatever shape the church's designer chose. */
.evx-feat__art--tall { display: flex; justify-content: center; }
.evx-feat__art--tall img {
  width: auto; height: auto; aspect-ratio: auto;
  max-width: 100%; max-height: 620px;
}

/* Written to be read, not to apologise. It is a real answer to "what is on" —
   the answer happens to be "nothing extra this month". */
.evx-empty { max-width: 56ch; }
.evx-empty__title { font-size: var(--fs-xl); color: var(--ink); margin: var(--s-2) 0 var(--s-3); }
.evx-empty__text { color: var(--text); line-height: 1.75; margin: 0; }
.evx-empty__act { display: flex; gap: var(--s-5); margin: var(--s-5) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.evx-empty__act a { color: var(--forest); }
.evx-empty__act a:hover { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 4px; }

/* --- the header and the two tabs ------------------------------------------- */
.evx-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.evx-head__title {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); margin: 0;
}
.evx-tabs { display: flex; gap: var(--s-5); }
.evx-tab {
  font-size: var(--fs-sm); color: var(--text-mute); padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.evx-tab:hover { color: var(--ink); }

/* THE TOGGLE. Both views are in the page; :target chooses. The tabs are real
   links, so this needs no script, survives a reload, and can be linked to from
   the hero.

   :has() is what lets the calendar tab hide the list. Without it the rule
   below still hides the calendar and nothing ever reveals it, so the tab would
   be a control that does nothing — the @supports block at the end of this
   section is the fallback: show both views stacked and remove the tabs
   entirely, so every browser reaches all of the page and none of them offers
   a button that is dead. */
.evx-view--cal { display: none; }
.evx-views:has(#calendar:target) .evx-view--list { display: none; }
.evx-views:has(#calendar:target) .evx-view--cal { display: block; }
/* The selected tab, on the same rule so the two can never disagree. */
.evx-views:not(:has(#calendar:target)) #list,
.evx-views:has(#calendar:target) #calendar {
  color: var(--ink); font-weight: 600; border-bottom-color: var(--gold-dk);
}

/* Older browsers — Firefox before 121, Safari before 15.4 — have :target but
   not :has(). Rather than leave a tab that cannot work, drop the tabs and show
   the list and the calendar one after the other. Nothing is unreachable. */
@supports not selector(:has(*)) {
  .evx-tabs { display: none; }
  .evx-view--cal { display: block; padding-top: var(--s-8); border-top: 1px solid var(--line); margin-top: var(--s-6); }
}

/* --- the list --------------------------------------------------------------
   Rules between rows, no boxes. The date column is fixed so every title starts
   on the same line down the page. */
.evx-rows { list-style: none; margin: 0; padding: 0; }
.evx-rows > li + li { border-top: 1px solid var(--line); }
.evx-row {
  display: grid; grid-template-columns: 88px 1fr auto;
  gap: var(--s-6); align-items: center;
  padding: var(--s-6) 0; color: inherit;
}
a.evx-row:hover { color: inherit; }
.evx-row__date { text-align: center; line-height: 1.05; }
.evx-row__mon {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}
.evx-row__day { display: block; font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-dk); margin: .1rem 0; }
.evx-row__dow {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}
.evx-row__body { display: grid; gap: .3rem; }
.evx-row__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); line-height: 1.25; }
a.evx-row:hover .evx-row__title { color: var(--gold-dk); }
.evx-row__meta { font-size: var(--fs-sm); color: var(--gold-dk); }
.evx-row__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.6; max-width: 58ch; }
.evx-row__go { color: var(--text-mute); display: grid; place-items: center; }
.evx-row__go .ico { width: 22px; height: 22px; transition: transform .2s var(--ease); }
a.evx-row:hover .evx-row__go { color: var(--forest); }
a.evx-row:hover .evx-row__go .ico { transform: translateX(4px); }
.evx-none { color: var(--text-mute); padding: var(--s-7) 0; margin: 0; }

/* --- the calendar ---------------------------------------------------------- */
.evx-view--cal { padding-top: var(--s-6); }
.evx-month + .evx-month { margin-top: var(--s-8); }
.evx-month__name { font-size: var(--fs-lg); color: var(--ink); margin: 0 0 var(--s-4); }
.evx-month__name span { color: var(--text-mute); font-weight: 400; }
.evx-cal { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.evx-cal__head, .evx-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.evx-cal__head {
  background: var(--cream-2); border-bottom: 1px solid var(--line);
}
.evx-cal__head span {
  padding: .55rem 0; text-align: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute);
}
.evx-cal__head abbr { text-decoration: none; border: 0; }
.evx-cal__week + .evx-cal__week { border-top: 1px solid var(--line-2); }
.evx-cal__day {
  position: relative; min-height: 74px;
  padding: .45rem .5rem; border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
}
.evx-cal__day:first-child { border-left: 0; }
.evx-cal__n { font-size: var(--fs-sm); color: var(--text); }
/* Days from the neighbouring month are shown but recede — an empty cell and
   the 31st of last month look the same otherwise. */
.evx-cal__day.is-out .evx-cal__n { color: var(--line); }
.evx-cal__day.has-ev { background: rgba(212,175,110,.07); }
.evx-cal__day.is-today .evx-cal__n {
  font-weight: 700; color: var(--forest);
  border-bottom: 2px solid var(--gold-dk);
}
.evx-cal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dk); flex: none; }
.evx-cal__key {
  display: flex; align-items: center; gap: .5rem;
  margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--text-mute);
}

/* --- weekly schedule, and the New here card -------------------------------- */
.evx-week { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: var(--s-8); align-items: start; }
.evx-week__title { font-size: var(--fs-xl); color: var(--ink); margin: var(--s-2) 0 var(--s-3); }
.evx-week__text { color: var(--text-mute); font-size: var(--fs-sm); line-height: 1.7; margin: 0; }
.evx-week__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.evx-day + .evx-day { border-left: 1px solid var(--line); padding-left: var(--s-6); }
.evx-day__name {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--s-4);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}
.evx-day__name .ico { width: 18px; height: 18px; color: var(--gold-dk); }
.evx-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.evx-day__time { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.evx-day__what { display: block; font-size: var(--fs-sm); color: var(--text-mute); margin-top: .1rem; }

.evx-new {
  background: var(--forest); color: #FBF9F5;
  border-radius: var(--r-lg); padding: var(--s-6);
}
.evx-new__mark {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid rgba(212,175,110,.45); border-radius: 50%;
  color: var(--gold); margin-bottom: var(--s-4);
}
.evx-new__mark .ico { width: 22px; height: 22px; }
.evx-new__title { font-size: var(--fs-lg); color: #FBF9F5; margin: 0 0 .4rem; }
.evx-new__text { font-size: var(--fs-sm); color: rgba(245,243,238,.82); line-height: 1.65; margin: 0 0 var(--s-5); }

/* --- questions -------------------------------------------------------------- */
.evx-ask-sec { padding-block: var(--s-8); }
.evx-ask {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
}
.evx-ask > div { flex: 1 1 auto; }
.evx-ask__mark {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper);
  border: 1px solid var(--line); color: var(--gold-dk);
}
.evx-ask__mark .ico { width: 21px; height: 21px; }
.evx-ask__title { font-size: var(--fs-md); color: var(--ink); margin: 0 0 .2rem; }
.evx-ask__text { font-size: var(--fs-sm); color: var(--text-mute); margin: 0; }
.evx-ask__go {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--forest);
}
.evx-ask__go .ico { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.evx-ask__go:hover { color: var(--gold-dk); }
.evx-ask__go:hover .ico { transform: translateX(3px); }

@media (max-width: 1100px) {
  .evx-week { grid-template-columns: 1fr 1fr; }
  .evx-new { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .evx-hero__in { max-width: none; padding-bottom: var(--s-8); }
  .evx-feat { grid-template-columns: 1fr; gap: var(--s-6); }
  .evx-feat__art { order: -1; }
}
@media (max-width: 680px) {
  .evx-row { grid-template-columns: 62px 1fr; gap: var(--s-4); padding: var(--s-5) 0; }
  .evx-row__go { display: none; }
  .evx-row__day { font-size: 2.1rem; }
  .evx-week, .evx-week__cols { grid-template-columns: 1fr; }
  .evx-day + .evx-day { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-5); }
  .evx-cal__day { min-height: 54px; padding: .35rem .3rem; }
  .evx-ask { flex-wrap: wrap; }
  /* Bigger tap targets for the two controls that actually switch the view. */
  .evx-tab { padding: .55rem 0; }
}

/* ============================================================================
   THE PRAYER PAGE — .pr-*
   ----------------------------------------------------------------------------
   Its own namespace. The .form / .fld rules above are shared with the contact
   page and must keep working there unchanged; everything here is scoped under
   .form--prayer or .pr-* so the two cannot collide.
   ========================================================================== */

/* --- hero: green on one side, the church on the other ---------------------- */
/* Near-black, matching the Sermons hero's scrim rather than the forest green
   the other split heroes use. The leaf overlay that used to sit here is gone —
   the artwork is still in git if it is ever wanted back. */
/* One band, no columns, since the photograph that held the right half came
   off on 12 October 2026 — the same change as the Events hero. The 48/52
   split and the --hero-h floor went with it: both existed to give the picture
   room, and a text-only banner held to a 506px minimum is a lot of empty
   green. */
/* Flex column, and the scroll cue is a real item in it rather than an
   absolutely-positioned overlay. While this hero was a two-column grid the
   cue could sit `position: absolute; bottom` over the whole banner safely,
   because the grid gave the banner a height of its own. Once the photograph
   went and the hero became a plain band, that stopped being true twice over:
   the cue landed on top of the last line of the lede — 40px into it on a
   phone — and .pr-hero__text, still carrying overflow:hidden from the old
   split, clipped the copy at 308px when it needed 393px.

   In normal flow both problems are structural impossibilities rather than
   things to keep tuning: the band is as tall as its contents and the arrow is
   always below the words. */
.pr-hero {
  background: #0A0D0B; position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
}
.pr-hero__text { position: relative; display: flex; align-items: center; width: 100%; }
/* The botanical texture, drawn rather than downloaded: one leaf, tiled large
   and set at 5% so it reads as a whisper in the green and never competes with
   the words. An image file for something this faint would be a request the
   visitor pays for and cannot see. */
.pr-hero__leaves {
  position: absolute; inset: 0; pointer-events: none;
  /* Ryan's painted overlay. NO BLEND MODE: soft-light at 55% turned its
     mid-greens into grey blotches that read as dirt on the panel rather than
     leaves. Plain opacity over the forest keeps the drawing legible as a
     drawing. `contain` from the left keeps the leaves at the scale they were
     painted — `cover` on a wide panel enlarged them until they were unreadable
     smears. */
  background-image: url('/assets/img/prayer-leaves.jpg');
  background-size: auto 118%; background-position: left center; background-repeat: no-repeat;
  opacity: .17;
}
.pr-hero__in {
  position: relative; margin-inline: auto; width: 100%;
  max-width: 1240px; padding: var(--s-8) var(--s-6);
  padding-top: calc(var(--head-h) + var(--s-7));
  padding-bottom: var(--s-6);
}
.pr-hero__title {
  font-size: var(--fs-4xl); line-height: 1.04; color: #FBF9F5;
  margin: var(--s-3) 0 var(--s-5); letter-spacing: -.015em;
}
.pr-hero__title span { display: block; }
.pr-hero__lede { color: rgba(245,243,238,.86); font-size: var(--fs-base); line-height: 1.7; max-width: 36ch; margin: 0 0 .35rem; }
/* Bottom centre of the banner, over both halves. Absolute against .pr-hero
   itself — z-index because the photograph's blend layer is painted after it in
   source order and would otherwise sit on top. */
.pr-hero__cue {
  margin: var(--s-3) 0 var(--s-6); flex: none;
  display: grid; place-items: center; z-index: 2;
  width: 42px; height: 42px; color: var(--gold);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.pr-hero__cue .ico { width: 26px; height: 26px; }
.pr-hero__cue:hover { transform: translateY(4px); color: var(--gold-lt); }
.pr-sec { padding-block: var(--s-7); }

/* --- the introduction ------------------------------------------------------ */
.pr-intro { text-align: center; max-width: 60ch; margin: 0 auto var(--s-5); }
.pr-intro__text {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-md); line-height: 1.75; color: var(--text);
  margin: var(--s-3) 0 0;
}
.pr-intro__text span { display: block; }

/* --- the form -------------------------------------------------------------- */
.pr-form { max-width: 900px; margin-inline: auto; }
/* No rule between the three questions — the headings already separate them,
   and a line above each one made the form look like a table of contents. */
.form--prayer .form__group + .form__group { margin-top: var(--s-5); }
.form--prayer .form__group-title {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .3rem;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.form--prayer .form__group-title .ico { width: 18px; height: 18px; color: var(--gold-dk); }
.form--prayer .form__group-title .req { color: var(--gold-dk); }
.form--prayer .form__group-help { font-size: var(--fs-sm); color: var(--text-mute); margin: 0 0 var(--s-3); }
.form--prayer .form__group-title + .form__grid { margin-top: var(--s-3); }
.form--prayer .form__grid { gap: var(--s-3); }
.form--prayer .fld__input {
  background: var(--paper); border-radius: var(--r-sm);
  padding: .78rem .9rem; font-size: var(--fs-base);
}
.form--prayer textarea.fld__input { line-height: 1.7; padding: .9rem; }

/* The privacy choices. Selectable rows, not pills — the label is the target,
   so the whole row is clickable, and :has() gives the chosen one its weight.
   Without :has() they stay legible plain radios, which is why the border and
   background are the only things it changes. */
.form--prayer .fld--radio { display: grid; gap: .4rem; }
.form--prayer .radio {
  display: flex; align-items: center; gap: .7rem; margin: 0;
  padding: .62rem .9rem; font-size: var(--fs-sm); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.form--prayer .radio:hover { border-color: var(--gold); }
.form--prayer .radio input { accent-color: var(--forest); width: 17px; height: 17px; flex: none; }
.form--prayer .radio:has(input:checked) {
  border-color: var(--forest); background: rgba(46,64,48,.06); color: var(--ink); font-weight: 600;
}
.form--prayer .radio:has(input:focus-visible) { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

/* The submit, centred and generous — this is the one action on the page. */
.form--prayer { text-align: left; }
.form--prayer > .btn {
  display: flex; margin: var(--s-5) auto 0; padding: .8rem 1.9rem;
  font-size: var(--fs-base);
}
.form--prayer .form__note { text-align: center; }

/* --- reassurance, inside the form under the button ------------------------- */
.pr-sure {
  display: flex; gap: var(--s-4); align-items: flex-start;
  max-width: 54ch; margin: var(--s-4) auto 0;
}
.pr-sure__mark { flex: none; color: var(--gold-dk); }
.pr-sure__mark .ico { width: 22px; height: 22px; }
.pr-sure__title { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); margin: 0 0 .2rem; }
.pr-sure__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.65; margin: 0; }

/* --- why we pray, and the three assurances --------------------------------- */
.pr-why { display: grid; grid-template-columns: .85fr 1fr .9fr; gap: var(--s-8); align-items: center; }
.pr-why__art { margin: 0; }
.pr-why__art img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--r-lg);
  /* SQUARE, not 4:5. A 4:5 box shows barely half the width of a 3:2 photograph,
     which cropped the steeple and pressed the building against both edges. A
     square shows two thirds of the width — enough for the whole church with air
     around it. The offset is because the building stands a little right of the
     frame's centre, so a plain centre crop would leave it off-axis; this puts
     the doors in the middle of the box. */
  object-position: 59% 50%;
}
.pr-why__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.12; margin: 0 0 var(--s-4); }
.pr-why__title span { display: block; }
.pr-why__text { color: var(--text); line-height: 1.75; margin: 0 0 .6rem; max-width: 40ch; }
.pr-why__body .btn { margin-top: var(--s-5); }
.pr-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.pr-trust li { display: flex; gap: var(--s-4); align-items: flex-start; }
.pr-trust li + li { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pr-trust__mark {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-2); border: 1px solid var(--line); color: var(--gold-dk);
}
.pr-trust__mark .ico { width: 20px; height: 20px; }
.pr-trust__title { font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink); margin: 0 0 .15rem; }
.pr-trust__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.6; margin: 0; }

/* --- the contact strip ------------------------------------------------------ */
.pr-ask-sec { padding-block: var(--s-8); }
.pr-ask {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
}
.pr-ask > div { flex: 1 1 auto; }
.pr-ask__mark {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--forest); color: var(--gold-lt);
}
.pr-ask__mark .ico { width: 21px; height: 21px; }
.pr-ask__title { font-size: var(--fs-md); color: var(--ink); margin: 0 0 .2rem; }
.pr-ask__text { font-size: var(--fs-sm); color: var(--text-mute); margin: 0; }
.pr-ask__go {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--forest);
}
.pr-ask__go .ico { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.pr-ask__go:hover { color: var(--gold-dk); }
.pr-ask__go:hover .ico { transform: translateX(3px); }

@media (max-width: 1100px) {
  .pr-why { grid-template-columns: 1fr 1fr; }
  .pr-trust { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .pr-trust li + li { padding-top: 0; border-top: 0; }
}
@media (max-width: 900px) {
  .pr-hero__in { max-width: none; }
  .pr-why { grid-template-columns: 1fr; }
  .pr-why__art { max-width: 420px; }
  .pr-why__art img { aspect-ratio: 4 / 3; }
}
@media (max-width: 680px) {
  .form--prayer .form__grid { grid-template-columns: 1fr; }
  .form--prayer > .btn { width: 100%; }
  .pr-trust { grid-template-columns: 1fr; }
  .pr-trust li + li { padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .pr-ask { flex-wrap: wrap; }
  .pr-intro__text span { display: inline; }
}

/* ============================================================================
   THE GIVE PAGE — .gv-*
   ----------------------------------------------------------------------------
   Its own namespace. .give-primary belonged to the old page and is retired
   with it. Nothing here touches the shared form, card or button rules.
   ========================================================================== */

/* --- hero: the same split construction as Events and Prayer ---------------- */
/* Same split as the Events hero — 45/55 — so the two read as the same object
   at the same size, which they now are in both dimensions. */
.gv-hero {
  display: grid; grid-template-columns: 45fr 55fr;
  background: #0A0D0B; position: relative; isolation: isolate;
  min-height: var(--hero-h);
}
.gv-hero__text { position: relative; display: flex; align-items: center; overflow: hidden; }
.gv-hero__in {
  position: relative; margin-left: auto; width: 100%;
  max-width: calc(1240px * 0.48); padding: var(--s-7) var(--s-6);
  padding-top: calc(var(--head-h) + var(--s-4));
}
.gv-hero__title {
  font-size: var(--fs-4xl); line-height: 1.05; color: #FBF9F5;
  margin: var(--s-3) 0 var(--s-4); letter-spacing: -.015em;
}
.gv-hero__lede { color: rgba(245,243,238,.86); font-size: var(--fs-base); line-height: 1.7; max-width: 40ch; margin: 0; }
.gv-hero__act { margin: var(--s-6) 0 0; }
.gv-hero__act .btn--outline { color: #FBF9F5; border-color: rgba(255,255,255,.42); }
.gv-hero__act .btn--outline:hover { background: rgba(255,255,255,.1); color: #FBF9F5; }
.gv-hero__media { position: relative; overflow: hidden; }
/* THE FADE IS A MASK, NOT A SCRIM, and that distinction is the whole reason
   this works. An earlier pass here laid a black gradient OVER the picture and
   it read as a grey smudge — this photograph is bright sky down its left edge,
   so darkening it just makes grey sky. Masking instead makes the image itself
   fall away to transparent, and what shows through is .gv-hero's own #0A0D0B.
   True black, not washed sky. The run is longer than Prayer's (44% against
   22%) because a bright picture needs further to travel before the join stops
   being visible.

   White in the mask means KEEP. Every stop is white with a varying alpha
   rather than a colour ramp, because Firefox reads a bare black stop as
   hidden and would blank the picture outright. */
.gv-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 12%, rgba(255,255,255,.72) 27%, #fff 44%);
          mask-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 12%, rgba(255,255,255,.72) 27%, #fff 44%);
}
/* A light scrim on top of the masked edge. On its own it was the problem; over
   a mask it only has to soften the last of the join, so it is weak and short. */
.gv-hero__blend {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,13,11,.5) 0%, rgba(10,13,11,.18) 20%, rgba(10,13,11,0) 40%);
}

.gv-sec { padding-block: var(--s-9); }

/* --- section headers -------------------------------------------------------- */
.gv-head { max-width: 60ch; margin-bottom: var(--s-7); }
.gv-head--center { text-align: center; margin-inline: auto; }
.gv-head__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.14; margin: var(--s-2) 0 0; }
.gv-head__lede { color: var(--text); line-height: 1.75; margin: var(--s-3) 0 0; }
.gv-head--center .gv-head__lede { margin-inline: auto; }

/* --- the giving panel ------------------------------------------------------- */
.gv-card {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8);
  align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-7);
  box-shadow: 0 1px 3px rgba(28,38,32,.05);
}
.gv-card__brand {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink);
}
.gv-card__mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--cream-2); color: var(--gold-dk);
}
.gv-card__mark .ico { width: 18px; height: 18px; }
.gv-card__title { font-size: var(--fs-md); color: var(--ink); margin: 0 0 .4rem; }
.gv-card__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.7; margin: 0 0 var(--s-5); max-width: 46ch; }
.gv-card__pending { font-size: var(--fs-sm); color: var(--text); line-height: 1.7; margin: 0 0 var(--s-4); max-width: 48ch; }
.gv-card__act { margin: 0; }
/* Assurances beside the panel, divided by hairlines rather than boxed. */
.gv-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.gv-trust li { display: flex; gap: var(--s-4); align-items: flex-start; }
.gv-trust li + li { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.gv-trust__mark { flex: none; color: var(--gold-dk); }
.gv-trust__mark .ico { width: 21px; height: 21px; }
.gv-trust__title {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 .2rem;
}
.gv-trust__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.6; margin: 0; }

/* --- the Scripture ---------------------------------------------------------- */
.gv-word { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-9); align-items: start; }
.gv-word__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.14; margin: var(--s-2) 0 0; }
/* Typography rather than a box: a rule and a measure, no border, no quote mark
   the size of a house. */
.gv-word__quote { margin: 0; padding-left: var(--s-6); border-left: 2px solid var(--gold); }
.gv-word__quote p {
  font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.5;
  color: var(--ink); margin: 0 0 var(--s-4); max-width: 40ch;
}
.gv-word__quote cite {
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dk);
}

/* --- why we give ------------------------------------------------------------ */
.gv-reasons {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7);
}
.gv-reasons li { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.gv-reasons__mark { display: block; color: var(--gold-dk); margin-bottom: var(--s-3); }
.gv-reasons__mark .ico { width: 26px; height: 26px; }
.gv-reasons__title {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 .5rem;
}
.gv-reasons__text { font-size: var(--fs-sm); color: var(--text); line-height: 1.75; margin: 0; }

/* --- other ways -------------------------------------------------------------- */
.gv-ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5);
}
.gv-ways li {
  display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5);
}
.gv-ways__mark {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper);
  border: 1px solid var(--line); color: var(--gold-dk);
}
.gv-ways__mark .ico { width: 20px; height: 20px; }
.gv-ways__title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink); margin: 0 0 .25rem; }
.gv-ways__text { font-size: var(--fs-sm); color: var(--text-mute); line-height: 1.65; margin: 0; }
.gv-ways__addr { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; margin-top: .5rem; }
/* `.gv-ways li` is 0,1,1 and beat a bare class, so the draft-only marker kept
   the card's box. Qualified so it does not look like a fourth way to give. */
.gv-ways li.gv-ways__none { background: transparent; border: 0; padding: 0; }

/* --- impact ------------------------------------------------------------------ */
.gv-impact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.gv-impact__art { margin: 0; }
.gv-impact__art img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; border-radius: var(--r-lg); }
.gv-impact__title { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.14; margin: var(--s-2) 0 var(--s-4); }
.gv-impact__text { color: var(--text); line-height: 1.75; margin: 0 0 var(--s-5); max-width: 42ch; }

/* --- the closing word --------------------------------------------------------- */
.gv-close { background: var(--forest-dk); }
.gv-close__in { padding-block: var(--s-10); text-align: center; }
.gv-close__quote { margin: 0; }
.gv-close__quote p {
  font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.35;
  color: #FBF9F5; margin: 0 0 var(--s-5); max-width: 24ch; margin-inline: auto;
}
.gv-close__quote cite {
  font-style: normal; display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.gv-close__rule { width: clamp(40px, 7vw, 74px); height: 1px; background: var(--gold); opacity: .6; }

@media (max-width: 1000px) {
  .gv-card { grid-template-columns: 1fr; gap: var(--s-6); }
  .gv-word { grid-template-columns: 1fr; gap: var(--s-6); }
  .gv-reasons { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 900px) {
  .gv-hero { grid-template-columns: 1fr; }
  .gv-hero__in { max-width: none; padding-bottom: var(--s-8); }
  .gv-hero__media { min-height: 240px; order: 2; }
  .gv-hero__media img { -webkit-mask-image: none; mask-image: none; }
  .gv-hero__blend { background: linear-gradient(180deg, #0A0D0B 0%, rgba(10,13,11,.5) 22%, rgba(10,13,11,0) 55%); }
  .gv-impact { grid-template-columns: 1fr; gap: var(--s-6); }
  .gv-impact__art { order: -1; }
}
@media (max-width: 680px) {
  .gv-card { padding: var(--s-5); }
  .gv-card .btn, .gv-card__act .btn { width: 100%; }
  .gv-word__quote { padding-left: var(--s-5); }
}

/* --- the sermon archive's series filter -------------------------------------
   The per-series rules are generated into the page (see archiveFilter in
   pages/sermons.js) because there is one per series and the series come from
   the data. What lives here is only what every filter shares. */
.sxfilter { position: relative; }
/* The targets are real elements so :target has something to match, and they
   must take no space — a run of empty spans would otherwise open a gap above
   the tabs. tabindex="-1" keeps them out of the tab order. */
.sxfilter__t { position: absolute; width: 0; height: 0; overflow: hidden; }
.sxtabs {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-bottom: var(--s-5); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.sxtab {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-mute);
  padding-bottom: .3rem; border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.sxtab:hover { color: var(--ink); }
.sxtab:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
/* "All messages" is the state with no target, so it leads by default and the
   generated rules hand the highlight over when a series is chosen. */
.sxtab.is-all { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold-dk); }

/* --- section reveal ---------------------------------------------------------
   Paired with the [data-reveal] observer in assets/main.js. The hidden state
   is behind .js-rise, which only script adds — so with JavaScript blocked, or
   if the observer never fires, every block is simply visible.

   1.1s, up from .6s, which was brisk enough to register as a flicker rather
   than a movement. The distance stays at 18px: a slow fade over a long
   distance is what makes a page feel sluggish, and it is the FADE that wants
   the time here, not the travel. */
.js-rise [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js-rise [data-reveal].is-up { opacity: 1; transform: none; }
/* A second safety net beyond the JS check: even if the class were somehow
   added, a visitor who has asked for less movement sees no movement. */
@media (prefers-reduced-motion: reduce) {
  .js-rise [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   FORM FIELDS: THE 16px MINIMUM
   ----------------------------------------------------------------------------
   iOS Safari zooms the entire page when a form control smaller than 16px takes
   focus, and it does not zoom back out afterwards. On the contact and prayer
   forms that means tapping "Your name" throws the visitor into a zoomed page
   they then have to pinch their way out of, mid-sentence.

   LAST RULE IN THE FILE, and outside every media query, on purpose. Both of
   those are the fix, not tidiness:

   - Outside the breakpoints because an iPad is wider than 680px and zooms just
     the same. Scoped to the phone block this did nothing at 900px.
   - Last because .fld__input (0,1,0) and .form--prayer .fld__input (0,2,0)
     both set font-size from the type scale, and .form--prayer sits near the
     end of the file. Written earlier, or with a bare element selector, this
     rule loses to them silently — which is exactly what it did on the first
     two attempts.

   Pixels, not rem: this is a fixed browser threshold, not part of the type
   scale, and it must not move when the scale does.

   Not caused by the 12 October size passes — .fld__input has always taken
   --fs-sm, which was 15px before any of them. */
input, select, textarea,
.fld__input,
.form--prayer .fld__input { font-size: 16px; }

/* ============================================================================
   TOUCH TARGETS
   ----------------------------------------------------------------------------
   Text links on /sermons/, /visit/ and /events/ sit between 16px and 28px tall
   — the 33 "Listen" links on the sermon list are 21px, their titles 20px. That
   is a comfortable click and a poor thumb, and it is what a Lighthouse run
   flags on this site.

   The obvious fix, min-height: 44px on each, was rejected: on /sermons/ alone
   that is 66 elements gaining ~23px, roughly 750px added to a page that has
   just been deliberately shortened. Growing the page to fix the page is not a
   fix.

   So the hit area grows and the layout does not:

   - Block and flex links take padding and give the same amount straight back
     as negative margin. The border box — which is what the browser hit-tests
     and what getBoundingClientRect and Lighthouse both measure — reaches 44px,
     while the space the element occupies in flow is unchanged to the pixel.
   - Inline links need only the padding. Vertical padding on an inline box does
     not grow the line box, so it enlarges the hit rectangle and moves nothing.
     A negative margin here would actively pull neighbours around.

   Safe because it was measured first: every one of these targets has at least
   86px of clear space to its nearest neighbouring target, against the 24px of
   growth, and none of them has a clipping ancestor. Check both again before
   adding a class to these lists — overlapping targets are their own Lighthouse
   failure, and a padded box inside an overflow:hidden parent gets cut off.

   (pointer: coarse) rather than a width: this is about fingers, not screens.
   It reaches a tablet, it leaves the mouse alone, and it is what Lighthouse's
   mobile emulation matches. */
@media (pointer: coarse) {
  .sxr__go,
  .sxf__all,
  .sx-head__link,
  .evx-ask__go,
  .v-panel__link a { padding-block: 12px; margin-block: -12px; }

  /* Top only: .sxtab already carries a bottom padding that positions its
     underline, and padding-block would overwrite it. */
  .sxtab { padding-top: 16px; margin-top: -16px; }

  .sxr__title a { padding-block: 12px; }
  /* 14 and 13, not 12: these two sit on smaller type than the list rows, so
     the same padding lands short. Sized from the single-line case — the first
     .sxc__title on the page happens to wrap to two lines, and measuring that
     one is how they were under-padded on the first attempt. */
  .sxc__go a { padding-block: 14px; }
  .sxc__title a { padding-block: 13px; }
}