/* ------------------------------------------------------------------
   GRACE & PEACE  ·  main.css
   Hand-written. No framework, no build step, no dependencies.
   Set in Fraunces (an expressive serif with SOFT and WONK axes)
   and Inter (a very clean sans). If you are reading this: welcome.
   ------------------------------------------------------------------ */

@layer reset, base, layout, components, motion, utilities;

/* Cross-document view transitions (the pages hand over to each other). */
@view-transition {
  navigation: auto;
}

/* ------------------------------------------------------------------
   0 · FONTS
   Self-hosted, subset, variable. The fallbacks are metric-tuned so
   the page does not jump when the real faces arrive.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-compatible stand-ins while the woff2 files load. */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  font-display: swap;
}

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  font-display: swap;
}

/* ------------------------------------------------------------------
   1 · TOKENS
   A warm room: paper, ink, deep forest, a little brass.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* Light (the default room) */
  --paper: #f7f2e8;
  --paper-raised: #fdfaf3;
  --ink: #211d17;
  --ink-soft: #5a5244;
  --line: color-mix(in oklab, var(--ink) 16%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 38%, transparent);
  --brass: #8a652a;            /* passes contrast on paper for small text */
  --brass-bright: #b98a3d;     /* decorative only */
  --forest: #24422f;

  /* The dark passages (used on both pages regardless of scheme) */
  --night: #151f18;
  --night-raised: #1b271f;
  --night-ink: #efe9da;
  --night-soft: #b3ac9a;
  --night-line: color-mix(in oklab, var(--night-ink) 22%, transparent);
  --night-brass: #d0a95e;

  /* Type */
  --serif: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter-fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Fluid scale */
  --text-s: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-m: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-l: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --text-xl: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  --text-2xl: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  --text-hero: clamp(3.4rem, 1.5rem + 14.5vw, 13.5rem);

  --measure: 36rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rail: clamp(3.5rem, 8vw, 6.5rem);

  --ease-out: cubic-bezier(0.22, 0.61, 0, 1);
  --ease-swell: cubic-bezier(0.34, 1.2, 0.4, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17140f;
    --paper-raised: #1e1a14;
    --ink: #ece4d3;
    --ink-soft: #a89f8c;
    --line: color-mix(in oklab, var(--ink) 20%, transparent);
    --line-strong: color-mix(in oklab, var(--ink) 42%, transparent);
    --brass: #c9a45b;
    --brass-bright: #d8b56c;
    --night: #10160f;
    --night-raised: #161d15;
  }
}

/* ------------------------------------------------------------------
   2 · RESET (small, honest)
   ------------------------------------------------------------------ */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
  }

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

  input,
  button {
    font: inherit;
  }
}

/* ------------------------------------------------------------------
   3 · BASE
   ------------------------------------------------------------------ */

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

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: var(--text-m);
    font-weight: 380;
    line-height: 1.65;
    font-variant-numeric: oldstyle-nums;
    hanging-punctuation: first;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3 {
    font-weight: 420;
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ::selection {
    background: var(--brass);
    color: var(--paper);
  }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    text-underline-offset: 0.22em;
    transition: text-decoration-color 0.25s var(--ease-out),
                text-underline-offset 0.25s var(--ease-out),
                color 0.25s var(--ease-out);
  }

  a:hover {
    text-decoration-color: currentColor;
    text-underline-offset: 0.3em;
  }

  :focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 4px;
    border-radius: 2px;
  }

  .skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: var(--text-s);
    padding: 0.6em 1em;
    text-decoration: none;
    transition: top 0.2s var(--ease-out);
  }

  .skip-link:focus-visible {
    top: 1rem;
  }
}

/* ------------------------------------------------------------------
   4 · LAYOUT
   One centred column of words, with room to breathe.
   ------------------------------------------------------------------ */

