@font-face { font-family:Piazzolla; src:url('/fonts/piazzolla-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Piazzolla; src:url('/fonts/piazzolla-600.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:Piazzolla; src:url('/fonts/piazzolla-700.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('/fonts/courier-prime-400.ttf') format('truetype'); font-weight:400; font-display:swap; }

:root {
  --paper:#f7f4ed; --paper-deep:#e5decf; --ink:#26231c; --soft:#5c5548;
  --faint:#807867; --green:#2f4f46; --gold:#8f5f26; --line:rgba(38,35,28,.16);
  --line-strong:rgba(38,35,28,.28); --panel:#fffaf0; --serif:Piazzolla, Georgia, serif;
  --mono:'Courier Prime', ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.22,.68,0,1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --ease:linear; }
  .page { animation-duration: .01ms !important; }
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#15140f; --paper-deep:#0e0d0a; --ink:#eee7d7; --soft:#b6aa91; --faint:#8d846f; --green:#8bb4a3; --gold:#d1a25e; --line:rgba(238,231,215,.14); --line-strong:rgba(238,231,215,.25); --panel:#1d1a13; }
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper-deep); color:var(--ink); }
body { font-family:var(--serif); }
button, textarea, input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible, textarea:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
/* Fixed height, not min-height: the shell must fill exactly one viewport
   so its middle row (.stage) is the only thing that scrolls on a long
   chapter. min-height let the whole page grow and scroll instead,
   dragging the footer's pause/back controls down out of reach. */
.app { height:100vh; height:100dvh; display:flex; justify-content:center; background:linear-gradient(180deg,var(--paper),var(--paper-deep)); }
.shell { width:min(620px,100%); height:100%; display:grid; grid-template-rows:auto 1fr auto; padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom); }
.topbar { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0 10px; border-bottom:1px solid var(--line); }
.book-id, .progress, .label, .kicker, .audio-state, .caption, .rating label, .survey-link { font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.book-id { color:var(--green); font-size:13px; font-weight:700; }
.progress { color:var(--faint); font-size:10px; text-align:right; }
.stage { min-height:0; overflow:auto; padding:28px 0; }
.stage::-webkit-scrollbar { width:5px; }
.stage::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:4px; }
.page { min-height:100%; display:flex; flex-direction:column; justify-content:center; animation:pageIn .5s var(--ease) both; }
.page.intro, .page.trailhead, .page.promise, .page.seam, .page.close, .page.payoff,
.page.between, .page.lookback, .page.scripture, .page.feedback, .page.end {
  justify-content:flex-start;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
.kicker { color:var(--gold); font-size:11px; margin:0 0 14px; }
h1, h2 { margin:0; line-height:1.08; letter-spacing:0; }
h1 { font-size:clamp(42px,14vw,68px); }
h2 { font-size:clamp(30px,9vw,46px); }
.meta { color:var(--soft); margin:16px 0 0; font-size:17px; }
.prose { font-size:20px; line-height:1.68; }
.prose p { margin:0 0 18px; }
.prose strong { font-weight:700; }
.promise .prose { font-size:24px; line-height:1.55; font-style:italic; }
.seam .prose, .between .prose, .lookback .prose, .close .prose, .payoff .prose { font-size:21px; }
.label { display:flex; align-items:center; gap:9px; color:var(--gold); font-size:11px; margin-bottom:18px; }
.label::before { content:""; width:10px; height:10px; border:1.5px solid currentColor; border-radius:50%; }
.scripture-ref { position:sticky; top:-28px; padding:10px 0 13px; background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 88%,transparent)); color:var(--green); font:700 12px var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.intro .prose { margin-top:26px; }
.page:not(.scripture) .read-cue { margin-top:22px; }
.read-cue { padding-bottom:24px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.read-cue h2 { margin-bottom:18px; font-size:clamp(28px,8vw,40px); }
.read-cue .prose { color:var(--soft); }
.chapter { margin-bottom:28px; }
.chapter h3 { color:var(--gold); font:700 12px var(--mono); text-transform:uppercase; letter-spacing:.09em; margin:0 0 12px; }
.verse { margin:0 0 5px; font-size:19px; line-height:1.75; }
.verse-number { color:var(--green); font:10px var(--mono); vertical-align:super; margin-right:4px; }
.bottom { padding:12px 0 18px; border-top:1px solid var(--line); }
.advance { width:100%; min-height:50px; border:1px solid var(--green); background:var(--green); color:var(--paper); border-radius:8px; font:700 12px var(--mono); text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:transform .15s var(--ease), opacity .15s var(--ease); }
.advance:disabled { opacity:.45; cursor:default; }
.advance:active:not(:disabled) { transform:scale(.97); }
.backrow { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.back { border:0; background:transparent; color:var(--faint); font:11px var(--mono); text-transform:uppercase; letter-spacing:.08em; padding:8px 0; transition:opacity .15s var(--ease); }
.back:active { opacity:.55; }
.audio { display:flex; align-items:center; gap:8px; color:var(--faint); }
.audio button { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink); transition:transform .15s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.audio button:active:not(:disabled) { transform:scale(.92); }
.audio button.is-playing { border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent); animation:breathe 2.4s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent); }
  50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--gold) 20%, transparent); }
}
.audio-state { font-size:9px; }
.feedback-form { display:grid; gap:18px; }
.rating { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.rating label { display:grid; place-items:center; min-height:46px; border:1px solid var(--line-strong); border-radius:8px; font-size:13px; cursor:pointer; }
.rating input { position:absolute; opacity:0; }
.rating label:has(input:checked) { background:var(--green); color:var(--paper); border-color:var(--green); }
textarea { width:100%; min-height:150px; resize:vertical; border:1px solid var(--line-strong); border-radius:8px; padding:14px; background:var(--panel); color:var(--ink); line-height:1.5; }
.survey-link { display:block; color:var(--green); text-align:center; font-size:11px; margin-top:16px; }
.loading, .error { margin:auto; max-width:34rem; padding:24px; text-align:center; color:var(--soft); }
@media (min-width:720px) {
  .shell { border-left:1px solid var(--line); border-right:1px solid var(--line); }
}

/* Reviewer-only jump nav — never present unless ?review=1 is in the URL. */
.review-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 10px; padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(6px);
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
}
.review-nav span { color:color-mix(in srgb, var(--paper) 55%, transparent); margin-right:2px; }
.review-nav button {
  border:1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  background:transparent; color:var(--paper); border-radius:5px;
  padding:6px 10px; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer;
}
.review-nav button:active { background:color-mix(in srgb, var(--paper) 18%, transparent); }