/* Erfverhaal, richting 2 "De brief". Eén stijl voor alle pagina's in website/brief/.
   Kleur komt uit ../../tokens.css, dat elke pagina vóór dit blad laadt; hier staat geen kleurwaarde.
   Tokens volgen website/Tokens.dc.html; oker volgt website/Oker.dc.html (negen plekken, nooit knop, vlak of tekst).
   Secties: kop, opening, tekstsectie, beeldsectie, stappen, oproep, formulier, voet (zie WEBSITE.md). */

@import url("./letters/fonts.css");

:root {
  /* kleur: uit ../../tokens.css, hier geen eigen waarden */

  /* vorm */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;

  /* het skelet: één kolom, één zijmarge, één maat tussen secties */
  --kolom: 1180px;
  --rand: clamp(20px, 4vw, 56px);
  --sectie: 96px;          /* verticale maat tussen twee secties */
  --sectie-in: 64px;       /* binnenmaat van een vlak van rand tot rand (oproep) */
  --opening-boven: 56px;   /* ruimte boven de opening, onder de kop */
  --raakvlak: 44px;          /* ondergrens voor een tikdoel, WCAG 2.5.5 */
  --bedien-ruimte: 18px;     /* binnenruimte boven en onder in een knop of veld */
  --kop-ruimte: 14px;        /* ruimte boven en onder de inhoud van de kop */
  --kop-hoogte: calc(var(--raakvlak) + 2 * var(--kop-ruimte));   /* uitkomst, geen eis: 72px */
  --kolomgat: 64px;        /* tussen twee kolommen */
  --blok: 32px;            /* tussen kop en inhoud binnen een sectie */
  --regel: 18px;           /* tussen regels binnen een blok */

  /* de typeschaal: elke lettergrootte op de site is een van deze */
  --t-mono-klein: 11px;
  --t-mono: 12px;
  --t-bijschrift: 14px;
  --t-klein: 15px;
  --t-knop: 16px;
  --t-tekst: 17px;
  --t-stap: 18px;
  --t-h3: 19px;
  --t-getal-klein: 22px;
  --t-getal-strook: 30px;     /* het getal in de cijferstrook van de flowkaart */
  --t-lead: var(--t-tekst);   /* een maat voor alle lopende tekst; de opening onderscheidt zich met ruimte en breedte */
  --t-kaft: clamp(18px, 2.2vw, 26px);
  --t-opening-h2: clamp(22px, 2.4vw, 30px);
  --t-oproep-h2: clamp(24px, 2.4vw, 32px);
  --t-h2: clamp(28px, 3.2vw, 38px);
  --t-getal: clamp(36px, 4vw, 52px);
  --t-h1: clamp(30px, 5.2vw, 66px);
  --t-h1-lang: clamp(24px, 3.4vw, 44px); /* een lange H1 die toch op één regel moet */
  --t-h1-kaart: clamp(26px, 4.4vw, 36px); /* de H1 op een flowkaart: hij deelt de kaart met de vraag eronder */
  --t-groot: clamp(64px, 7vw, 92px);

  /* beweging */
  --duur: 900ms;
  --verloop: cubic-bezier(.16, 1, .3, 1);
  --afstand: 48px;
  --stagger: 90ms;
  --lijn-duur: 1600ms;
}
@media (max-width: 1010px) {
  :root { --sectie: 44px; --sectie-in: 40px; --opening-boven: 32px; --kop-ruimte: 8px; --kolomgat: 28px; --blok: 24px; --afstand: 30px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--diep);
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: var(--t-tekst);
  line-height: 1.65;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
/* Links in lopende tekst, 12 september 2026. Ernst vroeg of deze links de zichtbaarheidstoets
   overleven. Antwoord: op contrast wel (kobalt op papier haalt de eis ruim), maar ze waren alleen
   aan hun KLEUR te herkennen, en dat faalt voor wie kleur niet ziet. De contrastpoort mat de
   verkeerde eigenschap: hij meet of tekst leesbaar is, niet of een link opvalt tussen tekst.
   Daarom onderstrepen links in lopende tekst nu. Navigatie, knoppen, kruimelpad en kaartjes zijn
   aan hun vorm en plek te herkennen en houden geen streep. linkpoort.py meet dit. */
a { color: var(--kobalt); text-decoration: underline; text-underline-offset: .18em;
    text-decoration-thickness: from-font; text-decoration-color: var(--wassing); }
a:hover { text-decoration-color: currentColor; }
/* Alles wat zijn eigen vorm heeft draagt geen streep. */
.kop a, .voet a, .knop, .kruimel a, .vraag summary a, .stap a, a.tegel, a.kaart,
.prijsregel .naam a, .menu, nav a { text-decoration: none; }
a:hover { color: var(--diep); }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
b, strong { font-weight: 700; }
.nw { white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--rand), var(--kolom)); margin-inline: auto; }
main > .sectie:last-child { padding-bottom: var(--sectie); } /* de oproep sluit direct op de voet aan; een tekstsectie als laatste krijgt de afstand eronder */

/* ---------- letter ---------- */
.kicker { font: 800 var(--t-mono)/1.3 'Archivo', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--oker-tekst); }
.op-blauw .kicker { color: var(--papier); }   /* gemeten: oker op kobalt haalt 4,16 en dat is onder de eis voor kleine tekst */

/* Tekst op een blauw vlak: de zachte inkt is daar onleesbaar (gemeten 1,01). */
.op-blauw .klein, .op-blauw .tekst, .op-blauw p { color: var(--vlak); }
.op-blauw .h2, .op-blauw .h1 { color: var(--wit); }
/* De koppenregel, 12 september 2026. Ernst vroeg waarom een H3 kobalt was en een H2 van bijna
   dezelfde maat diep. Er was geen reden: kobalt droeg vijf betekenissen tegelijk (H1, H3, link,
   knop, merk) en diep twee. Vanaf nu draagt elke kop diep, en betekent kobalt precies één ding:
   je kunt erop klikken. Het merk in de kop en het logo houden hun eigen kleur.
   Afbreken: H2 en H3 balanceren hun regels (text-wrap: balance), H1 breekt niet af. Dat laatste
   is een besluit van Ernst: "Het Voorouderboek" hoort op één regel. */
.h1 { font: 800 var(--t-h1)/.98 'Archivo', system-ui, sans-serif; letter-spacing: -.032em; color: var(--diep); white-space: nowrap; }
.h1.een-regel { white-space: nowrap; }
.h1.lang { font-size: var(--t-h1-lang); }
@media (max-width: 600px) { .h1.lang { white-space: normal; } } /* een lange H1 past op een telefoon niet op één regel; alleen daar mag hij breken */
.h2 { font: 800 var(--t-h2)/1.06 'Archivo', system-ui, sans-serif; letter-spacing: -.022em; color: var(--diep); text-wrap: balance; }
.h3 { font: 800 var(--t-h3)/1.2 'Archivo', system-ui, sans-serif; letter-spacing: -.01em; color: var(--diep); text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: 52ch; }
.tekst { max-width: 62ch; }
.breed-56 { max-width: 56ch; }
.breed-60 { max-width: 60ch; }
.breed-62 { max-width: 62ch; }
.kolom.dicht { gap: 10px; }
.klein { font-size: var(--t-klein); line-height: 1.65; color: var(--tekst-zacht); }
.cijfer { font: 800 var(--t-mono)/1.3 'IBM Plex Mono', monospace; color: var(--oker-tekst); letter-spacing: .04em; }
.mono { font: 400 var(--t-mono)/1.5 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--oker-tekst); }
.groot { font: 800 var(--t-groot)/1 'Archivo', system-ui, sans-serif; letter-spacing: -.04em; color: var(--oker); font-variant-numeric: tabular-nums; }
.euro { font: 800 var(--t-getal-klein)/1 'Archivo', system-ui, sans-serif; letter-spacing: -.01em; }

/* koppen die per regel binnenkomen: beweging.js splitst in .regel */
.regels .regel { display: block; overflow: hidden; }
.regels .regel > span { display: block; }
.js .regels.klaar .regel > span { transform: translateY(110%); transition: transform calc(var(--duur) + 200ms) var(--verloop); transition-delay: calc(var(--r, 0) * 110ms); }
.js .regels.klaar.in .regel > span { transform: none; }

/* ---------- het merk: wit op blauw, oker op papier, nooit anders ---------- */
.merk { display: inline-flex; align-items: center; }
.merk img { height: 30px; width: auto; }
.merk .wit { display: none; }
.op-blauw .merk .oker { display: none; }
.op-blauw .merk .wit { display: block; }

