/* ============================================================
   pagina.css — de opmaak van de secties.
   Kleuren en maten komen uit basis.css; hier staat alleen
   hoe de onderdelen op de pagina liggen.
   ============================================================ */

/* --- Kop met menu ------------------------------------------ */
.kop{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--rand);
}
.kop__in{display:flex;align-items:center;justify-content:space-between;gap:var(--r2);
  min-height:56px;padding-block:6px}
/* min-width:0 en de krimpende naam: zonder die twee duwde "Madelon van
   Tilborg" op 320 px het Instagram-pictogram en de menuknop het scherm uit.
   Een flex-item krimpt standaard niet onder zijn inhoud. */
.merk{font-family:'Fraunces',serif;font-size:1rem;font-variation-settings:'SOFT' 30,'WONK' 1;
  color:var(--inkt);text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;gap:var(--r1);min-width:0}
.merk span{overflow:hidden;text-overflow:ellipsis}
.merk img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px var(--papier), 0 0 0 3px var(--boek-rand);
}
.kop__rechts{display:flex;align-items:center;gap:4px}

/* Sinds 25-09-2026 staat er een derde aanraakvlak in de kop (LinkedIn), en
   44 px is de ondergrens voor een aanraakvlak. Er moest dus elders ruimte
   vandaan komen: smallere marge, geen tussenruimte tussen de pictogrammen,
   een kleiner logo en een iets kleinere naam. Anders wordt "Madelon van
   Tilborg" afgekapt tot "Madelon van Til…". */
@media (max-width:759px){
  .kop__in{padding-inline:var(--r2);gap:var(--r1)}
  .kop__rechts{gap:0}
  .merk{font-size:.84rem}
  .merk img{width:30px;height:30px}
}
/* Onder 360 px past "Madelon van Tilborg" niet meer naast drie
   aanraakvlakken van 44 px. Dan alleen het ronde portret, dat nog steeds
   naar de startpagina linkt. De naam blijft er voor een schermlezer;
   afkappen tot "Madelon van Til…" ziet eruit als een fout. */
@media (max-width:359px){
  .merk span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

.menu{display:flex;align-items:center;gap:var(--r3);list-style:none;margin:0;padding:0}
.menu a{font-size:.8rem;font-weight:600;color:var(--inkt-zacht);text-decoration:none;
  display:flex;align-items:center;min-height:var(--duim);white-space:nowrap}
.menu a:hover{color:var(--accent)}

.pictogram{display:flex;align-items:center;justify-content:center;
  width:var(--duim);height:var(--duim);color:var(--inkt-zacht);
  background:none;border:0;cursor:pointer;padding:0}
.pictogram:hover{color:var(--accent)}
.pictogram svg{width:20px;height:20px;fill:currentColor}

.knop-menu{display:none}
@media (max-width:759px){
  .knop-menu{display:flex}
  .menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papier);border-bottom:var(--rand);
    padding:var(--r1) var(--r3) var(--r3);
    box-shadow:0 18px 30px -22px rgba(31,27,24,.5);
  }
  .menu[hidden]{display:none}
  .menu a{font-size:1rem;padding-block:var(--r1);border-bottom:1px solid var(--lijn)}
  .menu li:last-child a{border-bottom:0}
}

/* --- Opening ----------------------------------------------- */
.opening{padding:var(--r6) 0 var(--r5)}
@media (min-width:900px){ .opening{padding:var(--r8) 0 var(--r6)} }
.opening h1{margin-bottom:var(--r3)}
.opening .lood{font-size:var(--t-1);color:var(--inkt-zacht);max-width:52ch;margin-bottom:var(--r4)}
.knoppen{display:flex;flex-wrap:wrap;gap:var(--r2)}

.breedbeeld{margin-top:var(--r6);width:100vw;margin-inline:calc(50% - 50vw)}
.breedbeeld img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bijschrift{font-size:var(--t--1);color:var(--inkt-licht);margin:var(--r1) 0 0}

/* --- De kleurband: het handschrift van de site ------------- */
.kleurband{display:flex;height:12px;width:100vw;margin-inline:calc(50% - 50vw)}
.kleurband i{flex:1}

/* --- Secties ----------------------------------------------- */
.sectie{padding:var(--r7) 0}
.sectie--wash{background:var(--boek-wash)}
.sectie__kop{max-width:var(--lees);margin-bottom:var(--r5)}

/* Een kop op een gekleurde wassing neemt de diepe boekkleur aan. Daarmee
   claimt elk boek zijn kleur ook in de letters, niet alleen in het vlak.
   Alle vier halen ruim 4,6:1 op hun eigen wassing. */
.sectie--wash h2,.boek h3,.hero h1{color:var(--boek-tekst)}

/* --- Uitgelicht boek --------------------------------------- */
.uitgelicht{display:grid;gap:var(--r4);align-items:center}
@media (min-width:800px){ .uitgelicht{grid-template-columns:minmax(0,300px) 1fr;gap:var(--r6)} }

/* Een boek dat net uit is, krijgt drie maanden lang extra aandacht:
   een dubbele lijn boven en onder, en een gloed in de boekkleur achter
   het omslag. De wassing blijft op 26% — dieper zakt de bijtekst op de
   donkerrode kerstkleur onder de contrastnorm. */
