/* TOCKO storefront — AUTHORED BY HAND. build_site.py never rewrites this file.
   ==========================================================================

   TWO GROUNDS, and the switch means something. PAPER is the linen stock the
   paperback is actually printed on, and it is where the books are. INK is the
   Under — the boiler-dark below the ground line — and it is where the argument
   is: the claim, the engine, the ladder, the footer. Nothing is on ink for
   contrast alone.

   THE ACCENT IS MEASURED, NOT CHOSEN. Brass (#B08D3A) is the metal every
   tapper on all four jackets is struck from. Lemon (#E8C23A) is the one
   saturated note in the whole property — ART-DIRECTION §3 says it appears once
   per image or not at all, so here it is the buy action and nothing else. The
   reserved door green (#3E5B4A) is not in the palette and is handed to exactly
   one thing: Book Three's spine strip.

   THE PALETTE IS SET AT THE FLOOR, NOT BY EYE. Brass and leaf are picture
   colours and do not clear 4.5:1 at label size on linen, so text gets
   --brass-ink / --brass-hi / --leaf-ink: the same hues, moved until they pass.
   site_audit.py re-checks every pair on every run.

   THREE TYPE ROLES. Bricolage Grotesque carries the display voice, used heavy
   and tight. Newsreader is the reading face and appears only where the page is
   showing you what the printed book looks like. DM Mono is the utility face and
   carries every figure, with tabular numerals so prices and counts line up.   */

.sound-invitation{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.sound-invitation h2{margin-top:1rem}.sound-invitation .btn{margin-top:1rem}
.sound-invitation-art{position:relative;display:block;text-decoration:none;transform:rotate(2deg);border:1px solid var(--paper-edge);border-radius:10px;overflow:hidden;box-shadow:9px 10px 0 #b08d3a35;background:var(--paper)}
.sound-invitation-art img{width:100%;height:auto;display:block}
.sound-invitation-art>span{position:absolute;right:18px;bottom:18px;background:var(--ink);color:var(--brass-hi);padding:8px 18px;border-radius:30px;font-size:1.3rem;font-weight:800}
@media(max-width:700px){.sound-invitation{grid-template-columns:1fr;gap:2rem}.sound-invitation-art{max-width:500px}}

.book-contents{padding-top:70px;scroll-margin-top:40px}.book-stories{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:28px 0 0;padding:0}
.book-stories>li{min-width:0}.book-story{display:flex;flex-direction:column;min-height:100%;border:1px solid var(--paper-edge);border-radius:5px;text-decoration:none!important;background:var(--paper-card);overflow:hidden;color:var(--print);transition:box-shadow .2s,transform .2s}
.book-story:hover{transform:translateY(-3px);box-shadow:5px 7px 0 #b08d3a30}.book-story:focus-visible{outline:3px solid var(--brass-ink);outline-offset:5px}
.book-story-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:var(--paper)}
.book-story-copy{padding:19px;display:flex;flex-direction:column;flex:1}.book-story-copy .mono{font-size:.8rem;letter-spacing:.04em;color:var(--brass-ink)}
.book-story h3{font-size:1.6rem;margin:10px 0;line-height:1.12}.book-story p{font-size:1rem;line-height:1.6;margin:0 0 20px}.book-story-link{margin-top:auto;font-size:.88rem;font-weight:700;padding-top:8px;text-decoration:underline;text-underline-offset:4px}.book-stories-intro{font-size:1rem;color:var(--print-dim);margin-top:14px}
.story-illustration{display:block;width:100%;height:auto;border:1px solid var(--paper-edge);border-radius:5px;margin:26px 0 36px;background:var(--paper);object-fit:contain}
.story-preview-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin:32px 0}.story-preview-heading h1{margin:22px 0 0;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02}.story-preview-heading .lead{font-size:1.2rem;line-height:1.65;margin:0}
.story-preview-body{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}.story-preview-body .mono{font-size:.82rem;letter-spacing:.07em}.story-preview-body h2{font-size:1.8rem;line-height:1.25;margin:13px 0 24px}.story-preview-note{margin:24px 0;color:var(--print-dim);font-size:1rem;line-height:1.7}
.story-listen{display:flex;align-items:center;gap:20px;margin:28px 0}.story-listen>img{width:75px;height:75px;object-fit:contain;flex-shrink:0}.story-listen p{font-size:1rem;margin:8px 0 0;line-height:1.55}
.story-refrain{margin:30px 0;border-left:3px solid var(--brass);padding:5px 0 5px 22px}.story-refrain p{font-family:var(--read);font-size:1.5rem;line-height:1.45;margin:10px 0;font-style:italic}
.story-book-box{display:flex;align-items:flex-start;gap:25px;padding:26px;border:1px solid var(--paper-edge);background:var(--paper-card);border-radius:5px;align-self:start}.story-book-box>img{width:125px;height:auto}.story-book-box h2{font-size:1.5rem;margin:12px 0}.story-book-box p{font-size:1rem;line-height:1.6}.story-book-box .buybox{margin:20px 0}.story-volume-link{font-size:.9rem;text-underline-offset:4px}
.story-neighbours{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;padding-top:28px;border-top:1px solid var(--paper-edge)}.story-neighbours a{text-decoration:none;display:flex;flex-direction:column;gap:10px;font-size:1rem;padding:12px 0}.story-neighbours a:last-child{text-align:right}.story-neighbours strong{text-decoration:underline;text-underline-offset:5px}.story-neighbours .mono{font-size:.78rem;color:var(--print-mute)}
@media(max-width:1000px){.story-preview-body{grid-template-columns:1fr;gap:32px}.story-book-box{max-width:620px}.book-stories{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.book-story-copy{padding:15px}}
@media(max-width:650px){.book-stories{grid-template-columns:1fr}.book-story-copy{padding:22px}.story-preview-heading{grid-template-columns:1fr;gap:22px}.story-preview-heading .lead{font-size:1.05rem}.story-book-box{gap:18px;padding:20px}.story-book-box>img{width:90px}.story-book-box h2{font-size:1.3rem}.story-preview-body h2{font-size:1.6rem}.story-neighbours{gap:20px}.story-neighbours strong{font-size:.93rem}}
@media(prefers-reduced-motion:reduce){.book-story{transition:none}.book-story:hover{transform:none}}

:root {
  /* ---- the materials. ART-DIRECTION §3, unchanged. -------------------- */
  --brass: #B08D3A;
  --brick: #9C5B45;
  --linen: #F0E7D6;
  --zinc:  #8A9299;
  --iron:  #241E1C;
  --lemon: #E8C23A;
  --leaf:  #6B7A4A;
  --door:  #3E5B4A;          /* reserved: Book Three, and nowhere else */
  /* Lettering struck into brass or printed on lemon. Dark enough to clear
     4.5:1 on both, which plain --iron does not on lemon at label size. */
  --strike: #2B2113;

  /* ---- the paper ground ---------------------------------------------- */
  --paper:      #F6F0E2;
  --paper-sink: #EFE6D3;
  --paper-card: #FCF8EF;
  --paper-edge: #8E7C4E;     /* borders of things you click or type in, 3.6:1 */
  --print:      #241E1C;     /* 14.5:1 */
  --print-dim:  #5B4E47;     /* 7.0:1  */
  --print-mute: #6F6058;     /* 5.3:1  */

  /* ---- the ink ground ------------------------------------------------- */
  --ink:       #1A1513;
  --ink-raise: #221C19;
  --stone:     #F0E7D6;      /* 14.7:1 */
  --stone-dim: #C0B2A2;      /* 8.7:1  */

  /* ---- picture colours, moved until they read as text ----------------- */
  --brass-ink: #7A5E17;      /* brass on paper, 5.4:1 */
  --brass-hi:  #C9A85A;      /* brass on ink,   8.0:1 */
  --leaf-ink:  #4F5C33;      /* leaf on paper,  6.4:1 */

  /* ---- the live surface. Components read these and only these, so a
          section changes ground by redefining tokens, never by restyling.  */
  --bg: var(--paper);
  --bg-2: var(--paper-sink);
  --card: var(--paper-card);
  --fg: var(--print);
  --fg-dim: var(--print-dim);
  --fg-mute: var(--print-mute);
  --accent: var(--brass-ink);
  --edge: var(--paper-edge);
  --line: rgb(36 30 28 / 0.17);
  --line-2: rgb(36 30 28 / 0.09);
  --lift: 0 1px 0 rgb(36 30 28 / 0.13), 0 12px 28px -22px rgb(36 30 28 / 0.6);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --body: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --read: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --data: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --pad: clamp(1.125rem, 4.4vw, 3.25rem);
  --band: clamp(3.25rem, 8vw, 6.5rem);
  --radius: 3px;
}

/* The ink ground redefines tokens and paints itself. It never restyles a
   component and never targets a bare element: `.on-paper a { color }` outranks
   every class it contains and painted a masthead near-black once already. */
.ink {
  --bg: var(--ink);
  --bg-2: var(--ink-raise);
  --card: var(--ink-raise);
  --fg: var(--stone);
  --fg-dim: var(--stone-dim);
  --fg-mute: var(--stone-dim);
  --accent: var(--brass-hi);
  --edge: #6E5F44;
  --line: rgb(240 231 214 / 0.20);
  --line-2: rgb(240 231 214 / 0.10);
  --lift: 0 1px 0 rgb(0 0 0 / 0.5), 0 14px 32px -22px rgb(0 0 0 / 0.9);
  background: var(--bg);
  color: var(--fg);
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

/* height:auto or the width/height attributes defeat aspect-ratio. The
   attributes stay: they are what reserves the space and stops layout shift. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* No text-rendering: optimizeLegibility. It forces kerning and ligature
     lookups over the whole document and stalls visibly at length. */
}

/* Audio rule R9 forbids digital silence, because a real room is never nothing.
   A printed surface is the same claim, so the ground is never a flat fill. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

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

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--iron); color: var(--linen); padding: 12px 18px;
  font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ----------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.028em;
  line-height: 0.96;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 60;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.7rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.9vw, 3rem); letter-spacing: -0.032em; }
h3 { font-size: clamp(1.18rem, 1rem + 0.8vw, 1.5rem); letter-spacing: -0.022em; line-height: 1.08; }
h4 { font-size: 1.02rem; letter-spacing: -0.018em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.mono, .data {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.lead {
  font-size: clamp(1.06rem, 1rem + 0.45vw, 1.26rem);
  line-height: 1.52;
  color: var(--fg-dim);
  text-wrap: pretty;
}
.dim { color: var(--fg-mute); }
.tight { max-width: 62ch; }
.measure { max-width: 66ch; }

/* Every door and every meter in a shared building carries a small engraved
   plate telling you whose it is. That is what a section label is here. */
.plate {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--data); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--strike);
  background: linear-gradient(178deg, #DCBA6A, var(--brass));
  padding: 0.52em 0.9em 0.5em; border-radius: 2px;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.34);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5),
              inset 0 -1px 0 rgb(0 0 0 / 0.3), 0 1px 2px rgb(36 30 28 / 0.34);
}
.plate::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2DFA8, #7C5C1B);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.35);
}

/* The dividers are floor slabs, drawn the way the cutaway draws a floor. */
.slab { height: 9px; background: var(--iron); position: relative; z-index: 2; }
.slab::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: linear-gradient(180deg, rgb(36 30 28 / 0.2), transparent);
}

