/* ==========================================================================
   Kingdom Come Youth Conference — Lantern
   Tokens → base → layout → components. See DESIGN.md.
   ========================================================================== */

/* --- 1. Tokens --------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Color. Ink is navy, not black — that is the direction's whole point. */
  --paper: #FDFCFA;
  --paper-sunk: #F4F2EE;
  --scene: var(--paper);   /* the FAQ floor the prints lie on */
  --ink: #1E1C1A;
  --ink-muted: #69635C;
  --rule: #E3DFD8;
  --accent: #E6C67C;
  --accent-deep: #8A6A1F;
  --band: #1F1D1B;
  --band-fg: #F4F1EC;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-hero: clamp(1.75rem, 1.15rem + 3vw, 2.875rem);
  --step-h1: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --step-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --step-h3: 1.25rem;
  --step-body: 1.0625rem;
  --step-small: 0.875rem;
  --step-label: 0.75rem;

  /* Space */
  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 65ch;
  --section-y: clamp(3.5rem, 9vw, 6rem);
  --header-h: 4rem;
}

@media (max-width: 720px) {
  :root { --header-h: 3.5rem; }
}

/* --- 2. Base ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

p { margin: 0; }

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

a { color: var(--ink); text-underline-offset: .18em; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--band);
  color: var(--band-fg);
  padding: .75rem 1rem;
  z-index: 200;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. Layout --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 48rem; }

.section { padding-block: var(--section-y); }
.section--sunk { background: var(--paper-sunk); }
.section + .section--rule { border-top: 1px solid var(--rule); }

.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.stack--wide { gap: 2rem; }

.eyebrow {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }

.h1 { font-size: var(--step-h1); }
.h2 { font-size: var(--step-h2); }
.h3 { font-size: var(--step-h3); }

/* --- 4. Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  /* 3px, the same radius as the .tba chip. The site has exactly three radii —
     2px on the focus ring, 3px here and on the chip — and is otherwise square
     corners and hairlines throughout: the fact grids, the plaque, the FAQ
     panel, the scattered prints. A 999px pill was the one round shape in that
     system, and it landed on the most prominent element on the page. */
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease-out, background-color .18s ease-out;
}

.btn:hover { transform: translateY(-1px); }

/* The one loud thing on the site. One per screen. */
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: #EFD595; }

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

.btn--onband { background: var(--accent); color: var(--ink); }

/* --- 5. Header --------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  padding-top: env(safe-area-inset-top, 0px);
  background: #FFFFFF;
  border-bottom: 1px solid var(--rule);
  transition: background-color .25s ease-out;
}

/* Solid at rest; once content passes underneath it turns to frosted glass.
   The blur is what makes the translucency read as deliberate — without it,
   photos scrolling past just muddy the type. */
.site-header[data-scrolled] {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* No backdrop-filter (older Firefox): stay near-opaque rather than muddy. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header[data-scrolled] { background: rgba(255, 255, 255, .94); }
}

.site-header > .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  min-width: 0;
}

/* The crown is one cached SVG used as a mask, so it inherits currentColor
   everywhere — navy in the header, paper white on the navy footer and hero. */
.crown-mark {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../assets/crown.svg") no-repeat center / contain;
  mask: url("../assets/crown.svg") no-repeat center / contain;
}

.brand-crown { height: 1.35rem; width: 1.47rem; color: var(--ink); }

.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

.nav { display: flex; align-items: center; gap: 1.5rem; }

.nav-link {
  position: relative;
  font-size: var(--step-small);
  text-decoration: none;
  /* Symmetric so the text centers against the Register pill; the underline
     still rides on the bottom padding. */
  padding: .3rem 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease-out;
}

.nav-link:hover::after { transform: scaleX(1); opacity: .6; }
.nav-link[aria-current="page"] { font-weight: 600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-right: -.75rem;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}

.menu-toggle .bars {
  display: block;
  width: 20px; height: 1.5px;
  background: currentColor;
  box-shadow: 0 6px currentColor, 0 -6px currentColor;
}

@media (max-width: 720px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Full-screen mobile menu */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: var(--gutter);
}

.overlay[hidden] { display: none; }

