/* ============================================================
   ROOT · everythingjesussaid.com
   Design system lifted directly from ROOT: The Buried Truth.
   Palette, type, and the seed mark are the book's own.
   ============================================================ */

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

:root {
  --soil: #0f0c07;
  --earth: #1c1408;
  --bark: #3a2910;
  --clay: #6a4e2c;
  --sand: #b8946a;
  --parchment: #e6d7be;
  --cream: #f5efe4;
  --gold: #c2973a;
  --gold-light: #d9b668;
  --gold-pale: #eedfa6;
}

html { scroll-behavior: smooth; }

body {
  background: var(--soil);
  color: var(--parchment);
  font-family: 'Lora', Georgia, serif;
  font-size: 19px;
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(194,151,58,0.35); color: var(--cream); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: 'Cinzel', serif; font-weight: 400; color: var(--cream); line-height: 1.35; }

.eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.44em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}

.rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.3;
  margin: 56px 0;
  border: none;
}

a { color: var(--gold-light); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--gold-pale); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
  border-radius: 2px;
}

em { color: var(--gold-pale); font-style: italic; }

/* ---------- layout ---------- */

.wrap { max-width: 720px; margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1020px; margin: 0 auto; padding: 0 28px; }

section { padding: 72px 0; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,12,7,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(194,151,58,0.14);
}
.nav-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.nav-mark { display: flex; align-items: center; gap: 12px; }
.nav-mark svg { display: block; }
.nav-word {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: 0.42em;
  color: var(--cream);
}
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  padding: 6px 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-pale); }

/* ---------- hero (home) ---------- */

.hero { padding: 110px 0 90px; text-align: center; }
.hero .seed { margin: 0 auto 44px; }

.invocation p {
  font-size: 1.22rem;
  line-height: 2.05;
  color: var(--parchment);
  margin-bottom: 30px;
}
.invocation .inv-strong { color: var(--cream); font-size: 1.42rem; }
.invocation .inv-final {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  letter-spacing: 0.34em;
  color: var(--gold-light);
  margin-top: 52px;
}

