/* ---------- Lettertypen, van ons eigen domein ---------- */
/* Fraunces staat onder de SIL Open Font License; zelf hosten mag, en het
   scheelt elke lezer een verzoek aan Google met zijn IP-adres. Zie B-20.
   De bestanden staan in public/fonts/ omdat de boekroute geen submappen
   en geen .woff2 doorlaat — en dat wilden we zo houden. */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   De Frequentie van Geluk — boekzetting
   --------------------------------------------------------------------------
   Uitgangspunt: dit is een boek, geen website met hoofdstukken. Alles hier
   dient het lezen van 26.000 woorden achter elkaar, niet het scannen van een
   pagina.

   Drie beslissingen dragen de rest:

   1. Twee letters, twee taken. De lopende tekst staat in een systeem-boekletter
      (Iowan Old Style op iOS/macOS — de leesletter van Apple Books —, Sitka
      Text en Constantia op Windows, Charter, Palatino, Georgia, Noto Serif als
      vangnet). Dat zijn tekstletters: gemaakt voor duizenden woorden achter
      elkaar, en ze staan al op het toestel van de lezer, dus ze kosten geen
      netwerkverzoek. Fraunces — dat de HTML zelf al inlaadt — blijft waar hij
      op zijn best is: titels, initialen, kapitaalregels. Fraunces is een
      display-schreef; over een heel hoofdstuk vermoeit hij, boven een hoofdstuk
      draagt hij het merk.
   2. Eén basislijn. --baseline is de regelafstand van de lopende tekst; elke
      verticale maat in dit bestand is daar een veelvoud van. Geen losse marges.
   3. Klassieke alinea's: ingesprongen vervolgalinea's, géén witregel. De eerste
      alinea na een kop, citaat of lijst springt niet in — de regel staat op
      p + p en dat regelt het vanzelf.

   Let op: de route src/app/boek/[[...slug]]/route.ts injecteert ná dit bestand
   nog CSS voor de Luminous-balk. Die zet body{padding-top}, #sidebar{top,height}
   en #menu-toggle{top} met !important. Dat winnen we niet en dat willen we niet:
   niets hieronder vecht daarmee.
   ========================================================================== */

:root {
  /* ---- Papier en inkt ---------------------------------------------------- */
  --bg:         #e9e1d1;   /* het vlak waarop het blad ligt */
  --paper:      #fdfaf3;   /* het blad zelf */
  --ink:        #2b2720;
  --ink-soft:   #5f584a;
  --ink-faint:  #8d8472;
  --rule:       #ddd4c0;
  --accent:     #7b5e3b;   /* aarde-bruin */
  --accent-soft:#b0935f;   /* goud */

  /* ---- Letters ----------------------------------------------------------- */
  --text: "Iowan Old Style", "Sitka Text", Constantia, Charter,
          "Bitstream Charter", "Palatino Linotype", "Book Antiqua", Palatino,
          Georgia, "Noto Serif", "Times New Roman", serif;
  --display: "Fraunces", "Iowan Old Style", "Sitka Text", Constantia, Georgia, serif;
  /* Alleen voor wat géén boek is: navigatie, colofon, tabelkop. */
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Maatvoering ------------------------------------------------------- */
  /* 17,2px op een telefoon, 19,2px op een breed scherm. */
  --fs-body: clamp(1.0625rem, 0.99rem + 0.36vw, 1.2rem);
  --lh: 1.62;
  /* De basislijn. Alle verticale maten zijn hier een veelvoud van. */
  --baseline: calc(var(--fs-body) * var(--lh));

  /* Regellengte: 31 × de korpsgrootte. In de browser nagemeten op de echte
     tekst: ~65 tekens per regel, het getal waar de boekzetting al eeuwen op
     uitkomt. Was 38rem = 608px ≈ 70-73 tekens; bij die lengte raakt het oog
     bij de terugsprong naar links de volgende regel kwijt. */
  --measure: calc(var(--fs-body) * 31);

  /* Wit tussen de tekstkolom en de rand van het blad. */
  --gutter: calc(var(--baseline) * 2);
  /* Breedte van de kantlijn waarin de bewijslabels hangen (≥1380px). Ruim
     genoeg voor het langste label, CONTEMPLATIEF, op één regel. */
  --marge: calc(var(--baseline) * 5.25);

  --sidebar-w: 300px;

  /* ---- Bewijslabels ------------------------------------------------------ */
  /* Ontzadigd naar de aarde-tinten van de huisstijl: ze moeten te ónderscheiden
     zijn, niet op te vallen. */
  --proven:        #4c6b4d;
  --plausible:     #8a6a24;
  --contemplative: #6b5570;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Een sprong naar #kop landt anders achter de vaste Luminous-balk. */
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh);
  /* Oudstijlcijfers in de lopende tekst: cijfers krijgen stok en staart en
     storen de regel niet meer, zoals in een gezet boek. Letters zonder die
     variant negeren dit stil. */
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Aanhalingstekens en streepjes mogen de marge in hangen (Safari; de rest
     negeert het). */
  hanging-punctuation: first last;
}

