/* ════════════════════════════════════════════════════════════════════════════
   כרך — HOME. The landing page and nothing else.

   Loaded ONLY by site/index.html, after kerekh.css and pages.css, and it
   overrides both for this one page. Nothing here may be imported anywhere
   else: the rest of the site is still the tobacco board (--field #D5C19C) and
   must stay that way.

   WHY A PAGE PALETTE. The approved "Kerekh Homepage (2)" design works in a
   lighter room than the board — #F3EDE2 paper, #14110C ink, one restrained
   amber, hairlines at 13% black, and two dark bands that are the reader's own
   night skin. Those are also the tokens the app's discovery layer runs on
   (DISCOVERY-IMPLEMENTATION R4), so the landing page and the product a visitor
   lands in now share one room instead of two. The tokens are overridden at
   :root rather than under a .home class so every component inherited from
   kerekh.css/pages.css — the header, the footer, the buttons, the volume
   covers, the join form — follows without being re-implemented here.

   LAWS THIS FILE KEEPS
   · data-theme="light" unconditionally (CLAUDE.md rule 4). There is no
     prefers-color-scheme block below. The two dark bands are dark BY DESIGN,
     at every OS setting, because they are showing the reader.
   · No keyframe anywhere lights a word, fills a bar, or breathes a dot
     (DESIGN-SPEC §10c #15, §6). The only motion is hover/focus transitions on
     things a finger or a cursor actually touched.
   · Sharp corners everywhere except the play control and the step dots, which
     are circles. One pill exists in the product (the reader's back-to-voice
     button) and it is not on this page.
   · Logical properties only; `tabular-nums` on every printed figure; arrows
     are ← glyphs, never rotated icons.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── the body face ───────────────────────────────────────────────────────────
   Noto Serif Hebrew, already sitting in site/fonts/ as the same he/lat split
   every other face on this site uses. It carries prose only — the display type
   stays Frank Ruhl Libre and the meta/UI stays Heebo, so this adds one voice,
   not a second system. */
@font-face{
  font-family:"Noto Serif Hebrew"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/NotoSerifHebrew-he.woff2) format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:"Noto Serif Hebrew"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/NotoSerifHebrew-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* the room */
  --pg:        #F3EDE2;
  --pg-alt:    #FBF7F0;
  --hair:      rgba(20,17,12,.13);
  --hair-2:    rgba(20,17,12,.28);
  /* the accent. Two values, not one: #A6641B is the DISPLAY amber (dots,
     rules, marks, type above ~20px); #985B17 is the same hue darkened for
     small text, where the lighter one drops under 4.5:1 on #F3EDE2. */
  --amber:     #A6641B;
  --amber-t:   #985B17;
  /* the reader's night, verbatim from the app's own .kr-night block */
  --void:      #191C24;
  --raise:     #22262F;
  --lit:       #F0E7D8;
  --settled:   rgba(240,231,216,.6);
  --ahead:     rgba(240,231,216,.3);
  --faint:     rgba(240,231,216,.56);
  --lamp:      #FFC978;
  --rule-d:    rgba(240,231,216,.15);

  --body-serif:"Noto Serif Hebrew","Frank Ruhl Libre","Arial Hebrew",Georgia,serif;

  /* ── the inherited system, re-pointed at this room ───────────────────── */
  --field:#F3EDE2; --field-2:#F3EDE2; --field-3:#FBF7F0;
  --ink:#14110C; --ink-soft:rgba(20,17,12,.74); --muted:rgba(20,17,12,.56);
  --line:rgba(20,17,12,.28); --line-soft:rgba(20,17,12,.13);
  --proof:#985B17; --proof-on-paper:#985B17;
  /* the volume covers keep their own paper stocks (pages.css sets a per-book
     --paper on .vol-item); only the ink on them and their cut edge move. */
  --ink-paper:#14110C; --ink-paper-soft:rgba(20,17,12,.74);
  --ink-paper-muted:rgba(20,17,12,.56); --ink-paper-faint:rgba(20,17,12,.5);
  --paper-line:rgba(20,17,12,.16);
  /* a sheet resting on paper, not a card floating over a board */
  --lift:0 1px 0 rgba(20,17,12,.08), 0 10px 22px -18px rgba(20,17,12,.45);
  --lift-2:0 1px 0 rgba(20,17,12,.10), 0 22px 40px -26px rgba(20,17,12,.55);
  /* the prototype's own content width, 1200px */
  --frame:75rem;
}

body.home{
  background:var(--pg); color:var(--ink);
  font-family:var(--body-serif); font-size:1.0625rem; line-height:1.75;
}

/* The board's trim edge is the OTHER room's device — two vertical hairlines
   down the page. This room has none. */
.home .frame{ padding-inline:clamp(1rem,5vw,2rem); background-image:none }