@media (prefers-reduced-motion: no-preference) {
  .fade { opacity: 0; transform: translateY(10px); animation: rise 1.4s ease forwards; }
  .fade:nth-child(1) { animation-delay: 0.2s; }
  .fade:nth-child(2) { animation-delay: 0.9s; }
  .fade:nth-child(3) { animation-delay: 1.6s; }
  .fade:nth-child(4) { animation-delay: 2.3s; }
  .fade:nth-child(5) { animation-delay: 3.0s; }
  .fade:nth-child(6) { animation-delay: 3.7s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- recognition lines ---------- */

.recognition { background: var(--earth); border-top: 1px solid rgba(194,151,58,0.12); border-bottom: 1px solid rgba(194,151,58,0.12); }
.recognition .lines { display: grid; gap: 34px; text-align: center; }
.recognition p { font-style: italic; color: var(--sand); font-size: 1.08rem; }
.recognition p span { color: var(--parchment); }

/* ---------- doors (home cards) ---------- */

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 44px; }
.door {
  border: 1px solid rgba(194,151,58,0.18);
  background: rgba(255,255,255,0.012);
  padding: 40px 34px;
  display: block;
  color: var(--parchment);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.door:hover { border-color: rgba(194,151,58,0.45); background: rgba(194,151,58,0.04); color: var(--parchment); }
.door h2, .door h3 { font-size: 1.02rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 14px; color: var(--gold-light); }
.door p { font-size: 0.94rem; line-height: 1.85; color: var(--sand); }
.door .door-go { display: inline-block; margin-top: 20px; font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }

/* ---------- generic content pages ---------- */

.page-head { padding: 90px 0 30px; text-align: center; }
.page-head h1 { font-size: 1.9rem; letter-spacing: 0.16em; }
.page-head .sub { color: var(--sand); font-style: italic; margin-top: 18px; font-size: 1.02rem; }

.prose h2 { font-size: 1.2rem; letter-spacing: 0.14em; margin: 64px 0 24px; }
.prose h3 { font-size: 0.95rem; letter-spacing: 0.18em; margin: 44px 0 16px; color: var(--gold-light); }
.prose p { margin-bottom: 26px; }
.prose ul { list-style: none; margin-bottom: 26px; }
.prose ul li { padding-left: 26px; position: relative; margin-bottom: 16px; }
.prose ul li::before { content: '·'; position: absolute; left: 4px; color: var(--gold); font-weight: bold; }

blockquote {
  margin: 44px 0;
  padding: 30px 38px;
  border-left: 2px solid var(--gold);
  background: rgba(255,255,255,0.015);
  font-style: italic;
  color: var(--cream);
  font-size: 1.08rem;
}
blockquote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
}

.note-box {
  margin: 44px 0;
  padding: 30px 36px;
  border: 1px solid rgba(194,151,58,0.14);
  background: rgba(255,255,255,0.012);
}
.note-box .note-label {
  font-family: 'Cinzel', serif;
  font-size: 0.54rem;
  letter-spacing: 0.44em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.note-box p { font-size: 0.9rem; color: var(--sand); line-height: 1.9; margin-bottom: 14px; }
.note-box p:last-child { margin-bottom: 0; }

/* ---------- gathering steps (circles) ---------- */

.step { margin: 46px 0; }
.step .step-label {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.step h2, .step h3 { margin: 0 0 12px; font-size: 1.05rem; letter-spacing: 0.1em; color: var(--cream); }
.step p { color: var(--parchment); }

/* ---------- signup / embed slots ---------- */

.slot {
  margin: 50px 0;
  padding: 44px 36px;
  border: 1px dashed rgba(194,151,58,0.35);
  background: rgba(194,151,58,0.03);
  text-align: center;
}
.slot p { color: var(--sand); font-size: 0.95rem; margin-bottom: 18px; }

.btn {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-pale);
  border: 1px solid rgba(194,151,58,0.5);
  padding: 16px 34px;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn:hover { background: rgba(194,151,58,0.12); color: var(--cream); }

/* ---------- chapter typesetting ---------- */

.chapter .verse {
  margin: 44px 0;
  padding: 34px 40px;
  border: 1px solid rgba(194,151,58,0.2);
  background: rgba(194,151,58,0.03);
  text-align: center;
}
.chapter .verse p { font-style: italic; color: var(--cream); font-size: 1.12rem; line-height: 2.05; margin-bottom: 0; }
.chapter .verse .ref {
  display: block;
  margin-top: 20px;
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}
.chapter .scene-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin: 56px 0 18px;
}

/* ---------- inner room (adjacent, not fused) ---------- */

.inner-room-band {
  background: var(--earth);
  border-top: 1px solid rgba(194,151,58,0.12);
  border-bottom: 1px solid rgba(194,151,58,0.12);
  padding: 30px 0;
  text-align: center;
}
.inner-room-band p {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sand);
}

.disclaimer {
  margin: 50px 0;
  padding: 26px 32px;
  border: 1px solid rgba(184,148,106,0.3);
  font-size: 0.88rem;
  color: var(--sand);
  line-height: 1.9;
}

/* ---------- footer ---------- */

footer {
  margin-top: 60px;
  border-top: 1px solid rgba(194,151,58,0.14);
  padding: 64px 0 80px;
  text-align: center;
}
footer .seed { margin: 0 auto 30px; opacity: 0.8; }
footer p { font-size: 0.85rem; color: var(--sand); line-height: 2; }
footer .foot-links { margin: 22px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
footer .foot-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
}
footer .foot-links a:hover { color: var(--gold-pale); }
footer .firewall { font-size: 0.78rem; color: var(--clay); max-width: 560px; margin: 18px auto 0; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { padding: 70px 0 60px; }
  .invocation p { font-size: 1.08rem; }
  .invocation .inv-strong { font-size: 1.22rem; }
  .nav-inner { flex-direction: column; gap: 10px; }
  section { padding: 56px 0; }
  blockquote { padding: 24px 26px; }
  .chapter .verse { padding: 26px 24px; }
}

/* ============================================================
   Stage 1 additions · foundation + cinematic home
   Scrolling is unearthing: arrive in near-darkness, light rises.
   All effects are gated behind html.js (added by reveal.js only
   when motion is allowed), so no-JS and reduced-motion visitors
   get a full, readable page.
   ============================================================ */

:root { --void: #080602; }

/* ---------- nav over the dark stage ---------- */

.js .has-unearth .nav {
  position: fixed;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background 0.6s ease, border-color 0.6s ease;
}
.js .has-unearth .nav.nav-solid {
  background: rgba(15,12,7,0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(194,151,58,0.14);
}

/* ---------- the unearthing stage ---------- */

.unearth { background: var(--void); }

.unearth-sticky {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 28px 70px;
  text-align: center;
  overflow: hidden;
}

/* the rising light: a buried glow that strengthens as you dig */
.unearth-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--lit, 1);
  background:
    radial-gradient(ellipse 120% 75% at 50% 88%, rgba(194,151,58,0.16), transparent 62%),
    radial-gradient(ellipse 85% 55% at 50% 45%, rgba(230,215,190,0.05), transparent 70%);
  transition: opacity 0.2s linear;
}

.unearth-seed {
  position: relative;
  margin-bottom: 46px;
  opacity: calc(0.25 + 0.75 * var(--lit, 1));
  filter: drop-shadow(0 0 calc(18px * var(--lit, 1)) rgba(194,151,58,0.35));
}

.unearth-beats { position: relative; max-width: 680px; }

.beat {
  font-size: 1.24rem;
  line-height: 2.05;
  color: var(--parchment);
  margin-bottom: 26px;
}
.beat-strong { color: var(--cream); font-size: 1.46rem; line-height: 1.9; }
.beat-final {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  letter-spacing: 0.38em;
  margin: 30px 0 0;
}
.beat-final a { color: var(--gold-light); padding: 10px 8px 10px 18px; }
.beat-final a:hover { color: var(--gold-pale); }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--clay);
  transition: opacity 0.8s ease;
  animation: cue-breathe 3.2s ease-in-out infinite;
}
@keyframes cue-breathe { 50% { opacity: 0.35; } }