/* Nederlandse afbreking. Werkt op <html lang="nl">, dat er al staat, en is de
   voorwaarde voor het uitvullen verderop. */
:lang(nl) { hyphens: auto; -webkit-hyphens: auto; }

/* Aanhalingstekens voor <q> in de stijl die de HTML zelf al gebruikt. */
:lang(nl) q { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* ==========================================================================
   Het blad
   ========================================================================== */

main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
}

.page {
  background: var(--paper);
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: calc(var(--baseline) * 1.5) 0 0;
  /* Vijf basislijnen lucht boven de titel. Een boek begint een hoofdstuk niet
     bovenaan het blad; die val is het signaal dat er iets nieuws begint. */
  padding: calc(var(--baseline) * 5) var(--gutter) calc(var(--baseline) * 3);
  border: 1px solid var(--rule);
  /* Geen ronde hoeken, geen zwevende kaart: een blad papier. */
  box-shadow: 0 1px 3px rgba(60, 44, 16, 0.05), 0 14px 44px rgba(60, 44, 16, 0.07);
}

/* De tekstkolom staat gecentreerd op het blad. */
.page > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* Wat als eerste op het blad staat brengt geen eigen marge mee — de lucht zit
   al in de padding van .page. */
.page > :first-child { margin-top: 0; }

/* ==========================================================================
   Lopende tekst
   ========================================================================== */

.page p {
  margin: 0;
  /* Voorkomt een slotregel met één woord erop. Dit is de weduwenbestrijding die
     op een scherm daadwerkelijk werkt; orphans/widows gelden pas als de tekst
     in pagina's wordt gebroken — zie @media print onderaan. */
  text-wrap: pretty;
}

/* Klassieke alineascheiding: inspringen, geen witregel. Doordat de regel op
   p + p staat, springt de eerste alinea ná een kop, citaat, lijst of streep
   vanzelf níét in. */
.page p + p { text-indent: 1.15em; }

/* Een alinea die op een blok volgt is een voortzetting, geen nieuwe inzet. */
.page ul + p,
.page ol + p,
.page blockquote + p,
.page table + p,
.page pre + p,
.page hr + p { text-indent: 0; }

/* Alinea's die uitdrukkelijk vlak blijven. */
.page p.flush,
.page p.chapter-opening,
.page .epigraph p { text-indent: 0; }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

a {
  color: var(--accent);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent-soft);
}
a:hover { text-decoration-color: var(--accent); }

/* Uitgevuld zodra de kolom breed genoeg is, zoals een gezet boek — met
   hyphens:auto hierboven als voorwaarde, anders trekt Nederlands met zijn lange
   samenstellingen gaten. Op een telefoon (~40 tekens per regel) is een
   rafelrand rustiger dan uitvullen; daar blijft het links. */
@media (min-width: 720px) {
  .page p { text-align: justify; text-justify: inter-word; }
}

/* ==========================================================================
   Koppen
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
  /* Een kop hoort niet alleen onderaan een pagina achter te blijven. */
  break-after: avoid;
  page-break-after: avoid;
  break-inside: avoid;
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.55vw, 2.4rem);
  line-height: calc(var(--baseline) * 1.5);
  letter-spacing: -0.015em;
  margin: 0 auto calc(var(--baseline) * 0.5);
  /* De display-snede van Fraunces: een hogere optische maat geeft meer contrast
     en fijnere schreven — wat een titel op formaat wil, en wat je in lopende
     tekst juist niet wilt. */
  font-variation-settings: "opsz" 108;
}