/* ---------------------------------------------------------------- shell */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.band { padding-block: var(--band); }
.band-tint { background: var(--bg-2); }
.head-block { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(26px, 4vw, 44px); }
.head-block .plate { align-self: flex-start; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.4em 0.7em; align-items: baseline;
  margin: 0 0 22px;
  font-family: var(--data); font-size: 0.67rem; letter-spacing: 0.11em;
  text-transform: uppercase;
}
.crumbs a { color: var(--fg-dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs span { color: var(--fg-mute); }

.pagehead { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(26px, 4vw, 42px); }
.pagehead .plate { align-self: flex-start; }
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { max-width: 60ch; }

/* minmax(0, 1fr): a bare 1fr floors at its content's min-content width, so one
   wide table in a column pushes the whole page sideways on a phone. */
.two-col {
  display: grid; gap: clamp(26px, 4vw, 58px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.rail-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 26px); background: var(--card);
  position: sticky; top: 74px;
}
@media (max-width: 900px) { .rail-box { position: static; } }
.rail-box h2 { font-size: 1.28rem; letter-spacing: -0.024em; margin-bottom: 10px; }

/* -------------------------------------------------------------- masthead */

.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(9px);
  border-bottom: 1px solid rgb(36 30 28 / 0.17);
  color: var(--print);
}
.top-in {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 24px);
  max-width: var(--wrap); margin-inline: auto; padding: 11px var(--pad);
}
.wordmark {
  font-family: var(--display); font-weight: 800; font-size: 1.2rem;
  letter-spacing: 0.16em; text-decoration: none; margin-right: auto;
  color: var(--print);
}
.top nav { display: flex; gap: clamp(10px, 1.7vw, 22px); }
.top nav a {
  font-family: var(--data); font-size: 0.69rem; letter-spacing: 0.11em;
  text-transform: uppercase; text-decoration: none; color: var(--print-dim);
  white-space: nowrap;
}
.top nav a:hover { color: var(--print); }
.top nav a[aria-current="page"] { color: var(--print); text-decoration: underline;
  text-decoration-color: var(--brass); text-underline-offset: 4px; }
@media (max-width: 1100px) { .top nav { flex-wrap: wrap; } }

.chip-btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  border: 1px solid rgb(36 30 28 / 0.2); background: transparent; color: var(--print);
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 0.52em 0.8em; border-radius: 2px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.chip-btn:hover { border-color: var(--paper-edge); }
.chip-btn[data-empty="true"] { color: var(--print-mute); }
.chip-btn[data-empty="false"] { border-color: var(--print); font-weight: 500; }

/* -------------------------------------------------------------- buttons
   Lemon is the only saturated note in the world and it stops working the
   moment it is common, so it is the buy action and nothing else. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--body); font-weight: 600; font-size: 0.94rem;
  letter-spacing: -0.01em; padding: 0.78em 1.3em; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn-buy {
  background: var(--lemon); color: var(--strike); border-color: #B99A21;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 0 rgb(36 30 28 / 0.25);
}
.btn-buy:hover { transform: translateY(-1px); }
.btn-buy:active { transform: translateY(0); }
.btn-line { border-color: currentColor; color: var(--fg); background: transparent; }
.btn-line:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { border-color: var(--line); color: var(--fg-dim); background: transparent; font-weight: 500; }
.btn-ghost:hover { border-color: var(--edge); color: var(--fg); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[data-state="added"] { background: var(--leaf-ink); border-color: var(--leaf-ink); color: var(--linen); }

.step {
  display: inline-flex; align-items: center; border: 1px solid var(--edge);
  border-radius: var(--radius); overflow: hidden;
}
.step button {
  width: 34px; height: 38px; border: 0; background: transparent; color: var(--fg);
  cursor: pointer; font-family: var(--data); font-size: 0.95rem; line-height: 1;
}
.step button:hover { background: var(--line-2); }
.step span, .step input {
  min-width: 2.6ch; text-align: center; font-family: var(--data); font-size: 0.86rem;
  font-variant-numeric: tabular-nums; border: 0; background: transparent;
  color: var(--fg); padding: 0; width: 3ch;
}

select, input[type="text"], input[type="email"] {
  font: inherit; font-size: 0.94rem; color: var(--fg); background: var(--card);
  border: 1px solid var(--edge); border-radius: var(--radius); padding: 0.6em 0.7em;
  max-width: 100%;
}

/* ------------------------------------------------------ the board, tapping
   The hero is the board in the Hall, and it taps back. Two taps inside 1.3s,
   then 1.8 seconds of room tone, then the tock. One tap does nothing: that is
   the rule, not a bug. */

.hero { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.hero-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(28px, 5vw, 58px) var(--pad) clamp(38px, 6vw, 70px);
  display: grid; gap: clamp(28px, 4.5vw, 56px);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
}
@media (max-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }

.board {
  position: relative; background: var(--paper-card);
  border: 2px solid var(--iron); border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 26px); min-height: clamp(360px, 46vh, 440px);
  display: flex; flex-direction: column; cursor: pointer; box-shadow: var(--lift);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rail { position: relative; height: 42px; flex: none; margin: 2px 0 4px; }
.rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 7px;
  border-radius: 2px; background: linear-gradient(180deg, #D6B25E, #8E6B22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 2px 4px -2px rgb(36 30 28 / 0.6);
}
/* Hooks and hung tappers share one eight-column grid, so a tapper lands ON a
   hook rather than near one. */
.hooks, .hung {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  justify-items: center; padding-inline: 5%;
}
.hooks { position: absolute; left: 0; right: 0; top: 19px; }
.hooks i {
  width: 9px; height: 13px; border: 2px solid var(--brass); border-top: 0;
  border-radius: 0 0 9px 9px; opacity: 0.8;
}
.hung { position: relative; flex: none; align-content: start; row-gap: 10px; }
.tapper {
  width: 100%; max-width: 58px; transform-origin: 50% 6%;
  animation: swing 0.95s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.tapper.rest { animation: none; }
@keyframes swing {
  0%   { transform: translateY(-26px) rotate(-19deg); opacity: 0; }
  35%  { opacity: 1; }
  55%  { transform: rotate(11deg); }
  78%  { transform: rotate(-5deg); }
  100% { transform: rotate(0); opacity: 1; }
}
/* In flow, not absolute: the eight tappers hang from the rail and the words
   sit in the space left under them. Absolutely positioning this over the whole
   board put "Two taps." straight through the row of discs. */
.tap-face {
  flex: 1; display: grid; place-content: center; align-content: center;
  text-align: center; padding: 18px 24px; pointer-events: none;
}
.tap-word {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.4rem); line-height: 0.88;
  letter-spacing: -0.045em; margin: 0; color: var(--print);
  font-variation-settings: "wdth" 90, "opsz" 96;
}
.tap-sub { margin: 0.85em auto 0; color: var(--print-dim); font-size: 0.97rem; max-width: 24ch; }
.again {
  flex: none; text-align: center; margin: 0; color: var(--print-dim);
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
}
/* the 1.8-second hole, with the boiler breathing under it */
.board[data-state="wait"] .tap-face { animation: breathe 1.8s ease-in-out forwards; }
@keyframes breathe { 0% { opacity: 1; } 22% { opacity: 0.14; } 100% { opacity: 0.08; } }
.board[data-state="wait"] { border-color: var(--print-mute); }
.board[data-state="answer"] .tap-face { opacity: 0; }
.ping {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid var(--brass); pointer-events: none;
  animation: ping 0.85s ease-out forwards;
}
@keyframes ping { to { transform: scale(7); opacity: 0; } }
.tock {
  position: absolute; inset: 0; display: grid; place-content: center;
  pointer-events: none; font-family: var(--display); font-weight: 800;
  letter-spacing: -0.05em; color: var(--print);
  font-size: clamp(2.1rem, 1rem + 5.4vw, 4.2rem);
  font-variation-settings: "wdth" 78, "opsz" 96;
  animation: tock 1.5s ease-out forwards;
}
@keyframes tock {
  0%   { opacity: 0; transform: scale(0.92); }
  14%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.02); }
}
.board-foot {
  flex: none; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  justify-content: space-between; border-top: 1px solid rgb(36 30 28 / 0.17);
  margin-top: 14px; padding-top: 12px;
}
.caught {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--print-dim); font-variant-numeric: tabular-nums;
}
.caught b { color: var(--print); font-weight: 500; }
.caught-name { font-family: var(--body); font-size: 0.9rem; text-transform: none; letter-spacing: 0; }

.pitch h1 { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 4.2rem); line-height: 0.92;
  font-variation-settings: "wdth" 92, "opsz" 96; max-width: none; }
.pitch .lead { margin-top: 0.72em; max-width: 34ch; }
.stem {
  font-family: var(--read); font-style: italic;
  font-size: clamp(1.02rem, 0.94rem + 0.34vw, 1.2rem);
  color: var(--fg-mute); margin: 0 0 0.7em;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.facts {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line); font-family: var(--data); font-size: 0.69rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.facts b { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------- the grid: the signature
   28 facts across, 8 rule-types down. 224 cells, 52 of them spent. It is the
   series' whole argument — the engine cannot run out — and the shop's index at
   the same time, because every lit cell is a story you can buy. It is the only
   bold thing on the site. */

.grid-wrap { overflow-x: auto; padding-bottom: 8px; }
.grid {
  display: grid; gap: 3px; min-width: 720px;
  grid-template-columns: 7.5rem repeat(var(--facts, 28), minmax(0, 1fr));
}
.grid .corner { grid-column: 1; }
.grid .rule-label {
  grid-column: 1; font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-dim); align-self: center;
  padding-right: 10px; text-align: right; line-height: 1.25;
}
.grid .fact-label {
  font-family: var(--data); font-size: 0.52rem; color: var(--fg-mute);
  writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);
  height: 3.1rem; justify-self: center; letter-spacing: 0.04em;
}
.cell {
  aspect-ratio: 1; border-radius: 1px; border: 0; padding: 0;
  background: var(--line-2); position: relative;
}
.cell.free { background: rgb(240 231 214 / 0.06); box-shadow: inset 0 0 0 1px var(--line-2); }
.cell.used {
  background: var(--brass); cursor: pointer;
  animation: light 0.5s ease backwards;
}
.cell.used:hover, .cell.used:focus-visible { background: var(--lemon); }
@keyframes light { from { opacity: 0; transform: scale(0.6); } }
.grid-legend {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px;
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.grid-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 1px;
  margin-right: 0.5em; vertical-align: -1px; }
.grid-read {
  min-height: 4.6em; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line); max-width: 62ch;
}
.grid-read .k {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent);
}
.grid-read b { display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.24rem; letter-spacing: -0.026em; margin: 3px 0 4px; }
.grid-read i { font-family: var(--read); color: var(--fg-dim); font-size: 1.02rem; }

/* ------------------------------------------------------------ book cards */

.books { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 22px); }
.card {
  display: grid; grid-template-columns: clamp(118px, 17vw, 190px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px); align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(16px, 2.6vw, 30px); background: var(--ground, var(--card));
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--spine, var(--brass));
}
@media (max-width: 640px) { .card { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.card-cover { border-radius: 2px; width: 100%;
  box-shadow: 0 2px 0 rgb(36 30 28 / 0.16), 0 16px 30px -22px rgb(36 30 28 / 0.8); }
.card h3 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing: -0.03em; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--brass);
  text-underline-offset: 5px; }
.card-tag { font-family: var(--read); font-style: italic; font-size: 1.05rem;
  color: var(--fg-dim); margin: 0.55em 0 0; max-width: 48ch; }
.card-spec {
  display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 16px;
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-mute); font-variant-numeric: tabular-nums;
}
.card .plate { margin-bottom: 12px; }
.buybox {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.buybox .btn-buy { margin-left: auto; }
@media (max-width: 560px) { .buybox .btn-buy { width: 100%; margin-left: 0; } }
.price {
  font-family: var(--display); font-weight: 800; font-size: 1.55rem;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 88, "opsz" 40;
}
.price small {
  font-family: var(--data); font-size: 0.61rem; letter-spacing: 0.12em;
  color: var(--fg-mute); font-weight: 500; display: block; margin-top: 5px;
  text-transform: uppercase;
}
.saving {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--leaf-ink); font-variant-numeric: tabular-nums;
}
.ink .saving { color: var(--brass-hi); }
.set { --ground: var(--ink); --spine: var(--brass); }

.contents { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.contents summary {
  cursor: pointer; font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-dim); list-style: none;
}
.contents summary::-webkit-details-marker { display: none; }
.contents summary::before { content: "+ "; color: var(--accent); }
.contents[open] summary::before { content: "– "; }
.toc { margin: 14px 0 0; padding: 0; list-style: none; column-width: 15rem; column-gap: 32px; }
.toc li { display: flex; gap: 9px; align-items: baseline; break-inside: avoid;
  padding: 2.5px 0; font-size: 0.9rem; }
