/* ============================================================
   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] { 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 with one quiet climax.
   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, and the plain email fallback is shown.
   ============================================================ */

/* ---------- 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 10px;
  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 stillness before the threshold ---------- */
/* The page falls quiet. Nothing here but held dark, so the
   line that follows arrives out of silence. Pure space:
   costs nothing to load. */

.threshold-zone { padding: 0 0 30px; }
.stillness { height: 26vh; min-height: 140px; max-height: 320px; }

/* ---------- the threshold (signup) ---------- */
/* A doorway of light. The frame draws itself, the seed
   wakes, one line surfaces, and a single field waits like
   a signature line at a doorway. The MailerLite slot sits
   inside, untouched: everything decorative lives outside
   the SLOT comments so it survives the embed swap. */

.threshold {
  position: relative;
  margin: 0 0 44px;
  padding: 64px 34px 56px;
  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 34px;
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(194,151,58,0.35));
}
.threshold .slot,
.threshold .slot-bare {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* the single line that surfaces at the doorway */
.threshold-call {
  margin: 0 0 40px;
  font-family: 'Cinzel', serif;
  color: var(--gold-pale);
  font-size: 1.02rem;
  letter-spacing: 0.2em;
  line-height: 2.5;
  text-transform: none;
}
.threshold-call .call-line { display: block; }
.threshold-call .call-final { color: var(--cream); }

/* the field, like signing your name at a doorway */
.sign-form { display: none; max-width: 380px; margin: 0 auto; }
html.sign-live .sign-form { display: block; }
html.sign-live .sign-fallback { display: none; }
.sign-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(194,151,58,0.45);
  color: var(--cream);
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  text-align: center;
  padding: 10px 6px 14px;
  margin: 0 auto 26px;
  transition: border-color 0.4s ease;
}
.sign-input::placeholder { color: rgba(184,148,106,0.55); font-style: italic; }
.sign-input:focus {
  outline: none;
  border-bottom-color: var(--gold-light);
}
.sign-input:focus-visible { box-shadow: 0 12px 18px -14px rgba(194,151,58,0.35); }
.sign-btn { cursor: pointer; background: transparent; }
.slot .sign-note,
.sign-note {
  margin: 24px auto 0;
  max-width: 40ch;
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--clay-lit, var(--sand));
}
.sign-fallback p { color: var(--sand); font-size: 0.95rem; margin-bottom: 18px; }

/* passing note under the threshold, and quiet asides */
.quiet-note {
  font-size: 0.9rem;
  color: var(--sand);
  line-height: 1.95;
}
.quiet-note a {
  text-decoration: underline;
  text-decoration-color: rgba(194,151,58,0.45);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.quiet-note a:hover { text-decoration-color: var(--gold-pale); }

/* enhanced mode: the threshold wakes in order.
   frame, light, seed, then the call, line by line, then the field. */
.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 .call-line {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s ease;
  transition-delay: calc(0.9s + var(--call) * 0.75s);
}
.js .threshold.revealed .call-line { opacity: 1; transform: none; }
.js .threshold .slot,
.js .threshold .slot-bare {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.3s ease 3.3s, transform 1.3s ease 3.3s;
}
.js .threshold.revealed .slot,
.js .threshold.revealed .slot-bare { 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-head p { margin-bottom: 0; }

.liturgy {
  position: relative;
  margin: 40px 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 60px; }
.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);
}
.liturgy .step .step-label { color: var(--gold-light); }
.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 four vows that protect the table ---------- */
/* Given weight: each protection stands alone, numbered in
   stone numerals, and surfaces in its own time. */

.vows {
  margin: 60px 0 54px;
  padding: 40px 38px 36px;
  border: 1px solid rgba(194,151,58,0.16);
  background: rgba(255,255,255,0.012);
}
.vows-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.44em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-bottom: 30px;
}
.vow-list { list-style: none; margin: 0; padding: 0; }
.vow {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid rgba(194,151,58,0.1);
}
.vow:first-child { border-top: none; padding-top: 0; }
.vow:last-child { padding-bottom: 0; }
.vow-num {
  flex: 0 0 30px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-align: center;
}
.vow p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--parchment);
  line-height: 1.9;
}
.js .vows.revealed .vow { animation: vow-surface 1.2s ease both; animation-delay: calc(0.2s + var(--v) * 0.4s); }
.js .vows:not(.revealed) .vow { opacity: 0; }
@keyframes vow-surface {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- the climax (the saying for the first gathering) ---------- */
/* The one orchestrated moment of the Circles page. The page
   goes quiet, light gathers, and the saying surfaces alone. */

.climax {
  position: relative;
  margin: 90px 0 30px;
  padding: 74px 42px 66px;
  text-align: center;
}
.climax::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.7;
}
.climax-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 78% at 50% 52%, rgba(194,151,58,0.075), transparent 72%);
}
.climax-seed {
  display: block;
  margin: 0 auto 36px;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(194,151,58,0.35));
}
.climax-words {
  font-style: italic;
  color: var(--cream);
  font-size: 1.34rem;
  line-height: 2;
  letter-spacing: 0.03em;
  margin: 0;
}
.climax-ref {
  display: block;
  margin-top: 28px;
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}