.sectie--nieuw{border-block:4px double var(--boek-diep)}
.uitgelicht__beeld{display:block}
.sectie--nieuw .uitgelicht__beeld{
  filter:drop-shadow(0 16px 36px color-mix(in srgb, var(--boek) 55%, transparent))}
.sectie--nieuw .merkje{font-size:var(--t-0);padding:9px 15px}
.uitgelicht__sinds{
  font:600 var(--t--1)/1.4 'Karla',sans-serif;letter-spacing:.1em;
  /* Kleine tekst op de boekwassing: --boek-diep haalt daar 3,4 à 4,0:1.
     Dat is genoeg voor een grote kop, niet voor een regel van 14 px. */
  text-transform:uppercase;color:var(--inkt-zacht);
  margin:calc(var(--r2) * -.5) 0 var(--r3)}
.uitgelicht .knoppen{margin-top:var(--r2)}
/* De rand in de boekkleur geeft het omslag houvast op de sterkere
   wassing; zonder rand zweefde het er los in. */
.omslag{border-radius:var(--rond);box-shadow:var(--schaduw);aspect-ratio:960/1518;
  object-fit:cover;border:1px solid var(--boek-rand)}
.merkje{display:inline-block;font:600 var(--t--1)/1 'Karla',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wit);background:var(--boek-diep);
  padding:7px 11px;border-radius:99px;margin-bottom:var(--r2)}

/* ============================================================
   Waarderingsbalk — zes omslagen naast elkaar, met de
   gemiddelde waardering per bron. De cijfers worden bij het
   bouwen opgehaald bij Jane; zie bouw.py.
   ============================================================ */
/* De bron staat één keer links, niet zes keer. Een echte tabel:
   rijen zijn de bronnen, kolommen de boeken. */
.balk{
  margin-bottom:var(--r6);
  overflow-x:auto;
  /* Geen zichtbare schuifbalk: die legde zich op een telefoon dwars over de
     omslagen heen. Vegen werkt gewoon. */
  scrollbar-width:none;-ms-overflow-style:none;
  /* De strook loopt met opzet de paginamarge in, zodat je op de telefoon
     van rand tot rand kunt vegen.

     Een RAND van 24 px in papierkleur, geen opvulling. Dat verschil is hier
     het hele punt: opvulling hoort bij het schuifvenster, dus inhoud schuift
     erdoorheen en blijft zichtbaar. Een rand ligt erbuiten. Met opvulling
     bleven de sterren en cijfers van een weggeschoven boek links naast de
     bronnaam staan — dat is het kader over de omslagen waar Peter een
     schermafbeelding van stuurde. */
  margin-inline:calc(var(--r3) * -1);
  border-inline:var(--r3) solid var(--papier);
}
.balk::-webkit-scrollbar{display:none}
@media (min-width:900px){ .balk{margin-inline:0;border-inline:0;overflow:visible} }
/* table-layout:fixed verdeelt de zes boekkolommen precies gelijk;
   de kolom met de bronnamen krijgt een vaste breedte. */
/* 820 px: bij 660 waren de kolommen smaller dan de sterren plus het cijfer,
   waardoor de waardering van het ene boek tegen die van het volgende aan liep.
   Op een telefoon schuif je dus wat verder — dat mag, de aanwijzing staat
   eronder. */
.balk table{border-collapse:collapse;width:100%;min-width:820px;table-layout:fixed}
.balk th,.balk td{text-align:left;vertical-align:top}
.balk__hoek,.balk__bron{width:82px}