.home a.link{ border-block-end-color:var(--hair-2) }
.home a.link:hover{ border-block-end-color:var(--ink) }
.home :focus-visible{ outline:2px solid var(--amber); outline-offset:2px }

/* visually hidden — a real label for the search field, off-screen */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* ── shared type roles ───────────────────────────────────────────────────── */
.hm-eyebrow{ font-family:var(--sans); font-weight:500; font-size:.75rem;
  letter-spacing:.02em; color:var(--muted); line-height:1.5 }
.hm-sub{ margin-block-start:clamp(2.5rem,6vw,3.75rem) }

.hm-h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.75rem); line-height:1.14;
  letter-spacing:-.01em; color:var(--ink);
  margin-block-start:.7rem; max-width:22ch; text-wrap:balance;
}
.hm-band > .frame > .hm-h2{ max-width:26ch }

.hm-say,.hm-closer{ max-width:42ch; margin-block-start:1.1rem;
  font-size:1rem; line-height:1.8; color:var(--ink-soft) }
.hm-closer{ margin-block-start:2.5rem; font-size:.9375rem; max-width:48ch }

.hm-more{ margin-block-start:2rem }
.home .more{ font-family:var(--sans); font-size:.875rem; font-weight:500;
  color:var(--ink); border-block-end:1px solid var(--hair-2);
  padding-block-end:.15rem; transition:border-color var(--dur-fast) var(--ease) }
.home .more:hover{ border-block-end-color:var(--ink) }
.home .arrow{ color:var(--amber-t); display:inline-block;
  transition:transform var(--dur) var(--ease) }
.home .more:hover .arrow{ transform:translateX(-.22rem) }

/* the rule-bounded statement, in this room's amber */
.hm-statement{
  border-inline-start:2px solid var(--amber);
  padding-inline-start:1.15rem; margin-block-start:2.5rem;
  font-family:var(--serif); font-size:clamp(1.05rem,1.8vw,1.3rem);
  line-height:1.55; max-width:34ch;
}
.hm-ask{ margin-block-start:1.6rem; font-family:var(--sans);
  font-size:.8125rem; color:var(--muted); line-height:1.7; max-width:46ch }

/* ── bands ───────────────────────────────────────────────────────────────── */
.hm-band{ padding-block:clamp(3rem,7vw,5.5rem) }
.hm-alt{ background:var(--pg-alt); border-block:1px solid var(--hair) }
.hm-dark{ background:var(--void); color:var(--lit);
  padding-block:clamp(3.25rem,7vw,5.5rem) }
.hm-dark .hm-eyebrow{ color:var(--faint) }
.hm-dark .hm-h2{ color:var(--lit) }
.hm-listen{ background:var(--raise) }

/* ── header ──────────────────────────────────────────────────────────────── */
.home .site-head{ background:var(--pg); border-block-end:1px solid var(--hair) }
.home .site-head .frame{ min-height:72px; gap:clamp(.75rem,3vw,2rem) }
.home .site-nav{ margin-inline-end:auto; font-size:.75rem;
  letter-spacing:.02em; color:var(--ink-soft) }
.home .site-nav a::after{ background:var(--amber) }
.home .btn{ background:var(--ink); color:var(--pg);
  font-family:var(--sans); font-size:.8125rem; letter-spacing:0;
  padding:.8rem 1.35rem; min-height:46px }
.home .btn-2{ background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-2) }
.home .btn-2:hover{ box-shadow:inset 0 0 0 1px var(--ink); opacity:1 }
.home .head-cta{ flex:0 0 auto; min-height:40px; padding:.55rem 1.1rem }
@media (max-width:640px){
  .home .site-head .frame{ flex-wrap:wrap; padding-block:.75rem; row-gap:.5rem }
  .home .site-nav{ order:3; width:100%; margin-inline-end:0 }
  .home .site-nav a{ min-height:38px; padding-block:.4rem }
}

/* ════════════════════════════════════════════════════════════════════════════
   1 · HERO
   ════════════════════════════════════════════════════════════════════════════ */
.hm-hero{ padding-block:clamp(2.25rem,5vw,3.5rem) clamp(2.75rem,6vw,5rem) }
.hero-grid{ display:grid; gap:clamp(2.25rem,5vw,3.5rem); align-items:start }
@media (min-width:900px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(21rem,26rem); align-items:center }
  /* CENTRED, not stretched. Stretching the card to the words column's height
     put ~250px of dead ground INSIDE it, between the paragraph and the control
     — the exact defect the volume covers shipped for weeks (CLAUDE.md law 1),
     just on a darker stock. The card keeps the height its own paragraph needs
     and sits on the row's centre line, so the air is split above and below it
     and reads as placement rather than as a gap. Only visible by looking at
     the render; both versions are a one-word diff. */
}