/* enhanced mode: tall stage, pinned viewport, beats stacked */
.js .unearth.unearth-live { height: calc(100vh + 72vh * 6); }
.js .unearth-live .unearth-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}
.js .unearth-live .unearth-beats { display: grid; }
.js .unearth-live .beat {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  align-self: center;
  will-change: opacity, transform;
}
.js .unearth-live .beat-final { margin: 0; }

/* without JS or with reduced motion the cue is meaningless */
html:not(.js) .scroll-cue { display: none; }

/* ---------- emergence: mark, wordmark, positioning ---------- */

.emergence { padding: 110px 0 90px; text-align: center; }
.emergence-mark { width: 150px; height: auto; margin: 0 auto 40px; display: block; }
.emergence-word { width: min(400px, 78%); height: auto; margin: 0 auto 44px; display: block; }
.positioning {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--cream);
  margin-bottom: 16px;
}
.positioning-sub { color: var(--sand); font-style: italic; font-size: 1.02rem; }

/* ---------- reveal engine ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.1s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .beat { font-size: 1.08rem; }
  .beat-strong { font-size: 1.24rem; }
  .beat-final { font-size: 1.4rem; }
  .emergence { padding: 80px 0 64px; }
  .emergence-mark { width: 116px; }
}

/* ============================================================
   Stage 2 additions · the reading room
   The Book page and Chapter 42 as an immersive reader.
   Same law as Stage 1: everything is gated behind html.js,
   which reveal.js adds only when motion is allowed. Without
   JS, or with reduced motion, the full chapter simply reads.
   ============================================================ */

/* ---------- reading progress: the thread ---------- */
/* A thin root of light that grows down the left margin as you
   read. On narrow screens it becomes a hairline across the top. */

.read-thread,
.read-bar { display: none; }

.js .has-reader .read-thread {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(22px, calc(50vw - 470px));
  width: 1px;
  z-index: 40;
  background: rgba(194,151,58,0.10);
  pointer-events: none;
}
.js .has-reader .read-thread-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(194,151,58,0.25), var(--gold));
  transform: scaleY(var(--read, 0));
  transform-origin: top;
}
.js .has-reader .read-thread-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--read, 0) * 100%);
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px rgba(217,182,104,0.7);
}