/* ---------- knop en veld ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  /* De hoogte is een uitkomst van binnenruimte plus regelhoogte, geen vast getal: bij een
     ander label of een andere lettermaat kan de ondergrens zo niet verdwijnen. */
  min-height: var(--raakvlak); padding: var(--bedien-ruimte) 26px;
  background: var(--kobalt); color: var(--wit);
  font: 700 var(--t-knop)/1 'Atkinson Hyperlegible', system-ui, sans-serif;
  border-radius: var(--r-m); border: 0; cursor: pointer; white-space: nowrap;
  transition: background 200ms, transform 200ms;
}
.knop:hover { background: var(--diep); color: var(--wit); transform: translateY(-1px); }
.knop--licht { background: var(--wit); color: var(--kobalt); }
.knop--licht:hover { background: var(--papier); color: var(--diep); }
.veld {
  display: flex; align-items: center; min-height: var(--raakvlak);
  /* Een veld draagt een rand en tekst die één punt groter is dan een knoplabel. Zijn
     binnenruimte is daarom 3,5 minder, zodat knop en veld naast elkaar even hoog uitkomen.
     Die 3,5 is gemeten in de browser en niet gerekend: de invoervelden van Chrome tellen hun
     eigen regelbox mee. De hoogte blijft een uitkomst; maatpoort.mjs bewaakt dat beide op
     dezelfde hoogte landen en boven de ondergrens blijven. */
  padding: calc(var(--bedien-ruimte) - 3.5px) 16px; width: 100%;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--tekst-stil); border-radius: var(--r-m); background: var(--wit);
  font: 400 var(--t-tekst)/1 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--diep);
  line-height: 1;
}
.veld::placeholder { color: var(--tekst-stil); }
.veld:focus { outline: none; border: 2px solid var(--kobalt); }
label.etiket { display: block; font: 800 var(--t-mono)/1.3 'Archivo', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-zacht); margin-bottom: 10px; }
.knoprij { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.knoprij span { font-size: var(--t-klein); line-height: 1.65; color: var(--tekst-zacht); max-width: 34ch; }
.op-blauw .knoprij span { color: var(--vlak); }
/* Veld en knop staan naast elkaar, overal. Besluit Ernst, 12 september 2026: tot dan zette de
   flow de knop IN de rij en zetten de pagina's hem eronder, twee patronen voor hetzelfde
   onderdeel. De knop hoort in de rij. Onder 560 px is daar geen plek voor en stapelt hij, want
   een knop van 44 px hoog naast een veld van 44 px past niet op een telefoon. */
.naamrij { display: flex; gap: 10px; align-items: stretch; width: 100%; max-width: 560px; }
.naamrij .veld { flex: 1 1 auto; min-width: 0; }
.naamrij .knop { flex: 0 0 auto; white-space: nowrap; }

/* ---------- tegel ---------- */
.tegel { background: var(--wit); aspect-ratio: 1; overflow: hidden; position: relative; border-radius: var(--r-s); }
.tegel img { width: 100%; height: 100%; object-fit: cover; }
.tegel.orn::after, .leeg.orn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url(./beeld/orn-oker.png) center / 100% 100% no-repeat; }
.leeg { background: var(--wit); aspect-ratio: 1; border-radius: var(--r-s); position: relative; background-image: radial-gradient(var(--vlak) 1.4px, transparent 1.5px); background-size: 12px 12px; background-position: center; }

/* ---------- de okeren haarlijn tekent zichzelf ---------- */
.lijn { height: 1px; background: var(--lijn-oker); transform-origin: left; }
.js .lijn { transform: scaleX(0); transition: transform var(--lijn-duur) var(--verloop); }
.js .lijn.in { transform: scaleX(1); }
.boven-lijn { position: relative; padding-top: var(--regel); }
.boven-lijn > .lijn { position: absolute; left: 0; right: 0; top: 0; }

/* ---------- onthullen bij scrollen ---------- */
.js .onthul { opacity: 0; transform: translateY(var(--afstand)); transition: opacity var(--duur) var(--verloop), transform var(--duur) var(--verloop); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .onthul.tegel, .js .onthul.leeg { transform: translateY(24px) scale(.94); }
.js .onthul.in { opacity: 1; transform: none; }

/* Het breekpunt is 1010 en niet 900, sinds 12 september 2026. Zie beweging.js voor de reden:
   het merkteken kromp mee tot nul bij 901, en met een vast merk loopt de balk over tot 1010.
   smal() in beweging.js draagt hetzelfde getal en die twee horen gelijk te blijven. */

/* ---------- sectie 1: de kop, één op alle pagina's ---------- */
.kop { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--lijn); transition: background 400ms, border-color 400ms; }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--kop-hoogte); gap: 24px; }
/* De ruimte tussen de onderdelen van de kop: 24 in plaats van 32, 12 september 2026. Met een
   vijfde item erbij (Voorbeeld, naar /het-voorbeeldboek) liep de kop bij 32 px over tussen 901
   en 979 px. Het ontwerpsysteem gaat dezelfde kant op; deze regel loopt daarop vooruit. */
.kop .merk, .kop nav, .kop .knop, .kop .menu { display: flex; align-items: center; gap: 24px; }

/* Het merkteken krimpt niet mee. Zonder deze regel is het een gewoon flexkind van een rij die
   te smal is, en omdat de navlinks white-space: nowrap dragen vangt het merk de hele klap in
   zijn eentje op: gemeten bij 901 px was het 0 van de 128 px breed, dus het logo was weg. Geen
   van onze poorten mat dat, want er liep niets over: de kop paste juist doordat het merk werd
   vernield. Gevonden door de boxsessie op 12 september 2026, die het in hun eigen component
   repareerde en toen zag dat het bij ons ook stond. */
.kop .merk { flex: none; }
.kop nav a:not(.knop) { font: 600 var(--t-klein)/1 'Archivo', system-ui, sans-serif; white-space: nowrap; line-height: 1; }
.kop nav a.knop { margin-left: 8px; }
.kop .menu { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--kobalt); line-height: 0; }
/* de kop is dekkend papier met een haarlijn eronder zodra hij over inhoud staat.
   Op de kobalten opening van de voorpagina: doorzichtig, wit merk, lichte links. De kop zelf is op elke
   pagina hetzelfde fragment; de pagina bepaalt zijn kleur via :has, en het script zet .gewisseld zodra de opening voorbij is */
body:has(.opening.op-blauw) .kop:not(.gewisseld) { background: transparent; border-bottom-color: transparent; }
body:has(.opening.op-blauw) .kop:not(.gewisseld) .merk .oker { display: none; }
body:has(.opening.op-blauw) .kop:not(.gewisseld) .merk .wit { display: block; }
body:has(.opening.op-blauw) .kop:not(.gewisseld):not(.open) nav a { color: var(--vlak); }
body:has(.opening.op-blauw) .kop:not(.gewisseld):not(.open) nav a:hover { color: var(--wit); }
body:has(.opening.op-blauw) .kop:not(.gewisseld):not(.open) nav a.knop { color: var(--kobalt); background: var(--wit); }
body:has(.opening.op-blauw) .kop:not(.gewisseld):not(.open) nav a.knop:hover { color: var(--diep); background: var(--papier); }
body:has(.opening.op-blauw) .kop:not(.gewisseld) .menu { color: var(--wit); }
html.no-js body:has(.opening.op-blauw) .kop { background: var(--kobalt); }
@media (max-width: 1010px) {
  .kop nav { display: none; }
  .kop .menu { display: inline-flex; }
  /* het menu: een vel van boven in papier, de vier links groot onder elkaar, de knop onderaan */
  .kop.open nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; left: 0; right: 0; top: var(--kop-hoogte); bottom: 0; background: var(--papier); padding: 12px var(--rand) var(--rand); border-top: 1px solid var(--lijn); overflow-y: auto; }
  .kop.open nav a:not(.knop) { padding: 18px 0; font: 800 var(--t-h2)/1.1 'Archivo', system-ui, sans-serif; letter-spacing: -.022em; color: var(--kobalt); border-bottom: 1px solid var(--lijn); }
  .kop.open nav a.knop { margin: auto 0 0; align-self: stretch; }
}

/* ---------- sectie 2: de opening ---------- */
.opening { padding-top: var(--opening-boven); }
/* Het beeld staat in de DOM binnen .woord, tussen de belofte en de uitleg (zie opening() in
   bouw.py). Op breed hoort het rechts, dus daar lost .woord zichzelf op in het raster en krijgt
   het beeld de tweede kolom over alle rijen. Zo is er één volgorde in de DOM en toch twee
   layouts, zonder order: die laat de leesvolgorde en de kijkvolgorde uit elkaar lopen. */