/* THE LINE. Sized to the LONGEST LINE AT THE NARROWEST VIEWPORT (L-D6), not to
   the largest number that looked good: at 390 the column is 351px wide and the
   sentence is 25 characters, so the floor has to let it break after a word and
   never inside one. Verified in the browser at 320, 390 and 1440 — never
   estimated from the clamp. */
.hm-h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.35rem,5.6vw,4.5rem); line-height:1.03;
  letter-spacing:-.015em; color:var(--ink);
  max-width:16ch; text-wrap:balance; margin:0;
}
.hm-lead{
  max-width:44ch; margin-block-start:1.5rem;
  font-family:var(--body-serif); font-size:clamp(1rem,1.25vw,1.0625rem);
  line-height:1.85; color:var(--ink-soft);
}
.hm-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-block-start:1.9rem }
.hm-caption{ margin-block-start:1.6rem; padding-block-start:1.1rem;
  border-block-start:1px solid var(--hair);
  font-family:var(--sans); font-size:.75rem; color:var(--muted) }

/* the four questions, one per volume */
.hq{ list-style:none; margin:1.1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem }
.hq a{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.1875rem);
  line-height:1.45; color:var(--ink);
  border-block-end:1px solid var(--hair);
  padding-block-end:.12rem;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hq a:hover,.hq a:focus-visible{ color:var(--amber-t); border-block-end-color:var(--amber) }

/* ── THE DEMO — the dark reader card ─────────────────────────────────────────
   Same block that has been live since 2026-09-04 (baked paragraph, baked
   config, the tap handler at the bottom of index.html), restyled as the
   prototype's phone card: the reader's own night ground, the book's prose at
   reading size, and the spoken word lit in --lamp with the engine's own glow.
   NO @keyframes touches `w.lit` — the class is put there frame by frame by
   read-along-core.js against a real playhead, or it is not put there at all. */
.ca-demo{
  background:var(--void); color:var(--lit);
  padding:clamp(1.25rem,4vw,1.75rem);
  box-shadow:0 30px 70px -34px rgba(20,17,12,.55);
}
.ca-demo-eyebrow{
  font-family:var(--sans); font-size:.6875rem; color:var(--faint);
  letter-spacing:.02em; line-height:1.5; margin:0 0 1rem;
  padding-block-end:.9rem; border-block-end:1px solid var(--rule-d);
  font-variant-numeric:tabular-nums;
}
.ca-demo-text{
  font-family:var(--body-serif); font-weight:400;
  font-size:1.0625rem; line-height:1.95; color:var(--settled);
  margin:0;
}
/* the engine writes these three states; nothing else may. */
.ca-demo-text p{ margin:0 }
.ca-demo-text .is-ahead,.ca-demo-text p.is-ahead{ color:var(--ahead) }
.ca-demo-text .is-read,.ca-demo-text p.is-read{ color:var(--settled) }
.ca-demo-text w{ transition:color 90ms linear }
.ca-demo-text w.lit{
  color:var(--lamp); font-weight:500;
  text-shadow:0 0 18px rgba(255,201,120,.45), 0 0 34px rgba(255,201,120,.18);
}
.ca-demo-row{ display:flex; align-items:center; gap:1rem;
  margin-block-start:1.6rem; padding-block-start:1.3rem;
  border-block-start:1px solid var(--rule-d) }
.ca-play{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:54px; block-size:54px; flex:0 0 auto; border-radius:50%;
  background:var(--lamp); color:var(--void);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:box-shadow var(--dur-fast) var(--ease);
}
.ca-play svg{ width:20px; height:20px; fill:currentColor; margin-inline-start:2px }
.ca-play:hover,.ca-play:focus-visible{
  box-shadow:0 0 0 3px var(--void), 0 0 0 5px var(--lamp); outline:none }
.ca-demo-more{ font-family:var(--sans); font-size:.8125rem; color:var(--faint);
  border-block-end:1px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease) }
.ca-demo-more:hover,.ca-demo-more:focus-visible{ color:var(--lit); border-block-end-color:var(--rule-d) }
.ca-demo-more .arrow{ color:var(--lamp) }
.ca-demo-cite{ margin-block-start:1.1rem; padding-block-start:.6rem;
  border-block-start:1px solid var(--rule-d); color:var(--faint);
  font-family:var(--sans); font-size:.6875rem }
.hero-demo-note{ margin-block-start:.85rem; font-family:var(--sans);
  font-size:.6875rem; color:var(--muted); line-height:1.6 }

