/* ==========================================================================
   THE WAY HOME — house style, ivory / near-black / antique gold, with navy
   doing the reading work.

   Three rules from the house sheet are load-bearing here and every one of them
   is invisible until it is wrong:

   1. ON IVORY, GOLD IS A RULE AND A MARK — NEVER A WORD. Gold dark enough to
      read on ivory is brown, and the moment gold becomes a text colour the
      whole app looks brown. Links are ink with a gold underline; eyebrows are
      neutral caps beside a short gold rule. `--goldink` exists only for the
      rare small label that must be gold, and it is already 5.9:1.
   2. THE GREY RAMP STAYS NEUTRAL. Secondary copy, ledes and captions all ride
      it, so a grey mixed toward the gold turns most words on screen brown.
   3. DARK MODE IS OPT-IN ONLY (`html[data-theme="dark"]`). A
      prefers-color-scheme block flips the brand for everyone whose OS is dark.
   ========================================================================== */

:root {
  --cream: #f7f1e3;
  --cream2: #efe6d1;
  --card: #fffdf8;
  --panel: #faf5ea;
  --line: #e6d9bc;
  --line2: #d8c79f;

  /* Neutral ramp — deliberately NOT warmed toward the gold. */
  --ink: #1c2333;
  --sub: #4d5768;
  --muted: #6c7789;

  --navy: #16294a;
  --navy2: #1f3a68;
  --blue: #3a5da9;

  --gold: #b8860b;      /* rules and marks only */
  --gold2: #caa12e;
  --gold3: #e4cd84;
  --goldsoft: #f3e8c6;
  --goldink: #7a5c12;   /* the gold FOR TEXT, when a label must be gold */

  --red: #b22234;       /* urgent only, never decorative */
  --redsoft: #fbeaec;
  --redline: #e8c2c8;
  --good: #2e7d5b;
  --warn: #9a6b12;

  --serif: Georgia, "Palatino Linotype", "Times New Roman", serif;
  --display: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 34rem;
  --wrap: 68rem;
}

html[data-theme="dark"] {
  --cream: #12151c;
  --cream2: #171b24;
  --card: #1a1f29;
  --panel: #161a22;
  --line: #2b323f;
  --line2: #3a4354;
  --ink: #eef1f6;
  --sub: #b7c0cf;
  --muted: #97a1b2;
  /* ⚠ On dark, --navy must stay a DARK ground role, not drift to pale blue. */
  --navy: #dbe4f5;
  --navy2: #c3d2ee;
  --blue: #8fb0ee;
  --goldink: #e4cd84;
  --goldsoft: #2a2415;
  --red: #ff8a97;
  --redsoft: #2a171b;
  --redline: #4d2a30;
  --good: #6fd4a6;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--serif);
  overflow-x: hidden;
}

/* ── skip link & focus ────────────────────────────────────────────────
   Two-tone ring so it is visible on ivory AND on a photograph. */
:where(a, button, [tabindex], summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--goldsoft);
  border-radius: 1px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  font: 700 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.measure { max-width: var(--measure); }

/* ── header ───────────────────────────────────────────────────────────
   Ivory, not a coloured band. Gold hairline + double rule at the base.
   ⚠ The nav must not stack into a 339px-tall header on a phone: it scrolls
   sideways instead of wrapping. */
.site-head {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line2);
  position: sticky; top: 0; z-index: 60;
}
.head-in {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 0; min-height: 3.25rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; flex: 0 0 auto; }
.brand .mk { width: 44px; height: 44px; flex: 0 0 44px; }
.brand b {
  font: 400 1.06rem/1.05 var(--display); letter-spacing: .01em; color: var(--navy);
  display: block;
}
.brand small {
  display: block; font: 700 .56rem/1.4 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.site-nav { margin-left: auto; min-width: 0; }
.site-nav ul {
  display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
  display: block; white-space: nowrap; text-decoration: none;
  color: var(--sub); padding: .5rem .6rem;
  font: 700 .7rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--navy); }