.overlay a {
  font-family: var(--font-display);
  font-size: 2rem;
  text-decoration: none;
}

.overlay .btn { font-family: var(--font-body); font-size: 1rem; }
.overlay .overlay-small { font-family: var(--font-body); font-size: 1rem; }

.overlay-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + .5rem);
  right: .5rem;
  width: 3rem; height: 3rem;
  font-size: 1.75rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}

/* --- 6. Hero and splash ------------------------------------------------ */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
  /* No inline padding here: .hero-inner takes the gutter, so its box matches
     .wrap's exactly. See .hero-inner.

     Top and bottom are the same value because they are the same thing: the
     inset of the two panels from the frame's edges. The bottom used to be
     var(--section-y), a section-spacing token borrowed for a job it does not
     describe, which sat the lower panel 96px off the bottom against the upper
     one's 40px off the header. */
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  overflow: hidden;
  color: #FFFFFF;
}

/* Dynamic viewport units so mobile browser chrome doesn't crop the hero. */
@supports (height: 100dvh) {
  .hero { min-height: calc(100dvh - var(--header-h)); }
}

/* isolate keeps the slides' z-index to themselves, so the crossfade layering
   can't lift a slide above the .hero::after scrim. */
.hero-slides { position: absolute; inset: 0; z-index: 0; isolation: isolate; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease-in-out;
}

/* The outgoing slide holds full opacity underneath while the incoming one
   fades in on top, so the crossfade never dips through the dark backdrop. */
.hero-slide[data-prev] { opacity: 1; transition: none; }

.hero-slide[data-active] { opacity: 1; z-index: 1; }

.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* The panels carry the contrast; this only keeps the frame from competing
     with the white nav above it. Deliberately weak.

     Panels beat a global wash on BOTH counts, which is why they came back after
     being cut. Worst backdrop under either text block across all five slides,
     and the brightness of the photograph where nothing covers it:

       panels .62 + wash .05-.09    8.59:1   photo 0.096   <- this one
       panels .52 + wash .08-.13    7.29:1   photo 0.088
       no panels + wash .10-.16     5.09:1   photo 0.049
       no panels + wash .24-.34     6.50:1   photo 0.032

     A global wash dims the whole frame to protect two small text areas. The
     panels darken only those two areas, so the other ~80% of the picture keeps
     its colour — twice as bright, at better contrast. Re-measure before
     changing any of it; DESIGN.md has the commands. */
  background:
    linear-gradient(120deg, rgba(14,12,10,.20) 0%, rgba(14,12,10,0) 45%),
    linear-gradient(300deg, rgba(14,12,10,.20) 0%, rgba(14,12,10,0) 42%),
    linear-gradient(180deg, rgba(14,12,10,.05), rgba(14,12,10,.09));
}

/* Three anchors on a diagonal: the verse holds the top-left, the facts and the
   CTA answer it at bottom-right, and the photograph keeps the middle. Four
   corners were the other option and give the eye no path to follow. */
.hero-inner {
  position: relative;
  z-index: 2;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  /* Literally .wrap's box: 68rem INCLUDING the gutter, not 68rem of content
     inside it. Taking the max-width alone and leaving the gutter on .hero left
     the type a full gutter (32px at 1440) outside the wordmark above it — the
     right idea measured against the wrong box. */
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
}

.hero-lede {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  /* Grid items stretch by default, so this filled its whole half-width column
     and the band ran on far past the text. Size it to its content instead —
     .hero-facts already does the same thing with justify-self: end. */
  justify-self: start;
  display: grid;
  justify-items: start;
  gap: .75rem;
  text-align: left;
  /* Hangs left by exactly its own left padding, so the TYPE lands on the column
     line — the verse's opening quote starts where the wordmark above it starts,
     and the panel edge sits one padding outside, the way hanging punctuation
     does. This only works because .hero-inner is literally .wrap's box. */
  --pad-x: clamp(1.4rem, 2.8vw, 2.2rem);
  padding: clamp(1.25rem, 2.4vw, 1.9rem) var(--pad-x);
  margin-left: calc(-1 * var(--pad-x));
  background: rgba(24, 20, 16, .62);
}