.js .climax[data-reveal] { opacity: 1; transform: none; }
.js .climax::before {
  transform: translateX(-50%) scaleX(0);
  transition: transform 1.6s ease 0.1s;
}
.js .climax.revealed::before { transform: translateX(-50%) scaleX(1); }
.js .climax .climax-light {
  opacity: 0;
  transition: opacity 2.4s ease 0.5s;
}
.js .climax.revealed .climax-light { opacity: 1; }
.js .climax .climax-seed {
  opacity: 0.1;
  filter: none;
  transition: opacity 1.6s ease 0.7s, filter 1.6s ease 0.7s;
}
.js .climax.revealed .climax-seed {
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(194,151,58,0.35));
}
.js .climax .climax-words {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2s ease 1.3s, transform 2s ease 1.3s;
}
.js .climax.revealed .climax-words { opacity: 1; transform: none; }
.js .climax .climax-ref {
  opacity: 0;
  transition: opacity 1.6s ease 2.7s;
}
.js .climax.revealed .climax-ref { opacity: 1; }

/* ---------- home: the one line about giving ---------- */

.given-line {
  text-align: center;
  font-style: italic;
  color: var(--cream);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin: 40px 0 8px;
}

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

@media (max-width: 640px) {
  .days-strip { gap: 7px 5px; }
  .days-strip span { width: 3px; height: 18px; }
  .stillness { height: 18vh; min-height: 90px; }
  .threshold { padding: 50px 20px 44px; margin-bottom: 38px; }
  .threshold-call { font-size: 0.9rem; letter-spacing: 0.16em; line-height: 2.4; margin-bottom: 34px; }
  .path { padding-left: 30px; }
  .path-stage::before { left: -28px; }
  .liturgy { padding-left: 36px; }
  .liturgy .step::before { left: -32px; }
  .vows { padding: 32px 24px 28px; }
  .vow { gap: 16px; }
  .climax { padding: 58px 24px 52px; margin-top: 74px; }
  .climax-words { font-size: 1.16rem; }
}

/* ============================================================
   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] { 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; }
}

/* ============================================================
   Stage 3.5 additions · the desktop stage
   Two kinds of addition, both safe for every device:

   1. A new quiet home beat, a buried saying, styled here so it
      reads plainly on a phone with no engine at all. The
      signature layer (stage.css) only changes how it is found.

   2. Desktop-scale typography and composition, in a plain wide
      viewport query so it lands at first paint on any wide
      screen with no layout shift and no dependence on JS. The
      motion, dust, lamp and page transitions live only in
      stage.css, which reaches capable hardware alone.

   The palette tokens and fonts.css are untouched. No em-dashes.
   ============================================================ */

/* ---------- zero layout shift: the hero is staged at first paint ---------- */
/* The stage used to be built after paint: reveal.js added
   .unearth-live, and only then did the hero become tall and
   sticky and the beats stack. That resized the hero under the
   visitor on every load. The same layout is now raised to the
   first paint, keyed on html.js alone, which the head bootstrap
   sets before anything is drawn. reveal.js still adds
   .unearth-live and still drives the sequence; it simply no
   longer changes any geometry when it does.

   Without JS, and with reduced motion, html.js is never set and
   none of this applies: the hero stands as one quiet screen with
   the whole invocation legible, exactly as before. */

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

/* The reading thread's tip used to travel by its top property,
   which relayouts on every scroll frame and registers as layout
   shift. It now travels on the compositor instead. The thread
   spans the viewport, so 100vh is one full pass, and the look is
   unchanged. Decorative and aria-hidden either way. */
.js .has-reader .read-thread-tip {
  top: 0;
  transform: translateY(calc(var(--read, 0) * 100vh));
  will-change: transform;
}

/* ---------- the buried saying: plain, readable default ---------- */