.opening .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: var(--kolomgat); row-gap: 28px; align-items: start; }
.opening.zonder-beeld .wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
.opening .woord { display: contents; }
.opening .woord > * { grid-column: 1; }
.opening .woord > .boek { grid-column: 2; grid-row: 1 / calc(var(--rijen, 4) + 1); align-self: start; }
.opening .h2 { max-width: 26ch; }
.opening .boek { justify-self: end; margin-top: calc(16px + 28px); } /* bovenkant boek op de bovenkant van de H1: kicker plus gat */
/* op kobalt (de voorpagina): het boek hangt over de harde rand naar het papier */
.opening.op-blauw { color: var(--wit); background: var(--kobalt); margin-top: calc(-1 * var(--kop-hoogte)); padding-top: calc(var(--kop-hoogte) + var(--opening-boven)); }
/* Besluit Ernst, 12 september 2026: alleen "Het Voorouderboek" draagt op de voorpagina de
   okerkleur. Op het kobaltvlak is dat --oker-op-blauw (#E3AE63); de gewone oker is daar te
   donker. De H2 eronder blijft wit, anders wordt het goud een tweede tekstkleur in plaats van
   een accent op de naam van het boek. */
.opening.op-blauw .h1 { color: var(--oker-op-blauw); }
.opening.op-blauw .h2 { color: var(--wit); }
.opening.op-blauw .lead { color: var(--vlak); }
.opening.op-blauw .boek { margin-bottom: -70px; } /* het boek komt zo'n 70 px onder het blauw uit */
/* Het boek steekt 70 px onder het blauw uit. Tot 12 september telde de volgende sectie die
   70 px bij haar eigen maat op, en dan stond er 214 px leeg papier waar overal elders 96 px
   staat. Het boek staat rechts en de tekst links, dus ze hoeven elkaar niet te ontwijken:
   de sectie houdt nu gewoon de maat van elke andere sectie. */
.opening.op-blauw + .sectie { padding-top: var(--sectie); }
/* De mobiele uitzondering die hier stond (70 px extra omdat het boek over de eerste alinea
   heen viel) is vervallen: op smal staat het boek nu midden in de opening en steekt het
   nergens meer onderuit. De regel staat in het blok onder 900 px. */
@media (max-width: 1010px) {
  /* Smal: één kolom, en .woord wordt weer een gewone doos, zodat het beeld op zijn plek in de
     DOM valt (na de belofte, voor de uitleg). De maten krimpen mee, anders staat de omslag
     alsnog grotendeels onder de vouw. Gemeten op 390 bij 844. */
  .opening .wrap, .opening.zonder-beeld .wrap { grid-template-columns: 1fr; gap: 0; }
  .opening .woord { display: flex; flex-direction: column; gap: 20px; }
  .opening .woord > *, .opening .woord > .boek { grid-column: auto; grid-row: auto; }
  /* Het boek stak 70 px onder het blauw uit toen het als laatste stond. Nu staat er tekst
     achter, dus die overhang zou over de uitleg heen vallen: op smal geen overhang, en de
     volgende sectie hoeft er dan ook niet meer voor uit te wijken. */
  .opening.op-blauw .boek { margin-bottom: 0; }
  .opening.op-blauw + .sectie { padding-top: var(--sectie); }
  .opening .woord { padding-bottom: 8px; }
  .opening .boek { justify-self: center; width: min(100%, 300px); margin-top: 0; }
  /* Het boek steekt 70 px onder het blauw uit. Tot 12 september telde de volgende sectie die
   70 px bij haar eigen maat op, en dan stond er 214 px leeg papier waar overal elders 96 px
   staat. Het boek staat rechts en de tekst links, dus ze hoeven elkaar niet te ontwijken:
   de sectie houdt nu gewoon de maat van elke andere sectie. */
.opening.op-blauw + .sectie { padding-top: var(--sectie); }
/* De mobiele uitzondering die hier stond (70 px extra omdat het boek over de eerste alinea
   heen viel) is vervallen: op smal staat het boek nu midden in de opening en steekt het
   nergens meer onderuit. De regel staat in het blok onder 900 px. */
}

/* ---------- het boek als voorwerp (letterlijk uit het prototype) ---------- */
.boek { position: relative; width: min(100%, 380px); aspect-ratio: 3 / 4; will-change: transform; }
.boek .drijf { position: absolute; inset: 0; will-change: transform; }
.boek .kaft { position: absolute; inset: 0; border-radius: 4px var(--r-m) var(--r-m) 4px; overflow: hidden; background: var(--wit); box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 24px 60px -30px rgba(18, 50, 92, .35); }
.boek .kaft img { width: 100%; height: 100%; object-fit: cover; }
.boek .rug { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, rgba(18, 50, 92, .22), rgba(18, 50, 92, 0)); border-radius: 4px 0 0 4px; pointer-events: none; }
.boek .titel { position: absolute; left: 8%; right: 8%; top: 7.5%; display: flex; flex-direction: column; gap: 6px; }
.boek .titel .k { font: 400 var(--t-mono-klein)/1 'IBM Plex Mono', monospace; letter-spacing: .18em; color: var(--oker-tekst); }
.boek .titel .t { font: 800 var(--t-kaft)/1 'Archivo', system-ui, sans-serif; letter-spacing: -.03em; color: var(--diep); white-space: nowrap; }
/* De regel eronder is dezelfde als op de echte omslag (boek/omslag.html): wiens voorouders het
   boek beschrijft. Zonder die regel toont de mockup een boek zonder familie erin. */
/* De regel schaalt mee met de kafttitel. Met een vaste 11 px liep hij op een kleine kaft over
   de tekening heen en brak "Tiel" naar een derde regel. */
.boek .titel .voor { font-size: calc(var(--t-kaft) * .4); line-height: 1.4;
  color: var(--tekst-zacht); margin-top: .35em; text-wrap: balance; }
.boek .titel .voor b { font-weight: 700; color: var(--diep); }
.boek .streep { position: absolute; left: 8%; right: 8%; bottom: 6%; height: 2px; background: var(--oker); }
.js .boek { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity 1100ms var(--verloop) 150ms, transform 1100ms var(--verloop) 150ms; }
.js .boek.in { opacity: 1; transform: none; }