.hero-facts {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  display: grid;
  justify-items: end;
  justify-self: end;
  align-self: end;
  gap: .75rem;
  /* Left-aligned inside a right-anchored band: three lines of ragged-left body
     copy is the hardest thing on the page to read, and anchoring the band to
     the corner already does the compositional work. */
  justify-items: start;
  text-align: left;
  max-width: 26rem;
  /* Mirror of .hero-lede: hangs right by its own padding, so the CTA's right
     edge lands on the column line under the header's own Register pill. */
  --pad-x: clamp(1.25rem, 2.4vw, 1.8rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) var(--pad-x);
  margin-right: calc(-1 * var(--pad-x));
  background: rgba(24, 20, 16, .62);
}

/* Stepped down from --step-hero: inside a panel the verse no longer needs size
   to separate itself from the picture, and the panel stays a reasonable share
   of the frame. */
.hero-lede .verse { font-size: clamp(1.25rem, .9rem + 1.6vw, 1.75rem); max-width: 28ch; }


/* The date carries weight instead of size, so it stays tighter than the line
   above it while still holding up over a photograph. Full opacity: dimming
   small type over an image costs legibility and buys nothing here, since the
   panel already supplies the contrast. */
.hero-when {
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.5;
}

/* The copy stays left-aligned for reading; the button alone goes to the panel's
   right edge, closing the block at the corner it is anchored to. */
.hero-facts .btn { justify-self: end; }

/* One column on a phone: the lede leads, the facts follow, both flush left. */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .hero-lede { grid-column: 1; }
  .hero-facts {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    max-width: 100%;
    /* Stacked, so it hangs left like the lede rather than right. */
    margin-right: 0;
    margin-left: calc(-1 * var(--pad-x));
  }
  .hero-lede .verse, .hero-facts > * { max-width: 100%; }
}

.verse {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  line-height: 1.3;
  /* 34ch, not 20: at 20ch this ran to five stacked lines and read as a wall
     rather than a sentence. Ragged right, so the left edge stays the anchor. */
  max-width: 34ch;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

.verse-ref {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .85;
}

/* Body size, not small. At 14px/400 over a photograph the strokes were too thin
   to hold against the detail behind them — contrast measured 9.3:1, so the
   problem was never tint. */
.hero-meta { font-size: var(--step-body); line-height: 1.55; }

/* About intro — tall verse splash with the opening copy floating over it. */
.intro-hero {
  position: relative;
  min-height: clamp(34rem, 82vh, 46rem);
  display: grid;
  align-items: center;
  padding-block: var(--section-y);
  overflow: hidden;
  color: #FFFFFF;
}

/* The container is wider than the 16:9 file, so cover overflows vertically. A
   centred band clips the hoodie's "No cross, no crown" and its Matthew 6:33
   line; nudging the band down keeps them without losing the faces above. The
   whole adjustment lives here, so the file stays a plain top crop. */
.intro-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 84%;
}

.intro-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Darkest on the right, under the verse; the pane on the left needs no help. */
  background: linear-gradient(255deg, rgba(24,22,20,.74) 0%, rgba(24,22,20,.5) 55%, rgba(24,22,20,.45) 100%);
}

.intro-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.intro-hero__verse { display: grid; gap: 1rem; }
.intro-hero__verse .verse { max-width: none; }

/* Pane sits left, verse right: the splash photo's window, cross and stage are on
   the right-hand side, and a pane there would cover them. Source order stays
   verse-first so the verse still leads on a phone, where the two stack. */
.intro-pane {
  order: -1;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 1.5rem 3.5rem rgba(24, 22, 20, .28);
}

@media (max-width: 860px) {
  .intro-hero {
    min-height: 0;
    align-items: start;
    padding-block: 0;
  }
  .intro-hero__img { position: relative; height: clamp(18rem, 46vh, 24rem); }
  .intro-hero::after { inset: 0 0 auto 0; height: clamp(18rem, 46vh, 24rem); }
  .intro-hero__grid {
    grid-template-columns: 1fr;
    margin-top: calc(-1 * clamp(18rem, 46vh, 24rem));
    padding-block: var(--section-y) 0;
  }
  .intro-hero__verse { max-width: none; justify-items: center; text-align: center; }
  .intro-pane { order: 0; margin-top: clamp(2rem, 8vw, 3rem); }
}