.balk__boekkop{padding:0 var(--r3) var(--r2) 0}
.balk__boekkop a{display:block;text-decoration:none;color:inherit}
.balk__boekkop img{
  width:100%;aspect-ratio:960/1518;object-fit:cover;
  border-radius:var(--rond);box-shadow:var(--schaduw);
  transition:transform .18s ease;
}
.balk__boekkop a:hover img{transform:translateY(-3px)}
.balk__titel{
  font:600 .74rem/1.35 'Karla',sans-serif;color:var(--inkt);
  margin:var(--r2) 0 0;
  /* twee regels hoog, ook bij een korte titel — zo staat de eerste
     sterrenrij bij alle boeken op dezelfde lijn */
  min-height:calc(2 * 1.35em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* De kolom met de bronnamen, links en blijvend in beeld.

   28-09-2026: het hoekvakje linksboven is NIET meer blijvend in beeld.
   Het is leeg, maar het stond wel met een ondergrond in papierkleur en
   z-index 1 op zijn plek. Schoof je op de telefoon zijwaarts door de
   boeken, dan gleden de omslagen eronderdoor en bleef er een blok van
   82 px breed over de omslagen liggen — dat is het lelijke kader waar
   Peter een schermafbeelding van stuurde.

   De bronnamen in de tabel blijven wél plakken; die moet je kunnen
   blijven lezen. Het lege hoekvakje houdt alleen zijn breedte, zodat
   de kolommen op één lijn blijven. */
.balk__hoek{background:transparent}
.balk__bron{
  font:500 .72rem/1 'Karla',sans-serif;color:var(--inkt-licht);
  white-space:nowrap;padding:var(--r2) var(--r2) var(--r2) 0;
  border-top:1px solid var(--lijn);
  position:sticky;left:0;background:var(--papier);z-index:2;
}
.balk tbody td{
  padding:var(--r2) var(--r3) var(--r2) 0;
  border-top:1px solid var(--lijn);
}
/* De sterren zijn de blikvanger, het cijfer is de voetnoot. */
.balk__cijfer{display:flex;align-items:center;gap:7px}
.balk__cijfer .getal{font:500 .68rem/1 'Karla',sans-serif;color:var(--inkt-licht);
  font-variant-numeric:tabular-nums}
.balk__cijfer.leeg{font:500 .7rem/1 'Karla',sans-serif;color:var(--inkt-licht)}

/* Op een breed scherm past de tabel; dan is de aanwijzing overbodig. */
.balk__hint{font-size:var(--t--1);color:var(--inkt-licht);margin:calc(var(--r5) * -1) 0 var(--r6)}

/* Een link in een gekleurde sectie: --accent haalt op de roze wassing van
   het contactblok maar 3,7:1. De tekstkleur van het boek zelf haalt daar
   ruim 4,5:1 en past bovendien beter bij de sectie.
   Een knop is geen link-in-lopende-tekst: die houdt zijn eigen witte letters
   op een gevuld vlak. Zonder :not(.knop) wint deze regel van .knop — twee
   klassen wegen zwaarder dan één — en werd "Volg mij op Instagram" roze op
   roze: 1,26:1. */
.sectie--wash a:not(.knop){color:var(--boek-tekst)}
.sectie--wash a:not(.knop):hover{color:var(--inkt)}

/* --- Bevinding F2: bijschrift op een gekleurde ondergrond -----
   --inkt-licht is bedoeld voor papier. Op een boekwassing haalt hij
   maar 3,4:1 en dat is te weinig. Daar staat --inkt-zacht, die op elke
   wassing boven 4,7:1 blijft. Gemeten op de live site van versie 1.4:
   .opschrift 3,36:1 · .fragment__tijd en .boekje__teller 3,13:1. */
.sectie--wash .opschrift,
.fragment .fragment__tijd,
.fragment .boekje__teller{color:var(--inkt-zacht)}
@media (min-width:900px){ .balk__hint{display:none} }

/* ============================================================
   Sterren — vijf sterren met een gedeeltelijk gevulde laatste,
   zoals op Hebban. Twee lagen: grijze sterren eronder, gouden
   erboven, afgeknipt op het percentage.
   ============================================================ */
.sterren{position:relative;display:inline-block;line-height:0;white-space:nowrap;
  vertical-align:middle;flex:none}
.sterren svg{width:1em;height:1em;display:inline-block;fill:currentColor}
.sterren__leeg{color:var(--ster-leeg);display:block}
.sterren__vol{color:var(--ster);position:absolute;inset:0 auto 0 0;overflow:hidden;
  display:block;white-space:nowrap}
.sterren--klein{font-size:9px}
.sterren--tabel{font-size:17px}
.sterren--groot{font-size:15px}
@media (max-width:759px){ .sterren--tabel{font-size:15px} }
.balk__voet{font-size:var(--t--1);color:var(--inkt-licht);margin:var(--r2) 0 0}

/* --- Boekenrij --------------------------------------------- */
.boek{padding:var(--r6) 0;background:var(--boek-wash);border-top:1px solid var(--boek-rand)}
.boek__in{display:grid;gap:var(--r3)}
@media (min-width:800px){
  .boek__in{grid-template-columns:minmax(0,230px) 1fr;gap:var(--r6);align-items:center}
  .boek:nth-of-type(even) .boek__in{grid-template-columns:1fr minmax(0,230px)}
  .boek:nth-of-type(even) .boek__beeld{order:2}
}
.boek__reeks{font:600 var(--t--1)/1.3 'Karla',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--boek-tekst);margin-bottom:var(--r1)}
.boek h3{margin-bottom:var(--r2)}

/* Is de aanduiding een hele zin in plaats van een label ("Feelgood met een
   spicy randje voor de fans van..."), dan werken hoofdletters en wijde
   spatiëring tegen je. Dan gewoon een leesbare regel.
   Let op de p ervoor: zonder die extra specificiteit wint .reeks verderop
   in dit bestand, want dat staat later en weegt even zwaar. */
p.reeks--zin{
  font:400 var(--t-0)/1.5 'Karla',sans-serif;letter-spacing:0;
  text-transform:none;max-width:46ch;
  /* 28-09-2026: bij Operatie liefde brak "De liefdeshypothese" midden in
     het woord af. `pretty` verdeelt de regels netjes en laat geen los woord
     op de laatste regel achter; `hyphens:none` verbiedt het afbreken zelf.
     Beide zijn onschadelijk in een browser die ze niet kent. */
  text-wrap:pretty;hyphens:none}
.boek p{color:var(--inkt-zacht);margin-bottom:var(--r3)}

/* --- Over Madelon ------------------------------------------ */
.over{display:grid;gap:var(--r4)}
@media (min-width:800px){ .over{grid-template-columns:minmax(0,340px) 1fr;gap:var(--r6);align-items:start} }

/* De foto's als een losjes neergelegde stapel polaroids: wit kader, brede
   onderrand, licht gedraaid en steeds een beetje verschoven.

   De draaiing is klein met opzet. Een gedraaid vierkant is breder dan het
   origineel; bij 2,5 graden op een foto van 300 px is dat ruim 13 px extra
   aan elke kant, en op 320 px is die ruimte er gewoon niet. Daarom staat er
   ook opvulling opzij: dat is de ruimte waarin ze mogen kantelen. */
.polaroids{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--r3);padding-inline:var(--r2);
}
.polaroid{
  margin:0;max-width:300px;width:100%;
  background:var(--wit);
  padding:10px 10px 46px;          /* brede onderrand, zoals een polaroid */
  border-radius:2px;
  box-shadow:0 14px 30px -12px rgba(31,27,24,.45), 0 2px 4px rgba(31,27,24,.10);
  transition:transform .25s ease;
}
@media (min-width:700px){ .polaroid{padding:12px 12px 54px} }
.polaroid img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  border-radius:0;background:var(--papier-diep);
}
/* Een hoek per plek in de stapel, niet per foto: zo blijft het kloppen als
   er ooit een foto bij komt of afgaat. */