.buried { padding: 84px 0; }
.buried-field {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0;
}
.buried-hint {
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--clay-lit, #987750);
  margin-bottom: 26px;
  opacity: 0;                 /* meaningless without the lamp; hidden by default */
}
.buried-saying {
  font-style: italic;
  color: var(--cream);
  font-size: 1.3rem;
  line-height: 1.9;
  margin: 0;
}
.buried-ref {
  display: block;
  margin-top: 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- desktop-scale typography ---------- */
/* Wide frames only. The invocation and the openings are given
   the size of a stage. reveal.js still owns the choreography;
   these are base sizes, so nothing here moves after paint. */

@media (min-width: 1024px) {

  /* the hero invocation, at the scale of a wall. The stage is
     given more travel, so the screen holds longer on each scene
     while the scroll performs the sequence. */
  .js .unearth { height: calc(100vh + 88vh * 6); }
  .unearth-sticky { padding: 96px 40px 80px; }
  .unearth-seed { margin-bottom: 58px; }
  .unearth-beats { max-width: 900px; }
  .beat {
    font-size: 1.68rem;
    line-height: 1.95;
    max-width: 21ch;
    margin-left: auto;
    margin-right: auto;
  }
  .beat-strong { font-size: 2.3rem; line-height: 1.72; max-width: 17ch; }
  .beat-final { font-size: 2.4rem; letter-spacing: 0.42em; }
  .scroll-cue { font-size: 0.6rem; letter-spacing: 0.56em; }

  /* the emergence: the mark and wordmark surface larger */
  .emergence { padding: 132px 0 104px; }
  .emergence-mark { width: 188px; margin-bottom: 48px; }
  .emergence-word { width: min(520px, 62%); margin-bottom: 52px; }
  .positioning { font-size: 1.5rem; letter-spacing: 0.24em; margin-bottom: 20px; }
  .positioning-sub { font-size: 1.22rem; }

  /* one restrained asymmetric opening, on the home statement */
  .emergence + section .wrap { max-width: 760px; }
  .emergence + section .eyebrow {
    position: relative;
    padding-left: 76px;
    letter-spacing: 0.5em;
  }
  .emergence + section .eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 56px;
    height: 1px;
    background: linear-gradient(to right, var(--gold), transparent);
  }
  .emergence + section p { font-size: 1.16rem; }

  /* section openings across the site: grander, airier */
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.5em; }
  section { padding: 92px 0; }

  .page-head { padding: 138px 0 40px; }
  .page-head h1 { font-size: 2.9rem; letter-spacing: 0.2em; }
  .page-head .sub { font-size: 1.18rem; margin-top: 24px; }

  .recognition .lines { gap: 44px; }
  .recognition p { font-size: 1.32rem; }

  /* the doors, given room */
  .doors { gap: 30px; margin-top: 56px; }
  .door { padding: 52px 42px; }
  .door h2, .door h3 { font-size: 1.08rem; }
  .door p { font-size: 0.98rem; }

  .given-line { font-size: 1.28rem; }

  /* the reading instrument (chapter 42): generous measure and
     rhythm, a larger opening capital, quiet wide margins */
  .chapter-head { padding: 148px 0 30px; }
  .chapter-head h1 { font-size: 2.9rem; letter-spacing: 0.2em; }
  .chapter-head .sub { font-size: 1.18rem; }
  .chapter .wrap { max-width: 748px; }
  .chapter p { font-size: 1.05rem; line-height: 2.0; margin-bottom: 34px; }
  .chapter .lead { font-size: 1.14em; }
  .chapter .lead::first-letter { font-size: 3.6em; padding: 10px 18px 0 2px; }
  .chapter h2 { font-size: 1.42rem; margin-top: 92px; }
  .chapter .verse { padding: 46px 56px; margin: 58px 0; }
  .chapter .verse p { font-size: 1.24rem; }
  .chapter .scene-label { font-size: 0.64rem; }
  blockquote { padding: 40px 52px; font-size: 1.18rem; }

  /* the book, the threshold, the room: larger heads */
  .book-head { padding: 148px 0 30px; }
  .book-head h1 { font-size: 2.9rem; letter-spacing: 0.2em; }
  .book-head .book-mark { width: 150px; }
  .shape-lead { font-size: 1.08rem; margin-bottom: 52px; }
  .shape { gap: 24px; }

  .threshold { padding: 82px 44px 72px; }
  .threshold-call { font-size: 1.24rem; letter-spacing: 0.22em; line-height: 2.5; }

  .climax { padding: 96px 52px 84px; }
  .climax-words { font-size: 1.62rem; }

  .room { padding: 120px 0 48px; }
  .room h1 { font-size: 2.9rem; letter-spacing: 0.2em; }
  .doorway { width: 172px; height: 254px; margin-bottom: 58px; }

  .prose h2 { font-size: 1.42rem; }

  /* the reading thread, re-aligned to the widened measure.
     It hangs in the left margin of the text column, clear of
     the words, and grows as a root of light while you read.
     Layer A already draws it; this only places it and gives it
     a little more presence on a large screen. */
  .js .has-reader .read-thread {
    left: max(34px, calc(50vw - 374px - 64px));
    background: rgba(194,151,58,0.08);
  }
  .js .has-reader .read-thread-tip {
    width: 6px;
    height: 6px;
    margin: -2.5px 0 0 -3px;
    box-shadow: 0 0 14px rgba(217,182,104,0.85);
  }

  /* the chapter close, given air */
  .chapter-close { padding: 64px 0 118px; }
  .close-line { font-size: 1.32rem; letter-spacing: 0.34em; }
  .close-sub { font-size: 1.08rem; }
  .close-invite p { font-size: 1rem; max-width: 560px; }
}