h2 {
  /* Was 1.6rem mét een streep erboven. Die streep hakte elk hoofdstuk in
     kaartjes; witruimte doet hetzelfde werk stiller. */
  font-size: 1.16em;
  line-height: var(--baseline);
  margin: calc(var(--baseline) * 2.5) auto calc(var(--baseline) * 0.5);
  font-variation-settings: "opsz" 20;
}

h3 {
  font-size: 1.02em;
  line-height: var(--baseline);
  margin: calc(var(--baseline) * 1.5) auto 0;
  color: var(--accent);
}

h4 {
  font-size: 1em;
  line-height: var(--baseline);
  margin: var(--baseline) auto 0;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}

/* ==========================================================================
   Hoofdstukopening — klassen voor de HTML-agent
   --------------------------------------------------------------------------
   Alles hieronder is optioneel en stapelbaar; zonder deze klassen blijft een
   hoofdstuk gewoon goed staan. Volledige opening:

     <p  class="chapter-eyebrow">Hoofdstuk zeven</p>
     <h1>De hedonische tredmolen</h1>
     <p  class="chapter-subtitle">Waarom niets ooit lang genoeg genoeg is</p>
     <hr class="chapter-rule">
     <blockquote class="epigraph">
       <p>Geluk is geen bestemming.</p>
       <cite>Seneca</cite>
     </blockquote>
     <p class="chapter-opening dropcap">
       <span class="opening-words">Dit boek begon niet</span> in een bibliotheek.
     </p>
   ========================================================================== */

/* Bovenschrift: "Proloog", "Hoofdstuk 7", "Deel II". */
.page .chapter-eyebrow {
  font-family: var(--display);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-indent: 0;
  text-align: left;
  margin: 0 auto calc(var(--baseline) * 0.5);
  font-variation-settings: "opsz" 14;
}

/* Ondertitel onder de hoofdstuktitel. */
.page .chapter-subtitle {
  font-family: var(--display);
  font-size: 1.15em;
  font-style: italic;
  font-weight: 400;
  line-height: var(--baseline);
  color: var(--ink-soft);
  text-indent: 0;
  text-align: left;
  margin: 0 auto calc(var(--baseline) * 0.5);
}

/* Korte gouden regel onder de titel, in plaats van een streep over de volle
   breedte. */
.chapter-rule {
  border: 0;
  width: 3.5rem;
  height: 1px;
  background: var(--accent-soft);
  margin: var(--baseline) 0 calc(var(--baseline) * 1.5) 0;
  max-width: none;
}

/* De eerste alinea van een hoofdstuk. */
.page p.chapter-opening { margin-top: var(--baseline); }

/* De eerste woorden in kapitalen — de klassieke openingsregel. Bewust géén
   font-variant: small-caps: geen van de tekstletters hierboven heeft echte
   kapitaaltjes, en de door de browser nagemaakte versie oogt te dun en te
   smal. Verkleinde kapitalen mét spatiëring doen hetzelfde werk en staan
   overal goed. */
.opening-words {
  font-size: 0.88em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}

/* Initiaal, drie regels diep, in de displayletter. */
.dropcap::first-letter {
  initial-letter: 3;
  -webkit-initial-letter: 3;
  font-family: var(--display);
  font-weight: 600;
  color: var(--accent);
  font-variation-settings: "opsz" 120;
  margin-right: 0.09em;
}
/* Vangnet voor browsers zonder initial-letter. */
@supports not (initial-letter: 3) {
  .dropcap::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.82;
    margin: 0.06em 0.08em 0 0;
  }
}

/* Scèneovergang binnen een hoofdstuk: een teken in plaats van een lijn.
   Werkt op <hr class="ornament"> en op <p class="ornament"></p>. */
.ornament {
  border: 0;
  background: none;
  height: var(--baseline);
  overflow: visible;
  margin: calc(var(--baseline) * 1.5) auto;
  text-align: center;
  color: var(--accent-soft);
  max-width: var(--measure);
}
.ornament::before {
  content: "\2767";                 /* ❧ */
  font-family: var(--display);
  font-size: 1.1em;
  line-height: var(--baseline);
}
.ornament.asterism::before { content: "\2042"; }   /* ⁂ */
.page .ornament + p { text-indent: 0; }

/* ==========================================================================
   Citaten en motto's
   ========================================================================== */