.polaroid--0{transform:rotate(-2.2deg)}
.polaroid--1{transform:rotate(1.8deg);margin-top:calc(var(--r2) * -1)}
.polaroid--2{transform:rotate(-1.2deg);margin-top:calc(var(--r2) * -1)}
.polaroid:hover{transform:rotate(0) translateY(-4px)}
.polaroids .bijschrift{align-self:flex-start;max-width:300px}
@media (prefers-reduced-motion:reduce){
  .polaroid,.polaroid:hover{transform:none;margin-top:0;transition:none}
}

/* --- Nieuwsbrief ------------------------------------------- */
.nieuwsbrief{background:var(--inkt);color:var(--papier);border-radius:var(--rond);
  padding:var(--r5) var(--r4)}
@media (min-width:800px){ .nieuwsbrief{padding:var(--r6)} }
.nieuwsbrief h2,.nieuwsbrief h3{color:var(--papier)}
.nieuwsbrief p{color:#CFC7BE}
.nieuwsbrief .opschrift{color:#A79E95}
.nieuwsbrief .veld > span{color:#B8AFA6}
.nieuwsbrief form{display:flex;flex-wrap:wrap;gap:var(--r2);align-items:end;margin-top:var(--r3)}
.nieuwsbrief .veld{flex:1 1 240px;margin:0}
.nieuwsbrief .knop{background:var(--moeite)}
.nieuwsbrief .knop:hover{background:var(--wit);color:var(--inkt)}
.klein{font-size:var(--t--1);color:#A79E95;margin-top:var(--r2)}

/* ============================================================
   Collega-auteurs over Madelon — vier briefjes, licht gedraaid,
   elk in een van de boekkleuren. Naar het voorbeeld uit de
   informatiepagina van de uitgever.
   ============================================================ */
/* Eigen achtergrond, zodat dit blok zich losmaakt van "Mijn boeken". */
.collegas{padding:var(--r7) 0;background:var(--papier-diep);
  border-block:1px solid var(--lijn)}
.briefjes{display:grid;gap:var(--r3)}
@media (min-width:640px){ .briefjes{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .briefjes{grid-template-columns:repeat(4,1fr);gap:var(--r2)} }

.briefje{
  margin:0;padding:var(--r3);border-radius:10px;color:var(--wit);
  background:var(--boek-diep);
  box-shadow:0 10px 26px -12px rgba(31,27,24,.45);
  display:flex;flex-direction:column;
  transition:transform .2s ease;
}
.briefje:nth-child(1){transform:rotate(-1.6deg)}
.briefje:nth-child(2){transform:rotate(1.1deg);margin-top:4px}
.briefje:nth-child(3){transform:rotate(-.8deg);margin-top:2px}
.briefje:nth-child(4){transform:rotate(1.4deg);margin-top:5px}
.briefje:hover{transform:rotate(0) translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .briefje,.briefje:hover{transform:none;margin-top:0;transition:none}
}

.briefje blockquote{
  margin:0 0 var(--r3);flex:1;
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.02rem;line-height:1.3;
}
.briefje figcaption{display:flex;align-items:center;gap:var(--r1)}
.briefje img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.briefje .naam{font:600 .8rem/1.3 'Karla',sans-serif;display:block}
.briefje .bron{font:400 .68rem/1.3 'Karla',sans-serif;opacity:.72;display:block}

/* --- Lezersbriefjes bij een boek ---------------------------- */
/* Dezelfde vorm als de vier collega-auteurs, maar drie per boek en vijf keer
   op de pagina. Daarom een kleinere rotatie: wat bij vier speels staat, wordt
   bij vijftien rommelig. Ze lijnen uit onder het omslag en de tekst. */
.briefjes--lezers{margin-top:var(--r5)}
@media (min-width:700px){
  .briefjes--lezers{grid-template-columns:repeat(3,1fr);gap:var(--r2);align-items:stretch}
}
.briefje--lezer:nth-child(1){transform:rotate(-.7deg)}
.briefje--lezer:nth-child(2){transform:rotate(.5deg);margin-top:3px}
.briefje--lezer:nth-child(3){transform:rotate(-.4deg);margin-top:1px}

/* Drie briefjes, drie kleuren — uit hetzelfde omslag.
   Kaart 1 houdt de boekkleur (erft --boek-diep van .briefje), kaart 2 en 3
   krijgen twee andere kleuren die op dat omslag staan. Zie de toelichting bij
   de --kaart2/--kaart3-tokens in basis.css.
   Dit geldt alleen voor de lezersbriefjes: de vier collega-auteurs bovenaan
   hebben elk al een eigen boekkleur en horen juist wél bij elkaar. */
.briefje--lezer:nth-child(2){background:var(--boek-kaart2)}
.briefje--lezer:nth-child(3){background:var(--boek-kaart3)}
.briefje--lezer blockquote{font-size:.88rem;line-height:1.4}
.briefje--lezer .sterren{margin-bottom:var(--r2)}
/* Op de donkere briefjes zijn de lege sterren nauwelijks te zien; die mogen
   hier wat oplichten. */
.briefje--lezer .sterren__leeg{color:rgba(255,255,255,.3)}
/* Naam boven, bron eronder. De collega-briefjes zetten die naast elkaar
   omdat daar een portretje bij staat; hier niet, en dan valt het uiteen. */
.briefje--lezer figcaption{display:block}
.briefje--lezer .bron{opacity:.8;margin-top:2px}
.briefje--lezer .bron a{color:inherit;text-decoration:underline}

/* --- Instagram-raster --------------------------------------- */
.insta__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2);
  justify-content:space-between;margin-bottom:var(--r4)}
.insta__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r1)}
@media (min-width:700px){ .insta__raster{gap:var(--r2)} }
.insta__raster a{display:block;position:relative;overflow:hidden;border-radius:var(--rond)}
/* 4:5, niet vierkant: dat is de verhouding van de berichten zelf. */
.insta__raster img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform .25s ease}
.insta__raster a:hover img{transform:scale(1.04)}