.toc .num { font-family: var(--data); font-size: 0.67rem; color: var(--accent);
  min-width: 1.6em; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.toc .ref { color: var(--fg-mute); font-family: var(--read); font-style: italic; font-size: 0.86rem; }

/* ------------------------------------------------------------ shop grid */

.shelf {
  display: grid; gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.shelf-item {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: clamp(14px, 2vw, 20px);
}
.shelf-item img { border-radius: 2px; box-shadow: 0 2px 0 rgb(36 30 28 / 0.14); }
.shelf-item h3 { font-size: 1.24rem; }
.shelf-item h3 a { text-decoration: none; }
.shelf-item p { font-size: 0.92rem; color: var(--fg-dim); margin: 0; }
.shelf-item .buybox { margin-top: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); }
.filters .chip-btn[aria-pressed="true"] { background: var(--iron); color: var(--linen);
  border-color: var(--iron); }

/* --------------------------------------------------------- the ladder */

.tbl-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data caption {
  text-align: left; font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute); padding-bottom: 10px;
}
table.data th, table.data td {
  text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute); font-weight: 500;
  border-bottom: 2px solid var(--fg);
}
table.data tbody th { font-weight: 500; }
table.data .num { text-align: right; padding-right: 0; font-family: var(--data); font-size: 0.92rem; }
.spec th { font-family: var(--data); font-size: 0.67rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-mute); font-weight: 500; width: 36%; }
.spec td { font-size: 0.97rem; }

/* --------------------------------------------------- the fifty-two table */

.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl thead th {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute); font-weight: 500;
  border-bottom: 2px solid var(--fg); padding-bottom: 9px;
}
.tbl tbody th { font-family: var(--data); font-size: 0.75rem; color: var(--accent);
  font-weight: 500; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl .ic { width: 60px; padding-right: 12px; }
.tbl .ic img { width: 52px; max-width: none; }
.tbl .g { font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.02em; display: block; }
.tbl .g a { text-decoration: underline; text-decoration-color: var(--brass);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tbl .r { font-family: var(--read); font-style: italic; color: var(--fg-dim);
  font-size: 0.95rem; display: block; margin-top: 2px; }
.tbl .w { font-size: 0.92rem; color: var(--fg-dim); }
.tbl .b { font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }
.tbl tr:hover td, .tbl tr:hover th { background: var(--line-2); }

.flags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.flag {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.09em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: 2px;
  padding: 0.18em 0.45em; color: var(--fg-dim); white-space: nowrap;
}
.flag.free { border-color: var(--brass); color: var(--accent); }

@media (max-width: 720px) {
  .tbl { min-width: 0; display: block; }
  .tbl thead { display: none; }
  .tbl tbody { display: block; }
  .tbl tbody tr {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px;
    padding: 18px 0 20px; border-bottom: 1px solid var(--line-2);
  }
  .tbl tbody th { grid-area: 1 / 1; padding: 0; border: 0; width: auto; }
  .tbl .ic { grid-area: 2 / 1; padding: 0; width: auto; }
  .tbl .ic img { width: 44px; }
  .tbl tbody td:not(.ic) { grid-column: 2; display: block; padding: 0 0 9px; border: 0; }
  .tbl tbody td:last-child { padding-bottom: 0; }
  .tbl tr:hover td, .tbl tr:hover th { background: none; }
}

/* ---------------------------------------------------------- the noises */

.noises {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 30px; margin: 0; padding: 0; list-style: none;
}
.noises li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid var(--line-2); break-inside: avoid; }
.noises .n { font-family: var(--data); font-size: 0.65rem; color: var(--fg-mute);
  min-width: 2.2em; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.noises .s { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 0.98rem; font-variation-settings: "wdth" 82, "opsz" 40; }
.noises .gm { margin-left: auto; padding-left: 12px; text-align: right;
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }

/* --------------------------------------------------------- the pictures */

.banner {
  width: 100%; display: block; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--linen);
  margin-block: clamp(20px, 3vw, 32px); max-height: min(56vh, 430px);
}
.banner-wide { aspect-ratio: 21 / 9; }
.banner-16 { aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .banner-wide { aspect-ratio: 16 / 9; } .banner-16 { aspect-ratio: 4 / 3; } }
.figure-art {
  width: 100%; display: block; border-radius: 2px; background: var(--linen);
  border: 1px solid var(--line); margin: 0 0 clamp(24px, 3.4vw, 36px);
}
.portrait-art { width: 100%; border-radius: var(--radius); background: var(--linen);
  box-shadow: 0 20px 40px -28px #000; }

.reading {
  background: var(--paper-card); border: 1px solid rgb(36 30 28 / 0.17);
  border-radius: var(--radius); padding: clamp(22px, 4.2vw, 52px);
  box-shadow: var(--lift); color: var(--print);
}
.reading p { font-family: var(--read); font-size: clamp(1.06rem, 1rem + 0.55vw, 1.3rem);
  line-height: 1.64; margin: 0 0 0.9em; max-width: 62ch; }
.reading .furn { color: var(--print-dim); }
.reading blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 2px solid var(--brass);
  font-family: var(--read); font-style: italic; }
.reading blockquote p { margin: 0 0 0.3em; font-size: 1.08rem; }
.beat-label {
  display: block; margin: 2.2em 0 1em; padding-top: 0.9em;
  border-top: 1px solid rgb(36 30 28 / 0.09); font-family: var(--data);
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink);
}
.beat-label:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.noise { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-style: normal; font-variation-settings: "wdth" 80, "opsz" 40; font-size: 1.04em; }

.legend {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  margin-top: 24px; background: var(--bg-2); font-size: 0.92rem; color: var(--fg-dim);
}
.legend b { font-family: var(--display); color: var(--fg); display: block;
  margin-bottom: 5px; font-size: 0.98rem; }

/* -------------------------------------------------------- cross-links */

.cross {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cross a {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  overflow: hidden; transition: border-color 0.14s ease;
}
.cross a:hover { border-color: var(--edge); }
.cross img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 1px solid var(--line); background: var(--linen); }
.cross-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 18px; }
.cross .k { font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); }
.cross b { display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.14rem; letter-spacing: -0.026em; margin: 4px 0 5px; }
.cross span { font-size: 0.9rem; color: var(--fg-dim); line-height: 1.45; }
.cross .go { display: block; margin-top: auto; padding-top: 14px; font-family: var(--data);
  font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }

.pagenav {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  align-items: center; border-top: 1px solid var(--line);
  margin-top: clamp(32px, 5vw, 52px); padding-top: 20px;
}
.rail-links { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rail-links a {
  display: block; text-decoration: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px; font-family: var(--display);
  font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em;
}
.rail-links a:hover { border-color: var(--edge); }
.rail-links .k { display: block; font-family: var(--data); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute);
  font-weight: 400; margin-bottom: 2px; }

.vol-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.vol-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line-2);
}
.vol-list img { width: 44px; }
.vol-list .g { font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.024em; }
.vol-list .g .num { font-family: var(--data); font-size: 0.7rem; color: var(--accent);
  margin-right: 0.6em; font-weight: 500; font-variant-numeric: tabular-nums; }
.vol-list p { margin: 3px 0 0; font-size: 0.94rem; color: var(--fg-dim); max-width: 64ch; }
.vol-list .r { font-family: var(--read); font-style: italic; color: var(--fg-mute);
  font-size: 0.92rem; display: block; margin-top: 3px; }
.vol-list .free {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.11em;
  text-transform: uppercase; background: var(--lemon); color: var(--strike);
  border-radius: 2px; padding: 0.16em 0.45em; margin-left: 0.5em; white-space: nowrap;
}

/* minmax(0,1fr) and min-width:0 together: a grid item floors at its
   min-content width, so the thirteen-column disc rail below pushed the
   whole volume page sideways at 390px even though .discs scrolls. */
.season { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 26px); }
.season-row { min-width: 0; }
.season-row .n { font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-mute); display: block; margin-bottom: 8px; }
.season-row .n b { color: var(--fg); font-weight: 500; }
.discs {
  display: grid; grid-template-columns: repeat(var(--per, 13), minmax(34px, 1fr));
  gap: clamp(4px, 0.8vw, 10px); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
@media (max-width: 640px) {
  .discs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
           mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.disc { width: 100%; border: 0; background: none; padding: 0; cursor: pointer;
  border-radius: 4px; transition: transform 0.14s ease; }
.disc img { width: 100%; filter: drop-shadow(0 2px 3px rgb(36 30 28 / 0.28)); }
.disc:hover, .disc:focus-visible { transform: translateY(-4px); }
.disc[aria-pressed="true"] { transform: translateY(-6px); }

/* -------------------------------------------------------------- prose */

.prose h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  margin: clamp(36px, 4.6vw, 56px) 0 14px; }
.prose h3 { font-size: 1.14rem; margin: 26px 0 8px; }
.prose p, .prose li { max-width: 66ch; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose > p:first-child, .prose > .figure-art:first-child { margin-top: 0; }
.prose .say { font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 82, "opsz" 40; letter-spacing: -0.02em; }
.pull {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); letter-spacing: -0.032em;
  line-height: 1.1; margin: clamp(26px, 3.4vw, 38px) 0; max-width: 22ch;
  font-variation-settings: "wdth" 92, "opsz" 72;
}
.claim-q {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.038em;
  line-height: 1.02; font-size: clamp(1.75rem, 1rem + 3.4vw, 3.1rem);
  max-width: 20ch; margin: 0; font-variation-settings: "wdth" 94, "opsz" 96;
}
.claim-q em { font-style: normal; color: var(--accent); }
.cols-2 { display: grid; gap: clamp(24px, 3.4vw, 44px); grid-template-columns: minmax(0, 1fr); }
.cols-3 { display: grid; gap: clamp(24px, 4vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 760px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa h3 { font-size: 1.06rem; margin-bottom: 8px; line-height: 1.3; }
.qa p { color: var(--fg-dim); font-size: 0.95rem; }
.who { margin: 0; display: grid; gap: 15px; }
.who div { border-left: 2px solid var(--brass); padding-left: 15px; }
.who dt { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }
.who dd { margin: 2px 0 0; color: var(--fg-dim); font-size: 0.93rem; line-height: 1.5; }

.cutaway-frame { position: relative; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--linen); }
.cutaway-frame img { width: 100%; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(24px, 2.6vw, 32px); aspect-ratio: 1; border-radius: 50%;
  background: var(--iron); color: var(--linen); border: 2px solid var(--linen);
  font-family: var(--data); font-size: clamp(0.62rem, 0.8vw, 0.78rem); font-weight: 500;
  display: grid; place-content: center; box-shadow: 0 3px 8px -2px rgb(36 30 28 / 0.7);
}
.places { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 24px; }
.place { border-top: 2px solid var(--fg); padding-top: 11px; }
.place .n { font-family: var(--data); font-size: 0.67rem; letter-spacing: 0.12em; color: var(--accent); }
.place b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.04rem;
  letter-spacing: -0.02em; margin: 2px 0 3px; }
.place span { font-size: 0.87rem; color: var(--fg-mute); line-height: 1.45; display: block; }

/* --------------------------------------------------------------- cart */

.lines { margin: 0; padding: 0; list-style: none; }
.line {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-2);
}
@media (max-width: 620px) {
  .line { grid-template-columns: 60px minmax(0, 1fr); }
  .line .line-end { grid-column: 2; justify-items: start; }
}
.line img { border-radius: 2px; box-shadow: 0 1px 3px rgb(36 30 28 / 0.3); }
.line b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.02em; }
.line .meta { display: block; margin-top: 4px; }
.line-end { display: grid; gap: 8px; justify-items: end; }
.rm { background: none; border: 0; color: var(--fg-mute); cursor: pointer;
  font-family: var(--data); font-size: 0.63rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 0; }