blockquote {
  /* Geen balk in de kantlijn — dat is een webmiddel. Een citaat herken je in
     een boek aan de smallere kolom en het kleinere korps. */
  margin: var(--baseline) auto;
  padding: 0 var(--baseline);
  border: 0;
  font-size: 0.94em;
  line-height: var(--baseline);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.page blockquote p { margin: 0; text-align: left; }
.page blockquote p + p { text-indent: 1.15em; }

/* Motto boven een hoofdstuk. */
.epigraph {
  font-style: italic;
  color: var(--ink-soft);
  margin: var(--baseline) auto calc(var(--baseline) * 2);
  padding: 0 calc(var(--baseline) * 1.5);
}

blockquote cite,
.epigraph cite,
.quote-source {
  display: block;
  font-style: normal;
  font-size: 0.82em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: calc(var(--baseline) * 0.5);
}
blockquote cite::before,
.epigraph cite::before,
.quote-source::before { content: "\2014\00a0"; }

/* ==========================================================================
   Lijsten, streep, tabel, code
   ========================================================================== */

.page ul, .page ol {
  margin: var(--baseline) auto;
  padding-left: 1.3em;
  max-width: var(--measure);
}
.page li { margin: 0; line-height: var(--baseline); }
.page li + li { margin-top: calc(var(--baseline) * 0.25); }
.page li p { text-indent: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: calc(var(--baseline) * 1.5) auto;
  max-width: var(--measure);
}

code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: #f0e9d9;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

pre {
  max-width: var(--measure);
  margin: var(--baseline) auto;
  background: #2e2a22;
  color: #ece4d3;
  padding: calc(var(--baseline) * 0.75) 1.2rem;
  border-radius: 4px;
  overflow-x: auto;
  line-height: var(--baseline);
}
pre code { background: none; color: inherit; font-size: 0.8rem; }

table {
  width: 100%;
  max-width: var(--measure);
  margin: var(--baseline) auto;
  border-collapse: collapse;
  font-size: 0.9em;
  /* In een tabel wél cijfers op één hoogte en één breedte. */
  font-variant-numeric: lining-nums tabular-nums;
}
th, td {
  text-align: left;
  padding: calc(var(--baseline) * 0.35) 0.8rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: var(--baseline);
}
th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
}

/* ==========================================================================
   Bewijslabels
   --------------------------------------------------------------------------
   Waren gevulde pilletjes met witte letters. Vijftien daarvan in één hoofdstuk
   lazen als een dashboard. Nu: gespatieerde kapitalen in de kleur zelf, zonder
   vulling — een siglum in de tekst, zoals een bronverwijzing in een gezet boek.
   ========================================================================== */

.label {
  display: inline;
  font-family: var(--display);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 14;
  font-variant-numeric: lining-nums;
}
.label-proven        { color: var(--proven); }
.label-plausible     { color: var(--plausible); }
.label-contemplative { color: var(--contemplative); }

/* De groep leidt de alinea in; een spatie scheidt hem van de eerste woorden. */
.label-group { margin-right: 0.3em; }

/* Tussen twee labels een haarfijn scheidingsteken in plaats van nog een pil. */
.label-group .label + .label::before {
  content: "\00b7";
  color: var(--ink-faint);
  margin: 0 0.35em;
  letter-spacing: 0;
  font-weight: 400;
}

/* Op een ruim scherm hangen de labels in de kantlijn. Daarmee begint élke
   alinea met wóórden in plaats van met keurmerken en blijft het hoofdstuk
   proza. Smaller dan dit staan ze gewoon vooraan in de eerste regel. */