@media (max-width: 979px) {
  .js .has-reader .read-thread { display: none; }
  .js .has-reader .read-bar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 60;
    background: transparent;
    pointer-events: none;
  }
  .js .has-reader .read-bar-fill {
    height: 100%;
    background: linear-gradient(to right, rgba(194,151,58,0.4), var(--gold-light));
    transform: scaleX(var(--read, 0));
    transform-origin: left;
  }
}

/* ---------- the chapter head ---------- */

.chapter-head { padding: 100px 0 26px; text-align: center; }
.chapter-head .seed { margin: 0 auto 34px; opacity: 0.9; }
.chapter-head h1 { font-size: 1.9rem; letter-spacing: 0.16em; }
.chapter-head .sub { color: var(--sand); font-style: italic; margin-top: 18px; font-size: 1.02rem; }
.read-meta {
  margin-top: 26px;
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--clay);
}

/* ---------- unhurried typography ---------- */

.chapter .lead { font-size: 1.06em; }
.chapter .lead::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 3.15em;
  line-height: 0.82;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--gold-light);
}
.chapter p { margin-bottom: 30px; }
.chapter h2 { margin-top: 76px; }

/* ---------- verses that surface as you reach them ---------- */
/* Set pieces only: verses, notes, quotations, headings, scene
   labels. Body prose never moves. Reading stays quiet. */

.js .chapter [data-reveal],
.js .chapter-close [data-reveal] {
  transition-duration: 1.4s, 1.4s;
}
.js .chapter .verse[data-reveal] { transform: translateY(22px); }
.js .chapter .verse[data-reveal].revealed { animation: verse-lit 2.6s ease; }
@keyframes verse-lit {
  0%   { box-shadow: 0 0 0 rgba(194,151,58,0); border-color: rgba(194,151,58,0.2); }
  35%  { box-shadow: 0 0 46px rgba(194,151,58,0.14); border-color: rgba(194,151,58,0.5); }
  100% { box-shadow: 0 0 0 rgba(194,151,58,0); border-color: rgba(194,151,58,0.2); }
}

/* ---------- the closing: the jar left behind ---------- */

.chapter-close { padding: 40px 0 90px; text-align: center; }
.chapter-close .jar {
  display: block;
  margin: 0 auto 8px;
  opacity: 0.85;
}
.js .chapter-close .jar[data-reveal] { transform: translateY(26px) rotate(2deg); }
.js .chapter-close .jar[data-reveal].revealed { transform: none; }
.close-line {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 34px 0 10px;
}
.close-sub { color: var(--sand); font-style: italic; font-size: 0.98rem; }
.close-invite { margin-top: 54px; }
.close-invite .note-label {
  font-family: 'Cinzel', serif;
  font-size: 0.54rem;
  letter-spacing: 0.44em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.close-invite p {
  color: var(--sand);
  font-size: 0.95rem;
  line-height: 2;
  max-width: 520px;
  margin: 0 auto 30px;
}
.close-after {
  margin-top: 34px;
  font-size: 0.85rem;
  color: var(--clay);
}

/* ---------- the book page ---------- */

.book-head { padding: 100px 0 26px; text-align: center; }
.book-head .book-mark { width: 118px; height: auto; margin: 0 auto 36px; display: block; }
.book-head h1 { font-size: 1.9rem; letter-spacing: 0.16em; }
.book-head .sub { color: var(--sand); font-style: italic; margin-top: 18px; font-size: 1.02rem; }

.shape-lead {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--cream);
  margin-bottom: 40px;
}
.shape { display: grid; gap: 18px; }
.shape-part {
  border: 1px solid rgba(194,151,58,0.16);
  background: rgba(255,255,255,0.012);
  padding: 30px 34px;
  text-align: center;
}
.shape-part .shape-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.shape-part p { font-size: 0.94rem; color: var(--sand); line-height: 1.9; margin: 0; }
.shape-part.shape-words {
  border-color: rgba(194,151,58,0.32);
  background: rgba(194,151,58,0.04);
}
.shape-part.shape-words p { font-style: italic; color: var(--cream); font-size: 1.04rem; }
.shape-part .shape-ref {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 14px;
}