@layer layout {
  .col {
    width: min(100% - 2 * var(--gutter), 68rem);
    margin-inline: auto;
  }

  .prose {
    max-width: var(--measure);
  }

  .prose > * + * {
    margin-block-start: 1.1em;
  }

  /* Full-bleed passages (the page changes rooms). */
  .bleed {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   5 · SHARED COMPONENTS
   ------------------------------------------------------------------ */

@layer components {

  /* Grain: a whisper-quiet paper texture, drawn by feTurbulence. */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    .grain {
      mix-blend-mode: soft-light;
      opacity: 0.09;
    }
  }

  /* Small caps label (Inter doing quiet, tidy work). */
  .kicker {
    font-family: var(--sans);
    font-size: var(--text-s);
    font-weight: 560;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
  }

  /* Scripture reference links. Little brass doors into the Bible. */
  .ref {
    font-family: var(--sans);
    font-size: 0.72em;
    font-weight: 560;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brass);
    text-decoration-style: dotted;
    text-decoration-color: color-mix(in oklab, var(--brass) 55%, transparent);
    white-space: nowrap;
  }

  .ref:hover {
    text-decoration-style: solid;
    color: var(--brass-bright);
  }

  .refs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    padding-block-start: 1.6rem;
  }

  /* Short Bible quotations. */
  .quote {
    font-style: italic;
    font-size: var(--text-l);
    font-weight: 350;
    font-variation-settings: "SOFT" 55;
    line-height: 1.4;
    max-width: 30ch;
    margin-block: 1.6em 0.4em;
    text-indent: -0.45ch;
  }

  .quote + .cite {
    font-style: normal;
  }

  /* Definition cards: the dictionary voice of the site. */
  .def {
    border-inline-start: 2px solid var(--brass);
    background: color-mix(in oklab, var(--paper-raised) 72%, transparent);
    padding: 1.1rem 1.3rem 1.2rem;
    margin-block: 1.8em;
    max-width: var(--measure);
  }

  .def dt {
    font-family: var(--sans);
    font-size: var(--text-s);
    font-weight: 620;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .def dt small {
    font-weight: 420;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-soft);
    margin-inline-start: 0.6em;
  }

  .def dd {
    margin-block-start: 0.45em;
    font-size: calc(var(--text-m) * 0.95);
    color: var(--ink-soft);
  }

  /* The little status bar. A fond nod to browsers of another century. */
  .status {
    position: fixed;
    left: 0.9rem;
    bottom: 0.9rem;
    z-index: 60;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-soft);
    background: color-mix(in oklab, var(--paper-raised) 88%, transparent);
    border: 1px solid var(--line);
    padding: 0.3rem 0.65rem;
    opacity: 0;
    translate: 0 0.4rem;
    transition: opacity 0.25s var(--ease-out), translate 0.25s var(--ease-out);
    pointer-events: none;
    backdrop-filter: blur(6px);
  }

  .status.is-on {
    opacity: 1;
    translate: 0 0;
  }

  @media (hover: none) {
    .status {
      display: none;
    }
  }

  /* Footer: the colophon. */
  .footer {
    border-block-start: 1px solid var(--line);
    padding-block: 1.4rem 2rem;
    font-family: var(--sans);
    font-size: var(--text-s);
    color: var(--ink-soft);
  }

  .footer .col {
    display: grid;
    gap: 0.55rem;
  }

  .footer .wave {
    color: var(--brass);
    letter-spacing: 0.35em;
  }

  .footer a {
    color: inherit;
  }

  .footer a:hover {
    color: var(--ink);
  }

  .keyhint {
    display: none;
  }

  @media (hover: hover) and (min-width: 760px) {
    .keyhint {
      display: block;
    }
  }
}

/* ------------------------------------------------------------------
   6 · HOMEPAGE
   ------------------------------------------------------------------ */