/* ---------- sectie 3 en 4: tekstsectie en beeldsectie delen het ritme ---------- */
.sectie { padding-top: var(--sectie); display: flex; flex-direction: column; gap: var(--blok); }
.kolom { display: flex; flex-direction: column; gap: var(--regel); }
.kolom > * { min-width: 0; max-width: 100%; }
.twee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--kolomgat); align-items: start; }
@media (max-width: 1010px) { .twee { grid-template-columns: minmax(0, 1fr); } }
.brief .vork { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.brief .vork > div { display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
@media (max-width: 1010px) { .brief .vork { grid-template-columns: 1fr; } }
.prijs { display: flex; align-items: baseline; gap: 8px; }
.feiten { display: flex; flex-direction: column; gap: 14px; }
.feiten li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; font-size: var(--t-klein); }
.feiten li b { font: 800 var(--t-getal-klein)/1 'Archivo', system-ui, sans-serif; color: var(--oker); letter-spacing: -.02em; }

/* beeldsectie: de film, een klein vlak midden op de pagina, loopt vanzelf */
.reis { background: linear-gradient(var(--papier), var(--wit) 25%, var(--wit) 75%, var(--papier)); margin-top: 0; padding-top: var(--sectie); padding-bottom: 0; }
/* De houder reserveert de hoogte met aspect-ratio, zodat er niets verspringt terwijl de film laadt. */
.reis .film { position: relative; width: min(100% - 2 * var(--rand), var(--kolom)); aspect-ratio: 16 / 9; margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 8%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 8%, #000 90%, transparent); mask-composite: intersect; }
/* Het eerste beeld staat hier en niet in het attribuut poster: een poster is één bestand voor elk
   scherm, en op een telefoon is dat 184 kB tegen 52. Zo krijgt de telefoon poster-mobiel.jpg en de
   rest poster.jpg, zonder javascript, en staat het beeld er voordat de film een frame heeft. */
/* De knop die de film stilzet. Hij hangt in de hoek van het beeld, niet erover: de regel dat er
   geen tekst over het beeld komt blijft staan, en een bediening is geen tekst. Zonder javascript
   staat hij er niet, want dan doet hij niets. */
.filmknop { display: none; }
.js .filmknop { display: inline-flex; align-items: center; position: absolute;
  right: 10px; bottom: 10px; z-index: 2; min-height: var(--raakvlak); padding: 0 16px;
  border: 1px solid var(--lijn); border-radius: var(--r-m); background: var(--wit);
  color: var(--diep); font: 700 var(--t-mono)/1 'Atkinson Hyperlegible', system-ui, sans-serif;
  cursor: pointer; }
.js .filmknop:hover { border-color: var(--kobalt); }
.filmknop__aan { display: none; }
.filmknop[aria-pressed="true"] .filmknop__uit { display: none; }
.filmknop[aria-pressed="true"] .filmknop__aan { display: inline; }
.reis video { width: 100%; height: 100%; object-fit: cover; background: var(--wit) url(./beeld/poster.jpg) center / cover no-repeat; }
@media (max-width: 700px) { .reis video { background-image: url(./beeld/poster-mobiel.jpg); } }
@media (max-width: 1010px) { .reis .film { width: min(100% - 2 * var(--rand), 480px); } }

/* De kop boven de film en de regel eronder. Ernst, 12 september 2026: de film stond zonder context
   op de pagina. De regel blijft dat er geen tekst OVER het beeld komt; deze staat erboven en
   eronder. Eerst stonden er vier tijdvakken naast elkaar, maar vier kolommen maken drie nieuwe
   uitlijnlijnen en de layoutpoort staat er hoogstens twee toe. Nu is het één regel op de kolom. */
.reis .wrap:first-child { margin-bottom: calc(var(--sectie) * .5); }
.reis .wrap:last-child { padding-top: 22px; padding-bottom: 0; }
.reis .wrap:last-child .tekst { color: var(--tekst-zacht); max-width: var(--leesbreedte, 62ch); }

/* beeldsectie: bladeren, de bladen uit het boek. De strook zit in een kader van kolombreedte en komt daar nooit buiten.
   Standaard (zonder script, op een telefoon, bij minder beweging) veegt u het kader. */
.bladeren .plak { display: flex; flex-direction: column; gap: var(--blok); }
.bladeren .plak > * { min-width: 0; }
.bladeren .kader { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bladeren .kader::-webkit-scrollbar { display: none; }
.bladeren .strook { display: flex; gap: 28px; width: max-content; }
.bladeren .blad { flex: none; width: min(78vw, 320px); display: flex; flex-direction: column; gap: 10px; scroll-snap-align: start; }
.bladeren .blad img { width: 100%; height: auto; aspect-ratio: 495 / 700; object-fit: cover; background: var(--wit); border-radius: 4px; box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 20px 50px -30px rgba(18, 50, 92, .35); }
.bladeren .blad p { font-size: var(--t-klein); line-height: 1.65; color: var(--tekst-zacht); }
.bladeren .blad .nummer { font: 800 var(--t-mono)/1.3 'IBM Plex Mono', monospace; color: var(--oker-tekst); letter-spacing: .06em; }
.bladeren .lat { position: relative; height: 1px; background: var(--lijn-oker); }
.bladeren .lat .vol { position: absolute; left: 0; top: 0; height: 1px; background: var(--oker); width: 0; }
/* breed en bewegend: de sectie zet zich vast op precies één schermhoogte en de scroll schuift alleen de strook */
.js .bladeren.breed { display: block; padding-top: 0; margin-top: var(--sectie); }
.js .bladeren.breed .plak { position: sticky; top: 0; height: 100vh; padding-top: var(--kop-hoogte); display: flex; flex-direction: column; justify-content: center; gap: var(--blok); overflow: hidden; }
.js .bladeren.breed .kader { overflow: hidden; scroll-snap-type: none; }
.js .bladeren.breed .strook { will-change: transform; }
.js .bladeren.breed .blad { width: calc(52vh * 495 / 700); }

/* beeldsectie: drie tegels met tekst */
.drie { display: flex; flex-direction: column; gap: var(--regel); }
.drie > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px var(--kolomgat); align-items: start; padding-top: var(--regel); border-top: 1px solid var(--lijn); }
.drie .tegel { width: 120px; }
@media (max-width: 1010px) { .drie > div { grid-template-columns: minmax(0, 1fr); } }

/* beeldsectie: de kwartierstaat die zich vult */
.zoekrij { display: flex; flex-direction: column; align-items: flex-start; }
.telling { display: flex; gap: 48px; flex-wrap: wrap; }
.telling > p { display: flex; flex-direction: column; gap: 4px; }
.telling b { font: 800 var(--t-getal)/1 'Archivo', system-ui, sans-serif; color: var(--oker); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.telling span { font-size: var(--t-klein); }
.wand { background: var(--kobalt); border-radius: var(--r-l); padding: clamp(14px, 2.4vw, 28px); }
.zoekwand .wrap { display: flex; flex-direction: column; gap: var(--blok); }
.wand .rij { display: grid; gap: 6px; }
.wand .rij.acht { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.wand .rij.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wand .rij.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wand .rijnaam { font: 400 var(--t-mono)/1.3 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--vlak); margin: 14px 0 8px; }
.wand .rijnaam:first-child { margin-top: 0; }
.wand .kaart { position: relative; aspect-ratio: 1; perspective: 1200px; }
.wand .kaart .zijden { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1100ms var(--verloop); }
.wand .kaart .zijde { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-s); overflow: hidden; }
.wand .kaart .zijde .tegel, .wand .kaart .zijde .leeg { width: 100%; height: 100%; border-radius: var(--r-s); }
.wand .kaart .voor { transform: rotateY(180deg); }
.wand .kaart .voor.orn::after { content: ''; position: absolute; inset: 0; background: url(./beeld/orn-oker.png) center / 100% 100% no-repeat; pointer-events: none; }
.wand .kaart .naam { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font: 700 var(--t-mono)/1.2 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--wit); background: linear-gradient(rgba(18, 50, 92, 0), rgba(18, 50, 92, .92)); border-radius: 0 0 var(--r-s) var(--r-s); }
.wand .rij.acht .naam { display: none; }
.wand .rij.twee .naam { font-size: var(--t-bijschrift); padding: 18px 12px 10px; }
@media (max-width: 600px) { .wand .rij.vier .naam { display: none; } }
.wand .kaart.om .zijden { transform: rotateY(180deg); }
/* Gevonden is gevonden, altijd. Dit hing tot 12 september 2026 aan .no-js, en dat beschermt
   tegen "geen javascript" maar niet tegen "javascript werkt en beweging.js niet". Die wortelklasse
   wordt gezet door een inline script dat altijd slaagt; beweging.js is een apart bestand dat kan
   uitblijven of eerder kan omvallen. Gemeten met dat bestand geblokkeerd: acht tegels droegen
   gevonden, nul waren omgedraaid, en de teller zei 8 van 14. Acht gevonden en niets te zien, en
   dat is geen leeg scherm maar een tegenspraak.
   Nu is de omgedraaide kant de standaard en zet beweging.js zelf de klasse .telt op de wand om
   ze tijdelijk terug te zetten. Alleen een levend script kan die toestand dus maken, en datzelfde
   script telt hem meteen terug. Gevonden door de boxsessie. */
.wand .kaart.gevonden .zijden { transform: rotateY(180deg); }
.wand.telt .kaart.gevonden .zijden { transform: none; }
.wand.telt .kaart.gevonden.om .zijden { transform: rotateY(180deg); }

/* beeldsectie: de parade, de enige beweging die versiering mag zijn */
.wachten .wrap { display: flex; flex-direction: column; gap: var(--regel); }
.parade { background: var(--vlak); border-radius: var(--r-l); padding: 28px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.parade .strook { display: flex; gap: 14px; width: max-content; animation: parade 46s linear infinite; }
.parade .tegel { width: 132px; flex: none; }
@keyframes parade { to { transform: translateX(-50%); } }
.voortgang { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.voortgang b { font: 800 var(--t-getal)/1 'Archivo', system-ui, sans-serif; color: var(--oker); letter-spacing: -.03em; }
.voortgang .staaf { height: 1px; background: var(--lijn-oker); position: relative; }
.voortgang .staaf i { position: absolute; left: 0; top: 0; height: 1px; background: var(--oker); width: 21%; }

/* beeldsectie: cadeau, tekst naast één tegel */
.cadeau-beeld { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--kolomgat); align-items: center; }
.cadeau-beeld .tegel { width: min(100%, 320px); justify-self: center; }
@media (max-width: 1010px) { .cadeau-beeld { grid-template-columns: 1fr; } }

/* ---------- sectie 5: de stappen ---------- */
.stappen { display: flex; flex-direction: column; gap: var(--regel); }
.stap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px var(--kolomgat); align-items: start; }
.twee .kolom .stap { grid-template-columns: minmax(0, 1fr); }
.stap .t { font: 800 var(--t-h3)/1.2 'Archivo', system-ui, sans-serif; letter-spacing: -.01em; }
@media (max-width: 1010px) { .stappen { gap: 24px; } .stap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sectie 6: de oproep met naamveld, op papier; kobalt is alleen de opening en de knoppen ---------- */
.oproep .kolom { max-width: 62ch; }
.oproep .naamrij { margin-top: 4px; }

/* ---------- sectie 7: het formulier (de flow) ---------- */
.formulier .kolom { max-width: 640px; }
.formulier .velden { display: flex; flex-direction: column; gap: var(--regel); }

/* de flow: twee schermen op één pagina; het script toont er één */
.js .scherm[hidden] { display: none; }
.scherm-naam { font: 400 var(--t-mono-klein)/1 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--oker-tekst); border-top: 1px solid var(--lijn); padding-top: 24px; }
.js .scherm-naam { display: none; }

/* ---------- sectie 8: de voet, één op alle pagina's ---------- */
.voet { background: var(--diep); color: var(--wit); padding-block: var(--sectie-in) 40px; }
.voet .kols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1010px) { .voet .kols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voet .kols p { font: 800 var(--t-mono)/1.3 'Archivo', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--wassing); margin-bottom: 10px; }
.voet a { color: var(--wit); display: block; font-size: var(--t-klein); margin-top: 8px; }
.voet a:hover { color: var(--vlak); }
.voet .melden { display: flex; flex-direction: column; gap: 10px; max-width: 640px; border-top: 1px solid var(--lijn-oker-op-diep); margin-top: 44px; padding-top: 24px; }
.voet .melden .t { font: 800 var(--t-mono)/1.3 'Archivo', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--wassing); }
.voet .melden .regel, .voet .melden .etiket { color: var(--wit); }
.voet .melden .klein { color: var(--wassing); }
.voet .melden .naamrij { margin-block: 4px; }
.voet .onder { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--lijn-oker-op-diep); margin-top: 44px; padding-top: 24px; }
.voet .onder .merk { margin: 0; }
.voet .onder .merk img { height: 22px; }
.voet .onder .mono { color: var(--wassing); text-transform: none; letter-spacing: 0; }