/* a touch more scale on true widescreen, still no shift */
@media (min-width: 1440px) {
  .beat { font-size: 1.82rem; }
  .beat-strong { font-size: 2.55rem; }
  .beat-final { font-size: 2.65rem; }
  .emergence-mark { width: 208px; }
  .page-head h1, .chapter-head h1, .book-head h1, .room h1 { font-size: 3.15rem; }
}

/* ============================================================
   the buried saying · universal press-and-hold (buried.js)
   ------------------------------------------------------------
   These styles are gated behind html.buried-live, a class that
   buried.js adds ONLY once a real dig handler is attached. So a
   visitor with no JS (or reduced motion) keeps the plainly
   readable default defined far above; nobody is ever left with
   an instruction that has no hand behind it.

   This is the lightweight path that runs on every device. The
   richer stage.css / mobile.css engines still take over on
   capable hardware via html.stage / html.mob; where they load,
   they simply restyle the same field and this stays dormant.
   ============================================================ */

/* the guards that end the Android long-press menu on this text:
   the field is an interactive control, not selectable prose, and
   pan-y keeps vertical scrolling free while the hold is a hold. */
html.buried-live .buried-field {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.buried-live .buried-field.unearthed { cursor: default; }
html.buried-live .buried-field .buried-hint { opacity: 1; }

/* buried, not erased: legible only where the lamp of the press
   falls, until a full hold brings it all the way up */
html.buried-live .buried-field .buried-saying {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(
    circle 150px at var(--bx, 50%) var(--by, 50%),
    var(--gold-pale) 0%,
    var(--gold-light) 32%,
    rgba(150,120,64,0.55) 70%,
    rgba(126,101,55,0.42) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: filter 0.6s ease;
}
html.buried-live .buried-field .buried-ref {
  opacity: 0.12;
  transition: opacity 0.6s ease;
}
html.buried-live .buried-field.lit .buried-ref { opacity: 0.5; }

/* the hold: soil gives, the saying rises and stays lit */
html.buried-live .buried-field.digging .buried-saying {
  filter: drop-shadow(0 0 18px rgba(194,151,58,0.25));
}
html.buried-live .buried-field.unearthed .buried-saying {
  background: none;
  color: var(--gold-pale);
  -webkit-text-fill-color: var(--gold-pale);
  animation: buried-rise 1.7s cubic-bezier(0.16, 0.8, 0.2, 1) both;
}
html.buried-live .buried-field.unearthed .buried-ref {
  opacity: 0.62;
  transition: opacity 1.3s ease 0.6s;
}
html.buried-live .buried-field.unearthed .buried-hint {
  opacity: 0;
  transition: opacity 0.9s ease;
}
@keyframes buried-rise {
  0%   { transform: translateY(20px); filter: drop-shadow(0 0 26px rgba(194,151,58,0.5)); }
  100% { transform: none; filter: drop-shadow(0 0 12px rgba(194,151,58,0.2)); }
}

/* the progress ring drawn under the thumb while holding */
html.buried-live .buried-dig {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.35s ease;
}
html.buried-live .buried-field.digging .buried-dig { opacity: 0.85; }
html.buried-live .buried-dig circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 151;
  stroke-dashoffset: calc(151 - 151 * var(--dig, 0));
}