@media (min-width: 700px) {
  .shape { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
  .shape-part { display: flex; flex-direction: column; justify-content: center; }
}

.book-invite { text-align: center; }
.book-invite blockquote { text-align: left; }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .chapter-head, .book-head { padding: 76px 0 18px; }
  .chapter .lead::first-letter { font-size: 2.7em; padding: 7px 11px 0 0; }
  .chapter-close { padding: 24px 0 70px; }
  .shape-part { padding: 24px 22px; }
}

/* ============================================================
   Stage 3 additions · the path and the table
   The 40 Days signup staged as a threshold; the first
   gathering staged as a liturgy. Same law as before: all
   motion and dimming is gated behind html.js, which the
   engine adds only when motion is allowed. Without JS, or
   with reduced motion, both pages stand complete and lit.
   ============================================================ */

/* ---------- forty marks (why forty) ---------- */
/* One notch for each morning. Decorative, aria-hidden.
   With motion they surface one by one; without it they
   simply stand, all forty, already there. */

.days-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 7px;
  justify-content: center;
  margin: 38px auto 44px;
  max-width: 560px;
}
.days-strip span {
  width: 4px;
  height: 22px;
  background: var(--gold);
  opacity: 0.8;
}
.js .days-strip[data-reveal] { opacity: 1; transform: none; }
.js .days-strip span {
  opacity: 0.1;
  transition: opacity 0.9s ease;
  transition-delay: calc(var(--i) * 42ms);
}
.js .days-strip.revealed span { opacity: 0.8; }

/* ---------- the threshold (signup) ---------- */
/* A doorway of light around the signup slot. The frame
   draws itself and the seed wakes as you arrive at it.
   The MailerLite slot sits inside, untouched: everything
   decorative lives outside the SLOT comments so it
   survives the embed swap. */

.threshold {
  position: relative;
  margin: 64px 0 56px;
  padding: 56px 34px 50px;
  text-align: center;
}
.threshold::before,
.threshold::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(194,151,58,0.05));
  opacity: 0.55;
}
.threshold::before { left: 0; }
.threshold::after { right: 0; }
.threshold-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 72% at 50% 58%, rgba(194,151,58,0.07), transparent 72%);
}
.threshold-seed {
  display: block;
  margin: 0 auto 30px;
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(194,151,58,0.35));
}
.threshold .slot {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.js .threshold[data-reveal] { opacity: 1; transform: none; }
.js .threshold::before,
.js .threshold::after {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.7s ease 0.15s;
}
.js .threshold.revealed::before,
.js .threshold.revealed::after { transform: none; }
.js .threshold .threshold-light {
  opacity: 0;
  transition: opacity 2.2s ease 0.7s;
}
.js .threshold.revealed .threshold-light { opacity: 1; }
.js .threshold .threshold-seed {
  opacity: 0.12;
  filter: none;
  transition: opacity 1.5s ease 0.9s, filter 1.5s ease 0.9s;
}
.js .threshold.revealed .threshold-seed {
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(194,151,58,0.35));
}
.js .threshold .slot {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s ease 1.1s, transform 1.2s ease 1.1s;
}
.js .threshold.revealed .slot { opacity: 1; transform: none; }

/* ---------- the whole path (hear · do · share · ekklesia · root) ---------- */

.path {
  position: relative;
  margin: 44px 0 10px;
  padding-left: 36px;
}
.path::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(194,151,58,0.08));
  opacity: 0.45;
}
.path-stage { position: relative; margin-bottom: 42px; }
.path-stage:last-child { margin-bottom: 0; }
.path-stage::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(194,151,58,0.5);
}
.path-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: block;
  margin-bottom: 8px;
}
.path-stage p { font-size: 0.95rem; color: var(--parchment); margin: 0; }