/* ---------- minder beweging: alles staat stil en de pagina is compleet ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .onthul, .js .boek, .js .lijn, .js .regels.klaar .regel > span { opacity: 1; transform: none; transition: none; }
  .kop { transition: none; }
  .js .bladeren.breed { height: auto; }
  .js .bladeren.breed .plak { position: static; height: auto; }
  .js .bladeren.breed .kader { overflow-x: auto; }
  .parade .strook { animation: none; }
  .wand .kaart .zijden { transition: none; }
  .knop { transition: none; }
}

/* ---------- stilstaand voor een schermafdruk: ?stil in de url, beweging.js zet html.stil ---------- */
html.stil { scroll-behavior: auto; }
html.stil.js .onthul, html.stil.js .boek, html.stil.js .lijn, html.stil.js .regels.klaar .regel > span { opacity: 1; transform: none; transition: none; }
html.stil .kop { transition: none; }
html.stil.js .bladeren.breed { height: auto; }
html.stil.js .bladeren.breed .plak { position: static; height: auto; }
html.stil.js .bladeren.breed .kader { overflow-x: auto; }
html.stil .parade .strook { animation: none; }
html.stil .wand .kaart .zijden { transition: none; }

/* ---------- componenten voor de tekstpagina's (uit de oude site, woordelijk) ---------- */
.kruimel { display: flex; flex-wrap: wrap; gap: 8px; font: 400 var(--t-klein)/1.65 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--tekst-zacht); }
.kruimel .streep { color: var(--tekst-stil); }
.kruimel span:last-child { color: var(--diep); }
.lijst { display: flex; flex-direction: column; gap: 10px; padding-left: 0; max-width: 62ch; }
.lijst li { position: relative; padding-left: 22px; }
.lijst li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--oker); }
ol.lijst { counter-reset: li; }
ol.lijst li::before { content: counter(li) '.'; counter-increment: li; background: none; width: auto; top: 0; font: 800 var(--t-klein)/1.65 'IBM Plex Mono', monospace; color: var(--oker-tekst); }
/* Het vlak steekt links en rechts even ver buiten de tekstkolom uit (28px), zodat de tekst erin
   op dezelfde x begint en eindigt als de tekst erbuiten. De breedte moet er expliciet bij staan en
   het vlak moet de kolomregel overstemmen: `.kolom > * { max-width: 100% }` verderop hield het vlak
   even breed als de kolom, terwijl de negatieve marge het 28px naar links schoof. Daardoor stak het
   links 28px uit en viel het rechts 28px binnen de kolom, en was de tekst erin 56px smaller dan de
   tekst erbuiten. Gemeten aan de x van de tekst binnen en buiten het vlak, niet op het oog. */
.vlak-blok, .kolom > .vlak-blok { background: var(--vlak); border-radius: var(--r-l); padding: 24px 28px; margin-inline: -28px; width: calc(100% + 56px); max-width: calc(100% + 56px); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1010px) { .vlak-blok, .kolom > .vlak-blok { margin-inline: 0; width: 100%; max-width: 100%; padding-block: 18px; } }

.vraag { max-width: 62ch; border-bottom: 1px solid var(--lijn); }
.vraag summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; position: relative; font: 800 var(--t-h3)/1.2 'Archivo', system-ui, sans-serif; letter-spacing: -.01em; color: var(--diep); }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: '+'; position: absolute; right: 0; top: 10px; font: 800 var(--t-getal-klein)/1 'Archivo', system-ui, sans-serif; color: var(--oker); }
.vraag[open] summary::after { content: '\2212'; }
.vraag summary:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 4px; border-radius: var(--r-s); }
.vraag .antwoord { padding: 0 0 18px; }
.vork { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--kolomgat); }
.twee .kolom .vork { grid-template-columns: minmax(0, 1fr); gap: var(--blok); } /* een vork in de rechterkolom maakt geen derde lijn */
.vork > div { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1010px) { .vork { grid-template-columns: 1fr; } }
.beeldvak { display: flex; justify-content: flex-end; }
.beeldvak .tegel { width: min(100%, 380px); }
@media (max-width: 1010px) { .opening .boek { margin-top: 0; } .beeldvak { justify-content: center; } .beeldvak .tegel { width: min(100%, 300px); } }
.raster-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kolomgat); }
@media (max-width: 1010px) { .raster-drie { grid-template-columns: 1fr; gap: 32px; } }
.product { display: flex; flex-direction: column; gap: 8px; color: var(--diep); }
.product:hover { color: var(--diep); }
.product .h3 { margin-top: 6px; }
.product .prijs-klein { font: 800 var(--t-getal-klein)/1 'Archivo', system-ui, sans-serif; color: var(--oker); letter-spacing: -.02em; }
.prijs-klein span { display: block; font: 400 var(--t-klein)/1.65 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--tekst-zacht); margin-top: 4px; letter-spacing: 0; }
.drie-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1010px) { .drie-stappen { grid-template-columns: 1fr; } }
/* juridisch: één kolom van 62 tekens, genummerde secties, inhoudsopgave bovenaan */
.sectie.jur { padding-top: var(--blok); gap: 12px; }
.jur p, .jur .lijst, .jur .tabel { max-width: 62ch; }
.inhoud ol { counter-reset: none; display: flex; flex-direction: column; gap: 6px; padding-left: 0; list-style: none; }
.inhoud a { font-weight: 700; }

/* ---------- de flow (maak/): velden, feitenrijen, keuzes, de boom ---------- */
.velden { display: flex; flex-direction: column; gap: var(--blok); max-width: 640px; }
.velden-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 600px) { .velden-rij { grid-template-columns: 1fr; } }
.persoon { display: flex; flex-direction: column; gap: 12px; }
textarea.veld { height: auto; padding: 12px 16px; line-height: 1.5; resize: vertical; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* ---------- de vier veldmaten ---------- */
/* Een veld dat alleen staat werd zo breed als de kolom, en een jaartal van vier cijfers kreeg dan
   een vak van zeshonderd pixels. Een veld krijgt daarom de maat van wat erin past. De maten zijn
   geteld naar de langste inhoud die we in de praktijk zien: een achternaam met tussenvoegsel, een
   e-mailadres, een jaartal, een postcode of huisnummer. De maat is een bovengrens, dus op een smal
   scherm krimpt het veld gewoon mee. Een tekstvak houdt de volle kolom: daar is de regellengte
   juist wat je wilt. Alleen deze vier klassen mogen de breedte van een veld zetten. */
.veld--naam { max-width: 420px; }   /* achternaam, voornaam, plaats, naam op het omslag */
.veld--mail { max-width: 480px; }   /* e-mailadres */
.veld--jaar { max-width: 160px; }   /* jaartal, vier cijfers */
.veld--kort { max-width: 140px; }   /* postcode, huisnummer */
.cijferblok { display: flex; flex-direction: column; max-width: 62ch; }
.rij-feit { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-klein); }
.rij-feit b { font-variant-numeric: tabular-nums; color: var(--oker-tekst); text-align: right; }
.balken { display: flex; flex-direction: column; gap: 8px; max-width: 62ch; }
.balk { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 12px; font-size: var(--t-klein); }
/* --deel is het aandeel van de langste staaf, als percentage. Het was --i met een afgeronde
   deler, en dat tekende 50 procent waar 45,7 hoorde. */