@layer components {

  /* 6.1 The hero. Two words, set like an engraving. The next
     section peeks above the fold; that is the whole scroll cue. */
  .hero {
    min-height: calc(100svh - 4.5rem);
    display: grid;
    align-content: center;
    position: relative;
    padding-block: 6rem 5rem;
  }

  .hero-kicker {
    margin-block-end: clamp(1.2rem, 3vh, 2.4rem);
  }

  .hero-title {
    font-size: var(--text-hero);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 144;
  }

  .hero-title .row {
    display: block;
  }

  .hero-title .and {
    font-style: italic;
    font-weight: 310;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--ink-soft);
    margin-inline-end: 0.06em;
  }

  .hero-title .stop {
    color: var(--brass);
  }

  /* Each letter is its own small instrument (JS plays them gently). */
  .hero-title .l {
    display: inline-block;
    font-variation-settings: "opsz" 144, "wght" var(--wght, 400), "SOFT" var(--soft, 0);
    will-change: font-variation-settings;
  }

  .hero-sub {
    margin-block-start: clamp(1.6rem, 4vh, 3rem);
    max-width: 34rem;
    font-size: var(--text-m);
    color: var(--ink-soft);
  }

  /* 6.2 Both words, one compact room. A dictionary reduced to its
     two best entries, sitting side by side. */
  .words {
    border-block-start: 1px solid var(--line);
    padding-block: clamp(2rem, 5vh, 3rem);
    display: grid;
    gap: 2.4rem;
  }

  .word-hw {
    font-size: var(--text-2xl);
    font-style: italic;
    font-weight: 460;
    font-variation-settings: "opsz" 144, "SOFT" 20;
    letter-spacing: -0.02em;
    transition: font-variation-settings 0.7s var(--ease-out);
  }

  .word:hover .word-hw {
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }

  .word-hw .pos {
    font-family: var(--sans);
    font-style: italic;
    font-size: 0.3em;
    font-weight: 480;
    color: var(--brass);
    margin-inline-start: 0.5em;
    vertical-align: 0.85em;
    letter-spacing: 0.03em;
  }

  .word-lead {
    margin-block-start: 1rem;
    font-size: var(--text-l);
    line-height: 1.38;
    font-weight: 400;
    max-width: 24ch;
  }

  .word-more {
    margin-block-start: 0.8rem;
    color: var(--ink-soft);
    max-width: 36ch;
    font-size: calc(var(--text-m) * 0.97);
  }

  @media (max-width: 819px) {
    .word + .word {
      border-block-start: 1px solid var(--line);
      padding-block-start: 2.2rem;
    }
  }

  @media (min-width: 820px) {
    .words {
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    .word:first-child {
      padding-inline-end: clamp(2.5rem, 5vw, 4.5rem);
    }

    .word + .word {
      border-inline-start: 1px solid var(--line);
      padding-inline-start: clamp(2.5rem, 5vw, 4.5rem);
    }
  }

  /* 6.4 The connector. */
  .connector {
    border-block-start: 1px solid var(--line);
    padding-block: clamp(2.25rem, 5vh, 3rem);
    text-align: center;
  }

  .connector p {
    font-size: var(--text-xl);
    font-weight: 350;
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 44ch;
    margin-inline: auto;
  }

  .connector p + p {
    margin-block-start: 0.5em;
  }

  .connector .turn {
    font-style: italic;
    font-variation-settings: "opsz" 100, "SOFT" 80;
  }

  .connector .name {
    color: var(--brass);
  }

  /* 6.5 The dark turn and the doorway to /gospel. */
  .doorway {
    background: var(--night);
    color: var(--night-ink);
    padding-block: clamp(2.75rem, 6vh, 3.5rem);
  }

  .doorway .kicker {
    color: var(--night-brass);
  }

  .doorway .question {
    font-size: var(--text-xl);
    font-style: italic;
    font-weight: 330;
    font-variation-settings: "opsz" 144, "SOFT" 90;
    line-height: 1.25;
    max-width: 20ch;
    margin-block: 0 1.1rem;
  }

  .doorway .prose {
    color: var(--night-soft);
  }

  .cta {
    display: inline-block;
    margin-block-start: 1.8rem;
    font-size: clamp(1.6rem, 1rem + 3.6vw, 3.4rem);
    font-weight: 480;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--night-ink);
    position: relative;
    padding-block-end: 0.18em;
  }

  .cta .arrow {
    display: inline-block;
    color: var(--night-brass);
    transition: translate 0.35s var(--ease-swell);
    margin-inline-start: 0.25em;
  }

  .cta::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--night-brass);
    transform: scaleX(0.12);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
  }

  .cta:hover::after,
  .cta:focus-visible::after {
    transform: scaleX(1);
  }

  .cta:hover .arrow,
  .cta:focus-visible .arrow {
    translate: 0.35em 0;
  }

  .doorway .aside {
    margin-block-start: 1rem;
    font-family: var(--sans);
    font-size: var(--text-s);
    color: var(--night-soft);
  }

  /* The question on this page becomes the title of the next one. */
  .cta {
    view-transition-name: gospel-question;
  }

  .gospel-hero h1 {
    view-transition-name: gospel-question;
  }

  /* 6.6 The signature: the letter closes, small and sure,
     right under the invitation. */
  .signoff {
    padding-block: 1.75rem 1.5rem;
  }

  .signoff .signature {
    margin-block-start: 0;
    font-size: calc(var(--text-xl) * 0.78);
  }

  .signature {
    margin-block-start: 2.6rem;
    font-size: var(--text-xl);
    font-style: italic;
    font-weight: 380;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    line-height: 1.25;
  }

  .signature .who {
    display: block;
    font-size: 0.62em;
    font-style: normal;
    font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
    font-weight: 460;
    margin-block-start: 0.35em;
  }
}