/* PRESENCE ON A DESK. The card was 384x338 in a 634px hero row — a small dark
   tile in a wide column, where the approved composition has a phone-sized
   object the eye lands on first. Wider column (26rem), 416x490 at 1440, and a
   type size that grows with it so the extra room goes into the WORDS.
   The air is NOT dumped in one place: the card is a flex column and the
   paragraph carries `margin-block:auto`, so the free space is split above and
   below it and the eyebrow stays on the top rule while the play control stays
   on the bottom one. Measured at 1440: a 416x490 card holding a 160px paragraph
   with 62px of air above it and 87px below, and ZERO tail gap under the control
   — air on both sides of the words, not a void under them. This is the defect
   the covers shipped for weeks (CLAUDE.md law 1), which is why the rule is
   written as "distribute" and not as "stretch".
   It also sits AFTER `.ca-demo-text`/`.ca-play` on purpose: a media query adds
   no specificity, and the first version of this block was written above them
   and silently did nothing (getComputedStyle said 17px, not 20px). */
@media (min-width:900px){
  .ca-demo{
    display:flex; flex-direction:column;
    min-block-size:clamp(26rem,34vw,32rem);
    padding:clamp(1.75rem,2.4vw,2.25rem);
  }
  .ca-demo-text{ margin-block:auto; font-size:1.25rem; line-height:2 }
  .ca-play{ inline-size:60px; block-size:60px }
}

/* ════════════════════════════════════════════════════════════════════════════
   2 · TONIGHT — the ladder and the six
   ════════════════════════════════════════════════════════════════════════════ */
.ladder{
  list-style:none; margin:clamp(2rem,5vw,3rem) 0 0;
  padding:0; padding-inline-start:1.5rem;
  position:relative;
}
/* The rail. It is an absolutely-positioned hairline against the ladder's own
   PADDING box, so `inset-inline-start:0` lands it exactly where the step dots
   are drawn (each dot sits at its step's content start minus that same 1.5rem).
   It was `calc(100% - 1px)` and rendered at the far end of a full-width list —
   a rule with nothing beside it. Caught by looking at the render, not the
   rule. It stops short at both ends so it reads as a spine, not a border. */
.ladder::before{
  content:""; position:absolute; inset-block:1.4rem 3rem;
  inset-inline-start:0; width:1px; background:var(--hair);
}
.ladder > li{ position:relative }
.lad-step{ padding-block:.5rem 1rem }
.lad-step::before{
  content:""; position:absolute; inset-block-start:1rem;
  inset-inline-start:-1.5rem; margin-inline-start:-4px;
  width:9px; height:9px; border-radius:50%;
  background:var(--pg); box-shadow:inset 0 0 0 1px var(--hair-2);
}
.lad-1::before{ background:var(--amber); box-shadow:0 0 0 4px rgba(166,100,27,.18) }
.lad-q{
  display:block; font-family:var(--serif); font-weight:400;
  line-height:1.1; letter-spacing:-.01em; color:var(--ink);
  text-wrap:balance; max-width:19ch;
  transition:color var(--dur-fast) var(--ease);
}
.lad-1 .lad-q{ font-size:clamp(1.6rem,3.9vw,3.1rem) }
.lad-2 .lad-q{ font-size:clamp(1.35rem,2.8vw,2.15rem); max-width:22ch }
.lad-3 .lad-q{ font-size:clamp(1.15rem,2.1vw,1.6rem); max-width:26ch }
/* the signature outline treatment, on the first and largest question only —
   with a solid fallback first, so a browser without text-stroke never renders
   an invisible headline. */
@supports (-webkit-text-stroke:1px #000){
  .lad-1 .lad-q{ color:transparent; -webkit-text-stroke:1.1px var(--ink) }
  .lad-1 .lad-q:hover,.lad-1 .lad-q:focus-visible{ -webkit-text-stroke-color:var(--amber) }
}
.lad-q:hover,.lad-q:focus-visible{ color:var(--amber-t) }
@supports (-webkit-text-stroke:1px #000){
  .lad-1 .lad-q:hover,.lad-1 .lad-q:focus-visible{ color:transparent }
}
.lad-meta{ margin-block-start:.65rem; font-family:var(--sans);
  font-size:.6875rem; color:var(--muted); font-variant-numeric:tabular-nums }
.lad-bridge{
  padding-block:.5rem 1.1rem; max-width:34ch;
  font-family:var(--sans); font-size:.8125rem; line-height:1.7;
  color:var(--amber-t);
}

/* the six, dealt across the four volumes */
.qgrid{ list-style:none; margin:1.5rem 0 0; padding:0;
  display:grid; gap:0 clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr)) }
.qgrid > li{ padding-block:1.15rem; border-block-start:1px solid var(--hair) }
.q-ask{ display:block; font-family:var(--serif);
  font-size:clamp(1rem,1.5vw,1.1875rem); line-height:1.4; color:var(--ink);
  transition:color var(--dur-fast) var(--ease) }
.q-ask:hover,.q-ask:focus-visible{ color:var(--amber-t) }
.q-meta{ margin-block-start:.5rem; font-family:var(--sans);
  font-size:.6875rem; color:var(--muted); font-variant-numeric:tabular-nums }