.balk i { display: block; height: 8px; border-radius: 4px; background: var(--kobalt); width: var(--deel, 100%); }
.balk b { text-align: right; font-variant-numeric: tabular-nums; color: var(--oker-tekst); }
.schuif { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.schuif input { width: 22px; height: 22px; accent-color: var(--kobalt); color: var(--kobalt); margin: 0; }
.keuzerij { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.keuzerij input { width: 22px; height: 22px; accent-color: var(--kobalt); color: var(--kobalt); margin: 0; }
.keuzerij > span { display: flex; flex-direction: column; }
.vraag.keuze summary { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding-right: 32px; }
.vraag.keuze summary .klein { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 400; letter-spacing: 0; }
.vraag .antwoord.kolom { display: flex; flex-direction: column; gap: var(--regel); }
.kolom > * { min-width: 0; max-width: 100%; }
.akte-kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--kolomgat); align-items: start; }
.akte-kaart img { width: 100%; height: auto; border-radius: 4px; background: var(--wit); box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 20px 50px -30px rgba(18, 50, 92, .35); }
@media (max-width: 600px) { .akte-kaart { grid-template-columns: 1fr; } }
.blad-groot img { width: min(100%, 495px); height: auto; border-radius: 4px; background: var(--wit); box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 24px 60px -30px rgba(18, 50, 92, .35); }
.boomweergave { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blok); }
.boomweergave .generatie { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) { .boomweergave { grid-template-columns: 1fr; } }
/* Het echte veld is het zichtbare vakje: geen verborgen invoer met een getekende span ernaast,
   zodat de focusring op iets valt dat je ziet. Zie B007 in de audit van het ontwerpsysteem. */
.product { position: relative; cursor: pointer; display: block; }
.product input { position: absolute; left: 8px; top: 8px; z-index: 1; margin: 0; width: 24px; height: 24px;
  appearance: none; -webkit-appearance: none; background: var(--wit); border: 2px solid var(--kobalt);
  border-radius: 50%; cursor: pointer; }
/* De aan-stand wordt met currentColor getekend, niet met een eigen kleur: in de hoge-contrastmodus
   van Windows (forced-colors) vervangt het systeem de kleuren, maar currentColor loopt mee. */
.product input:checked { background:
  radial-gradient(circle at 50% 50%, currentColor 0 5px, transparent 5px) no-repeat, var(--wit); color: var(--kobalt); }
.product input:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (forced-colors: active) {
  /* Gemeten 12 september 2026 in Chrome: in deze modus wordt een background-image WEGGEGOOID,
     ook als hij in currentColor staat, dus de aan-stand verdwijnt dan. currentColor alleen is
     hier niet genoeg. Daarom hier wel forced-color-adjust: none, en tekenen met systeemkleuren,
     die de gebruiker zelf heeft gekozen. */
  .product input { border-color: CanvasText; background: Canvas; forced-color-adjust: none; }
  .product input:checked { background: radial-gradient(circle at 50% 50%, Highlight 0 5px, Canvas 5px) no-repeat; border-color: Highlight; }
  .product input:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .product:has(input:checked) .tegel { outline-color: Highlight; }
}
.product:has(input:checked) .tegel { outline: 3px solid var(--kobalt); outline-offset: 4px; }

/* ---------- prijsregel en feitenlijst: de twee lijstvormen naast een gewone lijst; nergens een tabel ---------- */
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prijsregels { display: flex; flex-direction: column; }
.prijsregel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 8px var(--kolomgat); padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.prijsregel.kaal { grid-template-columns: minmax(0, 1fr); }
.twee .kolom .prijsregel { grid-template-columns: minmax(0, 1fr); }
.prijsregel .regelrechts { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kolomgat); min-width: 0; }
@media (max-width: 1010px) { .prijsregel { grid-template-columns: minmax(0, 1fr); } }
.prijsregel .tegelklein { width: 96px; }
.prijsregel .tegelklein .tegel, .prijsregel .tegelklein .boek { width: 96px; }
.prijsregel .tegelklein .boek .titel, .prijsregel .tegelklein .boek .streep { display: none; }
.prijsregel .naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.prijsregel .naam a { color: var(--diep); }
.prijsregel .naam a:hover { color: var(--kobalt); }
.prijsregel .omschrijving { font-size: var(--t-klein); color: var(--tekst-zacht); }
.prijsregel .prijs-getal { text-align: right; white-space: nowrap; color: var(--oker); font-variant-numeric: tabular-nums; }
.prijsregel .prijs-getal b { font: 800 var(--t-getal-klein)/1 'Archivo', system-ui, sans-serif; letter-spacing: -.02em; color: var(--oker); }
.prijsregel .prijs-getal .euro-klein { font-size: var(--t-klein); line-height: 1.65; color: var(--oker-tekst); }
.prijsregel .prijs-getal small { font-size: var(--t-klein); line-height: 1.65; color: var(--tekst-zacht); }

@media (max-width: 600px) { .prijsregel .omschrijving { grid-column: 1 / -1; } .prijsregel .prijs-getal { white-space: normal; max-width: 50%; overflow-wrap: anywhere; } .prijsregel .prijs-getal b { font-size: var(--t-h3); } }
.feitenlijst { display: flex; flex-direction: column; max-width: 62ch; margin: 0; }
.feitenlijst .feit { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.feitenlijst dt { font: 800 var(--t-mono)/1.4 'Archivo', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-zacht); }
.feitenlijst dd { margin: 0; }
@media (max-width: 600px) { .feitenlijst .feit { grid-template-columns: 1fr; gap: 2px; } }

/* ================================================================================
   Mobiel, reparatie 12 september
   Gemeten met mobielpoort.mjs op iPhone SE (375), iPhone 15 (393), Pixel 7 (412)
   en 320 px als ondergrens, met apparaat-emulatie en touch. Alles hieronder staat
   in een media query voor smalle schermen; het brede ontwerp verandert niet.
   ================================================================================ */

/* ---- raakvlakken: wat een duim raakt is minstens 44 px hoog ---- */
@media (max-width: 1010px) {
  .kop .menu { width: 44px; height: 44px; padding: 10px; align-items: center; justify-content: center; }
  .kop .merk { min-height: 44px; }
  .kruimel { gap: 0 8px; align-items: center; }
  .kruimel a, .kruimel span { min-height: 44px; display: inline-flex; align-items: center; }
  .voet .kols a { min-height: 44px; display: flex; align-items: center; margin-top: 0; }
  .voet .onder .merk { min-height: 44px; }
  .voet .melden .etiket { margin-bottom: 6px; }
  .schuif { min-height: 44px; }
  .keuzerij { min-height: 44px; }
}

/* ---- formulieren: veld op volle breedte, knop eronder ---- */
@media (max-width: 600px) {
  .naamrij { flex-direction: column; max-width: 100%; gap: 12px; }
  .naamrij .veld { flex: none; width: 100%; }
  .naamrij .knop { width: 100%; }
  .velden { max-width: 100%; }
  .knoprij { flex-direction: column; align-items: stretch; gap: 14px; }
  .knoprij .knop { width: 100%; }
  .knoprij span { max-width: 100%; }
  /* een knoplabel dat niet past mag breken in plaats van buiten zijn rij te vallen */
  .knop { white-space: normal; text-align: center; height: auto; min-height: 52px;
          padding: 12px 20px; max-width: 100%; line-height: 1.3; }
}

/* ---- 320 px: geen kop past daar nog op één regel ---- */
@media (max-width: 380px) {
  .h1, .h1.een-regel, .boek .titel .t { white-space: normal; }
  .h1 { overflow-wrap: break-word; }
}

/* ---- beeld schaalt altijd mee, ook waar een breedte in de opmaak staat ---- */
@media (max-width: 1010px) {
  img, video { height: auto; }
  .reis .film { width: min(100% - 2 * var(--rand), 480px); }
  .opening .boek { width: min(100%, 300px); }
}

/* ---- zonder javascript is er geen knop die het menu opent: dan staan de
        links zelf in de kop, onder het merk, in plaats van verborgen ---- */