@media (min-width: 1380px) {
  .page {
    /* De kantlijn moet de labels kunnen dragen, dus groeit het blad mee — de
       tekstkolom zelf blijft precies even breed. */
    padding-inline: var(--marge);
    max-width: calc(var(--measure) + 2 * var(--marge));
  }

  .page p:has(> .label-group:first-child) { position: relative; }

  .page p > .label-group:first-child {
    position: absolute;
    right: calc(100% + 1.2rem);
    top: 0.34em;
    width: calc(var(--marge) - 1.2rem);
    margin: 0;
    text-align: right;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
  .page p > .label-group:first-child .label { display: block; }
  .page p > .label-group:first-child .label + .label::before { content: none; }
}

/* ==========================================================================
   Hoofdstuknavigatie en colofon
   --------------------------------------------------------------------------
   Dit is geen boek maar apparatuur: schreefloos en klein, zodat het niet
   meeleest.
   ========================================================================== */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: calc(var(--baseline) * 3) auto 0;
  padding-top: var(--baseline);
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  font-family: var(--ui);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.chapter-nav a { text-decoration: none; color: var(--accent); font-weight: 500; }
.chapter-nav a:hover { color: var(--ink); text-decoration: underline; }
.nav-top { color: var(--ink-faint) !important; }

.site-footer {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  width: 100%;
  margin: calc(var(--baseline) * 1.5) 0 calc(var(--baseline) * 3);
  padding: 0 var(--gutter);
  font-family: var(--ui);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.site-footer p { margin: 0; text-indent: 0; }
.site-footer .label { font-size: 0.7em; letter-spacing: 0.11em; }

/* ==========================================================================
   Zijbalk met de inhoudsopgave
   --------------------------------------------------------------------------
   Was een donkerbruin blok. Onder de crèmekleurige Luminous-balk viel dat uit
   elkaar, en het trok het oog van de tekst weg. Nu perkament: het staat er, het
   dringt zich niet op.
   ========================================================================== */

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f2ecdd;
  color: var(--ink);
  padding: 2rem 1.4rem 3rem;
  border-right: 1px solid var(--rule);
}

.sidebar-head {
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  font-variation-settings: "opsz" 48;
}
.brand:hover { color: var(--accent); }

.brand-sub {
  margin: 0.45rem 0 0;
  font-family: var(--display);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.4;
}

.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; max-width: none; }
.toc li { counter-increment: toc; margin: 0; }

.toc a {
  display: block;
  padding: 0.34rem 0.5rem 0.34rem 2rem;
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--ui);
  font-size: 0.82rem;
  line-height: 1.4;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.toc a::before {
  content: counter(toc) ".";
  position: absolute;
  left: 0.5rem;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.9em;
}
.toc a:hover { background: #e7dfcc; color: var(--ink); }
.toc li.active a { background: #e2d6ba; color: var(--ink); font-weight: 500; }
.toc li.active a::before { color: var(--accent); }

#menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  background: var(--paper);
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 44, 16, 0.12);
}

/* ==========================================================================
   Omslag / inhoudspagina
   ========================================================================== */

body.home .page {
  text-align: center;
  padding-top: calc(var(--baseline) * 4);
}
body.home .page > * { margin-left: auto; margin-right: auto; }
body.home .page p { text-align: left; }
body.home h1 {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.1rem);
  line-height: calc(var(--baseline) * 2);
  font-variation-settings: "opsz" 144;
}
body.home h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--ink-soft);
  line-height: var(--baseline);
  margin: calc(var(--baseline) * 0.5) auto var(--baseline);
}
body.home .chapter-rule { margin-left: auto; margin-right: auto; }
body.home .toc { text-align: left; }

/* ==========================================================================
   Voorwerk en nawerk — vangnet
   --------------------------------------------------------------------------
   Titelpagina, colofon, opdracht, inhoudsopgave, over de auteurs en achterflap
   brengen hun eigen <style>-blok mee, dat de tokens hieruit gebruikt en na dit
   bestand wordt ingeladen. Die pagina's zijn dus van de HTML-kant.

   Wat hier staat is met opzet laag in specificiteit (één klasse, geen .page
   ervoor), zodat de regels van die pagina's altijd winnen. Het dekt alleen het
   geval dat zo'n blok ontbreekt: dan moet voorwerk in elk geval niet de
   inspringing en de uitvulling van de lopende tekst overnemen — een colofon
   met ingesprongen regels is fout.

   Uitzondering: .matter (het lijstje voorwerk/nawerk in de zijbalk) staat hier
   volledig. Dat blok kan ook op de 28 hoofdstukpagina's terechtkomen, en die
   hebben géén eigen <style>; dan is dit de enige bron.
   ========================================================================== */

.titelblad p, .opdracht p, .colofon p, .flap p, .kort p, .auteur p,
.ingangen p, .io-toelichting, .io-deelnr, .io-groep, .rol, .ondertitel,
.auteurs, .uitgever, .motto, .motto-bron, .aanhef, .slot, .voetregel {
  text-indent: 0;
  text-align: left;
}

.io, .achtergrond, .ingangen { list-style: none; padding-left: 0; }

.streep {
  width: 3.5rem;
  height: 1px;
  background: var(--accent-soft);
  border: 0;
  margin: calc(var(--baseline) * 1.5) auto;
}