/* --- 7. Media rows (About: Vision / Mission) --------------------------- */

.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}

.media-row + .media-row { margin-top: var(--section-y); }
.media-row--flip .media-row__text { order: 2; }

.media-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Tonal bridge. The paper is near-white and an untreated photo runs the full
     range, so the edge lands as a hard luminance step. Warming the photo a
     little closes the gap from the photo's side — the same nudge the collage
     prints get, so every photograph on the site sits in one register. */
  filter: sepia(.07) saturate(.96);
}

@media (max-width: 760px) {
  .media-row { grid-template-columns: 1fr; }
  .media-row--flip .media-row__text { order: 0; }
}

/* --- 8. Doctrinal values ----------------------------------------------- */

.values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2rem;
}

.value {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* Christ's Return closes the set, so it runs the full width. */
.value:last-child { grid-column: 1 / -1; }

.value h3 { font-size: var(--step-h3); }
.value p { font-size: var(--step-small); line-height: 1.65; color: var(--ink-muted); }

@media (max-width: 680px) {
  .values { grid-template-columns: 1fr; }
}

/* --- 9. Hosting churches ----------------------------------------------- */

.churches {
  /* One centred lockup, not three equal columns: the marks are different
     proportions, so equal-width cells leave each one stranded in its own field. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.75rem, 5vw, 4rem);
  margin-top: 2.25rem;
}

.church {
  flex: 0 1 auto;
  max-width: 15rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

/* Fixed-height box, contained: the logos differ in shape, so this is what keeps
   their labels on one line together. */
.church img { width: auto; max-width: 100%; height: 3.25rem; object-fit: contain; }
.church a { font-size: var(--step-small); font-weight: 600; text-wrap: balance; }

@media (max-width: 640px) {
  .churches { grid-template-columns: 1fr; }
}

/* --- 10. FAQ ------------------------------------------------------------ */



.h2 + .faq-group { margin-top: 2rem; }
.faq-group + .faq-group { margin-top: 2.25rem; }
.faq-group > .eyebrow { display: block; margin-bottom: .5rem; }

.faq {
  border-top: 1px solid var(--rule);
}

.faq-group .faq:last-of-type { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  font-size: var(--step-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--accent-deep);
  flex: none;
}

.faq[open] summary::after { content: "\2212"; }

/* Answers grow into place instead of snapping, so the page below them reads as
   responding rather than jumping. Progressive enhancement: browsers without
   interpolate-size simply open instantly, exactly as before. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }

  .faq[open]::details-content { block-size: auto; }
}

.faq p {
  padding-bottom: 1rem;
  font-size: var(--step-small);
  color: var(--ink-muted);
  max-width: 58ch;
}

/* --- 11. Event Info ----------------------------------------------------- */

/* This page opens plain — no splash — so the type has to carry the top of it.
   The head gets its own vertical field and is closed with a hairline, instead
   of simply running into whatever section comes next. */
.page-head { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); }
.page-head .h1 { margin-top: .6rem; max-width: 16ch; }

/* Event Info's splash. Built like .intro-hero (image, scrim, content above)
   rather than as a background-image, so it can carry srcset. The scrim is
   heaviest on the left, which is where the eyebrow and h1 sit. */
.page-head--splash {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  /* Height is set here rather than left to fall out of the padding, because
     what it really controls is how much of the photograph is revealed: the
     splash files are 16:9 and this band is far wider than that, so cover only
     ever shows a horizontal strip. At 1440px wide the old padding gave 331px,
     which was 41% of the frame; this gives ~446px, or about 55%. */
  min-height: clamp(18rem, 31vw, 28rem);
  display: grid;
  align-content: center;
  padding-block: clamp(3.5rem, 7vw, 5rem);
}

.page-head__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The band is far wider than the image, so cover slices a strip from the
     middle. Pull that strip upward to keep the windows, ceiling and cross. */
  object-position: 50% 26%;
}