@media (max-width: 1010px) {
  html:not(.js) .kop .wrap { height: auto; flex-wrap: wrap; padding-block: 10px; row-gap: 4px; }
  html:not(.js) .kop .menu { display: none; }
  html:not(.js) .kop nav { display: flex; flex-wrap: wrap; gap: 0 18px; width: 100%; }
  html:not(.js) .kop nav a:not(.knop) { min-height: 44px; display: inline-flex; align-items: center; }
  html:not(.js) .kop nav a.knop { margin-left: 0; margin-block: 6px; width: 100%; }
}

/* ---- de kop blijft leesbaar waar hij over inhoud staat ----
   Op de voorpagina is de kop doorzichtig zolang de blauwe opening in beeld is;
   het script maakt hem daarna dekkend met .gewisseld. Bij minder beweging stopt
   dat script voor die stap, en dan liep de tekst onleesbaar onder de kop door.
   Zelfde oplossing als bij geen javascript: de kop blijft dan gewoon kobalt. */
@media (prefers-reduced-motion: reduce) {
  body:has(.opening.op-blauw) .kop:not(.gewisseld) { background: var(--kobalt); border-bottom-color: transparent; }
}
html.stil body:has(.opening.op-blauw) .kop:not(.gewisseld) { background: var(--kobalt); border-bottom-color: transparent; }

/* Elk keuzevakje en elk keuzerondje in de flow draagt de merkkleur, ook als het buiten een
   van de bekende rijen staat; anders valt het terug op de zwarte standaard van de browser. */
main input[type="checkbox"], main input[type="radio"] { accent-color: var(--kobalt); color: var(--kobalt); }

/* ================================================================================
   De kaartopzet van de flow
   Goedgekeurd op de opzet in website/opzet/bouw-kaart2.py. Elk scherm in maak/ is
   één kaart op het papier, en de kaart leest van boven naar beneden als vraag,
   cijfers, bewijs, verder. De stroken doen het werk dat witruimte eerst deed: ze
   scheiden met een lijn of met kleur, zodat er binnen de kaart geen gat groter dan
   32 px hoeft te vallen.

   Twee afwijkingen van de opzet, en waarom. De opzet tekent de kaartrand en de
   scheiding in de cijferstrook met twee doorzichtige blauwtinten van 16 en 18
   procent. Die staan niet in tokens.css, en kleurpoort.py en kleurmeting.mjs wijzen
   ze allebei af. De kaartrand draagt daarom --lijn, de kleur die de site al voor
   een haarlijn gebruikt, en de scheiding op het blauwe vlak draagt --wassing, want
   --lijn verdwijnt op --vlak.
   ================================================================================ */

/* ---- het vel en de kaart ---- */
.flowvel { padding: 48px var(--rand) 64px; }
.kaart-flow { max-width: 920px; margin-inline: auto; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--r-l); overflow: hidden; }

/* ---- de voortgangslijn: de teller stopt bij 7 en verdwijnt daarna (besluit V5) ---- */
.stapbalk { height: 3px; background: var(--lijn); position: relative; }
.stapbalk i { position: absolute; left: 0; top: 0; bottom: 0; display: block;
  background: var(--kobalt); width: calc(var(--i, 0) / 7 * 100%); }

/* ---- de stroken van de flowkaart ----
   Heetten tot 12 september 2026 .strook, net als de schuivende galerijstroken van .bladeren en
   .parade. Eén naam voor twee dingen, en de cascade beslist per eigenschap en niet per regel:
   deze generieke regel staat later en zette flex-direction op column, ook op de galerij, die
   zelf geen richting zette. Die werd daardoor 345 px breed en 4985 px hoog, en pikte ook deze
   vulling op. Een specifiekere selector helpt niet tegen een eigenschap die je niet noemt, dus
   de naam is gesplitst in plaats van de richting bijgezet. Gevonden door de manager-sessie. */
.kaartstrook { display: flex; flex-direction: column; gap: var(--regel); padding: 32px 40px; }
/* Alleen min-width: 0. Een max-width van 100% hier zou elke maat van een component
   overstemmen die even zwaar weegt en eerder staat: het tekstvak van scherm 6 werd zo
   840 px breed in plaats van de 640 die .velden zet, en het vlak-blok verloor zijn
   uitstek. Gemeten aan de breedte van het tekstvak, niet op het oog. */
.kaartstrook > * { min-width: 0; }
.kaartstrook + .kaartstrook { border-top: 1px solid var(--lijn); }
.kaart-flow .h1 { white-space: normal; }
.kaart-h1 { font-size: var(--t-h1-kaart); }
/* De knop staat onderaan in een eigen strook, met de kleine uitleg ernaast: wie de
   cijfers leest hoeft niet terug omhoog (reparatie 4 van de opzet). */
.kaartstrook--voet { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
.kaartstrook--voet .knoprij { flex: none; }
.voet-uitleg { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 260px; max-width: 46ch; }

/* ---- de cijferstrook: getal boven label, hoogstens twee in oker ---- */
.kaartstrook--cijfers { background: var(--vlak); flex-direction: row; flex-wrap: wrap;
  align-items: stretch; gap: 0; padding-block: 22px; }
.cijfer-een { display: flex; flex-direction: column; gap: 2px; padding-inline: 26px; }
.cijfer-een:first-child { padding-left: 0; }
.cijfer-een + .cijfer-een { border-left: 1px solid var(--wassing); }
.cijfer-getal { font: 800 var(--t-getal-strook)/1 'Archivo', system-ui, sans-serif;
  letter-spacing: -.03em; color: var(--diep); font-variant-numeric: tabular-nums; }
.cijfer-een.oker .cijfer-getal { color: var(--oker); }
.cijfer-label { font-size: var(--t-bijschrift); line-height: 1.4; color: var(--diep); }

/* ---- het bewijs: een balkgetal draagt de kaart niet, de balk doet dat al
        (reparatie 1 van de opzet: oker verrijkt, het neemt niet over) ---- */
.kaart-flow .balk b { font: 400 var(--t-klein)/1 'IBM Plex Mono', monospace; color: var(--tekst-zacht); }

/* ---- op een telefoon: de kaart vult de zijmarge, de cijfers stapelen ---- */
@media (max-width: 600px) {
  .flowvel { padding: 24px var(--rand) 40px; }
  .kaartstrook { padding: 24px; }
  .kaartstrook--cijfers { flex-direction: column; padding-block: 20px; }
  .cijfer-een { padding-inline: 0; padding-block: 14px; }
  .cijfer-een:first-child { padding-top: 0; }
  .cijfer-een:last-child { padding-bottom: 0; }
  .cijfer-een + .cijfer-een { border-left: 0; border-top: 1px solid var(--wassing); }
  .kaartstrook--voet { flex-direction: column; align-items: stretch; }
  .voet-uitleg { max-width: 100%; }
}


/* ---------- de voorbeeldpagina ----------
   Twee onderdelen die nergens anders voorkomen: de overgang (een akte die een zin wordt) en de
   lezer (de bladzijden zelf). Alles hierin gebruikt de maten en kleuren die er al zijn: er is
   maar één radius (--r-m), de papierschaduw is het vaste paar dat ook onder het boek en de
   bladen ligt, en de afstanden komen uit --regel, --blok, --kolomgat en --sectie-in. */

/* De overgang. Het blauwe vlak draagt de akte en haar tekst; de bladzijde komt er als wit vel
   onderuit, met een inspringing links en rechts zodat het leest als iets dat eronder vandaan
   schuift en niet als een tweede blok. */
.overgang { margin-top: var(--blok); }
/* De onderruimte is dubbel, en dat is niet cosmetisch. De witte kaart schuift met een negatieve
   marge onder dit vlak vandaan; is die marge even groot als de onderruimte, dan valt de bovenkant
   van de kaart precies op de onderkant van het beeld. Onder 1200 px valt dat niet op omdat de
   tekstkolom langer is dan de scan, maar vanaf 1200 px is de scan het langste element en raakte
   de kaart hem exact aan: gemeten 0 px ertussen. Met een dubbele onderruimte blijft er altijd
   evenveel lucht als de kaart overlapt. Gezien door Ernst, 12 september 2026. */
.overgang__akte { background: var(--vlak); border-radius: var(--r-m);
  padding: var(--blok) var(--blok) calc(var(--blok) * 2);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--kolomgat);
  align-items: start; }
.overgang__akte img { width: 100%; height: auto; border-radius: 4px; background: var(--wit);
  box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 20px 50px -30px rgba(18, 50, 92, .35); }
.overgang__akte > div { display: flex; flex-direction: column; gap: var(--regel); }
/* De geciteerde regel uit de akte is een eigen rol en geen kleine tekst. Hij droeg tot
   13 september 2026 ook .klein, en toen de letterpoort eindelijk over deze pagina keek meldde
   hij: rol "klein" rendert IBM Plex Mono waar Atkinson hoort. De poort had gelijk. Mono is hier
   met opzet, want dit is wat er op het papier staat en geen lopende tekst; dus hoort hij die
   rol niet te claimen. Maat en kleur staan nu hier, zodat hij niets meer leent. */