/* ════════════════════════════════════════════════════════════════════════════
   3 · WHAT IS A BOOK
   ════════════════════════════════════════════════════════════════════════════ */
.what-grid{ display:grid; gap:clamp(2.25rem,5vw,3.5rem); align-items:start }
@media (min-width:900px){
  .what-grid{ grid-template-columns:minmax(0,1.1fr) minmax(17rem,.9fr) }
}
.abc{ list-style:none; margin:clamp(1.75rem,4vw,2.5rem) 0 0; padding:0 }
.abc > li{ display:grid; grid-template-columns:1.6rem minmax(0,1fr);
  gap:0 1rem; padding-block:1.35rem; border-block-start:1px solid var(--hair) }
.abc-l{ font-family:var(--serif); font-size:1.375rem; line-height:1.2;
  color:var(--amber) }
.abc-t{ display:block; font-family:var(--serif); font-weight:700;
  font-size:1.0625rem; line-height:1.4; color:var(--ink) }
.abc p{ margin-block-start:.5rem; font-size:.9375rem; line-height:1.8;
  color:var(--ink-soft); max-width:44ch }

.toc-card{
  background:var(--pg); border:1px solid var(--hair);
  padding:clamp(1.15rem,3.5vw,1.6rem);
}
.toc-eyebrow{ font-family:var(--sans); font-size:.6875rem; color:var(--muted);
  padding-block-end:.9rem; border-block-end:1px solid var(--hair) }
.toc-title{ margin-block-start:.9rem; font-family:var(--serif);
  font-size:1.3125rem; line-height:1.25; color:var(--ink) }
.toc-sub{ margin-block-start:.3rem; font-family:var(--sans);
  font-size:.75rem; line-height:1.55; color:var(--muted) }
.toc-rows{ list-style:none; margin:1.2rem 0 0; padding:0 }
.toc-rows > li{
  display:grid; grid-template-columns:1.4rem minmax(0,1fr) auto;
  gap:.7rem; align-items:baseline;
  padding-block:.62rem; border-block-start:1px solid var(--hair);
}
.toc-n{ font-family:var(--record); font-size:.6875rem; color:var(--amber-t);
  font-variant-numeric:tabular-nums }
.toc-t{ font-family:var(--body-serif); font-size:.9375rem; line-height:1.45;
  color:var(--ink); transition:color var(--dur-fast) var(--ease) }
.toc-t:hover,.toc-t:focus-visible{ color:var(--amber-t) }
.toc-m{ font-family:var(--record); font-size:.6875rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.toc-more{ margin-block-start:1rem; padding-block-start:.9rem;
  border-block-start:1px solid var(--hair);
  font-family:var(--sans); font-size:.75rem }
.toc-more a{ color:var(--ink-soft) }
.toc-more a:hover{ color:var(--ink) }

/* ════════════════════════════════════════════════════════════════════════════
   4 · THE HONEST BLOCK
   ════════════════════════════════════════════════════════════════════════════ */
.honest-grid{ display:grid; gap:clamp(2.25rem,5vw,3.5rem); align-items:start }
@media (min-width:900px){
  .honest-grid{ grid-template-columns:minmax(0,1fr) minmax(17rem,23rem) }
}
.ca-ai{ max-width:44ch; margin-block-start:1.5rem; font-size:1rem;
  line-height:1.8; color:var(--ink-soft) }
.ca-ai b{ font-weight:700; color:var(--ink) }

/* one correction, opened up — a ruled ledger, not a card (L-D12) */
.case{ margin:1rem 0 0; padding:0; border-block-start:1px solid var(--hair-2) }
.case-head{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline;
  padding-block:1rem .8rem }
.case-tag{ font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.06em; color:var(--pg-alt); background:var(--amber-t);
  padding:.2rem .5rem }
.case-title{ font-family:var(--serif); font-size:1.0625rem; line-height:1.35;
  color:var(--ink); font-variant-numeric:tabular-nums }
.case-row{ display:grid; grid-template-columns:6.2rem minmax(0,1fr);
  gap:.35rem 1rem; padding-block:.75rem; border-block-start:1px solid var(--hair) }
.case-row dt{ font-family:var(--sans); font-size:.6875rem; color:var(--muted);
  line-height:1.6 }
.case-row dd{ margin:0; font-size:.9375rem; line-height:1.8; color:var(--ink-soft);
  font-variant-numeric:tabular-nums }
@media (max-width:560px){ .case-row{ grid-template-columns:1fr } }

/* THE LEDGER — the errata slip, as a ruled table of figures */
.ledger-card{
  background:var(--pg-alt); border:1px solid var(--hair-2);
  padding:clamp(1.1rem,3.5vw,1.5rem);
}
.hm-band .ledger-card{ background:var(--pg-alt) }
.ledger-head{ font-family:var(--sans); font-weight:500; font-size:.8125rem;
  color:var(--amber-t); line-height:1.5 }
.ledger-say{ margin-block-start:.7rem; font-size:.875rem; line-height:1.75;
  color:var(--ink-soft) }
.ledger{ list-style:none; margin:1.1rem 0 0; padding:1.1rem 0 0;
  border-block-start:1px solid var(--hair-2) }
.ledger li{ display:grid; grid-template-columns:3.2rem minmax(0,1fr);
  align-items:baseline; gap:.1rem .8rem; padding-block:.55rem }
.ledger li + li{ border-block-start:1px solid var(--hair) }
.ledger b{ font-family:var(--record); font-weight:600; font-size:1.35rem;
  line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums }
.ledger span{ font-family:var(--sans); font-size:.75rem; color:var(--muted);
  line-height:1.5 }
/* the accent means one thing here — refusal — so it goes on the figure that
   IS a refusal: what got cut. */
.ledger .cut b,.ledger .cut span{ color:var(--amber-t) }
.ledger-cap{ margin-block-start:1rem; padding-block-start:1rem;
  border-block-start:1px solid var(--hair-2);
  font-family:var(--sans); font-size:.75rem; line-height:1.7; color:var(--ink);
  font-variant-numeric:tabular-nums }
.ledger-go{ margin-block-start:1rem; font-family:var(--sans); font-size:.75rem }
.ledger-go .link{ color:var(--ink-soft) }

/* ════════════════════════════════════════════════════════════════════════════
   5 · READING — dark
   ════════════════════════════════════════════════════════════════════════════ */
.reader-grid{ display:grid; gap:clamp(2.25rem,5vw,4rem); align-items:start }
@media (min-width:900px){
  .reader-grid{ grid-template-columns:minmax(0,1fr) minmax(15rem,19rem) }
}
.rd-page{ max-width:36rem }
.rd-eyebrow{ font-family:var(--sans); font-size:.6875rem; color:var(--faint);
  font-variant-numeric:tabular-nums }
.rd-title{ margin-block-start:.8rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.25rem); line-height:1.15; color:var(--lit);
  text-wrap:balance }
