/* Two Horizons — the front door.

   The Emmaus road: Scripture opened station by station, from Moses to the Psalms, the way
   Jesus walked two disciples through it (Luke 24). The page inherits the study's manuscript
   world so that "Open the study" lands in the same room: cool linen, iron-gall ink, indigo as
   a committed field, ochre always for the Old Testament text in its own time (Horizon I),
   indigo always for what the apostle saw in Christ (Horizon II), madder only for the action.
   Contrast ratios are measured (landing/STEP1-DESIGN-BRIEF.md §2). */

:root {
  --ink: #1C2130;       --ink-2: #4B5166;
  --night: #151A26;     --paper: #EFF0EC;     --panel: #F8F8F5;   --mist: #E5E6E0;
  --rule: #D3D5CD;      --rule-2: #BFC2B8;
  --indigo: #2E4A8C;    --indigo-deep: #22386B; --indigo-tint: #B7C5E6; --indigo-soft: #DBE2F3;
  --ochre: #7D5F14;     --ochre-light: #D9B867; --ochre-soft: #F0E6C8;
  --madder: #9A2335;    --madder-deep: #7C1A2A;

  --f-text: "Alegreya", "Iowan Old Style", Georgia, serif;
  --f-sc: "Alegreya SC", "Alegreya", Georgia, serif;
  --f-ui: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --band: clamp(72px, 10vw, 144px);
  --r-ctl: 3px;
  --r-panel: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--rule-2) var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-text);
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--ink);
}
::selection { background: rgb(28 33 48 / .14); color: var(--ink); }
.band-night ::selection, .band-indigo ::selection, .foot ::selection { background: var(--indigo-tint); color: var(--night); }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 2px; }
.band-night :focus-visible, .band-indigo :focus-visible, .foot :focus-visible { outline-color: #fff; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
blockquote { margin: 0; }
cite { font-style: normal; }
img, svg { max-width: 100%; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: var(--f-ui); border-radius: var(--r-ctl); }
.skip:focus { top: 12px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fig { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.sc { font-family: var(--f-sc); text-transform: lowercase; letter-spacing: .02em; }

.h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.025em; font-weight: 600; max-width: 22ch; }
.h2-quiet { color: var(--ink-2); font-weight: 500; }
.band-night .h2-quiet, .band-indigo .h2-quiet { color: var(--indigo-tint); }

/* ---------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--r-ctl);
  font: 500 1rem/1.2 var(--f-ui); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease-out), transform .12s var(--ease-out), box-shadow .18s var(--ease-out);
}
.btn-act { background: var(--madder); color: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .08); }
.btn-act:hover { background: var(--madder-deep); text-decoration: none; }
.btn-act:active { transform: translateY(1px); }
.btn-lg { min-height: 52px; padding: 13px 26px; font-size: 1.0625rem; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule-2); padding: 0; width: 44px; }
.btn-quiet:hover { background: var(--panel); }
.free { font-family: var(--f-ui); font-size: .875rem; letter-spacing: .01em; color: var(--ink-2); }
.act-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 32px; margin-top: 28px; }
.act-main { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; }
.act-row .act-main { margin-top: 0; }

.lookup { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-ui); }
.lookup label { font-size: .875rem; color: var(--ink-2); }
.lookup-row { display: flex; }
.lookup input {
  width: 13.5rem; min-height: 52px; padding: 0 14px; border: 1px solid var(--rule-2); border-right: 0;
  border-radius: var(--r-ctl) 0 0 var(--r-ctl); background: var(--panel); color: var(--ink);
  font: 500 1rem/1 var(--f-mono);
}
.lookup input:focus-visible { outline-offset: 0; }
.lookup .btn-quiet { min-height: 52px; width: 52px; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }

/* ---------- nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgb(239 240 236 / .94); border-bottom: 1px solid var(--rule); backdrop-filter: saturate(1.2) blur(8px); padding-top: env(safe-area-inset-top, 0px); }
.nav-row { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.mark { display: inline-block; padding-block: 11px; font: 500 1.375rem/22px var(--f-text); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.mark em { font-style: italic; }
.mark-light { color: var(--paper); }
.mark-light em { color: var(--indigo-tint); }
.nav-links { display: flex; gap: 4px; margin-left: auto; font-family: var(--f-ui); }
.nav-links a { padding: 10px 12px; color: var(--ink-2); text-decoration: none; border-radius: var(--r-ctl); }
.nav-links a:hover { color: var(--ink); background: var(--mist); }
section[id] { scroll-margin-top: 80px; }

/* ---------- hero */
.hero { padding-top: clamp(32px, 3.5vw, 52px); }
.hero-copy { max-width: 62rem; }
h1 { font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.5rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; }
.lede { margin-top: 24px; font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
.walk { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--f-ui); font-size: 1rem; min-height: 44px; }
.walk .ico { width: 16px; height: 16px; transition: transform .18s var(--ease-out); }
.walk:hover .ico { transform: translateX(3px); }

/* the road: an authored ink stroke (SVG, slight hand variation), milestones for the stations.
   It redraws itself in a slow loop, starting already drawn; pauses on hover, focus or tap. */
.road { margin: clamp(24px, 2.5vw, 36px) 0 0; padding-block: 0 clamp(64px, 8vw, 104px); }
.road-track { position: relative; }
.road-ink { display: block; overflow: visible; }
.road-ink path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.road-ink .ink { stroke: var(--ink); stroke-width: 2.25; stroke-dasharray: 1; animation: road-draw 16s var(--ease-out) -7s infinite; }
.road-ink .ink-shadow { stroke: var(--ochre); stroke-width: 1; opacity: .45; }
@keyframes road-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 93% { stroke-dashoffset: 0; opacity: 0; } 94% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
.road-across { width: 100%; height: 24px; }
.road-down { display: none; }
/* one line at desktop widths, the citation running on after the verse, so the caption stays in the first viewport */
.road-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 20px; padding-left: 18px; border-left: 1px solid var(--ochre); font-style: italic; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; }
.road-caption cite, .v cite, .big-q cite, .chariot-close cite, .epigraph cite { font-family: var(--f-mono); font-style: normal; font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
.road-caption cite { color: var(--indigo); }
.walker { position: absolute; inset: 0 10px 0 0; animation: walk 2.4s linear infinite; }
.dot { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; }
@keyframes walk { from { transform: translateX(0); } to { transform: translateX(100%); } }

.stations { list-style: none; margin: -38px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.station { position: relative; padding: 0 28px 0 0; }
.station + .station { padding-left: 28px; border-left: 1px solid var(--rule); }
.station + .station .mile { margin-left: -38px; }
.mile { display: block; width: 20px; height: 26px; margin-left: -10px; margin-bottom: 14px; }
.mile path { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.mile .mile-line { fill: none; stroke: var(--ochre); }
.station-name { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.count { font-family: var(--f-ui); font-size: .875rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.pair { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--f-mono); font-size: .875rem; flex-wrap: wrap; }
.ref.ot { color: var(--ochre); }
.ref.nt { color: var(--indigo); }
.pair-arrow { width: 16px; height: 16px; color: var(--ink-2); }
.turn { display: grid; margin-top: 16px; }
.turn .h { grid-area: 1 / 1; font-size: 1.0625rem; line-height: 1.5; }
.h-label { display: block; font-family: var(--f-ui); font-size: .8125rem; letter-spacing: .02em; margin-bottom: 4px; }
.hz-ot .h-label { color: var(--ochre); }
.hz-nt .h-label { color: var(--indigo); }
.turn .hz-ot { animation: horizon-a 18s var(--ease-out) infinite; }
.turn .hz-nt { animation: horizon-b 18s var(--ease-out) infinite; }
.station:nth-child(2) .h { animation-delay: -6s; }
.station:nth-child(3) .h { animation-delay: -12s; }
/* A clean swap, not a fade: exactly one horizon is visible at every instant, so a pause (hover,
   focus, tap) can freeze neither two overlapping texts nor an empty card. */
@keyframes horizon-a { 0%, 49.9% { opacity: 1; } 50%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes horizon-b { 0%, 49.9% { opacity: 0; } 50%, 99.9% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- bands */
.band-night { background: var(--night); color: var(--paper); }
.band-indigo { background: var(--indigo); color: #fff; }
.band-mist { background: var(--mist); }

/* proof */
.proof { padding-block: 0 var(--band); overflow: hidden; }
.marquee { overflow: hidden; border-bottom: 1px solid rgb(183 197 230 / .18); }
.marquee-track { display: flex; width: max-content; animation: marquee 140s linear infinite; }
.mq { display: inline-flex; align-items: baseline; gap: 8px; padding: 22px 28px; white-space: nowrap; font-family: var(--f-mono); font-size: .875rem; color: var(--indigo-tint); }
.mq b { font-weight: 500; color: var(--paper); }
.mq i { font-family: var(--f-text); font-style: italic; color: var(--indigo-tint); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.proof-body { padding-top: clamp(56px, 8vw, 96px); text-align: center; }
.statement { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.4; letter-spacing: -.015em; max-width: 30ch; margin-inline: auto; }
.statement .fig { font-size: .82em; }
.cycle { display: grid; justify-items: center; align-content: center; min-height: 44px; margin-top: 6px; font-style: italic; color: #fff; }
.cycle > span:nth-child(1), .cycle > span:nth-child(4) { color: var(--ochre-light); }
.cycle > span:nth-child(2) { color: var(--indigo-tint); }
/* Four phrases, 3s each, crossfading: one is always fully or partly visible, so a pause (hover,
   focus, tap) never lands on an empty line. Negative delays start each phrase mid-cycle. */
.cycle > span { grid-area: 1 / 1; animation: cycle 12s linear infinite; }
.cycle > span:nth-child(2) { animation-delay: -9s; }
.cycle > span:nth-child(3) { animation-delay: -6s; }
.cycle > span:nth-child(4) { animation-delay: -3s; }
@keyframes cycle { 0%, 23% { opacity: 1; transform: none; } 25% { opacity: 0; transform: translateY(-4px); } 97% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
.proof .act-main { margin-top: 40px; }

/* the stations, opened */
.stations-open { padding-block: var(--band); }
.open-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; padding-block: 48px; border-top: 1px solid var(--rule); }
.open-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.open-verses { grid-column: 1 / -1; }
/* the explanation under Horizon I, the summary and the way in under Horizon II, on the verses' columns */
.open-say { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-content: start; }
.open-say > p:first-child { grid-row: span 2; }
.open-say > :not(:first-child) { grid-column: 2; justify-self: start; }
.open-say .summary { margin-top: 0; }
.stations-open .h2 + .open-row { margin-top: 48px; }
.open-head h3 { font-size: 1.75rem; letter-spacing: -.015em; }
.open-count { color: var(--ink-2); font-size: 1rem; }
/* facing columns: the diglot itself, Horizon I beside Horizon II */
.open-verses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.v { padding: 16px 18px 14px; border-radius: var(--r-ctl); font-size: 1.0625rem; line-height: 1.55; }
.v cite { display: block; margin-top: 8px; }
.v-ot { background: var(--ochre-soft); }
.v-ot cite { color: var(--ochre); }
.v-nt { background: var(--indigo-soft); }
.v-nt cite { color: var(--indigo); }
.open-say p:first-child { font-size: 1.0625rem; }
.summary { margin-top: 14px; font-family: var(--f-sc); font-size: 1rem; line-height: 1.5; letter-spacing: .015em; color: var(--ink-2); }
.more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-family: var(--f-ui); }

/* Acts 8 */
.chariot { padding-block: var(--band); }
.chariot-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 40px 72px; align-items: start; }
.big-q p { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.1; letter-spacing: -.02em; font-style: italic; }
.big-q cite { display: block; margin-top: 18px; color: var(--indigo-tint); }
.chariot-lead { font-size: 1.1875rem; line-height: 1.55; color: #fff; }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.steps .ico { color: var(--indigo-tint); margin-top: 3px; }
.steps strong { font-weight: 600; }
.steps span { color: var(--indigo-tint); }
.steps strong { color: #fff; }
.chariot-close { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(183 197 230 / .3); font-style: italic; color: var(--indigo-tint); }
.chariot-close cite { display: block; margin-top: 8px; color: var(--indigo-tint); }
.link-light { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: #fff; font-family: var(--f-ui); }

/* how a reading holds */
.holds { padding-block: var(--band); }
.diagram { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; align-items: stretch; margin-top: 48px; padding: 28px; background: var(--indigo); border-radius: var(--r-panel); }
.node { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; background: var(--panel); border-radius: var(--r-ctl); }
.n-k { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); }
.n-ref { font-family: var(--f-mono); font-size: .875rem; font-weight: 500; }
.n-ot .n-ref, .n-w .n-ref { color: var(--ochre); }
.n-m .n-ref { color: var(--ink); font-family: var(--f-text); font-size: 1.0625rem; font-weight: 600; }
.n-nt .n-ref { color: var(--indigo); }
.n-t { font-size: 1rem; line-height: 1.45; }
.link { position: relative; align-self: center; height: 2px; background: rgb(183 197 230 / .55); overflow-x: clip; }
.link .walker { animation-duration: 2.4s; }
.link .dot { border: 2px solid #fff; background: var(--indigo); }
.four { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.four li { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.four strong { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: 4px; }
.four-n { display: block; font: 600 2.25rem/1 var(--f-text); color: var(--ink); margin-bottom: 10px; font-variant-numeric: lining-nums; }

/* guardrails */
.guardrails { padding-block: var(--band); }
.split { display: grid; grid-template-columns: 4fr 8fr; gap: 32px 64px; align-items: start; }
.split > .h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding-block: 18px; border-top: 1px solid var(--rule-2); }
.rules li:last-child { border-bottom: 1px solid var(--rule-2); }
.rules .ico { color: var(--indigo); margin-top: 3px; }
.rules strong { font-weight: 600; }
.guard-note { grid-column: 2; margin-top: -8px; font-size: .9375rem; color: var(--ink-2); }

/* inside the study */
.inside { padding-block: var(--band); }
.inside-list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: repeat(3, auto); column-gap: 48px; }
.inside-list a { display: grid; gap: 6px; padding: 22px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--rule); }
.inside-list a:hover .in-name { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.in-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.in-say { color: var(--ink-2); max-width: 52ch; }
.in-corpus { grid-row: 1 / span 3; }
.in-corpus a { align-content: start; }
.mini { display: grid; margin-top: 14px; border-top: 1px solid var(--rule); }
.mc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.mc-ref { font-family: var(--f-mono); font-size: .8125rem; color: var(--indigo); }
.mc-row i { font-style: italic; color: var(--ink-2); }
.mc-row .mc-ref:nth-of-type(2) { color: var(--ochre); }
.mc-rel { flex-basis: 100%; font-family: var(--f-ui); font-size: .875rem; color: var(--ink-2); }

/* worked studies */
.studies { padding-block: var(--band); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger a { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 20px 0; color: var(--paper); text-decoration: none; border-top: 1px solid rgb(183 197 230 / .22); }
.ledger li:last-child a { border-bottom: 1px solid rgb(183 197 230 / .22); }
.ledger .l-title { font-size: 1.25rem; line-height: 1.3; }
.ledger .l-meta { grid-column: 1; font-family: var(--f-ui); font-size: .9375rem; color: var(--indigo-tint); }
.ledger .l-go { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--indigo-tint); transition: transform .18s var(--ease-out), color .18s; }
.ledger a:hover .l-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ledger a:hover .l-go { transform: translateX(4px); color: #fff; }

/* questions */
.questions { padding-block: var(--band); }
.faq { margin: 0; }
.faq dt { font-size: 1.25rem; font-weight: 600; padding-top: 24px; border-top: 1px solid var(--rule); }
.faq dt:first-child { padding-top: 0; border-top: 0; }
.faq dd { margin: 8px 0 24px; color: var(--ink-2); max-width: 62ch; }

/* final band */
.final { padding-block: calc(var(--band) + 16px); text-align: center; }
.final-grid { display: grid; justify-items: center; }
.epigraph { max-width: 52ch; font-style: italic; color: var(--indigo-tint); }
.epigraph cite { display: block; margin-top: 10px; }
.final-h { margin-top: 32px; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; }
.final-h span { display: block; color: var(--indigo-tint); }
.final-act { margin-top: 36px; }

/* footer */
.foot { background: var(--ink); color: var(--indigo-tint); padding-block: 56px calc(56px + env(safe-area-inset-bottom, 0px)); font-family: var(--f-ui); font-size: .9375rem; }
.foot-grid { display: grid; grid-template-columns: 3fr 3fr 6fr; gap: 32px 48px; }
.foot-by { margin-top: 10px; }
.foot-by a { display: inline-block; padding-block: 13px; margin-block: -13px; }
.foot a { color: var(--paper); }
.foot-links { display: grid; align-content: start; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-small p + p { margin-top: 12px; }

/* phone bottom bar */
.bar { display: none; }

/* ---------- motion: every loop pauses on hover, focus or tap (WCAG 2.2.2) */
[data-pausable]:hover *, [data-pausable]:focus-within *, [data-pausable]:focus *,
[data-pausable].paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .walker { display: none; }
  .road-ink .ink { stroke-dashoffset: 0; }
  .turn { gap: 14px; }
  .turn .h { grid-area: auto; opacity: 1; transform: none; }
  .cycle { display: block; }
  .cycle > span { opacity: 1; display: block; transform: none; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track .dup { display: none; }
}

/* ---------- layout breakpoints */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .road-across { display: none; }
  .road-down { display: block; position: absolute; left: 0; top: 4px; width: 24px; height: calc(100% - 8px); }
  .stations { grid-template-columns: minmax(0, 1fr); margin: 0; padding-left: 48px; gap: 36px; }
  .station, .station + .station { padding: 0; border-left: 0; }
  .station .mile, .station + .station .mile { position: absolute; left: -46px; top: 0; margin: 0; }

  .diagram { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 20px; gap: 0; }
  .link { width: 2px; height: 32px; justify-self: center; }
  .link .walker { animation-name: walk-down; }
  @keyframes walk-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
  .link .walker { inset: 0 0 10px 0; }
  .link .dot { left: -4px; top: 0; }
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chariot-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .guard-note { grid-column: 1; margin-top: 0; }
  .inside-list { grid-template-columns: minmax(0, 1fr); }
  .in-corpus { grid-row: auto; margin-bottom: 12px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-small { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nav-cta { display: none; }
  .nav-row { min-height: 56px; }
  .lede { font-size: 1.125rem; }
  .act-row { flex-direction: column; align-items: stretch; }
  .act-main { align-self: stretch; align-items: stretch; }
  .act-main .free { text-align: center; }
  .lookup input { flex: 1; width: auto; }
  .open-row { grid-template-columns: minmax(0, 1fr); padding-block: 36px; }
  .open-verses { grid-template-columns: minmax(0, 1fr); }
  .open-say { display: block; }
  .open-say .summary { margin-top: 14px; }
  .four { grid-template-columns: minmax(0, 1fr); }
  .ledger a { grid-template-columns: 1fr; }
  .ledger .l-go { display: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .final-act { align-self: stretch; }
  .bar {
    display: flex; align-items: center; gap: 12px; position: fixed; inset: auto 0 0 0; z-index: 25;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgb(239 240 236 / .97);
    border-top: 1px solid var(--rule); backdrop-filter: blur(8px);
  }
  .bar .btn { flex: 1; }
  .js .bar { transition: transform .28s var(--ease-out); }
  .js .bar:not(.show) { transform: translateY(110%); }
  /* room for the bar lives inside the footer, so no light strip shows under it when the bar hides */
  .foot { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
}