/* ------------------------------------------------------------------
   7 · THE GOSPEL PAGE
   Ten movements, one thread. The thread is God's story;
   it breaks where we broke it, crosses where he mended it.
   ------------------------------------------------------------------ */

@layer components {

  /* 7.1 Top bar with reading progress. */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--paper) 86%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--line);
  }

  .topbar .col {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-block: 0.85rem;
  }

  .wordmark {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 480;
    font-variation-settings: "SOFT" 70;
    text-decoration: none;
  }

  .wordmark .amp {
    color: var(--brass);
  }

  .topbar .crumb {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .progress {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
  }

  /* 7.2 Page opening. */
  .gospel-hero {
    padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 10vh, 6rem);
  }

  .gospel-hero h1 {
    font-size: var(--text-2xl);
    font-weight: 400;
    font-variation-settings: "opsz" 144;
    margin-block: 1.4rem 2rem;
    max-width: 14ch;
  }

  .gospel-hero .prose {
    color: var(--ink-soft);
  }

  .gospel-hero .prose strong {
    color: var(--ink);
    font-weight: 520;
  }

  /* 7.3 Movements and the thread. */
  .mv {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    padding-block: clamp(3.5rem, 9vh, 6.5rem);
  }

  .mv .rail {
    position: relative;
  }

  .mv .seg {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.5rem;
    width: 1px;
    background: var(--line-strong);
  }

  .mv .num {
    position: sticky;
    top: 5.2rem;
    display: block;
    padding-inline-start: 1.3rem;
    font-style: italic;
    font-size: var(--text-l);
    font-weight: 420;
    font-variation-settings: "SOFT" 60;
    color: var(--brass);
    line-height: 1;
  }

  .mv .body {
    max-width: var(--measure);
  }

  .mv h2 {
    font-size: var(--text-xl);
    max-width: 16ch;
    margin-block: 0.5rem 1.6rem;
  }

  .mv .prose {
    color: color-mix(in oklab, var(--ink) 86%, var(--paper));
  }

  .mv .prose strong {
    font-weight: 540;
  }

  @media (max-width: 700px) {
    .mv {
      grid-template-columns: 1.4rem minmax(0, 1fr);
    }

    .mv .num {
      position: static;
      padding-inline-start: 0;
      writing-mode: initial;
      margin-block-end: 0.6rem;
    }

    .mv .rail .num {
      display: none;
    }

    .mv .body .num-inline {
      display: block;
    }
  }

  .num-inline {
    display: none;
    font-style: italic;
    font-size: var(--text-l);
    color: var(--brass);
    font-variation-settings: "SOFT" 60;
  }

  @media (min-width: 701px) {
    .num-inline {
      display: none !important;
    }
  }

  /* Movement II: the thread breaks. */
  .mv--us .seg {
    background: none;
  }

  .mv--us .seg::before,
  .mv--us .seg::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    width: 1px;
    background: var(--line-strong);
  }

  .mv--us .seg::before {
    top: 0;
    height: 42%;
  }

  .mv--us .seg::after {
    top: 52%;
    bottom: 0;
    translate: 0.45rem 0;
    rotate: 1.2deg;
  }

  /* Movement III: the broken end, trailing off. */
  .mv--consequence .seg {
    translate: 0.45rem 0;
    background: repeating-linear-gradient(
      to bottom,
      var(--line-strong) 0 7px,
      transparent 7px 14px
    );
    mask-image: linear-gradient(to bottom, black 55%, transparent 92%);
  }

  /* The dark passages: movements III end, IV, and the crossing. */
  .night {
    background: var(--night);
    color: var(--night-ink);
  }

  .night .mv .prose {
    color: color-mix(in oklab, var(--night-ink) 82%, var(--night));
  }

  .night .mv .seg {
    background: var(--night-line);
  }

  .night .mv--consequence .seg {
    background: repeating-linear-gradient(
      to bottom,
      var(--night-line) 0 7px,
      transparent 7px 14px
    );
  }

  .night .num,
  .night .num-inline {
    color: var(--night-brass);
  }

  .night .kicker {
    color: var(--night-brass);
  }

  .night .ref {
    color: var(--night-brass);
  }

  .night .ref:hover {
    color: var(--night-ink);
  }

  .night .def {
    border-inline-start-color: var(--night-brass);
    background: color-mix(in oklab, var(--night-raised) 85%, transparent);
  }

  .night .def dd {
    color: var(--night-soft);
  }

  .night ::selection {
    background: var(--night-brass);
    color: var(--night);
  }

  /* 7.4 The crossing. The page's own lines form the cross. */
  .crossing {
    position: relative;
    min-height: 105svh;
    display: grid;
    place-content: center;
    text-align: center;
    overflow: clip;
    padding-block: 6rem;
  }

  .crossing .beam-v,
  .crossing .beam-h {
    position: absolute;
    background: var(--night-brass);
    opacity: 0.85;
  }

  .crossing .beam-v {
    inset-block: 0;
    left: 50%;
    width: 1px;
    translate: -0.5px 0;
  }

  .crossing .beam-h {
    inset-inline: 0;
    top: 50%;
    height: 1px;
    translate: 0 -0.5px;
  }

  .crossing .above,
  .crossing .below {
    font-size: var(--text-xl);
    font-weight: 340;
    line-height: 1.25;
    max-width: 18ch;
    margin-inline: auto;
    background: var(--night);
    position: relative;
    z-index: 2;
    padding: 0.4em 0.6em;
  }

  .crossing .above {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 90;
  }

  .crossing .below {
    font-weight: 480;
  }

  .crossing .gap {
    height: clamp(4rem, 16vh, 9rem);
  }

  .crossing .footnote {
    position: relative;
    z-index: 2;
    background: var(--night);
    display: inline-block;
    margin-block-start: 2.4rem;
    padding: 0.4em 0.8em;
    font-family: var(--sans);
    font-size: var(--text-s);
    color: var(--night-soft);
  }

  /* 7.5 Risen: the page opens up. */
  .mv--risen {
    padding-block: clamp(7rem, 18vh, 12rem);
  }

  .mv--risen .seg {
    background: var(--brass);
    width: 2px;
    box-shadow: 5px 0 0 -1px var(--brass);
  }

  .mv--risen h2 {
    font-weight: 330;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    letter-spacing: 0;
    line-height: 1.15;
    font-size: var(--text-2xl);
    max-width: 12ch;
  }

  .mv--risen .prose {
    font-size: calc(var(--text-m) * 1.06);
    line-height: 1.75;
  }

  .risen-list {
    list-style: none;
    padding: 0;
    margin-block-start: 2rem;
    max-width: var(--measure);
  }

  .risen-list li {
    padding-block: 1.1rem;
    border-block-start: 1px solid var(--line);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .risen-list li::before {
    content: "☙";
    color: var(--brass);
    line-height: 1.6;
  }

  /* 7.6 Grace: the crossed-out ways to earn it. */
  .not-by {
    list-style: none;
    padding: 0;
    margin-block: 1.8rem;
    font-size: var(--text-l);
    font-weight: 360;
    line-height: 2;
  }

  .not-by li {
    color: var(--ink-soft);
  }

  .not-by .strike {
    position: relative;
    display: inline-block;
  }

  .not-by .strike::after {
    content: "";
    position: absolute;
    inset-inline: -0.15em;
    top: 56%;
    height: 1px;
    background: var(--brass);
    transform: scaleX(1);
    transform-origin: left;
  }

  .js .not-by .strike::after {
    transform: scaleX(0);
    transition: transform 0.6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 120ms);
  }

  .js .is-visible .not-by .strike::after,
  .js .not-by.is-visible .strike::after {
    transform: scaleX(1);
  }

  .not-by + p .gift {
    font-style: italic;
    color: var(--brass);
    font-variation-settings: "SOFT" 80;
  }

  /* 7.7 Two responses: the thread forks. */
  .fork {
    margin-block: 2.6rem 0;
    display: grid;
    max-width: 44rem;
  }

  .fork svg {
    width: 100%;
    height: auto;
    margin-block-end: -1px;
  }

  .fork .stroke-fade {
    stroke: var(--line-strong);
  }

  .fork .stroke-gold {
    stroke: var(--brass);
    stroke-width: 1.5;
  }

  .ways {
    display: grid;
    gap: 2rem;
    border-block-start: 1px solid var(--line);
    padding-block-start: 2rem;
    max-width: 44rem;
  }

  @media (min-width: 700px) {
    .ways {
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
    }
  }

  .way h3 {
    font-family: var(--sans);
    font-size: var(--text-s);
    font-weight: 620;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-block-end: 0.9rem;
  }

  .way p {
    font-size: var(--text-l);
    line-height: 1.45;
    font-weight: 360;
  }

  .way--self h3 {
    color: var(--ink-soft);
  }

  .way--self p {
    font-style: italic;
    color: var(--ink-soft);
    font-variation-settings: "SOFT" 60;
  }

  .way--christ h3 {
    color: var(--brass);
  }

  /* 7.8 The closing lockup. */
  .lockup {
    border-block-start: 1px solid var(--line);
    padding-block: clamp(6rem, 16vh, 10rem);
    text-align: center;
  }

  .lockup p {
    font-size: var(--text-xl);
    font-weight: 350;
    line-height: 1.35;
    max-width: 24ch;
    margin-inline: auto;
  }

  .lockup .final {
    margin-block-start: 0.4em;
    font-weight: 470;
  }

  .lockup .final .name {
    color: var(--brass);
  }

  /* 7.9 Next steps. Honest doors, not a funnel. */
  .steps {
    border-block-start: 1px solid var(--line);
    padding-block: clamp(4rem, 10vh, 7rem);
  }

  .steps .intro {
    max-width: var(--measure);
    color: var(--ink-soft);
    margin-block: 1.4rem 3rem;
  }

  .steps .intro strong {
    color: var(--ink);
    font-weight: 520;
  }

  .step {
    display: grid;
    gap: 0.8rem 3rem;
    padding-block: 2.2rem;
    border-block-start: 1px solid var(--line);
  }

  @media (min-width: 820px) {
    .step {
      grid-template-columns: 16rem minmax(0, 1fr);
    }
  }

  .step h3 {
    font-family: var(--sans);
    font-size: var(--text-s);
    font-weight: 620;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
  }

  .step .body {
    max-width: var(--measure);
    color: color-mix(in oklab, var(--ink) 88%, var(--paper));
  }

  .step .body p + p {
    margin-block-start: 0.9em;
  }

  .prayer {
    margin-block-start: 1.2rem;
    border: 1px solid var(--line);
    background: var(--paper-raised);
    padding: 1.6rem 1.8rem;
    max-width: 34rem;
    font-style: italic;
    font-size: calc(var(--text-m) * 1.05);
    font-variation-settings: "SOFT" 70;
    line-height: 1.7;
  }

  /* 7.10 The final signature, where the thread ends. */
  .gospel-signoff {
    padding-block: clamp(6rem, 16vh, 10rem) clamp(4rem, 10vh, 7rem);
  }

  .gospel-signoff .lead-in {
    max-width: var(--measure);
    color: var(--ink-soft);
  }

  .gospel-signoff .signature {
    display: inline-block;
    border-block-end: 1px solid var(--brass);
    padding-block-end: 0.3em;
  }
}

