/* Levend boek — reader + galerij. Papier is de standaard (overdag lezen); nacht volgt
   prefers-color-scheme: dark. Kleuren zijn de vaste set uit beeld/stijl.md: papier, nacht,
   schaduw (dim-inkt op papier), nat daglicht (dim op nacht), honinglicht (enige UI-accent). */
@font-face {
  font-family: 'Literata';
  src: url('../assets/fonts/Literata-variable-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;   /* zelf gehost, OFL — zie assets/fonts/Literata-OFL.txt */
}
:root {
  color-scheme: light dark;
  --papier: #F4EFE4;
  --nacht: #12161C;
  --bg: var(--papier);
  --bg-text: var(--papier);
  --ink: var(--nacht);
  --ink-dim: #3E4A55;            /* schaduw */
  --accent: #F2D9A6;             /* honinglicht: alleen het weinige UI-accent (galerij, HUD) */
  --rule: rgba(18,22,28,0.16);
  --font-text: Literata, Georgia, serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --measure: 62ch;
  --text-size: 1.125rem;     /* 18 px mobiel */
  --stage-h: 38vh;           /* mobiel: hoogte van het beeld bovenin */
  --anchor: 42%;             /* zelfde waarde als director.anchor */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--nacht);
    --bg-text: var(--nacht);
    --ink: var(--papier);
    --ink-dim: #B8BEC2;        /* nat daglicht */
    --rule: rgba(244,239,228,0.16);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); }
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* ---------- Reader layout: mobiel-eerst (canvas sticky boven), desktop twee kolommen */
.reader { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.stage-wrap { order: -1; position: sticky; top: 0; height: var(--stage-h); z-index: 1; background: var(--bg-text); } /* mobiel: beeld boven, ook al staat het in de DOM na de tekst */
#stage { display: block; width: 100%; height: 100%; cursor: crosshair; }   /* geen pixelated: platen moeten zacht schalen (LB-29), ook bij dpr 3 */
.text-col { background: var(--bg-text); padding-block: 2rem 50vh; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); min-width: 0; }
.text-inner { max-width: var(--measure); margin: 0 auto; font-size: var(--text-size); }

@media (min-width: 900px) {
  :root { --text-size: 1.1875rem; }   /* 19 px desktop */
  .reader { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .text-col { order: 1; padding-block: 16vh 60vh; padding-left: max(3rem, env(safe-area-inset-left, 0px)); padding-right: 2rem; min-height: 100vh; }
  /* beeld = plaat 3:2 (max 56vh), verticaal gecentreerd in zijn sticky kolom; rand loopt uit in het papier */
  .stage-wrap { order: 2; height: 100vh; display: flex; align-items: center; justify-content: center; padding-inline: 1.5rem; }
  #stage {
    width: min(100%, 84vh); height: auto; aspect-ratio: 3 / 2;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    mask-composite: intersect;
  }
}