/* --- Favorieten -------------------------------------------- */
.favo-groep{margin-bottom:var(--r6)}
.favo-groep > h3{margin-bottom:var(--r2)}
.favo-groep > .inleiding{color:var(--inkt-zacht);margin-bottom:var(--r4)}
/* Twee kolommen, niet drie: met een omslag ernaast heeft de tekst
   anders te weinig breedte en wordt het een smal lint. */
.favo{display:grid;gap:var(--r3)}
@media (min-width:760px){ .favo{grid-template-columns:repeat(2,1fr)} }
/* minmax(0,1fr) en niet 1fr: een gridkolom krimpt standaard niet onder de
   inhoud, en één lang woord ("boekpresentatie") hield de tekstkolom dan zo
   breed dat de kaart op 320 px 11 px buiten beeld viel. Dat was bevinding F3
   uit de externe controle. overflow-wrap vangt het woord zelf op. */
.favo article{background:var(--papier-diep);padding:var(--r3);border-radius:var(--rond);
  display:grid;gap:0 var(--r3);
  grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto 1fr;
  align-items:start}
/* height:auto, zodat een liggend omslag — sommige prentenboeken zijn
   dat — niet bijgesneden wordt maar zijn eigen vorm houdt. */
.favo__omslag{
  grid-row:1 / span 3;
  width:76px;height:auto;
  border-radius:3px;box-shadow:0 6px 16px -7px rgba(31,27,24,.55);
}
/* Zonder omslag schuift de tekst naar links op */
.favo article:not(:has(.favo__omslag)){grid-template-columns:minmax(0,1fr)}
.favo h4{margin-bottom:2px;font-size:1.02rem;min-width:0;overflow-wrap:anywhere}
.favo .auteur{font:600 var(--t--1)/1.4 'Karla',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--r2);display:block}
.favo p{font-size:.9rem;color:var(--inkt-zacht);margin:0;max-width:none;
  min-width:0;overflow-wrap:anywhere}
.favo .auteur{min-width:0;overflow-wrap:anywhere}
.favo i{font-style:italic}

/* --- Contact en voet --------------------------------------- */
.contact{display:grid;gap:var(--r4)}
@media (min-width:700px){ .contact{grid-template-columns:1fr 1fr} }
.voet{border-top:var(--rand);padding:var(--r5) 0;font-size:var(--t--1);color:var(--inkt-licht)}
.voet a{color:var(--inkt-zacht)}
.voet__in{display:flex;flex-wrap:wrap;gap:var(--r2) var(--r4);justify-content:space-between}

/* --- Boekpagina -------------------------------------------- */
.kruimel{padding:var(--r3) 0 0;font-size:var(--t--1);color:var(--inkt-licht)}
.kruimel a{color:var(--inkt-zacht)}
.hero{background:var(--boek-wash);padding:var(--r5) 0 var(--r6);
  border-bottom:1px solid var(--boek-rand)}
.hero__in{display:grid;gap:var(--r4)}
@media (min-width:800px){
  .hero__in{grid-template-columns:minmax(0,300px) 1fr;gap:var(--r6);align-items:start}
}
.reeks{font:600 var(--t--1)/1.3 'Karla',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--boek-tekst);margin-bottom:var(--r2)}
.pakkend{font-size:var(--t-1);color:var(--inkt-zacht);max-width:48ch;margin-bottom:var(--r4)}