.rd-prose{ margin-block-start:1.4rem; font-family:var(--body-serif);
  font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.95; color:var(--settled) }
.rd-prose + .rd-prose{ margin-block-start:1.1rem; color:var(--ahead) }
.rd-go{ margin-block-start:1.8rem; padding-block-start:1.2rem;
  border-block-start:1px solid var(--rule-d); font-family:var(--sans);
  font-size:.8125rem }
.rd-go a{ color:var(--lit); border-block-end:1px solid var(--rule-d);
  padding-block-end:.15rem; transition:border-color var(--dur-fast) var(--ease) }
.rd-go a:hover{ border-block-end-color:var(--lamp) }
.rd-go .arrow{ color:var(--lamp) }
.rd-h3{ margin-block-start:.7rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.25; color:var(--lit);
  text-wrap:balance }
.feat{ list-style:none; margin:1.5rem 0 0; padding:0 }
.feat li{ padding-block:.95rem; border-block-start:1px solid var(--rule-d);
  font-family:var(--sans); font-size:.875rem; line-height:1.7; color:var(--settled) }
.feat li:first-child{ color:var(--lit) }

/* ════════════════════════════════════════════════════════════════════════════
   6 · LISTEN — dark, one surface up
   ════════════════════════════════════════════════════════════════════════════ */
.hm-listen .statement{
  border-inline-start:2px solid var(--lamp); padding-inline-start:1.15rem;
  margin-block-start:1.75rem; font-family:var(--serif);
  font-size:clamp(1.05rem,1.9vw,1.375rem); line-height:1.5; color:var(--lit);
  max-width:34ch; font-variant-numeric:tabular-nums;
}
.listen-prose{ max-width:46ch; margin-block-start:1.75rem }
.listen-prose p{ font-size:.9375rem; line-height:1.85; color:var(--settled) }
.listen-prose p + p{ margin-block-start:1rem }
.listen-prose .soft{ color:var(--faint) }
.listen-caveat{ margin-block-start:1.2rem; padding-block-start:1rem;
  border-block-start:1px solid var(--rule-d);
  font-family:var(--sans); font-size:.8125rem; color:var(--lamp) }
/* THE RECORDINGS CARD. The prototype put a mock mini-player in this column —
   a book that does not exist, a chapter that does not exist, a progress bar at
   38%. What stands here instead is the same BAKED door list that used to be a
   button row under the prose: one row per volume that actually reports a
   recording, addressed at its own audio.page. Same content, one column over,
   and the 850x750 of empty ground this band held is gone. */