.rm:hover { color: var(--brick); }
.sum { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0;
  font-size: 0.95rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.sum.save { color: var(--leaf-ink); }
.ink .sum.save { color: var(--brass-hi); }
.sum.total {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; color: var(--fg);
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
}
.empty-state { text-align: center; padding: 56px 0; color: var(--fg-mute); }
.notice {
  border: 1px solid var(--brass); border-radius: var(--radius); padding: 16px 18px;
  background: color-mix(in srgb, var(--brass) 12%, transparent); font-size: 0.93rem;
  line-height: 1.55;
}
.notice b { font-family: var(--display); display: block; margin-bottom: 4px; }
.notice code { font-family: var(--data); font-size: 0.85em; background: rgb(36 30 28 / 0.1);
  padding: 0.1em 0.35em; border-radius: 2px; }
.ink .notice code { background: rgb(240 231 214 / 0.14); }

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 39;
  background: var(--iron); color: var(--linen);
  padding: 11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  animation: up 0.22s ease backwards;
}
@keyframes up { from { transform: translateY(100%); } }
.stickybar .mono { color: rgb(240 231 214 / 0.72); }

/* ------------------------------------------------------------- footer */

.foot { background: var(--ink); color: var(--stone-dim); font-size: 0.9rem; }
.foot .wrap { padding-block: clamp(38px, 5vw, 60px); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px clamp(24px, 3vw, 44px);
  justify-content: space-between; align-items: flex-start; }