/* ------------------------------------------------------------------
   8 · MOTION
   Purposeful, quiet, and switched off for anyone who asks.
   ------------------------------------------------------------------ */

@layer motion {

  /* Arrival: hero letters rise out of the paper, once. */
  @keyframes rise {
    from {
      opacity: 0;
      translate: 0 0.35em;
      filter: blur(6px);
    }
    to {
      opacity: 1;
      translate: 0 0;
      filter: blur(0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-title .l,
    .hero-title .and {
      opacity: 0;
      animation: rise 0.9s var(--ease-out) forwards;
      animation-delay: calc(0.12s + var(--i, 0) * 45ms);
    }

    .hero-title .stop {
      opacity: 0;
      animation: rise 0.9s var(--ease-out) forwards;
      animation-delay: 0.85s;
    }

    .hero-kicker,
    .hero-sub {
      opacity: 0;
      animation: rise 1s var(--ease-out) forwards;
    }

    .hero-kicker { animation-delay: 0.05s; }
    .hero-sub    { animation-delay: 0.7s; }
  }

  /* Scroll reveals: only when JS is present and motion is welcome. */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      translate: 0 1.6rem;
      transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
      transition-delay: calc(var(--d, 0) * 90ms);
    }

    .js [data-reveal].is-visible {
      opacity: 1;
      translate: 0 0;
    }
  }

  /* Scroll-driven extras, where the browser offers them. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

      /* Each thread segment draws itself as it enters. */
      .mv .seg,
      .mv--us .seg::before,
      .mv--us .seg::after {
        transform-origin: top;
        animation: seg-draw both linear;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
      }

      /* The crossing beams draw toward each other. */
      .crossing .beam-v {
        transform-origin: top;
        animation: seg-draw both linear;
        animation-timeline: view();
        animation-range: entry 10% cover 55%;
      }

      .crossing .beam-h {
        transform-origin: left;
        animation: beam-across both linear;
        animation-timeline: view();
        animation-range: entry 30% cover 70%;
      }

      /* The gospel progress hairline. */
      .progress {
        animation: grow-x both linear;
        animation-timeline: scroll(root);
      }

      /* Headwords drift a little slower than the page. */
      .headword h2 {
        animation: drift both linear;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
  }

  @keyframes seg-draw {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  @keyframes beam-across {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes grow-x {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes drift {
    from { translate: 0 1.2rem; }
    to   { translate: 0 -1.2rem; }
  }

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

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }
}

/* ------------------------------------------------------------------
   9 · UTILITIES & GUESTS
   ------------------------------------------------------------------ */

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

  @media (prefers-contrast: more) {
    :root {
      --ink-soft: color-mix(in oklab, var(--ink) 85%, var(--paper));
      --line: color-mix(in oklab, var(--ink) 40%, transparent);
    }
  }

  /* Print: the site becomes what it always was, a letter. */
  @media print {
    .grain,
    .status,
    .topbar,
    .skip-link {
      display: none !important;
    }

    body {
      background: white;
      color: black;
    }

    .night,
    .doorway,
    .crossing .above,
    .crossing .below,
    .crossing .footnote {
      background: white;
      color: black;
    }

    a {
      text-decoration-color: black;
    }
  }
}