.listen-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:start }
@media (min-width:900px){
  /* the words first (the start side in RTL), the card on the far side — the
     same aside-on-the-far-side rhythm the What, Honest and Reading bands use */
  .listen-grid{ grid-template-columns:minmax(0,1fr) minmax(0,19rem) }
}
.listen-card{ border:1px solid var(--rule-d); padding:clamp(1.1rem,3.5vw,1.4rem) }
.listen-card-head{ font-family:var(--sans); font-size:.6875rem; color:var(--faint);
  padding-block-end:.9rem; border-block-end:1px solid var(--rule-d) }
.listen-doors{ display:flex; flex-direction:column; margin-block-start:0 }
/* the baked doors are .btn / .btn-2 elements; here they are ruled rows, which
   is what a list of recordings wants to be. */
.hm-dark .listen-card .btn,.hm-dark .listen-card .btn-2{
  background:transparent; box-shadow:none; color:var(--lit);
  justify-content:flex-start; text-align:start;
  padding:.95rem .1rem; min-height:0; font-size:.875rem;
  border-block-end:1px solid var(--rule-d);
  transition:color var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease);
}
.hm-dark .listen-card .btn:first-child{ color:var(--lamp) }
.hm-dark .listen-card .btn:hover,.hm-dark .listen-card .btn-2:hover{
  color:var(--lamp); opacity:1; box-shadow:none; padding-inline-start:.4rem }
.hm-dark .listen-card .btn-2:last-child{ border-block-end:0 }
.hm-dark .btn{ background:var(--lamp); color:var(--void) }
.hm-dark .btn-2{ background:transparent; color:var(--lit);
  box-shadow:inset 0 0 0 1px var(--rule-d) }
.hm-dark .btn-2:hover{ box-shadow:inset 0 0 0 1px var(--lit); opacity:1 }
.hm-dark :focus-visible{ outline-color:var(--lamp) }

/* ════════════════════════════════════════════════════════════════════════════
   7 · EXPLORE — the chain
   ════════════════════════════════════════════════════════════════════════════ */
/* The prototype fixed this at five equal columns with no collapse rule, which
   crowds and overflows on a phone. auto-fit with a real minimum is the same
   composition at desktop and a readable stack at 390. */
.chain{ list-style:none; margin:clamp(2rem,5vw,3rem) 0 0; padding:0;
  display:grid; gap:clamp(1.5rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)) }
.chain-step{ padding-block-start:1.1rem; border-block-start:1px solid var(--hair-2) }
.chain-dot{ display:block; width:9px; height:9px; border-radius:50%;
  background:var(--amber); margin-block-end:.9rem }
/* Every dot is the same. The prototype filled the first two and hollowed the
   last three to mean "you have read these" — this page knows nothing about
   what anyone has read, and a marker that looks like measured state and is not
   one is the defect this whole build exists to avoid (§10b). */
.chain-idea{ display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.4rem); line-height:1.25; color:var(--ink);
  transition:color var(--dur-fast) var(--ease) }
.chain-idea:hover,.chain-idea:focus-visible{ color:var(--amber-t) }
.chain-meta{ margin-block-start:.5rem; font-family:var(--sans);
  font-size:.6875rem; color:var(--muted); font-variant-numeric:tabular-nums }
.chain-line{ margin-block-start:.8rem; font-size:.9375rem; line-height:1.7;
  color:var(--ink-soft) }
.chain-bridge{ margin-block-start:.9rem; padding-block-start:.8rem;
  border-block-start:1px solid var(--hair);
  font-family:var(--sans); font-size:.75rem; line-height:1.7; color:var(--amber-t) }
.chain-more{ margin-block-start:clamp(2rem,4vw,2.75rem);
  font-family:var(--sans); font-size:.8125rem; color:var(--muted); line-height:1.9 }
.chain-more .link{ color:var(--ink) }

/* ════════════════════════════════════════════════════════════════════════════
   8 · THE LIBRARY — the real shelf
   ════════════════════════════════════════════════════════════════════════════ */
.home .vols{ margin-block-start:clamp(2rem,5vw,3rem) }
.home [data-shelf-proof]{ margin-block-start:1.2rem; padding-block-start:1rem;
  border-block-start:1px solid var(--hair); font-family:var(--record);
  font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums }
.home .vol-title{ font-family:var(--serif) }
.home .vol-note{ font-family:var(--sans); color:var(--muted) }

/* ════════════════════════════════════════════════════════════════════════════
   9 · THE OFFER
   ════════════════════════════════════════════════════════════════════════════ */