/* ============================================================
   Koopknoppen — één per uitvoering.
   Er stond één knop "Koop het boek", maar die zei niet wát je kocht.
   Nu is er een knop per uitvoering, met een plaatje van het omslag in
   de vorm die erbij hoort: een boek met een rug, een scherm, of een
   koptelefoon. Op de telefoon onder elkaar, vanaf 700 px naast elkaar.
   ============================================================ */
.koop{display:flex;flex-direction:column;gap:var(--r2);margin-top:var(--r3);max-width:26rem}
@media (min-width:700px){
  .koop{flex-direction:row;flex-wrap:wrap;max-width:none}
  .koopknop{flex:1 1 12.5rem;max-width:16rem}
}
.koopknop{
  display:flex;align-items:center;gap:var(--r2);
  min-height:var(--duim);padding:var(--r1) var(--r2);
  background:var(--wit);border:1.5px solid var(--boek-rand);border-radius:var(--rond);
  color:var(--inkt);text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.koopknop:hover{background:var(--boek-wash);border-color:var(--boek);
  color:var(--inkt);transform:translateY(-1px)}
.koopknop img{width:56px;height:56px;flex:none}
.koopknop__naam{font:600 var(--t-0)/1.25 'Karla',sans-serif;color:var(--boek-tekst)}
/* De winkelnaam eronder: de bezoeker weet dan dat hij de site verlaat. */
.koopknop__winkel{display:block;font:400 var(--t--1)/1.4 'Karla',sans-serif;
  font-style:normal;color:var(--inkt-zacht);white-space:nowrap}

.verhaal{padding:var(--r6) 0}
/* Alleen de eerste alinea van het verhaal krijgt een sierletter —
   niet de eerste alinea van elk blok dat erin staat. */
.verhaal > .omhulsel > p:first-of-type::first-letter{
  font-family:'Fraunces',serif;font-size:3.2em;line-height:.82;float:left;
  padding:.06em .1em 0 0;color:var(--boek-tekst);font-variation-settings:'SOFT' 40,'WONK' 1}

/* ============================================================
   Quotes over een boek — in de kleur van dat boek.
   ============================================================ */
.quotes{margin:var(--r6) 0 0}
.quotes__kop{margin-bottom:var(--r4)}

/* De korte quote van een collega-schrijver: groot en pontificaal. */
.quote--uit{
  margin:0 0 var(--r4);padding:var(--r4) 0 0;
  border-top:2px solid var(--boek-rand);
}
.quote--uit blockquote{
  margin:0 0 var(--r2);
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:var(--t-3);line-height:1.22;letter-spacing:-.01em;
  color:var(--boek-tekst);text-wrap:balance;max-width:22ch;
}
.quote--uit figcaption{font:600 var(--t--1)/1.4 'Karla',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-licht)}

/* De langere reacties van lezers: kaarten naast elkaar. */
.quotes__rij{display:grid;gap:var(--r3)}
@media (min-width:800px){ .quotes__rij{grid-template-columns:repeat(3,1fr)} }
.quote--lezer{
  margin:0;padding:var(--r3);border-radius:var(--rond);
  background:var(--boek-wash);border:1px solid var(--boek-rand);
  display:flex;flex-direction:column;
}
.quote--lezer blockquote{margin:0 0 var(--r2);font-size:.92rem;line-height:1.6;
  color:var(--inkt-zacht);flex:1}
.quote--lezer blockquote::before{content:"\201C";font-family:'Fraunces',serif;
  font-size:1.6em;line-height:0;color:var(--boek);vertical-align:-.28em;margin-right:.08em}
.quote--lezer figcaption{font:600 var(--t--1)/1.4 'Karla',sans-serif;color:var(--boek-tekst)}

/* ============================================================
   Leesfragment — de proloog of het eerste hoofdstuk, te lezen
   op de pagina zelf. Opgemaakt als een boekpagina.
   ============================================================ */
.fragment{margin-top:var(--r6);padding:var(--r5) var(--r2);border-radius:var(--rond);
  background:var(--boek-wash);border:1px solid var(--boek-rand)}
/* Punt 6, "netjes uitlijnen": op de telefoon bleven er 28 tekens per regel
   over — een bladzijde in een kader in een omhulsel, elk met hun eigen
   marge. Bij 28 tekens breekt bijna elke regel een woord af en dat is
   precies wat er rommelig uitzag.

   Onder 480 px loopt het kader daarom tot dicht tegen de schermrand en
   raakt het zijn ronde hoeken en zijranden kwijt: het is dan een strook
   over de volle breedte in plaats van een kaart. Dat levert ruim veertig
   tekens per regel op. */
@media (max-width:479px){
  .fragment{
    margin-inline:calc(var(--r3) * -1);
    padding-inline:var(--r1);
    border-inline:0;border-radius:0;
  }
}
@media (min-width:700px){ .fragment{padding:var(--r5) var(--r4)} }
@media (min-width:800px){ .fragment{padding:var(--r6) var(--r5)} }

.fragment__kop{text-align:center;margin-bottom:var(--r5)}
.fragment__kop h3{font-size:var(--t-3);margin:0 0 var(--r1);color:var(--boek-tekst)}
.fragment__tijd{font:400 var(--t--1)/1.4 'Karla',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inkt-licht);margin:0}