.foot-grid > div { min-width: 150px; }
.foot b { color: var(--stone); font-family: var(--display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.15em; display: block; margin-bottom: 8px; }
.foot .mono { margin-bottom: 8px; color: var(--stone-dim); }
.foot p { margin-bottom: 0; }
.foot a { color: var(--brass-hi); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------- motion off
   Entrances use `backwards` fill so the page is already in its finished state
   if animations never run. A reveal gated on a class a script adds is a blank
   page when the script fails. */

@media (prefers-reduced-motion: reduce) {
  .tapper, .tock, .board[data-state="wait"] .tap-face, .cell.used, .stickybar {
    animation-duration: 0.01ms;
  }
  .ping { display: none; }
  .btn, .disc, .cross a { transition: none; }
}

/* The house is the invitation; brass marks the places a reader can explore. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
.top-in { min-height: 72px; }
.wordmark { font-size: 1.55rem; letter-spacing: .12em; }
.top nav a { font-size: .76rem; letter-spacing: .05em; }
.menu-toggle { display: none; min-height: 44px; min-width: 68px; align-items: center; justify-content: center; }
.welcome { background: var(--paper); position: relative; }
.welcome .hero-in { max-width: 1380px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px,4vw,64px); padding-block: clamp(36px,5vw,70px); }
.welcome .pitch h1 { font-size: clamp(2.8rem,4.4vw,4.7rem); line-height: 1.01; letter-spacing: -.055em; }
.welcome h1 em { font-style: normal; color: var(--brass-ink); }
.welcome .pitch .lead { max-width: 35ch; font-size: 1.12rem; line-height: 1.6; margin-block: 24px; }
.welcome .stem { margin-bottom: 20px; }
.welcome .facts { gap: 9px; margin-top: 24px; padding-top: 18px; }
.ritual-link { display: inline-block; margin-top: 24px; margin-right: 20px; color: var(--print-dim); font-size: .95rem; text-underline-offset: 5px; }
.house-explorer { min-width: 0; border: 1px solid var(--paper-edge); background: var(--paper-card); box-shadow: 10px 12px 0 var(--paper-sink); }
.house-label { display: flex; justify-content: space-between; gap: 14px; padding: 15px 18px; font: .75rem var(--data); color: var(--print-dim); border-bottom: 1px solid var(--line); }
.house-label span:first-child { color: var(--brass-ink); }
.house-hunt { position: relative; padding: 20px; background: var(--iron); color: var(--linen); }
.hunt-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hunt-eyebrow { font: .68rem var(--data); text-transform: uppercase; letter-spacing: .09em; color: var(--brass-hi); }
.house-hunt h2 { font-size: 1.7rem; margin-top: 5px; }
.hunt-count { flex-shrink: 0; border: 1px solid var(--stone-dim); padding: 7px 9px; border-radius: 20px; color: var(--brass-hi); font: .7rem var(--data); }
.house-hunt [data-hunt-status] { margin-top: 12px; font-size: .92rem; line-height: 1.5; max-width: 55ch; }
.hunt-actions { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.hunt-actions button { min-height: 44px; border: 1px solid var(--linen); background: transparent; color: var(--linen); padding: 9px 12px; font: 600 .8rem var(--body); border-radius: 4px; cursor: pointer; }
.hunt-actions [data-hunt-start], .hunt-actions [data-hunt-listen], .hunt-actions [data-hunt-next] { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--strike); }
.hunt-actions [data-hunt-exit] { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.hunt-actions button:hover { box-shadow: 0 0 0 2px var(--brass-hi); }
.hunt-clue { border-left: 2px solid var(--brass-hi); padding: 10px 12px; margin-top: 12px; background: #ffffff08; font: italic .95rem/1.5 var(--read); }
.hunt-note { font-size: .73rem; color: var(--stone-dim); margin-top: 10px; }
.hunt-wave { display: flex; align-items: center; gap: 4px; height: 28px; margin-block: 8px; }
.hunt-wave i { display: block; width: 4px; height: 6px; background: var(--brass-hi); border-radius: 3px; transform-origin: center; }
.hunt-wave i:nth-child(3n) { height: 18px; }
.hunt-wave i:nth-child(3n + 1) { height: 12px; }
.house-hunt[data-listening] .hunt-wave i { animation: hunt-listen .5s ease-in-out infinite alternate; }
.house-hunt[data-listening] .hunt-wave i:nth-child(2n) { animation-delay: -.3s; }
.house-hunt[data-state="complete"] .hunt-count { background: var(--brass-hi); color: var(--strike); }
.house-hunt[data-state="idle"] { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding-block: 16px; }
.house-hunt[data-state="idle"] .hunt-count, .house-hunt[data-state="idle"] .hunt-wave, .house-hunt[data-state="idle"] .hunt-note { display: none; }
.house-hunt[data-state="idle"] [data-hunt-status] { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .8rem; }
.house-hunt[data-state="idle"] .hunt-actions { grid-column: 2; grid-row: 1; }
.house-pin[data-discovered]::after { content: "✓"; position: absolute; right: -5px; top: -6px; background: var(--iron); color: var(--linen); font-size: .7rem; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; }
.house-doors a[data-discovered] { box-shadow: inset 0 -3px var(--brass-ink); }
@keyframes hunt-listen { to { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) { .house-hunt[data-listening] .hunt-wave i { animation: none; } }
.house-picture { position: relative; overflow: hidden; }
.house-picture > img { display: block; width: 100%; height: auto; }
.house-pin { position: absolute; transform: translate(-50%,-50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-card); color: var(--print); border: 2px solid var(--iron); font: 700 1rem var(--data); text-decoration: none; box-shadow: 0 2px 8px #241e1c40; transition: background .2s, box-shadow .2s; }
.house-pin:hover, .house-pin[aria-current="true"] { background: var(--brass); color: var(--strike); box-shadow: 0 0 0 5px #fcf8efb3; }
.house-doors { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); }
.house-doors a { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; text-decoration: none; font-size: .875rem; line-height: 1.2; border-right: 1px solid var(--line); color: var(--print-dim); }
.house-doors a:last-child { border-right: 0; }
.house-doors a span { font: .75rem var(--data); color: var(--brass-ink); }
.house-doors a[aria-current="true"] { background: var(--paper-sink); box-shadow: inset 0 -3px var(--brass-ink); color: var(--print); }
.room-readout { padding: 20px; min-height: 190px; }
.room-story { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: start; gap: 16px; }
.room-story img { width: 58px; height: 58px; }
.room-meta { font: .75rem var(--data); color: var(--print-mute); }
.room-story h2 { font-size: 1.65rem; line-height: 1.12; margin-block: 7px; }
.room-story p { font-size: .95rem; color: var(--print-dim); line-height: 1.45; margin-bottom: 9px; }
.room-story a { font-size: .875rem; font-weight: 600; color: var(--brass-ink); text-underline-offset: 4px; }
.ritual { padding-block: clamp(40px,5vw,64px); }
.ritual-in { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px,6vw,80px); align-items: center; }
.ritual h2 { font-size: clamp(2rem,3.3vw,3.2rem); line-height: 1.04; margin-block: 22px; }
.ritual .lead { max-width: 34ch; }
.ritual-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.ritual-controls > span { color: var(--stone-dim); font-size: .875rem; }
.ritual .board { min-height: 290px; color: var(--print); background: var(--paper); touch-action: manipulation; }
.ritual .tap-word { font-size: clamp(2.6rem,4vw,3.8rem); line-height: 1.03; }
.ritual .tap-face { padding: 18px 10px; }
.ritual .tap-sub { max-width: 32ch; }
.ritual .again, .ritual .caught { font-size: .75rem; letter-spacing: .04em; }
.ritual .board[data-state="answer"] { box-shadow: 0 0 0 4px var(--brass); }
.ritual .board[data-state="answer"] .hung .tapper { animation: reply-swing .65s ease-out; }
@keyframes reply-swing { 30% { transform: rotate(14deg); } 65% { transform: rotate(-8deg); } }
.story-pick { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.story-pick p { margin: 0; font-size: .95rem; color: var(--print-dim); }
.free-stories .cross a { transition: transform .2s, border-color .2s, box-shadow .2s; }
.free-stories .cross a:hover { transform: translateY(-5px); box-shadow: var(--lift); }
.free-stories .cross a[data-picked] { border-color: var(--brass-ink); box-shadow: 0 0 0 3px var(--brass); }
.cross b { font-size: 1.35rem; }
.cross .k, .cross .go { font-size: .75rem; letter-spacing: .06em; }
.story-finder { padding: clamp(18px,3vw,28px); margin: 28px 0; background: var(--paper-sink); border: 1px solid var(--line); }
.finder-fields { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 20px; }
.finder-fields label { display: grid; gap: 8px; font-size: .875rem; font-weight: 600; }
.finder-fields input, .finder-fields select { width: 100%; min-width: 0; min-height: 48px; font: 1rem var(--body); border: 1px solid var(--paper-edge); border-radius: 3px; padding: 12px; color: var(--print); background: var(--paper-card); }
.finder-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.finder-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.finder-filters button, .reader-tools button { cursor: pointer; font: .875rem var(--body); min-height: 44px; padding: 10px 15px; border: 1px solid var(--paper-edge); border-radius: 3px; background: var(--paper-card); color: var(--print); }
.finder-filters button[aria-pressed="true"], .reader-tools button[aria-pressed="true"] { background: var(--iron); border-color: var(--iron); color: var(--linen); }
[data-story-count] { font: .8125rem var(--data); color: var(--print-dim); }
.finder-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--paper-edge); }
.finder-empty h2 { font-size: 1.7rem; margin-bottom: 14px; }
.reader-tools { position: sticky; top: 72px; z-index: 10; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px; background: var(--paper-sink); border: 1px solid var(--paper-edge); margin-bottom: 16px; }
.reader-tools > span:first-child { font-size: .875rem; margin-right: auto; }
.reader-sizes { display: flex; gap: 5px; }
.reader-progress { font: .75rem var(--data); min-width: 4ch; text-align: right; color: var(--print-dim); }
.reading[data-size="large"] p { font-size: 1.5rem; }
.reading[data-size="largest"] p { font-size: 1.8rem; }
.reading { scroll-margin-top: 165px; }
body.read-focus .two-col:has(.reading) { grid-template-columns: minmax(0,1fr); max-width: 850px; margin-inline: auto; }
body.read-focus .two-col:has(.reading) > aside { display: none; }
body.read-focus .reading .beat-label { display: none; }
body.read-focus .reading { padding: clamp(24px,5vw,64px); }
[data-add][data-state="added"] { position: relative; }
[data-add][data-state="added"]::after { content: "Added to basket ✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--strike); background: var(--lemon); border-radius: inherit; }
@media (max-width: 1050px) {
  .welcome .hero-in { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 30px; }
  .welcome .pitch h1 { font-size: clamp(2.7rem,4.6vw,3.6rem); }
  .house-label { flex-wrap: wrap; gap: 5px; }
}
@media (max-width: 1100px) {
  .top-in { flex-wrap: wrap; gap: 10px; }
  .top nav { order: 4; flex-basis: 100%; padding-block: 12px; }
  .top.nav-ready .menu-toggle { display: inline-flex; }
  .top.nav-ready nav { display: none; }
  .top.nav-ready.nav-open nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 12px; }
  .top nav a { white-space: normal; min-height: 44px; display: flex; align-items: center; font-size: .875rem; }
}
@media (max-width: 780px) {
  .welcome .hero-in, .ritual-in { grid-template-columns: minmax(0,1fr); }
  .welcome .pitch h1 { font-size: clamp(3rem,7.5vw,4.4rem); }
  .welcome .pitch .lead { max-width: 48ch; }
  .house-explorer { box-shadow: 5px 6px 0 var(--paper-sink); }
  .room-readout { min-height: 170px; }
  .ritual .board { min-height: 320px; }
  .finder-fields { grid-template-columns: minmax(0,1fr); gap: 14px; }
}
@media (max-width: 420px) {
  .house-label { font-size: .75rem; padding: 12px; }
  .house-doors { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .house-doors a { padding: 12px; flex-direction: row; gap: 8px; border-bottom: 1px solid var(--line); }
  .house-pin { width: 44px; height: 44px; }
  .room-readout { padding: 16px 12px; }
  .room-story { grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
  .room-story img { width: 44px; height: 44px; }
  .reader-tools { gap: 8px; }
  .reader-tools button { padding-inline: 10px; }
  .reader-tools > span:first-child { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Paper layers give the cutaway depth while its numbered doors stay readable. */
.house-scene { --scene-x: 0px; --scene-y: 0px; --scene-scroll: 0px; --scene-rx: 0deg; --scene-ry: 0deg; --house-opacity: .92; }
.house-scene .house-picture { isolation: isolate; perspective: 1100px; background: #d4dbd6; }
.house-atmosphere { position: absolute; inset: -20%; background: radial-gradient(ellipse at 70% 18%,#fcf8efa6,transparent 45%),linear-gradient(155deg,#c4cfd0,#e9e3cd 68%,#adb4aa); transform: translate3d(calc(var(--scene-x) * -.4),calc(var(--scene-y) * -.4),0); }
.house-blueprint { position: absolute; inset: 10px; opacity: .48; background-image: linear-gradient(#5b6b662b 1px,transparent 1px),linear-gradient(90deg,#5b6b662b 1px,transparent 1px); background-size: 28px 28px; border: 1px solid #5b6b6644; transform: translate3d(calc(var(--scene-x) * -.7),calc(var(--scene-scroll) * -.5),-20px); }
.house-blueprint span { position: absolute; left: 12px; bottom: 6px; color: #39463d; font: .625rem var(--data); letter-spacing: .09em; }
.house-model { position: relative; z-index: 2; margin: 12px; transform-style: preserve-3d; transform: translate3d(var(--scene-x),calc(var(--scene-y) + var(--scene-scroll)),20px) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)); transition: transform .18s ease-out; }
.house-picture .house-cutout { display: block; width: 100%; height: auto; opacity: var(--house-opacity); filter: drop-shadow(0 12px 5px #241e1c25); transition: opacity .15s; }
.house-ground { position: absolute; bottom: 0; height: 9px; left: 2%; right: 2%; z-index: 3; background: #241e1c2e; filter: blur(7px); pointer-events: none; transform: translateX(calc(var(--scene-x) * 1.25)); }
.house-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; color: var(--print-dim); background: #fcf8efcc; backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.house-controls label { flex: 1 1 250px; display: flex; align-items: center; gap: 10px; font-size: .8125rem; }
.house-controls input { min-width: 60px; width: 100px; flex: 1; accent-color: var(--brass-ink); min-height: 32px; cursor: pointer; }
.house-controls output { font: .75rem var(--data); min-width: 4ch; }
.house-controls button { border: 1px solid var(--paper-edge); border-radius: 3px; background: var(--paper-card); color: var(--print); font: .8125rem var(--body); padding: 9px 12px; min-height: 40px; cursor: pointer; }
.house-controls button[aria-pressed="true"] { color: var(--linen); background: var(--iron); }
.house-controls button:disabled { opacity: .7; cursor: default; }
.house-control-hint { width: 100%; font-size: .75rem; color: var(--print-mute); }
.house-scene[data-depth="off"] .house-model, .house-scene[data-depth="off"] .house-blueprint, .house-scene[data-depth="off"] .house-atmosphere, .house-scene[data-depth="off"] .house-ground { transform: none; }

/* Small paper theatres inside the free stories. All motion is reader-initiated. */
.experience-audio { position: relative; z-index: 15; width: fit-content; max-width: 100%; margin-block: 14px; color: var(--print); font: .875rem/1.5 var(--body); }
.experience-audio > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; min-height: 44px; padding: 10px 14px; border: 1px solid var(--paper-edge); border-radius: 5px; background: var(--paper-card); }
.experience-audio > summary::-webkit-details-marker { display: none; }
.experience-audio > summary > span:first-child { color: var(--brass-ink); font-size: 1.1rem; }
.audio-badge { font: .625rem var(--data); color: var(--print-dim); padding: 4px 6px; background: var(--paper-sink); border-radius: 3px; white-space: nowrap; }
.experience-audio[open] > summary { box-shadow: 0 0 0 2px var(--brass); }
.audio-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 332px; max-width: calc(100vw - 48px); padding: 18px; border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--paper-card); color: var(--print); box-shadow: 0 14px 40px #241e1c2e; }
.audio-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.audio-panel button { cursor: pointer; border: 1px solid var(--paper-edge); border-radius: 4px; padding: 8px 10px; min-height: 44px; font: .8125rem var(--body); color: var(--print); background: var(--paper-sink); }
.audio-panel button[aria-pressed="true"] { background: var(--iron); color: var(--linen); }
.audio-panel button:disabled { opacity: .55; cursor: default; }
.audio-channel { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 14px; margin-top: 15px; }
.audio-channel label { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 8px; font-size: .75rem; color: var(--print-dim); }
.audio-channel input { width: 100%; min-width: 0; height: 30px; accent-color: var(--brass-ink); grid-row: 2; }
.audio-channel output { grid-row: 2; font: .625rem var(--data); min-width: 4ch; }
.audio-status { margin-top: 16px; font: .8125rem/1.5 var(--body); color: var(--print-dim); }
.audio-resume { width: 100%; margin-top: 14px; }
.experience-audio summary:focus-visible, .audio-panel button:focus-visible, .audio-panel input:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.house-scene > .experience-audio { margin: 12px 16px; }
.reader-tools .experience-audio { margin: 0; }
.reader-tools .audio-panel { left: auto; right: 0; }
.engine-intro > .wrap > .experience-audio { margin-bottom: 22px; }
@media (max-width: 480px) {
  .reader-tools .experience-audio { position: static; }
  .reader-tools .audio-panel { top: calc(100% + 6px); left: 0; right: auto; max-width: 100%; width: 100%; }
}
@media print { .experience-audio { display: none !important; } }
/* The controls use the same ink and brass as the experience around them. */
.ink .experience-audio { color: var(--stone); }
.ink .experience-audio > summary { background: var(--ink-raise); border-color: var(--brass-hi); }
.ink .experience-audio > summary > span:first-child { color: var(--brass-hi); }
.ink .audio-badge { background: #c9a85a1c; color: var(--brass-hi); }
.ink .audio-panel { background: var(--ink-raise); color: var(--stone); border-color: var(--brass-hi); }
.ink .audio-panel-heading { border-color: #f0e7d629; }
.ink .audio-panel button { background: var(--ink); color: var(--stone); border-color: var(--brass-hi); }
.ink .audio-panel button[aria-pressed="true"] { background: var(--brass-hi); color: var(--iron); }
.ink .audio-channel label, .ink .audio-status { color: var(--stone-dim); }
.ink .audio-channel input { accent-color: var(--brass-hi); }
.ink .experience-audio summary:focus-visible, .ink .audio-panel button:focus-visible, .ink .audio-panel input:focus-visible { outline-color: var(--brass-hi); }
.ritual-controls { align-items: start; flex-direction: column; gap: 10px; }
.ritual-controls .experience-audio { width: 100%; max-width: 360px; margin: 0; }
.ritual-controls .experience-audio > summary { justify-content: start; }
.ritual-controls .audio-badge { margin-left: auto; }
.ritual-controls .audio-panel { position: static; width: 100%; max-width: 100%; margin-top: 10px; box-shadow: none; }

/* The homepage's small story theatre: sound, rule, story. */
.home-engine { scroll-margin-top: 80px; }
.home-engine-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 30px; }
.home-engine-heading h2 { font-size: clamp(2.2rem,4vw,3.7rem); line-height: 1.03; margin-top: 18px; }
.home-engine-heading h2 em { font-style: normal; color: var(--brass-hi); }
.home-engine-heading .lead { max-width: 31ch; font-size: 1.08rem; margin: 0 0 3px; }
.home-examples { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
.home-example { display: flex; align-items: center; gap: 12px; padding: 12px 15px; min-height: 64px; border: 1px solid #f0e7d64d; color: var(--stone-dim); background: transparent; border-radius: 5px; font: 600 .9rem var(--body); cursor: pointer; text-align: left; }
.home-example img { width: 38px; height: 38px; flex-shrink: 0; }
.home-example[aria-pressed="true"] { color: var(--stone); background: #c9a85a17; border-color: var(--brass-hi); box-shadow: inset 0 -2px var(--brass-hi); }
.home-example:hover { border-color: var(--brass-hi); color: var(--stone); }
.home-theatre { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); align-items: stretch; border: 1px solid #c9a85a66; border-radius: 8px; background: var(--ink-raise); }
.home-scene { position: relative; min-height: 450px; overflow: hidden; border-radius: 7px 0 0 7px; background: var(--paper-sink); isolation: isolate; }
.home-scene-art { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: .85; transition: transform .7s ease, opacity .6s; }
.home-scene[data-home-scene="1"] .home-scene-art { transform: scale(1.04); }
.home-scene[data-home-scene="2"] .home-scene-art { opacity: .42; transform: scale(1.08); }
.home-scene-top { position: absolute; z-index: 1; inset: 18px 18px auto; display: flex; justify-content: space-between; gap: 12px; color: var(--iron); font: .65rem var(--data); }
.home-scene-top span { padding: 7px 9px; background: #fcf8efe6; border: 1px solid #241e1c40; border-radius: 3px; }
.home-scene-caption { display: flex; align-items: center; gap: 14px; position: absolute; inset: auto 0 0; padding: 20px; z-index: 2; background: #1a1513ed; border-top: 1px solid #c9a85a66; color: var(--stone); backdrop-filter: blur(8px); }
[data-home-noise] { font: 700 clamp(1rem,2vw,1.5rem)/1.1 var(--display); letter-spacing: -.035em; flex: 1; }
.home-listen { border: 1px solid var(--brass-hi); border-radius: 4px; background: transparent; color: var(--brass-hi); padding: 10px 12px; min-height: 44px; font: .8125rem var(--body); white-space: nowrap; cursor: pointer; }
.home-wave { display: flex; align-items: center; gap: 3px; width: 42px; height: 30px; flex-shrink: 0; }
.home-wave i { display: block; width: 2px; height: 9px; background: var(--brass-hi); border-radius: 2px; }
.home-wave i:nth-child(2n) { height: 18px; }
.home-wave i:nth-child(3n) { height: 28px; }
[data-sounding] .home-wave i { animation: home-sound .55s calc(var(--bar) * 40ms) ease-in-out 3 alternate; }
.home-story-disc { position: absolute; left: 50%; top: 45%; width: 140px; height: 140px; transform: translate(-50%,-50%) rotate(-8deg); filter: drop-shadow(0 12px 12px #241e1c55); }
.home-story-maker { padding: clamp(20px,3vw,38px); display: flex; flex-direction: column; min-width: 0; }
.home-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0 0 32px; }
.home-steps button { display: flex; flex-direction: column; align-items: start; gap: 7px; border: 0; border-bottom: 2px solid #f0e7d633; background: transparent; color: var(--stone-dim); font: .8125rem var(--body); padding: 0 0 12px; min-height: 62px; cursor: pointer; }
.home-steps button span { font: .675rem var(--data); }
.home-steps button[aria-selected="true"] { color: var(--brass-hi); border-color: var(--brass-hi); }
.home-step-panel { min-height: 194px; flex: 1; }
.home-step-kicker { font: .65rem var(--data); letter-spacing: .05em; color: var(--brass-hi); }
.home-step-panel h3 { font: 750 clamp(1.6rem,2.8vw,2.4rem)/1.08 var(--display); letter-spacing: -.035em; color: var(--stone); margin: 14px 0; }
.home-step-panel p { font: 1rem/1.55 var(--body); color: var(--stone-dim); }
.home-step-panel blockquote { margin: 18px 0 0; color: var(--brass-hi); font: italic 1.1rem/1.4 var(--read); }
.home-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.home-next, .home-read { background: var(--brass-hi); color: var(--iron); border: 1px solid var(--brass-hi); min-height: 48px; }
.home-next:hover, .home-read:hover { background: var(--linen); border-color: var(--linen); color: var(--iron); }
.home-voice { background: none; border: 0; color: var(--stone); font: .8125rem var(--body); min-height: 44px; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.home-voice[aria-pressed="true"] { color: var(--brass-hi); }
.home-voice:disabled { opacity: .55; cursor: default; }
.home-voice-status { min-height: 1.5em; color: var(--stone-dim); font: .75rem/1.5 var(--body); margin-top: 8px; }
.home-audio { border-top: 1px solid #f0e7d629; margin-top: 16px; }
.home-audio .experience-audio { margin-bottom: 0; }
.home-audio .experience-audio > summary { font-size: .8125rem; padding: 8px 10px; }
.home-audio .audio-panel { bottom: calc(100% + 8px); top: auto; }
.home-engine-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 30px 0; }
.home-equation { display: flex; gap: clamp(12px,2vw,24px); align-items: center; }
.home-equation span { display: flex; flex-direction: column; gap: 2px; font: .7rem var(--data); color: var(--stone-dim); }
.home-equation b { font: 600 clamp(1.5rem,2.8vw,2.1rem) var(--display); color: var(--brass-hi); }
.home-equation i { font: 1.2rem var(--read); color: var(--stone-dim); }
.home-engine-bottom > a { color: var(--stone); font-size: .875rem; text-underline-offset: 4px; }
.home-grid-reference { border-top: 1px solid #f0e7d629; }
.home-grid-reference > summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 600 .9375rem var(--body); color: var(--stone); cursor: pointer; }
.home-grid-reference > summary span { color: var(--stone-dim); font: .7rem var(--data); }
.home-grid-reference > .head-block { margin-top: 28px; }
.home-grid-reference .head-block h2 { font-size: 1.7rem; }
.home-grid-reference .head-block .lead { font-size: 1rem; }
.home-engine button:focus-visible, .home-engine a:focus-visible, .home-engine summary:focus-visible, .home-step-panel:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 5px; }
@keyframes home-sound { to { transform: scaleY(.3); } }
@media (max-width: 850px) {
  .home-engine-heading { display: block; }
  .home-engine-heading .lead { max-width: 45ch; margin-top: 22px; }
  .home-examples { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-theatre { grid-template-columns: minmax(0,1fr); }
  .home-scene { min-height: 340px; border-radius: 7px 7px 0 0; }
  .home-scene-art { object-position: 50% 40%; }
  .home-step-panel { min-height: 140px; }
}
@media (max-width: 480px) {
  .home-example { padding: 10px; gap: 8px; font-size: .8125rem; }
  .home-example img { width: 30px; height: 30px; }
  .home-scene-caption { padding: 14px; gap: 10px; }
  .home-wave { display: none; }
  .home-grid-reference > summary { flex-direction: column; align-items: start; gap: 6px; }
  .home-audio .audio-panel { max-width: calc(100vw - 88px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-scene-art { transition: none; transform: none !important; }
  .home-wave i { animation: none !important; }
}
.reader-play-note { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 18px; color: var(--print-dim); font-size: .875rem; line-height: 1.5; }
.play-note-mark { font-size: 2rem; color: var(--brass-ink); }
.reader-play-note a { color: var(--brass-ink); text-underline-offset: 3px; }
.story-play { --play-brass: var(--brass); --play-rust: var(--brick); --play-zinc: var(--zinc); --play-ink: var(--iron); margin: 36px 0; padding: clamp(18px,3vw,28px); border: 1px solid var(--paper-edge); border-radius: 9px 3px 12px 3px; background: var(--paper-sink); color: var(--print); box-shadow: 4px 5px 0 #241e1c0a; scroll-margin-top: 240px; }
.play-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font: .65rem var(--data); letter-spacing: .07em; color: var(--brass-ink); }
.play-heading a { letter-spacing: 0; font: .8125rem var(--body); color: var(--print-dim); text-underline-offset: 3px; padding-block: 12px; }
.story-play h2 { margin: 12px 0 10px; font: 750 clamp(1.3rem,2.5vw,1.85rem)/1.1 var(--display); letter-spacing: -.035em; }
.play-hint { font: .9375rem/1.5 var(--body); color: var(--print-dim); max-width: 48ch; }
.play-stage { position: relative; display: grid; place-items: center; min-height: 160px; margin: 18px 0 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%,#fcf8efc9,transparent 70%); border-bottom: 1px solid var(--line); }
.play-drawing { width: 100%; max-width: 400px; height: auto; display: block; overflow: visible; }
.play-wall { stroke: var(--paper-edge); stroke-width: 1; stroke-dasharray: 5 8; opacity: .6; }
.play-pipe-outline { stroke-width: 22; }
.play-pipe-fill { stroke: var(--play-zinc); stroke-width: 16; }
.pipe-signal { stroke: var(--play-brass); stroke-width: 8; stroke-dasharray: 16 120; stroke-dashoffset: 20; opacity: 0; }
.pipe-rings, .pipe-arrival, .door-click, .landing-rings { opacity: 0; }
.pipe-spoon { transform-origin: 300px 163px; }
.story-play[data-state="humming"] .pipe-spoon { animation: play-spoon .3s ease-out; }
.story-play[data-state="humming"] .pipe-signal { opacity: 1; animation: play-pulse 1.5s ease-out forwards; }
.story-play[data-state="humming"] .pipe-rings { animation: play-rings 2s ease-out; }
.story-play[data-state="humming"] .pipe-arrival { animation: play-arrival 2s ease-out; }
.play-sound { position: absolute; right: 6%; top: 20%; max-width: 60%; color: var(--brass-ink); font: 850 clamp(1.1rem,2.4vw,1.7rem)/1 var(--display); letter-spacing: -.04em; transform: rotate(-7deg); overflow-wrap: anywhere; pointer-events: none; }
[data-story-play="stairs"] .play-sound { top: auto; bottom: 12px; right: 12px; max-width: 90%; font-size: clamp(.85rem,1.8vw,1.15rem); }
[data-story-play="meters"] .play-sound { display: none; }
.play-door-leaf { transform-origin: 127px 37px; transition: transform .6s cubic-bezier(.22,1,.36,1); }
[data-state="lifted"] .play-door-leaf { transform: translateY(-7px); }
[data-state="lifted"] .door-click { opacity: 1; }
[data-state="lifted"] .door-push-arrow { stroke-width: 6; }
[data-state="open"] .play-door-leaf { transform: translateY(-5px) skewY(-9deg) scaleX(.25); }
[data-state="small"] .landing-shoe { animation: play-small-step .7s ease-out; }
[data-state="big"] .landing-shoe { animation: play-big-step .7s ease-out; }
[data-state="big"] .landing-structure { animation: play-landing .8s .3s ease-out; }
[data-state="big"] .landing-rings { animation: play-rings 1.2s .35s ease-out; }
[data-state="big"] .landing-birds { animation: play-birds 1.8s .4s ease-out; }
.play-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.play-actions button { flex: 1 1 130px; cursor: pointer; border: 1px solid var(--paper-edge); background: var(--paper-card); color: var(--print); padding: 12px 14px; min-height: 48px; border-radius: 4px; font: 600 .9375rem var(--body); }
.play-actions button:first-child { background: var(--iron); color: var(--linen); border-color: var(--iron); }
.play-actions button:hover { box-shadow: inset 0 0 0 2px var(--brass); }
.play-actions button:disabled { opacity: .65; cursor: default; }
.play-status { font: .875rem/1.5 var(--body); color: var(--print-dim); margin-top: 15px; min-height: 3em; }
.play-meter-bank { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); width: 100%; gap: 12px 8px; padding: 12px 0; }
.play-meter { padding: 3px; min-width: 0; min-height: 48px; border: 1px solid transparent; background: transparent; color: var(--print); cursor: pointer; border-radius: 6px; }
.play-meter svg { display: block; width: 100%; max-width: 64px; margin: auto; stroke: var(--iron); stroke-width: 2; }
.play-meter rect { fill: var(--zinc); }
.play-meter circle { fill: var(--paper-card); }
.play-meter path { fill: none; stroke-width: 3; stroke-linecap: round; }
.play-meter > span { display: block; font: .65rem/1.5 var(--data); }
.play-meter::after { content: attr(data-rate); display: block; min-height: 1.5em; font: .6rem/1.5 var(--data); color: var(--print-dim); }
.play-meter[aria-pressed="true"] { border-color: var(--brass-ink); background: var(--paper-card); }
.play-meter[data-result="found"] rect { fill: var(--brass); }
.meter-hand { transform-origin: 32px 29px; }
[data-state="watching"] .meter-hand { animation: play-meter-tick 2s steps(6,end) infinite; }
[data-state="watching"] [data-meter="12"] .meter-hand { animation-duration: .5s; }
.play-ending { text-align: center; }
.play-ending .play-hint { margin-inline: auto; }
.play-ending .play-stage { height: 205px; }
.play-hook { position: absolute; width: 10px; height: 50px; top: 0; border: 3px solid var(--brass-ink); border-top: 0; border-radius: 0 0 8px 8px; }
.play-tapper { position: relative; z-index: 1; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; width: 140px; height: 140px; transform-origin: 50% 0; }
.play-tapper img { display: block; width: 140px; height: 140px; }
.play-tapper:hover { filter: drop-shadow(0 4px 4px #241e1c26); }
[data-state="one"] .play-tapper, [data-state="waiting"] .play-tapper { animation: play-tapper .35s ease-out; }
.play-echo { position: absolute; width: 140px; height: 140px; border: 2px solid var(--brass-ink); border-radius: 50%; opacity: 0; pointer-events: none; }
[data-state="answered"] .play-echo { animation: play-echo 1.1s ease-out; }
[data-state="answered"] .echo-two { animation-delay: .5s; }
[data-state="answered"] .play-tapper { animation: play-tapper .5s ease-out 2; }
.story-play:focus-within { border-color: var(--brass-ink); }
.story-play button:focus-visible, .story-play a:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.reading .beat-label { scroll-margin-top: 240px; }
body.read-focus .story-play, body.read-focus .reader-play-note { display: none; }
@keyframes play-spoon { 40% { transform: rotate(12deg); } }
@keyframes play-pulse { from { stroke-dashoffset: 20; } to { stroke-dashoffset: -112; } }
@keyframes play-rings { 15%,50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes play-arrival { 0%,60% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes play-small-step { 40% { transform: translateY(-5px); } }
@keyframes play-big-step { 30% { transform: translateY(-18px) rotate(-3deg); } 60% { transform: translateY(1px); } }
@keyframes play-landing { 15%,45% { transform: translateY(3px); } 30%,60% { transform: translateY(-2px); } }
@keyframes play-birds { 40%,75% { transform: translate(25px,-30px); } }
@keyframes play-meter-tick { to { transform: rotate(360deg); } }
@keyframes play-tapper { 30% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } }
@keyframes play-echo { from { opacity: .6; transform: scale(.85); } to { opacity: 0; transform: scale(1.5); } }
.story-play[data-motion="still"] *, .story-play[data-motion="still"] *::before, .story-play[data-motion="still"] *::after { animation: none !important; transition: none !important; }
@media (max-width: 480px) {
  .story-play { padding: 16px; margin-inline: -8px; }
  .play-meter-bank { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .reader-tools { gap: 6px; }
  .reader-tools button { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-play *, .story-play *::before, .story-play *::after { animation: none !important; transition: none !important; }
}
@media print { .reader-tools, .reader-play-note, .story-play { display: none !important; } }

/* The story engine is a working surface: fact × rule = a real story. */
.engine-intro { padding: 28px 0 52px; background: var(--paper); }
.engine-title, .engine-section-title { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.engine-title h1 { font-size: clamp(2.1rem,3.7vw,3.7rem); line-height: 1.03; margin-top: 18px; }
.engine-title em, .engine-section-title em { font-style: normal; color: var(--accent); }
.engine-title > .lead, .engine-section-title > .lead { max-width: 33ch; font-size: 1.06rem; margin-bottom: 0; }
.engine-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.engine-examples > span { margin-right: 10px; font: .75rem var(--data); color: var(--print-mute); }
.engine-examples button { cursor: pointer; font: .875rem var(--body); padding: 10px 16px; min-height: 44px; border: 1px solid var(--paper-edge); border-radius: 40px; background: transparent; color: var(--print-dim); }
.engine-examples button[aria-pressed="true"] { background: var(--iron); color: var(--linen); border-color: var(--iron); }
.engine-bench { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); gap: 10px; align-items: stretch; }
.engine-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--paper-edge); border-radius: 6px; background: var(--paper-card); overflow: hidden; }
.engine-card-head { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.engine-card-head h2 { font-size: 1.1rem; line-height: 1.15; letter-spacing: -.02em; }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--line); color: var(--accent); font: .75rem var(--data); border-radius: 50%; }
.engine-fact-picture { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.engine-fact-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.engine-fact-picture > span { position: absolute; bottom: 10px; left: 12px; right: 12px; padding: 8px 10px; background: #fcf8efdc; backdrop-filter: blur(10px); color: var(--print); font: .8125rem var(--data); border: 1px solid #8e7c4e66; }
.engine-card-copy { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.engine-card-copy label { display: grid; gap: 8px; font-size: .8125rem; line-height: 1.4; color: var(--fg-dim); }
.engine-card-copy select { width: 100%; min-width: 0; text-overflow: ellipsis; padding: 11px 8px; border: 1px solid var(--paper-edge); border-radius: 3px; font: .875rem var(--body); color: var(--print); background: var(--paper); min-height: 44px; }
.engine-fact-line { font-size: 1.08rem; font-weight: 600; line-height: 1.45; margin: 18px 0 12px; }
.engine-note { display: block; font-size: .875rem; color: var(--fg-dim); line-height: 1.5; }
.engine-operator { align-self: center; text-align: center; color: var(--brass-ink); font: 600 2rem var(--read); }
.engine-rule-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 14px; }
.engine-rule-buttons button { display: flex; align-items: center; gap: 7px; min-height: 63px; padding: 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--print-dim); cursor: pointer; text-align: left; }
.engine-rule-buttons b { font: 500 .875rem/1.15 var(--body); }
.engine-rule-buttons button > span { font-size: 1.4rem; color: var(--brass-ink); flex: none; width: 22px; text-align: center; }
.engine-rule-buttons button[aria-pressed="true"] { background: var(--brass); border-color: var(--iron); color: var(--strike); box-shadow: 0 2px 0 var(--iron); }
.engine-rule-buttons button[aria-pressed="true"] > span { color: var(--strike); }
.engine-rule-meaning { margin-top: auto; padding: 16px 18px; border-top: 1px solid var(--line); background: var(--paper-sink); }
.engine-rule-meaning > span { font: .75rem var(--data); color: var(--brass-ink); }
.engine-rule-meaning h3 { font-size: 1.3rem; margin-block: 8px; }
.engine-rule-meaning p { font-size: .9375rem; color: var(--print-dim); line-height: 1.4; }
.engine-result { background: var(--ink); border-color: var(--iron); color: var(--fg); }
.engine-tapper { display: grid; place-items: center; position: relative; min-height: 154px; overflow: hidden; }
.engine-tapper > img { position: relative; z-index: 1; width: 94px; height: 94px; filter: drop-shadow(0 5px 12px #0008); }
.engine-sound-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.engine-sound-rings i { position: absolute; width: 115px; height: 115px; border: 1px solid #c9a85a55; border-radius: 50%; }
.engine-sound-rings i:nth-child(2) { width: 165px; height: 165px; opacity: .5; }
.engine-sound-rings i:nth-child(3) { width: 215px; height: 215px; opacity: .3; }
[data-engine-changing] .engine-sound-rings { animation: engine-answer .5s ease-out; }
@keyframes engine-answer { from { opacity: .2; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
[data-engine-empty-mark] { font: 600 4rem var(--read); color: var(--brass-hi); }
.engine-result .engine-card-copy { padding-top: 2px; }
.engine-result-status { font: .75rem var(--data); color: var(--brass-hi); }
.engine-result h3 { font-size: 1.7rem; line-height: 1.1; margin: 10px 0 12px; }
.engine-result p { font-size: 1rem; line-height: 1.45; color: var(--stone-dim); }
.engine-result .engine-refrain { font: italic 1.15rem/1.45 var(--read); color: var(--stone); border-left: 2px solid var(--brass); padding-left: 12px; }
.engine-result .btn { margin-top: auto; font-size: .8125rem; padding-inline: 10px; width: 100%; }
.engine-footnote { margin-top: 20px; font-size: .875rem; color: var(--print-dim); }
.engine-section-title h2 { font-size: clamp(1.9rem,3.3vw,3rem); line-height: 1.08; margin-top: 18px; }
.beat-tabs { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); border: 1px solid #c9a85a66; border-radius: 4px; overflow: hidden; }
.beat-tabs button { background: transparent; color: var(--stone-dim); border: 0; border-right: 1px solid #c9a85a33; padding: 15px 8px; font: .875rem var(--body); display: grid; gap: 6px; place-items: center; cursor: pointer; min-height: 72px; }
.beat-tabs button:last-child { border-right: 0; }
.beat-tabs button > span { font: .75rem var(--data); color: var(--brass-hi); }
.beat-tabs button[aria-selected="true"] { background: var(--brass); color: var(--strike); box-shadow: inset 0 -4px #fcf8ef66; }
.beat-tabs button[aria-selected="true"] > span { color: var(--strike); }
.beat-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 40px; margin-top: 36px; align-items: center; }
.beat-illustration { position: relative; display: grid; place-items: center; min-width: 0; }
.beat-illustration::before { content: ""; position: absolute; width: 85%; aspect-ratio: 1; border: 1px solid #c9a85a30; border-radius: 50%; background: radial-gradient(ellipse,#c9a85a13,transparent 70%); }
.beat-cast { display: block; position: relative; width: 100%; height: auto; z-index: 1; }
.beat-stair-track { display: flex; align-items: end; justify-content: center; gap: 6px; width: 85%; height: 55px; margin-top: 10px; }
.beat-stair-track i { flex: 1; max-width: 40px; height: calc(13px + var(--step) * 6px); border: 1px solid #c9a85a55; background: transparent; border-radius: 2px 2px 0 0; transition: background .2s; }
.beat-stair-track i[data-passed] { background: var(--brass); border-color: var(--brass); }
.beat-pages { padding: 28px; border: 1px solid #c9a85a66; border-radius: 6px; background: #fcf8ef08; backdrop-filter: blur(14px); }
.beat-panel { min-height: 290px; }
.beat-panel + .beat-panel:not([hidden]) { margin-top: 25px; }
.beat-stage-label { font: .875rem var(--data); color: var(--brass-hi); }
.beat-panel h3 { font-size: clamp(2rem,3.3vw,3rem); margin: 14px 0; }
.beat-panel > p { color: var(--stone-dim); font-size: 1rem; }
.beat-panel blockquote { font: 1.2rem/1.5 var(--read); margin: 22px 0 14px; padding-left: 16px; border-left: 2px solid var(--brass); color: var(--stone); }
.beat-source { font: .75rem var(--data); color: var(--stone-dim); }
.beat-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #c9a85a33; }
.beat-pagination button { cursor: pointer; min-height: 44px; padding: 9px 12px; border: 1px solid #c9a85a99; background: transparent; color: var(--stone); border-radius: 3px; font: .875rem var(--body); }
.beat-pagination button:disabled { opacity: .4; cursor: default; }
.beat-pagination > span { font: .75rem var(--data); color: var(--stone-dim); white-space: nowrap; }
.growth-equation { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: center; text-align: center; padding: 32px; margin-top: 32px; border: 1px solid var(--paper-edge); background: var(--paper-card); }
.growth-equation > div { display: grid; gap: 8px; }
.growth-equation b { font: 800 clamp(2.2rem,5vw,4.5rem)/1 var(--display); letter-spacing: -.05em; }
.growth-equation span { font: .875rem var(--data); color: var(--print-dim); }
.growth-equation > span { font-size: 2rem; }
.growth-total b { color: var(--brass-ink); }
.growth-board { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 24px 10px; }
.growth-column { display: grid; grid-template-rows: repeat(8,8px); gap: 3px; width: 16px; }
.growth-column i { background: #8e7c4e38; border: 1px solid #8e7c4e80; border-radius: 1px; }
.growth-column[data-new] i { background: var(--brass); border-color: var(--brass-ink); }
.growth-column[data-new] { animation: engine-answer .25s ease-out; }
.growth-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-block: 10px 20px; }
.growth-controls > button:not(.btn) { background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; font: .9375rem var(--body); color: var(--print-dim); cursor: pointer; min-height: 44px; }
.growth-controls p { font-size: .9375rem; margin: 0; }
.growth-controls button:disabled { opacity: .6; cursor: default; }
.engine-reference summary { cursor: pointer; font: 700 clamp(1.1rem,2vw,1.6rem)/1.3 var(--display); padding-block: 14px; }
.engine-reference-body { margin-top: 28px; }
@media (max-width: 1000px) {
  .engine-bench { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); }
  .engine-bench > .engine-operator:nth-of-type(2) { display: none; }
  .engine-result { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
  .engine-result .engine-card-head { grid-column: 1 / -1; }
  .engine-result .engine-card-copy { padding: 24px; }
  .engine-result .engine-tapper { min-height: 220px; }
  .engine-title, .engine-section-title { align-items: start; }
}
@media (max-width: 700px) {
  .engine-title, .engine-section-title { flex-direction: column; gap: 18px; }
  .engine-title > .lead, .engine-section-title > .lead { max-width: 50ch; }
  .engine-bench { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .engine-operator { font-size: 2rem; line-height: 1; }
  .engine-bench > .engine-operator:nth-of-type(2) { display: block; }
  .engine-fact-picture { aspect-ratio: 2 / 1; }
  .engine-result { display: flex; }
  .engine-result .engine-tapper { min-height: 150px; }
  .engine-rule-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .beat-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .beat-tabs button { border-bottom: 1px solid #c9a85a33; }
  .beat-stage { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .beat-illustration { max-width: 400px; margin-inline: auto; }
  .beat-pages { padding: 20px; }
  .beat-panel { min-height: 0; }
  .growth-equation { grid-template-columns: 1fr 20px 1fr 20px 1fr; padding: 24px 12px; }
  .growth-equation span { font-size: .75rem; }
  .growth-equation > span { font-size: 1.5rem; }
  .growth-board { gap: 5px; padding-inline: 0; }
  .growth-column { width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .house-model, .house-blueprint, .house-atmosphere, .house-ground { transform: none !important; }
}
/* The illustrated introduction uses native, keyboard-accessible video controls. */
.film-link { margin-top: 12px; }
.guide-opening,.guide-making { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,60px); align-items: center; }
.guide-opening h1 { font-size: clamp(3rem,7vw,6.5rem); line-height: 1; letter-spacing: -.055em; }
.guide-opening h1 em { color: var(--brass-ink); font-style: normal; }
.guide-opening img,.guide-making img { display: block; width: 100%; height: auto; border-radius: 8px; }
.guide-opening .lead { max-width: 38rem; }
.guide-film .film-player { max-width: 1000px; }
.guide-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 0; list-style: none; }
.guide-steps li { border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--paper-card); padding: 24px; }
.guide-steps li>span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brass-ink); color: white; font-weight: 800; }
.guide-steps h3 { margin: 18px 0 8px; }
.guide-steps p { margin: 0; }
.guide-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.guide-choices a { display: flex; flex-direction: column; min-height: 240px; padding: 24px; border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--paper-card); color: var(--print); text-decoration: none; }
.guide-choices a:hover,.guide-choices a:focus-visible { border-color: var(--brass-ink); box-shadow: 0 8px 24px #241e1c14; }
.guide-choices h3 { margin: 18px 0 8px; }
.guide-choices p { margin: 0 0 16px; }
.guide-choices b { margin-top: auto; color: var(--brass-ink); }
@media (max-width: 750px) { .guide-opening,.guide-making,.guide-steps,.guide-choices { grid-template-columns: 1fr; } .guide-opening h1 { font-size: clamp(2.8rem,12vw,4.5rem); } .guide-choices a { min-height: 0; } }
.film-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; margin-bottom: 32px; }
.film-intro h2 { margin-bottom: 0; }
.film-intro .lead { max-width: 32em; margin-bottom: 0; }
.film-player { border: 1px solid var(--paper-edge); border-radius: 8px; overflow: hidden; background: var(--paper-card); box-shadow: 0 16px 42px #241e1c10; }
.film-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.film-player video::cue { color: white; background: #1a1513e8; }
.film-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px 8px; font-size: 14px; color: var(--print-dim); }
.film-toolbar label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--print); }
.film-toolbar input { width: 20px; height: 20px; accent-color: var(--brass-ink); }
.film-player .film-note, .film-status { margin: 0; padding: 0 24px 20px; color: var(--print-dim); font-size: 14px; }
.film-status:empty { display: none; }
.film-transcript { margin: 24px 0; max-width: 76ch; }
.film-transcript summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 700; }
.film-transcript p { line-height: 1.7; }
.film-note { font-size: 14px; color: var(--print-dim); }
.film-replays { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
@media (max-width: 700px) {
  .film-intro { grid-template-columns: 1fr; gap: 20px; }
  .film-toolbar { padding: 14px 16px 8px; gap: 4px; }
  .film-player .film-note, .film-status { padding-left: 16px; padding-right: 16px; }
}

/* Complete free-story listening room. The prose below remains the transcript. */
.home-listening { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 4vw, 50px); padding: clamp(24px, 4vw, 48px); margin: 25px 0 36px; color: #f8edda; background: radial-gradient(circle at 15% 30%, #6c5c43 0, #25302c 42%, #192221 100%); border-radius: 10px; scroll-margin-top: 90px; }
.home-listening h3 { color: #fff7e9; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.1; margin: 12px 0; }
.home-listening p { line-height: 1.6; max-width: 38ch; color: #eee2ca; }
.home-listening .mono { color: #e9c878; }
.home-listening-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-listening-choices a { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 17px; border: 1px solid #dac18b8c; border-radius: 6px; text-decoration: none; color: #f8edda; min-height: 116px; transition: background .15s, transform .15s; }
.home-listening-choices a:hover, .home-listening-choices a:focus-visible { background: #e9c87823; transform: translateY(-2px); }
.home-listening-choices a span, .home-listening-choices a small { font: .72rem var(--data); color: #e9c878; }
.home-listening-choices a b { font: 700 1.35rem/1.1 var(--display); }
@media (max-width: 800px) { .home-listening { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .home-listening-choices { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .home-listening-choices a { transition: none; } .home-listening-choices a:hover { transform: none; } }
.listen-story { --listen-progress: 0; margin: 18px 0 38px; }
.listen-heading { max-width: 75ch; margin-bottom: 16px; }
.listen-heading h2 { font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.08; margin: 6px 0; }
.listen-heading p { color: var(--print-dim); line-height: 1.45; }
.listen-heading .listen-original-note { margin: 7px 0 0; font-size: .83rem; }
.listen-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #1d2423; color: #f9f0db; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px #21170c24; }
.listen-picture { position: relative; width: 100%; min-height: 510px; overflow: hidden; isolation: isolate; }
.listen-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #151b1bd9, transparent 32%); pointer-events: none; }
.listen-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: #24312d; overflow: hidden; }
.listen-picture[data-listen-scene="0"] .listen-scene-wide,
.listen-picture[data-listen-scene="1"] .listen-scene-close,
.listen-picture[data-listen-scene="2"] .listen-scene-action { opacity: 1; visibility: visible; }
.listen-scene img { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center; }
.listen-scene-close img { transform: scale(1.6); object-position: 60% 44%; }
.listen-story.is-playing.is-moving .listen-scene-wide img { animation: listen-drift 24s ease-in-out infinite alternate; }
.listen-story.is-playing.is-moving .listen-scene-close img { animation: listen-close 20s ease-in-out infinite alternate; }
@keyframes listen-drift { to { transform: scale(1.09) translate(-1%, .7%); } }
@keyframes listen-close { from { transform: scale(1.52) translate(1%, 0); } to { transform: scale(1.7) translate(-1%, 1%); } }
.listen-scene-action { display: grid; place-items: center; background: radial-gradient(circle at 52% 40%, #d8bd83, #8f7552 68%, #4f473b); }
.listen-scene-action video { width: 100%; height: 100%; object-fit: cover; }
.listen-scene-action .play-drawing { width: min(85%, 440px); height: auto; color: #34271c; filter: drop-shadow(0 20px 12px #443b3744); }
.listen-rings { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; z-index: 1; pointer-events: none; }
.listen-rings i { position: absolute; width: 24%; aspect-ratio: 1; border: 2px solid #f3c66bd9; border-radius: 50%; box-shadow: 0 0 35px #e8bd6d77; }
.listen-story.is-playing.is-moving .listen-rings { opacity: 1; }
.listen-story.is-playing.is-moving .listen-rings i { animation: listen-pulse 4.5s ease-out infinite; }
.listen-story.is-playing.is-moving .listen-rings i:nth-child(2) { animation-delay: 1.5s; }
.listen-story.is-playing.is-moving .listen-rings i:nth-child(3) { animation-delay: 3s; }
@keyframes listen-pulse { 0% { transform: scale(.4); opacity: .75; } 100% { transform: scale(5); opacity: 0; } }
.listen-time { position: absolute; bottom: 22px; left: 24px; z-index: 2; font: .85rem var(--data); color: #fff7de; background: #15201bba; padding: 7px 10px; border-radius: 4px; }
.listen-scene-picker { position: absolute; bottom: 18px; right: 17px; z-index: 3; display: flex; gap: 4px; background: #15201bd9; padding: 4px; border-radius: 6px; }
.listen-scene-picker button { color: #f5e4ba; background: transparent; border: 0; border-radius: 4px; min-height: 38px; padding: 4px 8px; font: .72rem var(--data); cursor: pointer; }
.listen-scene-picker button[aria-pressed="true"] { background: #e9c570; color: #24201b; }
.listen-scene-picker button:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.listen-story.has-slideshow .listen-picture { display: flex; flex-direction: column; align-self: start; height: auto; min-height: 0; background: #f1eddf; }
.listen-slide-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #f1eddf; }
.listen-story.has-slideshow .listen-scene { visibility: visible; background: #f1eddf; transition: opacity .65s ease-in-out; }
.listen-story.has-slideshow .listen-scene.is-active { opacity: 1; }
.listen-story.has-slideshow .listen-scene img { object-fit: contain; }
.listen-story.has-slideshow .listen-rings { display: none; }
.listen-story.has-slideshow.is-playing .listen-picture[data-listen-scene="7"] .listen-rings { display: grid; opacity: .48; }
.listen-story.has-slideshow.is-playing .listen-picture[data-listen-scene="7"] .listen-rings i { animation: listen-finale-pulse 4.5s ease-out infinite; }
.listen-story.has-slideshow.is-playing .listen-picture[data-listen-scene="7"] .listen-rings i:nth-child(2) { animation-delay: 1.5s; }
.listen-story.has-slideshow.is-playing .listen-picture[data-listen-scene="7"] .listen-rings i:nth-child(3) { animation-delay: 3s; }
@keyframes listen-finale-pulse { from { transform: scale(.2); opacity: .55; } to { transform: scale(2.2); opacity: 0; } }
.listen-story.has-slideshow .listen-time { top: 12px; bottom: auto; right: 12px; left: auto; }
.listen-slide-controls { position: relative; z-index: 3; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; color: #fff7de; background: #15201b; padding: 6px 10px; }
.listen-slide-controls button { width: 44px; height: 44px; border: 1px solid #f5e4ba99; border-radius: 5px; background: #e9c570; color: #24201b; font-size: 1.35rem; cursor: pointer; }
.listen-slide-controls button:disabled { opacity: .45; cursor: default; }
.listen-slide-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.listen-slide-label { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 3px 10px; min-width: 0; text-align: center; }
.listen-slide-label strong { font: 700 .9rem var(--body); }
.listen-slide-label span { font: .72rem var(--data); color: #efd698; white-space: nowrap; }
.listen-panel { padding: clamp(20px, 2.5vw, 32px); display: flex; flex-direction: column; min-width: 0; }
.listen-kicker, .listen-caption-label { font: .78rem var(--data); letter-spacing: .1em; color: #ebc675; }
.listen-panel h3 { font: 700 clamp(1.9rem, 3vw, 2.8rem)/1.06 var(--display); margin: 8px 0 0; color: #fff7e5; }
.listen-caption-label { margin: 15px 0 5px; }
.listen-caption { font: 1.12rem/1.4 var(--read); min-height: 3.3em; margin: 0 0 10px; color: #f9f0db; }
.listen-panel audio { width: 100%; min-height: 54px; }
.listen-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin-top: 8px; font-size: .84rem; }
.listen-options label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; }
.listen-options input { width: 19px; height: 19px; accent-color: #d8aa55; }
.listen-note { font-size: .82rem; line-height: 1.42; color: #dfd1af; margin: 8px 0 4px; }
.listen-panel audio[data-listen-music-track], .listen-panel audio[data-listen-sound-track] { display: none; }
.listen-sound-button { align-self: flex-start; background: transparent; color: #f1c677; border: 1px solid #e7c4798c; border-radius: 5px; min-height: 44px; padding: 7px 12px; font: .85rem var(--body); cursor: pointer; margin-top: 8px; }
.listen-sound-button:hover { background: #e7c47922; }
.listen-read-link { color: #f1c677; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; text-underline-offset: 4px; }
.listen-status { margin: 5px 0 0; font-size: .85rem; color: #dfd1af; }
.listen-download { display: inline-block; margin-top: 13px; font-size: .85rem; }
@media (max-width: 800px) { .listen-stage { grid-template-columns: 1fr; } .listen-picture { min-height: 0; height: clamp(220px, 48vw, 330px); } .listen-panel h3 { margin-bottom: 0; } }
@media (max-width: 480px) { .listen-picture { height: 230px; } .listen-panel { padding: 20px; } .listen-options { grid-template-columns: 1fr; } .listen-caption { min-height: 0; } .listen-scene-picker { top: 8px; bottom: auto; right: 8px; } .listen-scene-picker button { font-size: .65rem; padding-inline: 6px; } .listen-time { left: 8px; bottom: 9px; font-size: .72rem; } .listen-story.has-slideshow .listen-time { top: 8px; right: 8px; left: auto; bottom: auto; } .listen-slide-controls { gap: 4px; } .listen-slide-label strong { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .listen-scene img, .listen-rings i { animation: none !important; } .listen-rings, .listen-story.has-slideshow.is-playing .listen-picture[data-listen-scene="7"] .listen-rings { display: none; } .listen-story.has-slideshow .listen-scene { transition: none; } }
@media print { .listen-story { display: none; } }