.page-head--splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,18,16,.58) 0%, rgba(20,18,16,.36) 52%, rgba(20,18,16,.20) 100%);
}

.page-head__inner { position: relative; z-index: 1; }

.page-head--splash .eyebrow { color: rgba(255, 255, 255, .82); }

.page-head__meta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.75rem;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Facts at a glance. Deliberately the same construction as .values on About —
   1px gaps letting the rule colour through — so the two pages read as one
   system. Paper cells on the sunk ground, six facts across three columns.
   This replaced a 9rem/1fr <dl> at small-text size, which put the most
   important content on the page in its smallest type and left most of the
   measure empty. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 2rem 0 0;
}

.fact {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}

.fact dt {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* No SOFT/WONK: this is 20px, and both are off below 24px. */
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.3;
}

.fact dd a { font-weight: inherit; }

.fact-sub {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-body);
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* DORMANT — no markup uses .theme-block, .theme-name, .tba or .tba-note right
   now. Unknowns are cut from the page rather than shown as a chip, so the
   plaque comes back only when there is a theme to put in it: it leads, inside
   the head's paper field, directly under the meta strip, and becomes the
   largest type on the site. Kept here so announcing the theme is a markup
   change, not a rebuild. */
.theme-block {
  border: 1px solid var(--rule);
  padding: clamp(2.25rem, 6vw, 3.5rem) var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: .9rem;
}

.page-head .theme-block { margin-top: clamp(2rem, 5vw, 3rem); }

.theme-block .theme-name {
  font-family: var(--font-display);
  font-size: var(--step-h1);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

.tba {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 3px;
  background: rgba(230, 198, 124, .3);
  color: var(--accent-deep);
  font-size: var(--step-small);
  font-weight: 600;
}

.tba-note { margin-top: .6rem; font-size: var(--step-small); color: var(--ink-muted); }

/* Packing list, grouped. Thirteen undifferentiated bullets scan as noise;
   four labelled clusters can be checked off a bag one at a time. Hairlines
   between items rather than bullets, so each column reads as a form. */
.pack-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  margin-top: 2rem;
}

.pack-group > .eyebrow {
  display: block;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--ink-muted);
}

.pack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step-small);
  line-height: 1.5;
}

.pack-list li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
}

.pack-list li:last-child { border-bottom: 0; }

@media (max-width: 900px) { .pack-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pack-groups { grid-template-columns: 1fr; } }

/* Full-width navy band. At most two per page — this one and the footer. It
   sits after the practical sections: asking for the commitment before the
   reader knows what to bring or what the rules are is the wrong order. */
.band {
  background: var(--band);
  color: var(--band-fg);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
}

.band > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.band p {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

/* The intro band carries a question and a line of the vision, not a one-line
   call, so it needs a text column beside the button. Scoped tighter than
   `.band p` so the lede stays body copy instead of display size. */
.band--intro > .wrap { align-items: end; }

.band--intro .band-text { max-width: 42rem; }

.band--intro .band-lede {
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-variation-settings: normal;
  line-height: 1.7;
  margin-top: .8rem;
  opacity: .9;
}

@media (max-width: 620px) {
  .band--intro > .wrap { align-items: start; }
}

.counselor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
}

.counselor img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(.07) saturate(.96);   /* see .media-row__media img */
}

@media (max-width: 760px) {
  .counselor { grid-template-columns: 1fr; }
}

/* The page has to end on something composed. About closes on the centred
   three-church lockup; a bare sentence on white here read as an unfinished
   draft. The button is outline, not wheat — the header pill is already the
   one wheat CTA on this screen. */
.closing {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1rem;
}

.closing .prose { max-width: 48ch; }

/* --- 12. Footer --------------------------------------------------------- */