/* ============================================================
   Het boekje — je bladert door de bladzijden.
   Werkt ook zonder JavaScript: dan is het een strook die je
   opzij schuift. Met JavaScript komen er knoppen en een teller.
   ============================================================ */
.boekje{margin-inline:auto;max-width:640px}
@media (min-width:1000px){ .boekje{max-width:1080px} }

.boekje__blad{
  list-style:none;margin:0;padding:0 0 2px;      /* de ul-opvulling eraf */
  display:flex;gap:var(--r2);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  /* 28-09-2026 — het kader moest het fragment omsluiten (punt 7).
     De bladzijden staan naast elkaar in deze strook. Elke bladzijde houdt
     zijn eigen hoogte, maar de strook eromheen was zo hoog als de LANGSTE
     bladzijde. Bij Operatie liefde op 375 px: bladzijde 1 is 920 px hoog,
     het kader 2207 px — 1121 px leegte onder de tekst.

     Het script zet hieronder de hoogte van de strook op die van de
     bladzijde die je ziet. Deze overgang laat dat zachtjes gebeuren in
     plaats van met een sprong.

     `overflow-y:clip` hoort erbij: zonder dat zou een langere bladzijde die
     naast beeld staat een verticale schuifbalk opleveren. Zichtbare inhoud
     wordt nooit afgeknipt — de hoogte is immers die van de bladzijde die je
     op dat moment ziet. */
  overflow-y:clip;
  transition:height .35s ease;
}
@media (prefers-reduced-motion:reduce){ .boekje__blad{transition:none} }
.boekje__blad::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){ .boekje__blad{scroll-behavior:auto} }

/* `start`, niet `center`: anders vecht het vastklikken met de knoppen
   en spring je twee bladzijden te ver. */
.boekje__pagina{
  flex:0 0 100%;scroll-snap-align:start;min-width:0;
}
@media (min-width:1000px){ .boekje__pagina{flex-basis:calc(50% - var(--r2) / 2)} }

/* Een bladzijde is echte tekst, geen foto van een bladzijde. Het vel zelf
   ziet er wel uit als papier: gebroken wit, een rand, een zachte schaduw en
   een nummer in de voet. Alle bladzijden even hoog, anders vecht het
   vastklikken met de verschillende lengtes. */
/* Op de telefoon zie je één bladzijde tegelijk; die mag zijn eigen hoogte
   houden, anders staat er onder de korte bladzijden een scherm leegte.
   Vanaf 1000 px staan er twee naast elkaar en moeten ze wél even hoog zijn. */
.boekje__blad{align-items:flex-start}
@media (min-width:1000px){ .boekje__blad{align-items:stretch} }
/* Krappe opvulling op de telefoon: elke pixel die naar de marge gaat, gaat
   van de regellengte af, en binnen een bladzijde binnen een kader is die
   toch al kort. */
.blad{
  height:100%;display:flex;flex-direction:column;
  background:var(--papier);
  padding:var(--r3) var(--r2) var(--r2);
  /* zie de opmerking bij .fragment hierboven */
  border-radius:3px;border:1px solid var(--boek-rand);
  box-shadow:0 14px 34px -18px rgba(31,27,24,.55);
}
@media (max-width:479px){ .blad{padding:var(--r3) var(--r2) var(--r2)} }
@media (min-width:700px){ .blad{padding:var(--r5) var(--r4) var(--r3)} }
.blad p{
  margin:0;max-width:none;
  font-size:.96rem;line-height:1.62;color:var(--inkt);
  text-align:left;hyphens:auto;
}
.blad p + p{text-indent:1.6em}            /* zoals in een gedrukt boek */
/* Een alinea die van de vorige bladzijde doorloopt, springt niet in. */
.blad p.loopt-door{text-indent:0}
.blad__nr{
  margin-top:auto;padding-top:var(--r3);
  font:500 var(--t--1)/1 'Karla',sans-serif;color:var(--inkt-licht);
  font-variant-numeric:tabular-nums;
}
/* De sierletter staat alleen op de allereerste bladzijde. */
.boekje__pagina:first-child .blad p:first-of-type::first-letter{
  font-family:'Fraunces',serif;font-size:3.1em;line-height:.82;float:left;
  padding:.06em .1em 0 0;color:var(--boek-tekst);
  font-variation-settings:'SOFT' 40,'WONK' 1;
}

.boekje__balk{
  display:flex;align-items:center;justify-content:center;gap:var(--r3);
  margin-top:var(--r3);
}
/* Zonder JavaScript hebben de knoppen geen zin; dan tonen we ze niet. */
.boekje__balk{display:none}
.boekje--bediend .boekje__balk{display:flex}