/* ---------- the liturgy (circles: the first gathering) ---------- */
/* The order of the gathering, held on a single thread of
   light that grows as you move through it. Each movement
   lights its node as it surfaces. */

.liturgy {
  position: relative;
  margin: 14px 0 8px;
  padding-left: 44px;
}
.liturgy-line {
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(194,151,58,0.12);
}
.liturgy-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(194,151,58,0.3), var(--gold));
  transform: scaleY(var(--p, 1));
  transform-origin: top;
}
.liturgy .step { position: relative; margin: 0 0 54px; }
.liturgy .step:last-child { margin-bottom: 0; }
.liturgy .step::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
}
.js .liturgy .step::before {
  background: var(--soil);
  box-shadow: none;
  transition: background 0.9s ease, box-shadow 0.9s ease;
}
.js .liturgy .step.revealed::before {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(194,151,58,0.6);
}

/* ---------- the saying stone (a saying for the first gathering) ---------- */

.saying {
  margin: 64px 0 20px;
  padding: 40px 42px;
  border: 1px solid rgba(194,151,58,0.2);
  background: rgba(194,151,58,0.03);
  text-align: center;
}
.saying p {
  font-style: italic;
  color: var(--cream);
  font-size: 1.16rem;
  line-height: 2.05;
  margin: 0;
}
.saying .saying-ref {
  display: block;
  margin-top: 20px;
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}
.js .saying[data-reveal] { transform: translateY(22px); }
.js .saying[data-reveal].revealed { animation: verse-lit 2.6s ease; }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .days-strip { gap: 7px 5px; }
  .days-strip span { width: 3px; height: 18px; }
  .threshold { padding: 44px 20px 40px; margin: 52px 0 46px; }
  .path { padding-left: 30px; }
  .path-stage::before { left: -28px; }
  .liturgy { padding-left: 36px; }
  .liturgy .step::before { left: -32px; }
  .saying { padding: 30px 26px; }
}

/* ============================================================
   Stage 4 additions · the inner room + sitewide polish
   The one orchestrated moment of this page: you arrive at a
   shut door, and it opens. Same law as every stage: all motion
   is gated behind html.js, which reveal.js adds only when
   motion is allowed. Without JS, or with reduced motion, the
   door already stands open and the whole page is lit.
   ============================================================ */

:root { --clay-lit: #987750; }

/* ---------- accessibility: skip link ---------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%, -300%);
  z-index: 100;
  background: var(--earth);
  color: var(--gold-pale);
  border: 1px solid rgba(194,151,58,0.5);
  padding: 10px 22px;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- accessibility: contrast + motion ---------- */
/* Clay on soil fails WCAG for text. Real text moves to a lit
   clay that passes; the buried tones stay for decoration. */

footer .firewall { color: var(--clay-lit); }
.read-meta { color: var(--clay-lit); }
.close-after { color: var(--clay-lit); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Links inside running text are marked by more than color. */
.prose p a, .close-invite p a, footer > .wrap > p a {
  text-decoration: underline;
  text-decoration-color: rgba(194,151,58,0.45);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.prose p a:hover, .close-invite p a:hover, footer > .wrap > p a:hover {
  text-decoration-color: var(--gold-pale);
}

/* ---------- the door (inner room hero) ---------- */

.room { position: relative; padding: 92px 0 40px; text-align: center; }
.room-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 62% at 50% 34%, rgba(194,151,58,0.055), transparent 72%);
}

.doorway {
  position: relative;
  width: 148px;
  height: 218px;
  margin: 0 auto 48px;
  border: 1px solid rgba(194,151,58,0.55);
  box-shadow: 0 0 34px rgba(194,151,58,0.10);
  overflow: hidden;
}
.doorway-room {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 130% 95% at 50% 100%, rgba(194,151,58,0.22), transparent 72%),
    linear-gradient(to top, rgba(194,151,58,0.10), rgba(230,215,190,0.035) 62%, transparent);
}
.doorway-seed {
  opacity: 0.95;
  filter: drop-shadow(0 0 12px rgba(194,151,58,0.55));
}
.door-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: linear-gradient(to bottom, #0c0905, #090603);
}
.door-leaf-l { left: 0; border-right: 1px solid rgba(194,151,58,0.4); transform: translateX(-101%); }
.door-leaf-r { right: 0; border-left: 1px solid rgba(194,151,58,0.4); transform: translateX(101%); }