.join-prose{ max-width:44ch; margin-block-start:1.25rem }
.join-prose p{ font-size:1rem; line-height:1.8; color:var(--ink-soft) }
.join-prose p + p{ margin-block-start:1rem }
.home .joinbox{ max-width:40rem }
.home .joinbox label{ font-family:var(--sans); font-size:.75rem; color:var(--muted) }
.home .ruled{ font-family:var(--body-serif); border-block-end-color:var(--hair-2) }
.home .ruled:focus{ border-block-end-color:var(--ink); outline-color:var(--amber) }
.home .ask-help{ font-family:var(--sans); font-size:.75rem; color:var(--muted) }
.home .opts .box{ box-shadow:inset 0 0 0 1.5px var(--hair-2) }
.home .opts input:checked + .box{ box-shadow:inset 0 0 0 7px var(--amber) }

/* ════════════════════════════════════════════════════════════════════════════
   10 · THE LAST DOOR — dark
   ════════════════════════════════════════════════════════════════════════════ */
/* Centred, as the approved composition is — and as the fix for the 850px of
   empty ground the left of this band held when it was start-aligned. */
.hm-start{ padding-block:clamp(3.5rem,8vw,6.5rem); text-align:center }
/* the register mark, static. The prototype breathed it on a 5.5s loop; a mark
   that pulses forever is motion asserting that something is happening. */
.start-reg{ display:block; width:9px; height:9px; border-radius:50%;
  margin-inline:auto;
  background:var(--lamp); box-shadow:0 0 26px 8px rgba(255,201,120,.24) }
/* THE OUTLINE HEADLINE. Sized to the longest line at 390 like the H1, with a
   solid fallback declared FIRST so a browser with no text-stroke still paints
   the words. */
.cta-h{
  margin-block-start:1.6rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:1.02;
  letter-spacing:-.015em; color:var(--lit); max-width:14ch; margin-inline:auto;
}
@supports (-webkit-text-stroke:1px #000){
  .cta-h{ color:transparent; -webkit-text-stroke:1.3px var(--lit) }
}
.cta-search{ display:flex; align-items:flex-end; gap:.9rem;
  max-width:32rem; margin-block-start:2rem; margin-inline:auto }
.cta-search .ruled{ flex:1 1 auto; color:var(--lit);
  border-block-end:1px solid rgba(240,231,216,.35);
  font-family:var(--body-serif); font-size:1.0625rem }
.cta-search .ruled::placeholder{ color:var(--ahead) }
.cta-search .ruled:hover{ border-block-end-color:rgba(240,231,216,.6) }
.cta-search .ruled:focus{ border-block-end-color:var(--lamp); outline-color:var(--lamp) }
.cta-go{
  flex:0 0 auto; inline-size:46px; block-size:46px; border:0; border-radius:50%;
  background:transparent; color:var(--lit); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(240,231,216,.35);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cta-go .arrow{ color:inherit }
.cta-go:hover,.cta-go:focus-visible{ background:var(--lamp); color:var(--void);
  box-shadow:inset 0 0 0 1px var(--lamp) }

/* the five real topics */
.chips{ list-style:none; margin:2.25rem 0 0; padding:0;
  display:grid; gap:0 clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr)) }
.chips > li{ padding-block:.9rem; border-block-start:1px solid var(--rule-d) }
.chips a{ font-family:var(--serif); font-size:1.125rem; color:var(--lit);
  transition:color var(--dur-fast) var(--ease) }
.chips a:hover,.chips a:focus-visible{ color:var(--lamp) }
.chip-blurb{ display:block; margin-block-start:.3rem; font-family:var(--sans);
  font-size:.6875rem; color:var(--faint); line-height:1.6 }
.cta-foot{ display:flex; align-items:center; justify-content:center;
  gap:1.1rem; flex-wrap:wrap; margin-block-start:2.5rem }
.cta-free{ font-family:var(--sans); font-size:.75rem; color:var(--faint) }

/* ── footer — the dark band continues through it ─────────────────────────── */
.home .site-foot{ background:var(--void); color:var(--lit); text-align:start;
  margin-block-start:0; border-block-start:1px solid var(--rule-d) }
.home .site-foot .eyebrow{ color:var(--faint) }
.home .site-foot p{ color:var(--settled); font-family:var(--sans);
  font-size:.75rem; line-height:1.8 }
.home .site-foot p a{ color:var(--lit); border-block-end-color:var(--rule-d) }
.home .site-foot p a:hover{ border-block-end-color:var(--lamp) }
.home .foot-nav a{ color:var(--settled); font-family:var(--sans); font-size:.75rem }
.home .foot-nav a:hover{ color:var(--lamp) }
.home .foot-bottom{ border-block-start:1px solid var(--rule-d) }
.home .foot-bottom .tag{ color:var(--faint); font-family:var(--body-serif) }
.home .foot-bottom .foot-end{ color:var(--faint) }
.home .foot-bottom .wordmark .rule{ background:var(--lamp) }
.home .site-foot :focus-visible{ outline-color:var(--lamp) }

/* ── the one thing motion policy still owns ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .home *{ transition-duration:0ms !important; animation:none !important }
}