.site-footer {
  background: var(--band);
  color: var(--band-fg);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.site-footer a { color: var(--band-fg); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 3rem);
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand { display: grid; gap: .9rem; justify-items: start; }
.footer-brand .brand-crown { color: var(--band-fg); height: 1.6rem; width: 1.74rem; }
.footer-brand .brand-word { font-size: 1.05rem; }
.footer-brand p { font-size: var(--step-small); opacity: .8; max-width: 30ch; }

.footer-col { display: grid; gap: .55rem; align-content: start; font-size: var(--step-small); }
.footer-col .eyebrow { color: var(--band-fg); opacity: .6; margin-bottom: .3rem; }
.footer-col .eyebrow--second { margin-top: 1.1rem; }
.footer-col a { text-decoration: none; opacity: .92; }
.footer-col a.with-icon { display: inline-flex; align-items: center; gap: .45rem; }
.footer-col a.with-icon svg { flex: none; }
.footer-col a:hover { text-decoration: underline; }

.colophon {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(243, 246, 248, .18);
  font-size: var(--step-label);
  opacity: .65;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

/* --- 13. Small utilities ------------------------------------------------ */

.mt-lg { margin-top: clamp(1.25rem, 3vw, 2rem); }
.mt-sm { margin-top: .75rem; }

/* --- 14. The FAQ scene -------------------------------------------------
   Prints scattered on the ground, with the FAQ panel resting on top of them.
   The panel is opaque, so photographs behind its footprint are only ever seen
   at the edges — the middle of the scatter is filler that holds the illusion.
   -------------------------------------------------------------------- */

.faq-scene {
  --panel-half: min(20rem, 46vw);   /* half the FAQ panel's width */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--scene);
  padding-block: clamp(4rem, 9vw, 7rem);
}

/* Fixed height in rem, NOT a percentage of the section. The FAQ grows by half
   its height when answers are opened; anything positioned in % would slide down
   the page as it does. The overflow is clipped by .faq-scene.

   The height tracks where the prints actually END, not how tall the section can
   get. The pile is 30 placements deep and its lowest print bottoms out near
   135rem; the mask then dissolves that bottom edge into the floor, so a reader
   who opens enough answers to outgrow the pile sees it fade out rather than
   stop on a hard line. .faq-scene::before still handles the other case — the
   section shorter than the pile, where the scene's own bottom edge does the
   cutting. Grow this with the pile if placements are added past 30. */
.faq-scatter {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  height: 138rem;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 12rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 12rem), transparent);
}

.snap {
  /* Two knobs, deliberately separate. --s is print size, --p is how far the
     scatter spreads. The --off values were dealt against a ~2060px display, so
     below that the outer column crosses the page edge. Scaling both together
     fits everything but renders the prints too small to read, so instead --s
     stays near full and --p pulls the columns inward: the prints stay big and
     simply overlap more, which is what a pile of prints does anyway. Overhang
     is held to ~3rem, the width of the side falloff, so anything that does
     cross the edge dissolves into the floor instead of being cut square. */
  --s: 1;
  --p: 1;
  position: absolute;
  /* Measured outward from the panel's edge, not as a percentage of the page:
     --side is -1 or 1, --off is the distance from the panel edge to this
     print's rotated outer bounding box. Mirrored pairs therefore clear the
     panel by exactly the same amount on both sides at every viewport width. */
  /* --off places the print's CENTRE, and the smallest authored offsets were
     picked so a print's half-width just clears the panel. Scaling --off toward
     zero would scale that clearance away and tuck prints under the panel, so
     only the distance BEYOND the clearance compresses. .72 is the widest
     rotated half-width any print reaches as a fraction of its own --w. */
  --clear: calc(var(--w) * var(--s) * .72 + 2rem);   /* 2rem = air around the panel */
  left: calc(50% + var(--side) * (var(--panel-half) + var(--clear)
        + max(0rem, var(--off) - var(--clear)) * var(--p)));
  top: var(--y);
  width: calc(var(--w) * var(--s));
  margin: 0;                           /* <figure> ships with a UA margin of 1em 40px */
  /* Scales with --s so a shrunk print keeps the same border-to-photo ratio
     rather than growing a proportionally chunky mat. */
  padding: calc(.4rem * var(--s)) calc(.4rem * var(--s)) calc(.9rem * var(--s));
  background: #FBF9F4;
  transform: translate(-50%, -50%) rotate(var(--r));
  box-shadow:
    0 1px 2px rgba(40, 32, 22, .18),
    0 10px 24px rgba(40, 32, 22, .22);
}