.boekje__knop{
  width:var(--duim);height:var(--duim);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--papier);color:var(--boek-tekst);cursor:pointer;
  border:1.5px solid var(--boek-rand);border-radius:50%;
  font-size:1.1rem;line-height:1;
  transition:background .15s ease,transform .15s ease;
}
.boekje__knop:hover:not(:disabled){background:var(--boek-wash);transform:translateY(-1px)}
.boekje__knop:disabled{opacity:.35;cursor:default}
.boekje__teller{
  font:600 var(--t--1)/1 'Karla',sans-serif;letter-spacing:.1em;
  color:var(--inkt-licht);min-width:5.5em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.boekje__hint{
  text-align:center;font-size:var(--t--1);color:var(--inkt-licht);
  margin:var(--r2) 0 0;
}
.fragment__voet{max-width:58ch;margin:var(--r5) auto 0;padding-top:var(--r3);
  border-top:1px solid var(--boek-rand);
  font-size:var(--t--1);color:var(--inkt-licht)}
.fragment__voet a{color:var(--boek-tekst)}

.gegevens{border-top:var(--rand);border-bottom:var(--rand);padding:var(--r4) 0;margin-top:var(--r5)}
.gegevens dl{display:grid;gap:var(--r2) var(--r4);margin:0;
  grid-template-columns:max-content 1fr;max-width:var(--lees)}
.gegevens dt{font:600 var(--t--1)/1.5 'Karla',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--inkt-licht)}
.gegevens dd{margin:0;font-size:.95rem}

.verder{padding-bottom:var(--r7)}
.verder__rij{display:grid;gap:var(--r3);grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){ .verder__rij{grid-template-columns:repeat(5,1fr)} }
.verder a{display:block;text-decoration:none;color:inherit}
.verder img{border-radius:var(--rond);box-shadow:var(--schaduw);aspect-ratio:960/1518;
  object-fit:cover;transition:transform .2s ease}
.verder a:hover img{transform:translateY(-4px)}
.verder h3{font-size:.9rem;margin:var(--r2) 0 0}

/* --- Tekstpagina: privacy, 404 ------------------------------ */
/* Beduidend kleiner dan de rest van de site, op verzoek. Ondergrens is
   16 px: daaronder zoomt iOS in en wordt het oncomfortabel te lezen.
   0,92rem is 16,6 px op de telefoon en 18,4 px op desktop. */
.tekstpagina{max-width:66ch;font-size:.92rem}
.tekstpagina h1{margin-bottom:var(--r3);font-size:var(--t-3)}
.tekstpagina .lood{font-size:var(--t-0);color:var(--inkt-zacht);margin-bottom:var(--r5)}
.tekstpagina h3{margin:var(--r5) 0 var(--r1);font-size:var(--t-1)}
.tekstpagina p,.tekstpagina li{color:var(--inkt-zacht);font-size:inherit}
.klein-grijs{margin-top:var(--r5);padding-top:var(--r3);border-top:var(--rand);
  font-size:var(--t--1);color:var(--inkt-licht)}

/* --- Zichtbare plaatshouder -------------------------------- */
.let-op{background:#FFF6E5;border:1px solid #E8C98A;border-radius:var(--rond);
  padding:var(--r2) var(--r3);margin:var(--r3) 0;font-size:.9rem;color:#6B4E10;max-width:none}

/* --- Opkomen tijdens het scrollen, zonder JavaScript ------- */
/* `cover 26%` betekende: pas volledig zichtbaar als een kwart van het blok
   voorbij is. Bij een lang blok — Over mij, Wat ik zelf lees — duurde dat op
   een telefoon veel te lang en bleef de tekst vaag. Nu is het klaar zodra het
   blok goed in beeld staat, ongeacht hoe hoog het is. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .op{animation:opkomen linear both;animation-timeline:view();
        animation-range:entry 0% entry 70%}
  }
}
/* Op een telefoon scheelt elk blok maar een paar honderd pixels; daar is
   opkomen eerder hinderlijk dan aardig. */
@media (max-width:759px){
  .op{animation:none !important;opacity:1;transform:none}
}
@keyframes opkomen{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============================================================
   Toestemmingsvenster — sinds 27-09-2026.

   Een strook onderaan, geen scherm dat alles afdekt. De bezoeker komt
   met één hand uit Instagram binnen; een venster midden in beeld staat
   dan precies in de weg van waarvoor hij kwam.

   `position:fixed` en niet in de tekststroom: zo verspringt er niets
   tijdens het laden. In de HTML staat het blok juist vooráán, zodat de
   Tab-toets en een schermlezer er meteen bij zijn.
   ============================================================ */
.toestemming{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--papier);
  border-top:2px solid var(--boek-rand);
  box-shadow:0 -14px 34px -18px rgba(31,27,24,.5);
  padding:var(--r3) 0;
}
.toestemming[hidden]{display:none}
.toestemming__in{
  width:100%;max-width:var(--breed);margin-inline:auto;
  padding-inline:var(--r3);
  display:grid;gap:var(--r3);
}
@media (min-width:700px){
  .toestemming__in{padding-inline:var(--r5);
    grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--r5)}
}
.toestemming__kop{
  font-size:var(--t-1);margin:0 0 var(--r1);color:var(--inkt);
}
.toestemming__tekst{
  font-size:.92rem;line-height:1.55;color:var(--inkt-zacht);
  margin:0;max-width:62ch;
}
.toestemming__tekst a{color:var(--accent-diep)}

/* Beide knoppen precies gelijk. Een opvallende "ja" naast een onopvallende
   "nee" is geen vrije keuze, en daarmee geen geldige toestemming. */
.toestemming__knoppen{display:flex;flex-wrap:wrap;gap:var(--r2)}
.toestemming__knop{flex:1 1 auto;min-width:0;justify-content:center;
  padding-inline:var(--r2);white-space:nowrap}
@media (min-width:700px){ .toestemming__knop{flex:0 0 auto} }