.akteregel { font: 400 var(--t-klein)/1.85 'IBM Plex Mono', monospace; color: var(--tekst-zacht); }
.overgang__akte .klein { padding-top: var(--regel); border-top: 1px solid var(--wassing); }
.overgang__blad { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-m);
  padding: var(--blok); margin: calc(-1 * var(--blok)) var(--sectie-in) calc(-1 * var(--regel));
  position: relative; display: flex; flex-direction: column; gap: var(--regel);
  box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 24px 60px -30px rgba(18, 50, 92, .35); }

/* De boektekst wordt gezet zoals in het boek: uitgevuld met afbreking aan. Zonder lang="nl" op
   het element breekt de browser op de verkeerde plek af en zonder afbreking krijgt uitvullen
   rivieren. Besluit van Ernst, 12 september 2026. */
.boektekst { font: 400 var(--t-tekst)/1.62 'Atkinson Hyperlegible', system-ui, sans-serif;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Een zin waarvan wij de akte zelf gelezen hebben. Geen kleurvlak alleen: de onderlijn draagt
   het verschil ook zonder kleur, en het tagje zegt welke akte het is. */
.uit-de-akte { background: var(--oker-vlak); color: inherit;
  box-shadow: 0 1px 0 var(--oker); padding: 1px 0; }
.uit-de-akte .tag { font: 400 var(--t-mono-klein)/1 'IBM Plex Mono', monospace;
  color: var(--oker-tekst); margin-left: 4px; vertical-align: super; }

/* De lezer: de bladzijden liggen naast elkaar en schuiven horizontaal, met de scrolklik per
   blad. Op een telefoon veegt dat vanzelf; met een toetsenbord doen de pijltjes het, en de
   strook is focusbaar zodat dat ook werkelijk kan. */
.bladen { display: flex; gap: var(--blok); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--regel) 0 2px; margin-top: var(--regel);
  scrollbar-width: thin; overscroll-behavior-x: contain; }
.lezer { padding-bottom: 0; }
.lezer + .sectie { padding-top: var(--blok); }
.lezer .bladen { margin-top: 0; }
.bladen:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 6px; border-radius: var(--r-m); }
.blad { flex: 0 0 auto; width: min(100%, 495px); scroll-snap-align: start; }
/* De bladen zijn even hoog als het langste, want ze liggen naast elkaar en een rij van
   ongelijke vellen leest als een fout. Maar een kort blad hoeft niet vol: de tekst staat boven
   en de bronnen onder, en het wit ertussen is de bladspiegel van een gedrukte bladzijde. Dat is
   hier geen ongebruikte ruimte maar de vorm van het ding dat wordt getoond. */
.bladvel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 4px;
  padding: var(--regel) var(--blok) var(--blok); height: 100%;
  display: flex; flex-direction: column; gap: var(--regel);
  box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 20px 50px -30px rgba(18, 50, 92, .35); }
.bladnr { color: var(--tekst-stil); }
.bronnen { margin-top: auto; padding-top: var(--regel); border-top: 1px solid var(--lijn);
  display: flex; flex-direction: column; gap: 6px; }
.bronregel { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px;
  align-items: baseline; }
.bronregel p { margin: 0; }
.bronregel .klein { grid-column: 2; }

@media (max-width: 1010px) {
  /* De dubbele onderruimte is er om de overlappende kaart lucht te geven; op smal is er geen
     overlap, dus hij is hier niet nodig en maakt hij alleen een gat. */
  .overgang__akte { grid-template-columns: 1fr; gap: var(--blok); padding-bottom: var(--blok); }
  .overgang__akte img { max-width: 320px; }
  /* Geen overlap meer zodra de kaart even breed is als het vlak. De kaart hoort onder het vlak
     vandaan te komen, en dat leest alleen als hij smaller is: op breed springt hij 64 px in aan
     weerszijden. Onder 1010 is die inspring nul, en dan is dezelfde negatieve marge geen effect
     meer maar twee even brede blokken die elkaar overlappen. Gezien door Ernst op zijn telefoon,
     13 september 2026. Op smal staat de kaart dus gewoon onder het vlak, met de normale afstand;
     de volgorde vlak-dan-kaart vertelt daar hetzelfde zonder truc. */
  .overgang__blad { margin: 10px 0 0; }
  .blad { width: min(100%, 340px); }
  .bladvel { padding: var(--blok) 22px; }
}


/* ---------- de productsectie onderaan /het-voorouderboek ----------
   Twee rijen en geen plank, en dat is een inhoudelijk verschil: de eerste rij verandert het
   boek dat wij maken, de tweede staat ernaast. Zie _productsectie.py voor de meting die
   eronder ligt. Alles hierin gebruikt de maten die er al zijn. */
.producten-erbij .rijkop { padding-top: var(--regel); margin-top: var(--regel);
  border-top: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 4px; }
.producten-erbij .rijkop.tweede { margin-top: var(--blok); }
.praster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--regel);
  margin-top: var(--regel); }
.praster:last-of-type { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* De productkaart. Dezelfde rand, radius en witte grond als elke andere kaart; het beeld staat
   op wit en draagt geen ornament, want het staat al in een doos. */
.pkaart { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-m);
  padding: var(--regel); }
.pkaart:hover { border-color: var(--wassing); }
.pkaart__beeld { display: block; background: var(--wit); border-radius: 4px; overflow: hidden;
  aspect-ratio: 1; }
.pkaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkaart__woord { display: flex; flex-direction: column; gap: 3px; }
.pkaart__woord p { margin: 0; }
.pkaart__naam { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800;
  line-height: 1.25; letter-spacing: -.01em; color: var(--diep); }
.pkaart__regel { line-height: 1.5; }
.pkaart__prijs { color: var(--oker-tekst); margin-top: 4px; }

@media (max-width: 1010px) {
  .praster, .praster:last-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Op smal staan de kaarten onder elkaar en wordt de afstand van de laatste prijs naar de
     volgende rijkop groter dan de sectiemaat toestaat. De kop komt daar dichter op zijn rij. */
  .producten-erbij .rijkop.tweede { margin-top: 10px; }
}
@media (max-width: 600px) {
  .praster, .praster:last-of-type { grid-template-columns: 1fr; }
}


/* De kaft op de voorbeeldpagina. Op de voorpagina staat het boek rechtop naast de belofte; hier
   ligt het iets gedraaid op het papier, alsof het is neergelegd om open te slaan. Hetzelfde
   meedrijven op de scrol doet beweging.js, want die zoekt .boek .drijf en niet de voorpagina. */
.boek--gelegd { transform: rotate(-2.5deg); }
/* Dezelfde papierschaduw als onder het boek op de voorpagina en onder de bladen; een eigen
   dekking verzinnen maakt een tweede schaduw in het systeem en de kleurpoort weigert hem. */
.boek--gelegd .kaft { box-shadow: 0 1px 0 rgba(18, 50, 92, .14), 0 24px 60px -30px rgba(18, 50, 92, .35); }
@media (prefers-reduced-motion: reduce) { .boek--gelegd { transform: none; } }


/* De inhoudsopgave van de lezer. Eerst een rij genummerde knoppen; op ware grootte bleek dat
   met twintig hoofdstukken vijf regels en 260 px hoog te worden op een telefoon, vóór het boek
   zelf, en een nummer zegt niet waar een hoofdstuk over gaat. Nu een uitklaplijst met de namen:
   één regel tot je hem opent, en hij werkt zonder javascript. De links zijn ankers. */
.hinhoud { margin-top: var(--regel); border-top: 1px solid var(--lijn); padding-top: var(--regel); }
.hinhoud summary { cursor: pointer; list-style: none; min-height: var(--raakvlak);
  display: flex; align-items: center; gap: 8px; color: var(--kobalt);
  font: 400 var(--t-klein)/1.2 'Atkinson Hyperlegible', system-ui, sans-serif; }
.hinhoud summary::-webkit-details-marker { display: none; }
.hinhoud summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms var(--verloop); }
.hinhoud[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.hlijst { list-style: none; padding: 0; margin: var(--regel) 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; }
.hlijst a { display: flex; align-items: center; gap: 12px; min-height: var(--raakvlak);
  padding: 4px 8px; text-decoration: none; color: var(--diep); border-radius: var(--r-m); }
.hlijst a:hover { background: var(--vlak); }
.hlijst .hnr { font: 400 var(--t-klein)/1 'IBM Plex Mono', monospace; color: var(--oker-tekst);
  min-width: 22px; }