.snap img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 1);
  object-fit: cover;
  /* Only a nudge. The frame, the shadow and the scene-wide grain carry the era;
     the pixels stay close to neutral so faces still read as faces. */
  filter: sepia(.07) saturate(.96) contrast(1.01);
}

/* Grain and a light falloff, applied over the whole floor — not per photo, so
   it reads as one photographed surface rather than 24 filtered images. */
.faq-scene::before,
.faq-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* The vignette, plus a falloff into the floor along the bottom edge. The scene
   grows as FAQ answers open, so the edge sweeps across the prints; a gradient
   pinned to that edge dissolves them continuously instead of slicing them. */
.faq-scene::before {
  background:
    radial-gradient(130% 90% at 50% 38%, transparent 42%, rgba(38, 30, 20, .16) 100%),
    linear-gradient(to bottom, transparent calc(100% - 10rem), var(--scene) calc(100% - 1rem)),
    /* And the top edge, which had neither a falloff nor anything to justify
       going without one: the first row of prints was sliced flat against the
       section boundary above, with a bare strip of floor over it, while the
       other three edges dissolved. Shorter than the bottom's 10rem — the top
       row's centres sit ~5-7rem down, and a longer ramp washes the photographs
       out instead of just softening where they meet the edge. */
    linear-gradient(to top, transparent calc(100% - 6rem), var(--scene) calc(100% - .5rem)),
    /* Same trick on the left and right: a print that overhangs is dissolved into
       the floor rather than cut square by the page edge. Opaque at the very edge
       is what hides the cut, so the width only sets how gently it goes.
       Three stops, not two — a straight two-stop ramp holds high opacity for most
       of its run and reads as a milky band with a visible end; the midpoint
       approximates an ease-out so it reads as haze. And it fades to a zero-alpha
       --scene rather than `transparent`, which is transparent BLACK and would
       drag this near-white through a faintly grey middle. */
    linear-gradient(to right,
      var(--scene),
      color-mix(in srgb, var(--scene) 50%, transparent) 1.5rem,
      color-mix(in srgb, var(--scene) 0%, transparent) 4.5rem),
    linear-gradient(to left,
      var(--scene),
      color-mix(in srgb, var(--scene) 50%, transparent) 1.5rem,
      color-mix(in srgb, var(--scene) 0%, transparent) 4.5rem);
}

.faq-scene::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: .14;
  mix-blend-mode: multiply;
}

.faq-panel {
  position: relative;
  z-index: 2;
  /* 40rem, not 44: with the side padding this puts the answer text at ~63ch,
     on the 65ch measure the type scale targets (it ran ~70ch at 44rem), and it
     hands 2rem of floor back to the prints on each side. */
  max-width: 40rem;
  margin-inline: auto;
  background: var(--paper);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  box-shadow: 0 24px 60px rgba(28, 22, 14, .22);
}

/* CSS cannot divide one length by another, so the continuous curve is sampled
   at the widths people actually use. Size is held high and spread gives way
   first; each pair is solved at the LOW end of its range, which is where a
   max-width query actually binds. */
@media (max-width: 2060px) { .snap { --s: 1; --p: .99; } }
@media (max-width: 1800px) { .snap { --s: 1; --p: .72; } }
@media (max-width: 1600px) { .snap { --s: 1; --p: .48; } }
@media (max-width: 1450px) { .snap { --s: 1; --p: .21; } }
/* Below ~1280px the panel alone is 46vw a side, leaving no strip to spread
   into. Stop chasing the side fit: hold a readable size, collapse the spread,
   and let these be read in the bands above and below the panel. */
@media (max-width: 1280px) { .snap { --s: .85; --p: 0; } }
@media (max-width: 1024px) { .snap { --s: .75; --p: 0; } }

/* On a phone the panel is nearly full width, so the scatter can only be read
   above and below it — give those bands more room, and shrink the prints so
   more of them land in view. */
@media (max-width: 560px) {
  .faq-scene { padding-block: clamp(5rem, 22vw, 8rem); }
  .snap { --s: .60; --p: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .snap { transition: none; }
}