.room-text .sub { color: var(--sand); font-style: italic; margin-top: 18px; font-size: 1.02rem; }
.room h1 { font-size: 1.9rem; letter-spacing: 0.16em; }

/* enhanced mode: the door stands shut, then opens */
.js .room .doorway {
  animation: frame-wake 1.1s ease both;
}
.js .room .door-leaf-l { animation: door-open-l 2.3s cubic-bezier(0.65, 0, 0.22, 1) 1.1s both; }
.js .room .door-leaf-r { animation: door-open-r 2.3s cubic-bezier(0.65, 0, 0.22, 1) 1.1s both; }
.js .room .doorway-seed { animation: seed-wake 2s ease 1.9s both; }
.js .room .room-text > * { opacity: 0; animation: room-rise 1.3s ease forwards; }
.js .room .room-text .eyebrow { animation-delay: 2.5s; }
.js .room .room-text h1 { animation-delay: 2.8s; }
.js .room .room-text .sub { animation-delay: 3.1s; }

@keyframes frame-wake { from { opacity: 0; } }
@keyframes door-open-l { from { transform: none; } to { transform: translateX(-101%); } }
@keyframes door-open-r { from { transform: none; } to { transform: translateX(101%); } }
@keyframes seed-wake { from { opacity: 0.12; filter: none; } }
@keyframes room-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the well rings ---------- */
/* Still water. The rings settle outward as the section
   surfaces: once, quietly, then they simply stand. */

.well-head { text-align: center; margin-bottom: 34px; }
.well-head h2 { margin: 0; }
.well-head .eyebrow { margin-bottom: 14px; }
.well-rings { display: block; margin: 0 auto 26px; overflow: visible; }
.well-rings circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: calc(0.62 - var(--i) * 0.17);
}
.js .well-rings circle {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 50% 50%;
  transition: opacity 1.3s ease, transform 1.3s ease;
  transition-delay: calc(0.25s + var(--i) * 0.35s);
}
.js .revealed .well-rings circle,
.js .well-rings.revealed circle {
  opacity: calc(0.62 - var(--i) * 0.17);
  transform: none;
}

/* ---------- sitewide micro-interactions ---------- */
/* Small courtesies. Color may always move; position moves
   only for those who have not asked for stillness. */

.nav-links a {
  background-image: linear-gradient(var(--gold-light), var(--gold-light));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 1px;
  transition: color 0.25s ease, background-size 0.35s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { background-size: 100% 1px; }
.nav-links a[aria-current="page"] { background-size: 100% 1px; background-image: linear-gradient(rgba(194,151,58,0.55), rgba(194,151,58,0.55)); }

.btn { transition: background 0.3s ease, color 0.3s ease, box-shadow 0.4s ease, border-color 0.3s ease; }
.btn:hover, .btn:focus-visible {
  background: rgba(194,151,58,0.12);
  color: var(--cream);
  border-color: rgba(194,151,58,0.8);
  box-shadow: 0 0 26px rgba(194,151,58,0.16);
}

.door { position: relative; }
.door .door-go { transition: color 0.3s ease; }
.door:hover .door-go, .door:focus-visible .door-go { color: var(--gold-pale); }

@media (prefers-reduced-motion: no-preference) {
  .door { transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s ease, box-shadow 0.35s ease; }
  .door:hover, .door:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.35); }
  .door .door-go { transition: color 0.3s ease, letter-spacing 0.35s ease; }
  .door:hover .door-go, .door:focus-visible .door-go { letter-spacing: 0.36em; }
  footer .seed { transition: opacity 0.4s ease, filter 0.6s ease; }
  footer:hover .seed { opacity: 1; filter: drop-shadow(0 0 10px rgba(194,151,58,0.35)); }
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .room { padding: 70px 0 28px; }
  .doorway { width: 124px; height: 184px; margin-bottom: 38px; }
  .doorway-seed { width: 44px; height: 40px; }
}