.site-nav a[aria-current] { color: var(--navy); border-bottom-color: var(--gold); }
.site-nav a.help-link { color: var(--red); }

/* ── the help rail: reachable from every page, never behind anything ── */
.helpbar {
  background: var(--navy); color: #f4f7fd;
  font: 400 .84rem/1.5 var(--sans);
}
.helpbar .wrap { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; padding: .5rem 0; }
.helpbar b { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
.helpbar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ── hero ─────────────────────────────────────────────────────────────
   Full-bleed loop behind the type.

   ⚠⚠ THE SCRIM FOLLOWS THE COPY. A full-width, full-height veil buries the
   footage — the whole point of the loop. The gradient is anchored to the
   inline-start edge where the words actually sit, and stops well before the
   far edge, so the picture stays a picture. */
.chero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0f1622; color: #fff;
  min-height: 26rem; display: flex; align-items: flex-end;
}
.chero.tall { min-height: 34rem; }
.chero.short { min-height: 18rem; }
.chero .cbg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; border: 0;
}
.chero .heroloop { z-index: -1; }
.chero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(9, 14, 24, .90) 0%,
      rgba(9, 14, 24, .84) 26%,
      rgba(9, 14, 24, .60) 48%,
      rgba(9, 14, 24, .22) 66%,
      rgba(9, 14, 24, .06) 82%,
      rgba(9, 14, 24, 0) 100%),
    linear-gradient(to top, rgba(9, 14, 24, .74) 0%, rgba(9, 14, 24, .18) 42%, rgba(9, 14, 24, 0) 72%);
}
.chero .cinner { position: relative; z-index: 1; width: 100%; padding: 3.4rem 0 2.6rem; }
.chero .htext { max-width: 33rem; }
.chero h1 {
  font: 400 clamp(2rem, 5.2vw, 3.5rem)/1.06 var(--display);
  margin: .2rem 0 .7rem; color: #fff;
  text-wrap: balance;
}
.chero p.lede { font-size: 1.1rem; line-height: 1.62; color: #eef2f9; margin: 0 0 1.3rem; max-width: 30rem; }
.chero .kicker { color: #f0e4c4; }
.chero .credit {
  position: absolute; right: .8rem; bottom: .55rem; z-index: 2; margin: 0;
  font: 400 .62rem/1 var(--sans); color: rgba(255, 255, 255, .72); letter-spacing: .04em;
}

/* ── eyebrow / kicker: neutral caps beside a short gold rule ───────── */
.kicker {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .3rem;
  font: 700 .68rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.kicker::before { content: ""; width: 1.8rem; height: 2px; background: var(--gold); flex: 0 0 auto; }
.chero .kicker::before { background: var(--gold3); }

/* ── type ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--navy); font-family: var(--display); font-weight: 400; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.14; margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.22rem; line-height: 1.22; margin: 1.9rem 0 .5rem; font-family: var(--serif); font-weight: 700; }
p { margin: 0 0 1.05rem; }
.lede { font-size: 1.16rem; line-height: 1.62; color: var(--sub); }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold2); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--navy); }

main { padding-bottom: 4rem; }
section { scroll-margin-top: 5rem; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
.starrule { display: flex; align-items: center; gap: .8rem; margin: 2.8rem 0; color: var(--gold); }
.starrule::before, .starrule::after { content: ""; height: 1px; background: var(--line2); flex: 1; }

/* ── plates / cards ───────────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.plate {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 1.15rem 1.25rem; display: flex; flex-direction: column;
}
a.plate { text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.plate:hover { border-color: var(--gold2); transform: translateY(-1px); }
.plate h3 { margin: .15rem 0 .35rem; font-family: var(--display); font-weight: 400; font-size: 1.24rem; }
.plate p { color: var(--sub); font-size: .96rem; margin: 0; }
.plate .n {
  font: 700 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.plate .thumb {
  display: block; width: calc(100% + 2.5rem); margin: -1.15rem -1.25rem .9rem;
  aspect-ratio: 16 / 9; object-fit: cover; background: var(--cream2);
}

/* ── the reading page ─────────────────────────────────────────────── */
.reader { max-width: var(--measure); margin-inline: auto; }
.reader p, .reader li { font-size: 1.0625rem; line-height: 1.78; }
.reader > p:first-of-type { font-size: 1.12rem; }
.reader em { font-style: italic; }
.reader strong { font-weight: 700; color: var(--navy); }

.reader blockquote {
  margin: 1.6rem 0; padding: .1rem 0 .1rem 1.15rem;
  border-left: 3px solid var(--gold2); color: var(--sub); font-style: italic;
}
.reader blockquote p:last-child { margin-bottom: 0; }

/* ── callouts, by the kind the author already typed ───────────────── */
.callout {
  margin: 1.9rem 0; padding: 1.05rem 1.2rem;
  border: 1px solid var(--line); border-left-width: 4px; background: var(--panel);
}
.callout .ct {
  margin: 0 0 .55rem; font: 700 .74rem/1.35 var(--sans);
  letter-spacing: .13em; text-transform: uppercase; color: var(--navy);
}
.callout p, .callout li { margin: 0 0 .55rem; font-size: .99rem; line-height: 1.7; }
.callout > :last-child { margin-bottom: 0; }
.callout.journal { border-left-color: var(--gold2); background: #fdf9ef; }
.callout.journal p { font-style: italic; }
.callout.parent { border-left-color: var(--navy2); background: #f5f7fc; }
.callout.research { border-left-color: var(--blue); background: #f4f7fd; }
.callout.research p { font-style: normal; }
.callout.crisis {
  border-left-color: var(--red); background: var(--redsoft); border-color: var(--redline);
}
.callout.crisis p { font-weight: 600; }
/* The youth editions' "Remember —" boxes: the one thing on the page she wants a
   young reader to carry away. Gold rule, warm ground, slightly larger. */
.callout.remember {
  border-left-color: var(--gold); background: #fdf6e8; border-color: var(--line);
}
.callout.remember p { font-size: 1.06rem; }
.callout.remember strong { color: var(--goldink); }
html[data-theme="dark"] .callout.remember { background: #211c11; }
html[data-theme="dark"] .callout.remember strong { color: var(--gold3); }

/* ── a book, shown as a book ──────────────────────────────────────── */
.bookhead {
  display: grid; gap: 1.8rem; align-items: start; margin: 2.2rem 0 1rem;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}
.bookhead .reader { margin-inline: 0; }
img.cover {
  display: block; width: 100%; height: auto; max-width: 15rem;
  border: 1px solid var(--line2); box-shadow: 0 6px 22px rgba(28, 35, 51, .16);
}
.byline { font: 400 1.02rem/1.4 var(--display); color: var(--navy); margin: 0 0 .3rem; }
.tagline {
  font: 700 .68rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.1rem;
}
.editionswitch { margin: 0 0 1.4rem; font: 400 .95rem/1.6 var(--sans); }
/* ⚠ A book card contains TWO links (the book and its youth edition), so the
   card itself must not be an anchor. Nesting <a> inside <a> is invalid; the
   browser un-nests it and the second link escapes the card, taking the grid
   with it. The cover and the title carry the link instead. */
.bookcard { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1.2rem; align-items: start; }
.bookcard .coverlink { grid-row: 1 / span 4; display: block; }
.bookcard .cover { width: 100%; max-width: none; margin: 0; }
.bookcard h3 { margin: .1rem 0 .4rem; }
.bookcard h3 a { text-decoration: none; color: inherit; }
.bookcard h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold2); }
.bookcard p { margin-bottom: .6rem; }
@media (max-width: 34rem) {
  .bookcard { grid-template-columns: 1fr; gap: 1rem; }
  .bookcard .coverlink { grid-row: auto; max-width: 11rem; }
}
.plate .alsoin { margin-top: .8rem; font: 400 .88rem/1.5 var(--sans); color: var(--muted); }
.plate .alsoin a { color: var(--ink); }

@media (max-width: 46rem) {
  .bookhead { grid-template-columns: 1fr; }
  img.cover { max-width: 11rem; }
}
html[data-theme="dark"] .callout.journal { background: #1d1a12; }
html[data-theme="dark"] .callout.parent,
html[data-theme="dark"] .callout.research { background: #171d29; }

/* ── the help page's per-book lists ──────────────────────────────── */
.helpset { margin: 0 0 2rem; }
.helpset h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.helpset .from {
  display: block; font: 400 .8rem/1.5 var(--sans); color: var(--muted);
  letter-spacing: 0; text-transform: none; margin-top: .15rem;
}

/* ── prev / next ──────────────────────────────────────────────────── */
.pager { display: flex; gap: 1rem; justify-content: space-between; margin: 3rem 0 0; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.pager a { flex: 1 1 0; text-decoration: none; color: inherit; }
.pager a.next { text-align: right; }
.pager .n { display: block; font: 700 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.pager b { font: 400 1.02rem/1.3 var(--display); color: var(--navy); }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #0a0a0a; color: #f0d0a0; border: 1px solid #0a0a0a; border-radius: 0;
  padding: .72rem 1.15rem; text-decoration: none; cursor: pointer;
  font: 700 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.btn:hover { background: #1c2333; }
.btn.gold {
  background: linear-gradient(180deg, #f0d0a0, #d9b45e 30%, #a07020 64%, #7d5616);
  color: #17130a; border-color: #7d5616;
}
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
/* ⚠ A ghost button inherits an INK outline, which on a dark photograph is a
   button you cannot see — and the one it was hiding was "Get help now". Inside
   a hero the ghost has to invert. */
.chero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .78); }
.chero .btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.btn.urgent { background: var(--red); border-color: var(--red); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── reading progress ─────────────────────────────────────────────── */
.progress { position: fixed; left: 0; top: 0; height: 3px; background: var(--gold2); width: 0; z-index: 90; transition: width .1s linear; }

/* ── footer ───────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line2); background: var(--panel); padding: 2.4rem 0 3rem; margin-top: 3rem; }
.site-foot .cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-foot h4 { font: 700 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .4rem; }
.site-foot a { font-size: .95rem; }
.site-foot .fine { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font: 400 .84rem/1.6 var(--sans); }

/* ── notes / small print ──────────────────────────────────────────── */
.note { background: var(--panel); border: 1px solid var(--line); padding: 1rem 1.15rem; font-size: .96rem; color: var(--sub); }
.note.urgent { background: var(--redsoft); border-color: var(--redline); color: var(--ink); }
.tiny { font: 400 .8rem/1.6 var(--sans); color: var(--muted); }

/* ── read.js furniture ────────────────────────────────────────────────
   ⚠⚠ THESE CLASS NAMES ARE THE PLAYER'S, NOT OURS. read.js emits `.listen`,
   `.listen-ico`, `.listen-t`, `.listen-s`, `.listen-tx`, `.listen-all`,
   `.listen-note`, `.readdock` and `.rd-*`. Inventing a tidier set (`.listen-btn`,
   `.listen-transcript`) and styling those instead leaves every button unstyled
   and the transport dock as raw text at the foot of the page — while a gate
   that checks for the invented names reports green. Style what the player
   actually writes. */
.listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: .2rem 0 1.6rem; }
.listen {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  background: var(--panel); color: var(--navy); border: 1px solid var(--line2); border-radius: 0;
  padding: .55rem .9rem; font: 700 .68rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
}
.listen:hover { border-color: var(--gold2); }
.listen.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.listen-ico {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.listen.on .listen-ico { border: 0; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.listen-s { opacity: .7; letter-spacing: .06em; }
.listen-tx { font-size: .95rem; color: var(--sub); }
.listen-tx summary { cursor: pointer; font: 700 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.listen-tx p { margin: .7rem 0 0; border-left: 3px solid var(--line2); padding-left: .9rem; max-width: var(--measure); }
.listen-note { font: 400 .84rem/1.6 var(--sans); color: var(--muted); margin: .5rem 0 0; max-width: 34rem; }
.listen-all { padding: .7rem 1.1rem; }
.reading { box-shadow: -4px 0 0 var(--gold2); padding-left: 1rem; }

.readdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--navy); color: #f2f6fd; padding: .6rem clamp(.7rem, 3vw, 1.4rem);
  border-top: 2px solid var(--gold);
  font: 400 .84rem/1.4 var(--sans);
}
.readdock[hidden] { display: none; }
.rd-b {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 0; cursor: pointer; padding: .35rem .6rem; font-size: .9rem; line-height: 1;
}
.rd-b:hover { border-color: var(--gold3); }
/* The play/pause control is the one people reach for; it is not just another
   button in the row. Gold ground, near-black glyph — 12:1 either way. */
.rd-play { background: var(--gold3); color: #17130a; border-color: var(--gold3); font-size: .8rem; padding: .4rem .7rem; }
.rd-play:hover { background: #f0dda6; border-color: #f0dda6; }
.rd-mid { flex: 1 1 12rem; min-width: 8rem; }
.rd-h { font-weight: 700; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar { height: 3px; background: rgba(255, 255, 255, .26); }
.rd-bar i { display: block; height: 100%; width: 0; background: var(--gold3); }
.rd-time { font-variant-numeric: tabular-nums; opacity: .85; }
.rd-rate select { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .34); border-radius: 0; padding: .25rem .3rem; font: inherit; }
.rd-rate select option { color: #111; }
.rd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── films ────────────────────────────────────────────────────────── */
.film { border: 1px solid var(--line); background: var(--card); }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f1622; }
.film .meta { padding: .9rem 1.1rem; }
.film .meta h3 { margin: 0 0 .3rem; }

/* ── journal (local only) ─────────────────────────────────────────── */
.jset { border: 1px solid var(--line); background: var(--card); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.jset > h3 { margin-top: 0; }
.jprompt { margin: 1.1rem 0 0; }
.jprompt p { font-style: italic; color: var(--sub); margin-bottom: .45rem; }
.jprompt textarea {
  width: 100%; min-height: 6.5rem; resize: vertical;
  font: 400 1rem/1.7 var(--serif); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line2); padding: .7rem .8rem; border-radius: 0;
}
.jstatus { font: 400 .78rem/1.5 var(--sans); color: var(--muted); margin-top: .35rem; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 46rem) {
  .chero { min-height: 22rem; }
  .chero.tall { min-height: 26rem; }
  .chero::before {
    background:
      linear-gradient(to top, rgba(9, 14, 24, .93) 0%, rgba(9, 14, 24, .78) 38%, rgba(9, 14, 24, .34) 66%, rgba(9, 14, 24, .05) 100%);
  }
  .brand small { display: none; }
  .site-head { position: static; }
}

@media print {
  .site-nav, .helpbar, .progress, .listen-row, .chero .heroloop, .readdock { display: none !important; }
  /* ⚠ The reveal animation hides elements until they are scrolled to. A printed
     page never scrolls, so without this every card below the first screen prints
     BLANK — the words are in the file and invisible on the paper. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .statement { color: #111; background: #fff; }
  .statement .cbg, .statement::before { display: none !important; }
  blockquote.big { color: #111; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOTION AND PULSE

   A book about coming back to life should not read like a filing cabinet.
   Everything below adds energy — and every single piece of it is inert under
   `prefers-reduced-motion`, which the block at the top of this file enforces
   globally. Nothing here is required to read a word.
   ══════════════════════════════════════════════════════════════════════ */

/* ── a full-bleed line of hers, over moving footage ──────────────────── */
.statement {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 3.4rem 0; padding: clamp(3rem, 8vw, 6rem) 0;
  background: #0f1622; color: #fff;
  display: flex; align-items: center;
}
.statement .cbg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; border: 0;
}
.statement .heroloop { z-index: -1; }
.statement::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg,
    rgba(9, 14, 24, .92) 0%, rgba(9, 14, 24, .80) 38%,
    rgba(9, 14, 24, .46) 62%, rgba(9, 14, 24, .12) 88%, rgba(9, 14, 24, 0) 100%);
}
.statement .wrap { position: relative; z-index: 1; }
blockquote.big {
  margin: 0; padding: 0; border: 0; max-width: 30ch;
  font: 400 clamp(1.5rem, 4.2vw, 2.9rem)/1.22 var(--display);
  color: #fff; font-style: normal; text-wrap: balance;
}
blockquote.big p { margin: 0; }
blockquote.big em { font-style: italic; }
blockquote.big footer {
  margin-top: 1.1rem; font: 700 .68rem/1.4 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: #f0e4c4;
}

/* ── scroll reveal ───────────────────────────────────────────────────
   Applied by app.js only, and only when motion is welcome — so with JS off, or
   with reduced motion on, every card is simply visible. It never gates content
   on a script. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }

/* ── the whole-page listen ───────────────────────────────────────────── */
.listenall { margin: 1.6rem 0 0; }
.listenall .listen-all {
  background: linear-gradient(180deg, #f0d0a0, #d9b45e 30%, #a07020 64%, #7d5616);
  color: #17130a; border-color: #7d5616;
}

/* ── the affirmation card ────────────────────────────────────────────── */
.pullcard {
  border: 1px solid var(--line2); background: var(--card);
  padding: clamp(1.6rem, 5vw, 2.8rem); margin: 1.4rem 0 2.4rem;
  display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start;
}
.pullcard .line {
  font: 400 clamp(1.35rem, 3.4vw, 2.1rem)/1.28 var(--display);
  color: var(--navy); margin: 0; min-height: 2.6em; text-wrap: balance;
}
.pullcard .line.swap { animation: pullin .42s cubic-bezier(.2, .7, .3, 1); }
@keyframes pullin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pullcard .count { font: 400 .8rem/1.5 var(--sans); color: var(--muted); margin: 0; }

/* ── a card grid that lifts ──────────────────────────────────────────── */
a.plate, .bookcard { transition: border-color .14s, transform .14s, box-shadow .14s; }
a.plate:hover { box-shadow: 0 8px 26px rgba(28, 35, 51, .10); }
.plate .thumb, .plate .cover { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
a.plate:hover .thumb { transform: scale(1.035); }
.plate { overflow: hidden; }

/* ── the front-door film ─────────────────────────────────────────────── */
.filmstrip { margin: 2.6rem 0; }
.filmstrip video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f1622; border: 1px solid var(--line2); }

/* ── her thread notes ──────────────────────────────────────────────────────────
   One paragraph opens every part of Save the World, beginning "The thread —",
   saying how that part carries on from the last. It is the connective tissue of
   the whole book, so it leads the part page rather than sitting in the run of
   prose. Styled as a quiet aside, not a warning: it is her voice speaking across
   the parts, not an alert.

   The label is gold on the ivory ground, so it uses --goldink — plain --gold is a
   rule-and-mark colour and measures about 3.6:1 as text. */
.thread-note {
  border-left: 3px solid var(--gold);
  background: var(--panel);
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
}
.thread-note .thread-label {
  font: 700 .7rem/1 var(--sans, system-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goldink);
  margin: 0 0 .5rem;
}
.thread-note p:last-child { margin: 0; font-style: italic; }

/* Front and back cover side by side, where a back cover has shipped. Two of the four
   are held back (see src/render.mjs), so this must degrade to a single cover cleanly
   rather than leaving a hole in the grid. */
.covers { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-start; }
.covers .cover { flex: 1 1 12rem; max-width: 16rem; height: auto; }
@media (max-width: 34rem) { .covers { gap: .6rem; } .covers .cover { flex: 1 1 8rem; } }