.invullen { color: var(--ink-faint); font-style: italic; }

/* ---- Voor- en nawerk in de zijbalk --------------------------------------- */
.matter {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.matter-kop {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0.9rem 0 0.3rem 0.5rem;
}
.matter-kop:first-child { margin-top: 0; }
.matter a {
  display: block;
  padding: 0.3rem 0.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--ui);
  font-size: 0.82rem;
  line-height: 1.4;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.matter a:hover { background: #e7dfcc; color: var(--ink); }
.matter a.hier { background: #e2d6ba; color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Smalle schermen — waar de meeste lezers zitten
   ========================================================================== */

@media (max-width: 900px) {
  #menu-toggle { display: block; }
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 40;
    box-shadow: 0 0 40px rgba(45, 33, 12, 0.35);
  }
  body.menu-open #sidebar { transform: translateX(0); }
  main { margin-left: 0; padding: 0 1rem; }
}

@media (max-width: 700px) {
  /* Geen blad-in-een-vlak meer: op een telefoon ís het scherm de bladzijde.
     Een kader binnen een kader kost breedte die de regel hard nodig heeft. */
  body { background: var(--paper); }
  main { padding: 0; }
  .page {
    background: none;
    border: 0;
    box-shadow: none;
    /* Ruimte voor de hamburger, die onder de Luminous-balk hangt. */
    margin-top: calc(var(--baseline) * 2.2);
    padding: calc(var(--baseline) * 2) 1.35rem calc(var(--baseline) * 2);
  }
  .site-footer { padding: 0 1.35rem; }
  blockquote, .epigraph { padding: 0 calc(var(--baseline) * 0.75); }
  /* Bij ~40 tekens per regel is een initiaal van drie regels te dominant. */
  .dropcap::first-letter { initial-letter: 2; -webkit-initial-letter: 2; }
}

@media (max-width: 420px) {
  .page { padding-inline: 1.15rem; }
  .site-footer { padding: 0 1.15rem; }
  .chapter-nav { font-size: 0.74rem; }
}

/* ==========================================================================
   Papier
   --------------------------------------------------------------------------
   orphans/widows doen op een doorlopend scherm niets — ze gelden pas als de
   tekst in pagina's wordt gebroken. Hier dus, waar ze wél werken.
   ========================================================================== */

@media print {
  :root { --fs-body: 11pt; --lh: 1.45; }
  body { background: #fff; }
  #sidebar, #menu-toggle, .chapter-nav, #lum-balk { display: none !important; }
  main { margin-left: 0; padding: 0; }
  .page {
    background: none;
    border: 0;
    box-shadow: none;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .page p { orphans: 3; widows: 3; }
  blockquote, li, table { orphans: 2; widows: 2; }
  h1 { break-before: page; page-break-before: always; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #sidebar { transition: none; }
}

/* ---------- Beeld ---------- */
/* Het boek had 26.000 woorden en geen enkele afbeelding; het kernmodel stond
   als ASCII-tekening in een codeblok. Deze twee regels zijn wat daarvoor in de
   plaats kwam. De diagrammen komen uit dezelfde bron als die van de cursus en
   staan als SVG in /diagrammen/ — vectorbeeld, dus scherp op elk formaat. */

figure.hoofdstukbeeld {
  margin: var(--baseline, 1.9rem) 0 calc(var(--baseline, 1.9rem) * 2);
}
figure.hoofdstukbeeld img {
  display: block;
  width: 100%;
  height: auto;
}

figure.diagram {
  margin: calc(var(--baseline, 1.9rem) * 2) 0;
}
figure.diagram img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin: 0 auto;
}
figure.diagram figcaption {
  font-family: var(--ui, system-ui, sans-serif);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft, #6b6560);
  max-width: 30rem;
  margin: calc(var(--baseline, 1.9rem) * 0.5) auto 0;
  text-indent: 0;
}

@media (max-width: 640px) {
  figure.diagram figcaption { font-size: 0.8rem; }
}

/* Een kop die alleen bestaat zodat de inhoudsopgave en de EPUB-navigatie een
   naam hebben. Een opdrachtpagina met "Opdracht" erboven is geen
   opdrachtpagina — maar zonder kop heet hij in de navigatie "opdracht". */
.alleen-voor-navigatie {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}