/* ---------- Tekst: boekzetsel */
.chapter-head { margin: 0 0 3rem; scroll-margin-top: calc(var(--stage-h) + 1.5rem); }
.running-head, .chapter-num { font-family: var(--font-ui); color: var(--ink-dim); }
.running-head { font-size: 12px; letter-spacing: 0.04em; margin: 0 0 4rem; }
.chapter-num { font-size: 0.875rem; margin: 0 0 0.35rem; }
.chapter-title { font-size: 2.4rem; font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0; }
.node { position: relative; margin: 0; padding: 0; scroll-margin-top: calc(var(--stage-h) + 1.5rem); transition: color 300ms; }
/* dimmen alleen vooruit: wat nog komt zakt terug (±72% inkt); gelezen en actieve tekst op volle inkt */
.node.is-active ~ .node { color: color-mix(in srgb, var(--ink) 72%, var(--bg-text)); }
.node p { margin: 0; text-indent: 1.25em; hyphens: auto; hyphenate-limit-chars: 8 4 4; hyphenate-limit-lines: 2; }   /* -lines werkt nog niet in Chromium; -chars wel */
.chapter-head + .node > p:first-child, hr + p,
.node:has(> hr:last-child) + .node > p:first-child { text-indent: 0; }   /* geen inspring na titel of * * * (ook als de hr de vorige node afsluit) */
.node h2, .node h3 { font-weight: 400; color: inherit; margin: 0 0 0.75rem; }
.node.revealed { animation: reveal 700ms ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chapter-end { margin-top: 4rem; text-align: center; font-family: var(--font-ui); color: var(--ink-dim); }
.end-mark { margin: 0 0 1.25rem; letter-spacing: 0.3em; }
.next-chapter { font-size: 0.875rem; opacity: 0.55; color: inherit; text-decoration: none; }
.next-chapter:hover, .next-chapter:focus-visible { opacity: 1; text-decoration: underline; }
.chapter-end + .chapter-head { margin-top: 8rem; }
.chapter-end { margin-bottom: 0; }

/* Beeldloze tekst (hoofdstuk 2+): beeldkolom klapt dicht, tekst staat gecentreerd. De director zet body.zonder-beeld. */
.reader, .stage-wrap { transition: grid-template-columns 600ms ease, height 600ms ease, opacity 600ms ease; }
body.zonder-beeld { --stage-h: 0px; }
body.zonder-beeld .stage-wrap { opacity: 0; pointer-events: none; overflow: hidden; }
@media (min-width: 900px) {
  body.zonder-beeld .reader { grid-template-columns: minmax(0, 1fr) 0; }
  body.zonder-beeld .stage-wrap { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .reader, .stage-wrap { transition: none; } }
.end-spacer { height: 30vh; }
.error { color: #a3332a; font-family: var(--font-mono); }

/* ankerlijn-marker (alleen met HUD) */
.hud-on .text-col::before {
  content: ''; position: fixed; left: 0; right: 0; top: var(--anchor); height: 1px;
  background: var(--ink-dim); opacity: 0.35; pointer-events: none; z-index: 5;
}
#hud {
  position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 10;
  font: 12px/1.4 var(--font-mono); white-space: pre; color: var(--papier);
  background: rgba(18,22,28,0.88); border: 1px solid var(--rule); padding: 0.5rem 0.75rem; border-radius: 4px;
}
.reduced-motion .node, .reduced-motion .node.revealed { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .node, .node.revealed { transition: none; animation: none; } }

/* ---------- Galerij */
.gallery-page { font-family: var(--font-ui); padding-block: 1rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.gallery-page h1 { font-weight: 500; font-size: 1.25rem; margin: 0.5rem 0 0.25rem; }
.gallery-page .lead { color: var(--ink-dim); margin: 0 0 1.5rem; max-width: 60rem; }
#gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.card { position: relative; background: var(--bg-text); border: 1px solid var(--rule); border-radius: 6px; padding: 0.75rem; display: grid; gap: 0.6rem; }
.card header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.card h2 { font-size: 1rem; font-weight: 500; margin: 0; }
.card code { font: 11px var(--font-mono); color: var(--ink-dim); }
.card-stage { width: 100%; aspect-ratio: 16 / 9; background: #000; image-rendering: pixelated; border-radius: 4px; cursor: crosshair; }
.controls { display: grid; gap: 0.35rem; }
.controls label, .row label { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: 0.5rem; font-size: 12px; color: var(--ink-dim); }
.controls input[type=range], .row input[type=range] { width: 100%; accent-color: var(--ink-dim); }
.controls input[type=text] { grid-column: 2 / 4; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: 0.2rem 0.4rem; font: 12px var(--font-mono); }
.controls output { font: 11px var(--font-mono); text-align: right; }
.row { display: grid; gap: 0.35rem; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.row input[type=number] { width: 5rem; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: 0.15rem 0.3rem; font: 12px var(--font-mono); }
.row label:has(input[type=checkbox]) { grid-template-columns: auto 1fr; }
.row button { justify-self: start; background: transparent; color: var(--ink); border: 1px solid var(--ink-dim); border-radius: 3px; padding: 0.3rem 0.6rem; font: 12px var(--font-ui); cursor: pointer; }
.row button:hover { background: var(--accent); color: var(--nacht); }
.snippet { margin: 0; font: 11px/1.5 var(--font-mono); color: var(--ink-dim); background: var(--bg); padding: 0.5rem 0.6rem; border-radius: 3px; white-space: pre; overflow: auto; }
.card-error pre { color: #ff7b7b; font: 11px/1.5 var(--font-mono); white-space: pre-wrap; }
.flash { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--accent); color: var(--nacht); font: 11px var(--font-mono); padding: 0.2rem 0.5rem; border-radius: 3px; animation: fade 1.4s forwards; }
@keyframes fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
blockquote { margin: 1em 0; padding-left: 1em; border-left: 2px solid var(--rule); font-family: var(--font-mono); }
hr { border: 0; text-align: center; margin: 2em 0; }
hr::after { content: '* * *'; letter-spacing: .5em; opacity: .6; }

/* ---------- Tekstversie (tekst.html): alleen de lopende tekst, geen beeld */
.tekst-page { max-width: var(--measure); margin: 0 auto; font-size: var(--text-size); padding: 3rem max(16px, env(safe-area-inset-right, 0px)) 6rem max(16px, env(safe-area-inset-left, 0px)); }
.tekst-page .inhoud { margin: 2.5rem 0 4rem; font-family: var(--font-ui); font-size: 0.95rem; }
.tekst-page .inhoud h2 { font-size: 1rem; color: var(--ink-dim); font-weight: 600; }
.tekst-page .inhoud ol { list-style: none; padding-left: 0; line-height: 1.9; }
.tekst-page .inhoud a { color: var(--ink); text-decoration-color: var(--rule); }
.tekst-page .hoofdstuk { margin-top: 5rem; scroll-margin-top: 1.5rem; }
.tekst-page .hoofdstuk h2 { font-size: 1.7rem; font-weight: 400; line-height: 1.2; margin-bottom: 1.5rem; }
.tekst-page .scenegrens { border: 0; text-align: center; margin: 2rem 0; }
.tekst-page .scenegrens::after { content: '* * *'; color: var(--ink-dim); }