/* Opmaak van coenfirmationbias.nl
   Alles staat in dit ene bestand. Kleuren en maten staan bovenaan, zodat
   je ze kunt aanpassen zonder de rest te hoeven begrijpen. */

/* Baloo 2, zelf gehost. Vervangt Bree uit de huisstijlgids: Bree is
   betaald en die bestanden hebben we niet. Baloo 2 staat onder de SIL
   Open Font License, dus deze bestanden mogen hier staan; zie
   letters/OFL.txt. Het is een variabel lettertype: één bestand dekt de
   gewichten 400 tot 800. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/letters/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/letters/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --inkt: #1C1735;
  --grijs: #575176;
  --lijn: #CFE3E3;
  --papier: #ffffff;
  --achtergrond: #FAFBFB;
  --accent: #1C1735;
  --turkoois: #9FCBCB;
  --turkoois-licht: #EAF4F4;
  --breedte: 42rem;
  --breed: 62rem;   /* alleen de homepagina is zo breed */
  /* De homepagina met de Instagram-kolom ernaast, vanaf 1361 punten. Deze
     maat geldt daar voor main, de kop en de footer samen. Stonden ze los
     van elkaar met het getal erin, dan gaan ze bij een wijziging uit de
     pas lopen. */
  --breed-home: 78rem;
  --letter: 'Baloo 2', system-ui, -apple-system, sans-serif;
  /* Derde inkttint voor lopende tekst. Koppen blijven --inkt, datums en
     bijschriften --grijs. Contrast van --tekst op de achtergrond: 12,9
     op 1, ruim boven de 4,5 die voor tekst geldt. Gemeten 25 sep 2026. */
  --tekst: #2F2A50;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font: 1.0625rem/1.7 var(--letter);
  -webkit-text-size-adjust: 100%;
  /* body is een "container": daardoor betekent 100cqw de breedte van de
     pagina ZONDER de verticale schuifbalk. De rijen op /alle-stukken/
     rekenen daarmee (zie .rij). Met 100vw telde de schuifbalk mee: op
     Windows, met een gewone schuifbalk van 15 punten, stak de rij dan 7,5
     punten uit, en stond de eerste kaart bij vensters smaller dan ongeveer
     1000 punten 7 punten links van de naam van het onderwerp. Gemeten op
     11 sep 2026. Keuze van CB. */
  container-type: inline-size;
  /* Vangnet: is er toch iets breder dan het venster, dan schuift de pagina
     zelf niet opzij. clip maakt, anders dan hidden, geen schuifgebied aan.
     Let op: iets wat te breed is, wordt hierdoor afgeknipt in plaats van dat
     het opvalt. Meet dus niet alleen of de pagina opzij schuift, maar ook of
     er iets buiten de pagina steekt. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* De kop is één slanke balk van 4,25rem. Was 242 punten hoog, waardoor de
   titel van een artikel pas op 314 punten begon. Ontworpen in Claude
   Cowork, goedgekeurd door CB op 12 sep 2026. */
.kop {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}
.kop .binnen {
  max-width: var(--breed); margin: 0 auto;
  padding: 0 1.25rem; min-height: 4.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.kop .naam {
  margin: 0; font-size: 1.1875rem; font-weight: 700;
  letter-spacing: -0.01em; white-space: nowrap;
}
/* teken en naam vormen samen een klikbaar geheel: het beeldmerk 2,5rem
   hoog (2rem onder 52rem, zie verderop), een halve rem ruimte tot de naam,
   op een lijn. Het volledige logo past hier niet: het woordmerk daarin
   beslaat 27 procent van de hoogte over twee regels, dus de letters zouden
   ongeveer 6,5 punten hoog worden.
   flex en niet inline-flex, gekozen door CB op 13 sep 2026. Een inline-flex
   staat op de tekstregel, en die houdt onderaan ruimte vrij voor letters als
   de g en de j. Gemeten op de draaiende site: de regel was daardoor 50,7
   punten hoog terwijl het teken 40 is. Met flex wordt hij 40. Op 375 punten
   scheelt dat 10,7 punten kop; op 900, 1024, 1280 en 1440 blijft de kop
   68,8 punten, want daar is min-height leidend. Het teken met de naam komt
   daar wel 5,3 punten lager en staat dan in het midden van de balk. */
.kop .naam a {
  color: inherit; text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.kop .naam img { height: 2.5rem; width: auto; display: block; }
.kop nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem;
  justify-content: flex-end;
}
.kop nav a {
  font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; color: var(--grijs); text-decoration: none;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.kop nav a:hover { color: var(--inkt); }
.kop nav a.hier { color: var(--inkt); border-bottom-color: var(--accent); }
@media (max-width: 52rem) {
  .kop .binnen {
    min-height: 0; padding-block: 0.75rem;
    flex-direction: column; align-items: flex-start; gap: 0.5rem;
  }
  .kop nav { justify-content: flex-start; }
  /* Het beeldmerk kleiner op een smal scherm, gekozen door CB op
     13 sep 2026. Op een breed scherm blijft het 2,5rem: daar is de balk
     68,8 punten door min-height, dus kleiner maken levert er niets op.
     Kleiner dan 2rem levert ook hier niets meer op: onder die maat bepaalt
     de tekstregel de hoogte, niet het teken. Gemeten: de kop op 375 punten
     gaat van 146,6 naar 138,9. */
  .kop .naam img { height: 2rem; }
}

/* Het menu achter een knop op een smal scherm. Gekozen door CB op
   22 sep 2026. Zonder deze regels stond het menu op een telefoon op twee
   regels en was de plakkende kop 138,9 punten hoog; met de knop is hij 69,
   net als op een breed scherm. Opengeklapt is hij 353.
   De regels werken alleen als het script in basis.html de klasse met-knop
   op de kop zet. Zonder JavaScript blijft alles zoals het was: de knop
   verborgen, het menu op twee regels.
   De grens is 55rem en niet 52rem: tussen 833 en ongeveer 869 punten valt
   het menu anders naar twee regels (zie MEMORY.md, 13 sep 2026).
   Omdat de kop nu ook op een telefoon 4,25rem hoog is, staat de
   hoofdstukbalk daar voortaan onder de kop in plaats van erachter. */
.menuknop { display: none; }
@media (max-width: 55rem) {
  .kop.met-knop .binnen {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
    min-height: 4.25rem; padding-block: 0; gap: 0 1rem;
  }
  .kop.met-knop .menuknop {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 2.75rem; padding: 0 0.75rem; margin-right: -0.75rem;
    font: inherit; font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--inkt); background: none; border: 0; cursor: pointer;
  }
  .menuknop .streepjes, .menuknop .streepjes::before, .menuknop .streepjes::after {
    display: block; width: 1.125rem; height: 2px; background: currentColor;
    border-radius: 1px; content: ""; position: relative;
  }
  .menuknop .streepjes::before { position: absolute; top: -6px; }
  .menuknop .streepjes::after { position: absolute; top: 6px; }
  .kop.open .menuknop .streepjes { background: transparent; }
  .kop.open .menuknop .streepjes::before { top: 0; transform: rotate(45deg); }
  .kop.open .menuknop .streepjes::after { top: 0; transform: rotate(-45deg); }
  .kop.met-knop nav { display: none; }
  .kop.met-knop.open nav {
    display: flex; flex-direction: column; flex-basis: 100%;
    gap: 0; padding: 0.25rem 0 0.75rem;
  }
  .kop.met-knop.open nav a {
    font-size: 0.9375rem; padding: 0.7rem 0;
    border-bottom: 1px solid var(--lijn);
  }
  .kop.met-knop.open nav a:last-child { border-bottom: 0; }
  .kop.met-knop.open nav a.hier { color: var(--inkt); border-bottom-color: var(--lijn); }
  .kop.met-knop ~ main .hoofdstukbalk { top: 4.25rem; }
}

/* ------------------------------------------------------------ main */
main {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* ================================================== de homepagina
   Alles hieronder tot aan "overzicht" is voor de homepagina. Die pagina
   heeft <body class="home">; de artikelen niet. Daarom staat body.home
   voor de regel van main: zonder die beperking zouden ook de artikelen
   breder worden, en die moeten 42rem blijven. */
body.home main {
  max-width: var(--breed);
  margin: 0 auto;
  padding-block: 3rem 4rem;
  padding-inline: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
/* De Instagram-kolom op een breed scherm, gekozen door CB op 13 sep 2026.
   Vanaf een venster van 1361 punten (85rem is 1360) staat hij links naast de
   pagina: main 78rem, de kolom 14rem, 3rem ertussen. Gemeten in het
   voorbeeld: main 1248, kolom 224, uitgelichte waaier 936. Op 1360 en smaller
   geldt alleen de regel hierboven, dus de pagina blijft zoals hij was (main
   992, waaier 952) en staat de kolom onderaan, waar hij in home.html staat.
   Het raster heeft vier rijen, een per onderdeel in home.html: introductie,
   uitgelicht, de twee blokken, de onderwerpen. De kolom beslaat alle vier. In
   het voorbeeld stond hij in de eerste rij alleen; dan wordt die rij zo hoog
   als de kolom en valt er een gat onder de introductie. Komt er een onderdeel
   bij in home.html, zet de 4 dan mee. Tussen de onderdelen blijft 4rem.
   Waarom "not all and (max-width: 85rem)" en niet "min-width: 85.0625rem":
   met 125 procent schaling in Windows is een venster van 1361 punten voor de
   browser 1360,8 breed. Dan slaat min-width: 85.0625rem niet aan en
   max-width: 85rem ook niet, en stonden de tegels op twee naast elkaar over
   de volle breedte. Gemeten op 14 sep 2026. Zo is deze regel precies het
   tegendeel van de regel voor smalle schermen bij de kolom verderop. */
@media not all and (max-width: 85rem) {
  body.home main {
    max-width: var(--breed-home);
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 3rem;
    align-items: start;
  }
  body.home main > * { grid-column: 2; }
  body.home main > .ig-kolom { grid-column: 1; grid-row: 1 / -1; }
  /* De kop en de footer lopen mee. Zonder deze regel begint de kolom op
     108 punten en het beeldmerk op 236: 128 punten scheef. Gemeten op de
     draaiende site op 14 sep 2026, keuze van CB. Prijs die hij erbij koos:
     klik je naar een artikel, dan springt de kop terug naar 62rem. */
  body.home .kop .binnen,
  body.home .voet-kolommen,
  body.home .voet-onder { max-width: var(--breed-home); }
}

.sectiekop {
  font-family: system-ui, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs);
  font-weight: 600;
  margin: 0 0 1.25rem;
}

/* De introductie bovenaan. Op verzoek van CB gecentreerd, zoals bij De
   Correspondent: margin-inline zet het blok van 42rem in het midden van de
   bredere kolom, text-align centreert de regels binnen dat blok. In het
   goedgekeurde ontwerp stond hij links; dit is een bewuste afwijking. */
.intro {
  max-width: var(--breedte);
  margin-inline: auto;
  text-align: center;
}
.intro h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.intro p { margin: 0 0 1rem; }
.intro p:last-child { margin-bottom: 0; }
/* De leus stond tot 12 sep 2026 in de kop van elke pagina. Hij hoort bij de
   homepagina, niet bij elke pagina. */
.intro .leus {
  margin: 0 0 1.25rem; font-size: 0.8125rem; letter-spacing: 0.12em;
  color: var(--grijs); font-style: oblique 10deg;
}

/* ------------------------------------------ een kaart in de waaier */
.uitkaart {
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--papier);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.uitkaart .beeld { border-radius: 2px; overflow: hidden; display: grid; place-items: center; }
.uitkaart .beeld img { max-height: 15rem; width: auto; max-width: 100%; display: block; }
.uitkaart time {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs);
}
.uitkaart h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.uitkaart h3 a { color: inherit; text-decoration: none; }
.uitkaart h3 a:hover { color: var(--accent); }
.uitkaart .samenvatting {
  margin: 0;
  color: var(--grijs);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ------------------------------------------------- de waaier zelf */
.balk {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.balk .sectiekop { margin: 0; }
.knoppen { display: none; gap: 0.5rem; align-items: center; }
.waaier-aan .knoppen { display: flex; }
.knoppen button {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--lijn);
  background: var(--papier);
  color: var(--inkt);
  border-radius: 999px;
  cursor: pointer;
}
.knoppen button:hover { border-color: var(--accent); color: var(--accent); }
.stippen { display: flex; gap: 0.35rem; margin: 0 0.35rem; }
.stippen button {
  width: 0.5rem; height: 0.5rem; padding: 0;
  border-radius: 999px;
  border: 1px solid var(--grijs);
  background: transparent;
  cursor: pointer;
}
.stippen button[aria-current="true"] { background: var(--accent); border-color: var(--accent); }

/* zonder JavaScript: gewoon drie kaarten onder elkaar */
.waaier { display: flex; flex-direction: column; gap: 1.25rem; }

/* met JavaScript: één voorop, twee half erachter */
.waaier-aan .waaier {
  display: block;
  position: relative;
  min-height: 34rem;
}
.waaier-aan .waaier > article {
  position: absolute;
  top: 0;
  left: 50%;
  width: 52%;
  transform-origin: center center;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.waaier-aan .waaier > article.voor {
  transform: translateX(-50%);
  z-index: 3;
  opacity: 1;
}
.waaier-aan .waaier > article.links {
  transform: translateX(-95%) translateY(2rem) scale(0.8);
  z-index: 1;
  opacity: 0.7;
  cursor: pointer;
}
.waaier-aan .waaier > article.rechts {
  transform: translateX(-5%) translateY(2rem) scale(0.8);
  z-index: 1;
  opacity: 0.7;
  cursor: pointer;
}
.waaier-aan .waaier > article.links:hover,
.waaier-aan .waaier > article.rechts:hover { opacity: 0.92; }

/* op de zijkaarten alleen plaatje en titel */
.waaier-aan .waaier > article .samenvatting,
.waaier-aan .waaier > article .knop-licht,
.waaier-aan .waaier > article time { display: none; }
.waaier-aan .waaier > article.voor .samenvatting,
.waaier-aan .waaier > article.voor time { display: block; }
.waaier-aan .waaier > article.voor .knop-licht { display: inline-flex; }
/* Op de zijkaarten werd de titel middenin een woord doorgesneden: het vak is
   37 punten hoog en de tekst vroeg er 47. Nu wordt hij na twee regels netjes
   afgekapt met drie puntjes. Alleen als het scriptje aan staat: zonder
   JavaScript heeft geen enkele kaart de klasse 'voor' en horen alle drie de
   kaarten gewoon volledig te blijven. */
.waaier-aan .waaier > article:not(.voor) h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 1.0625rem;
}

@media (prefers-reduced-motion: reduce) {
  .waaier-aan .waaier > article { transition: none; }
}

/* op een smal scherm past de waaier niet: alleen het voorste stuk */
@media (max-width: 52rem) {
  .waaier-aan .waaier { min-height: 0; }
  /* De regels hierboven voor .voor, .links en .rechts zijn preciezer dan een
     regel op alleen article. In CSS wint de preciezere regel, ook binnen een
     blok voor smalle schermen. Stonden ze hier niet apart genoemd, dan bleef
     translateX(-50%) staan en schoof de voorste kaart 168 punten naar links,
     half buiten het scherm. Gemeten en hersteld op 10 sep 2026. */
  .waaier-aan .waaier > article,
  .waaier-aan .waaier > article.voor,
  .waaier-aan .waaier > article.links,
  .waaier-aan .waaier > article.rechts {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
  }
  .waaier-aan .waaier > article:not(.voor) { display: none; }
}

/* ------------------------------------------------- de twee blokken */
.blokken {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 46rem) { .blokken { grid-template-columns: 1fr; } }
/* Geen kader en geen gekleurde streep meer: die had de inhoudsopgave ook, en
   als hetzelfde middel overal zit zegt het niets meer. De twee blokken staan
   nu kaal naast elkaar met een dunne scheidslijn ertussen. De flex-regels
   blijven staan: de knoppen onderin hangen daaraan. Het omslagpunt is 46rem,
   gelijk aan dat van .blokken; bij 52rem zou er een streep boven het tweede
   blok komen terwijl ze nog naast elkaar staan. */
.blok {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blok + .blok { border-left: 1px solid var(--lijn); padding-left: 2.5rem; }
@media (max-width: 46rem) {
  .blok + .blok {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--lijn); padding-top: 1.5rem;
  }
}
.blok h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.blok p { margin: 0; font-size: 0.9375rem; color: var(--grijs); }
.blok .aanbeveling {
  margin: 0;
  font-size: 0.875rem;
  font-style: oblique 10deg;
  color: var(--grijs);
  border-top: 1px solid var(--lijn);
  padding-top: 0.75rem;
}
.blok .aanbeveling span { display: block; font-style: normal; font-size: 0.75rem; margin-top: 0.4rem; }
/* De knoppen in de blokken en in de waaier staan links en onderaan, zoals
   de tekstlinks die er eerst stonden. Zonder deze regels rekt een knop in
   een kolom van een flexbox uit over de volle breedte. */
.blok .knop, .blok .knop-licht { margin-top: auto; }
.blok .knop, .blok .knop-licht, .uitkaart .knop-licht { align-self: flex-start; }

/* ----------------------------------------- de onderwerpen onderaan */
.rooster {
  display: grid;
  /* 16rem in plaats van 14rem: bij 14rem kwamen er vier tegels op een rij van
     226 punten, en "Voedingswetenschap 8 stukken" heeft er 252 nodig. Bij
     16rem worden het drie tegels van ruim 300. Gemeten op 10 sep 2026. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.85rem;
}
.onderwerp {
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--papier);
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.onderwerp:hover { border-color: var(--accent); color: var(--accent); }
/* min-width: 0 en overflow-wrap zijn de vangnetten: zonder die twee weigert
   een lang woord als "Voedingswetenschap" te krimpen of af te breken, en
   steekt het buiten de tegel. Nodig zodra jij een groep een lange naam geeft. */
.onderwerp b { font-weight: 600; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.onderwerp span {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--grijs);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.alles {
  margin: 1.25rem 0 0;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
}

/* ------------------------------------------------ de Instagram-kolom
   Naar Claude outputs/instagram-kolom-voorbeeld.html en
   instagram-tegelvorm.html. Tegels waren eerst 9:16, de hele reel (CB,
   14 sep 2026); op 15 sep 2026 koos CB vierkant. object-fit snijdt dan het
   midden eruit, en bij zijn tekstposts valt die snede precies samen met het
   blauwe kader: die posts staan als vierkant over de volle breedte in een
   9:16-vlak, met 88 van de 400 regels wit erboven en eronder. Bij de twee
   reels met echt beeld gaat er wel wat af. In de smalle kolom twee naast
   elkaar. Onder 85rem staat de kolom onderaan: dan zes naast elkaar, en
   onder 34rem drie, zoals in het voorbeeld; twee naast elkaar over de volle
   breedte zou ruim 1.400 punten hoog worden, en bij de oude 9:16 ruim 2.500
   (CB, 14 sep 2026; de 1.400 gemeten op 15 sep). De kolom schuift niet mee
   met de pagina: de kop plakt al, en een meeschuivende kolom zou eronder
   verdwijnen (CB, 14 sep 2026). */
.ig-kop {
  margin: 0; font-family: system-ui, sans-serif; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.ig-naam {
  margin: 0.2rem 0 0.8rem; font-family: system-ui, sans-serif;
  font-size: 0.8125rem; color: var(--grijs);
}
.ig-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.ig-tegel {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--achtergrond); border-radius: 2px;
}
.ig-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* geen display hier: .knop-licht is inline-flex, en dat houdt de tekst in
   het midden van de knop */
.ig-knop { margin-top: 0.9rem; }
@media (max-width: 85rem) {
  .ig-kolom { padding-top: 2rem; border-top: 1px solid var(--lijn); }
  .ig-raster { grid-template-columns: repeat(6, 1fr); }
  .ig-kop, .ig-naam { text-align: center; }
  /* .ig-kolom ervoor: ".knop, .knop-licht" staat verderop in dit bestand
     en is anders even sterk; dan wint die met inline-flex en blijft de knop
     links staan. Gemeten op 14 sep 2026. */
  .ig-kolom .ig-knop { display: flex; width: fit-content; margin-inline: auto; }
}
@media (max-width: 34rem) { .ig-raster { grid-template-columns: repeat(3, 1fr); } }
/* ============================================ einde van de homepagina */

.siteknop {
  font-size: 0.8125rem;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs);
  font-weight: 600;
  margin: 0 0 1.5rem;
}

/* --------------------------------------------------------- overzicht */
.lijst { list-style: none; margin: 0; padding: 0; }
.kaart { border-bottom: 1px solid var(--lijn); }
.kaart:last-child { border-bottom: 0; }
.kaart a {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
}
.kaart img {
  width: 7.5rem;
  height: 7.5rem;
  /* contain, niet cover: de omslagen bevatten vaak tekst, en die mag niet
     worden weggesneden */
  object-fit: contain;
  flex: none;
  border-radius: 2px;
  background: var(--achtergrond);
}
.kaart-tekst { min-width: 0; }
.kaart time {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--grijs);
  margin-bottom: 0.35rem;
}
.kaart h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3125rem;
  line-height: 1.3;
}
.kaart a:hover h2 { color: var(--accent); }
.kaart p {
  margin: 0;
  color: var(--grijs);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (max-width: 34rem) {
  .kaart a { flex-direction: column; gap: 0.75rem; }
  .kaart img { width: 100%; height: 11rem; }
}

/* -------------------------------------------------------------- post */
.post .datum {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 0.75rem;
}
.post h1 {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  letter-spacing: -0.015em;
}
/* De vier deelknoppen onder de titel. Gekozen door CB op 19 sep 2026
   uit twee vormen in Claude outputs/deelknoppen-varianten.html: kleine
   knoppen met een randje, geen pictogrammen. Geen pictogrammen omdat de
   logo's van WhatsApp en LinkedIn beschermde merken zijn en een nagetekende
   variant niet herkenbaar is. De knoppen zijn kleiner dan .knop-licht: die
   is 2,75rem hoog en bedoeld als hoofdknop, en vier daarvan zouden boven een
   artikel harder roepen dan het stuk zelf. Gemeten op 19 sep 2026 in een
   tekstkolom van 592 punten: vier knoppen van 87, 76, 52 en 95 breed, samen
   op één regel van 35 punten hoog. Ze vouwen naar de volgende regel als de
   kolom smaller wordt.

   Tot 22 sep 2026 stond er tussen de titel en de knoppen een samenvatting,
   met de streep eronder die de kop van het artikel scheidt van de rest. CB
   haalde de samenvatting weg: bij acht stukken herhaalde de inleiding hem.
   De streep en de ruimte eromheen staan nu onder de knoppen, zodat de kop
   er hetzelfde uit blijft zien. */
.deel-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lijn);
}
.deel-knoppen a, .deel-knoppen button {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: transparent;
  color: var(--inkt);
  font-family: system-ui, sans-serif;
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}
.deel-knoppen a:hover, .deel-knoppen button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.deel-knoppen a:focus-visible, .deel-knoppen button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------- inhoudsopgave
   Staat in de tekst van een artikel, na de inleiding: direct na de eerste
   afbeelding vóór het eerste hoofdstuk. Tot 22 sep 2026 stond hij boven de
   tekst, tussen de samenvatting en de inleiding; CB vond het raar dat na de
   titel meteen de hoofdstukken kwamen. De plek wordt bepaald door
   zet_inhoudsopgave in bouw.py. Alleen de hoofdstukken; de onderdelen
   daaronder komen er niet in. Het is een echte lijst, zodat een
   voorleesprogramma meldt hoeveel stukken erin staan.

   Waarom overal .post ervoor. De inhoudsopgave staat nu binnen .tekst, en de
   regels voor .tekst h2, .tekst a, .tekst ul en .tekst li wegen even zwaar
   als .inhoudsopgave h2 enzovoort; omdat ze later in dit bestand staan,
   winnen ze. Gemeten op 22 sep 2026: zonder .post werd het kopje
   "Inhoudsopgave" 23 punten in plaats van 13, met 44 punten ruimte erboven,
   en werden de links onderstreept — elf eigenschappen anders. Met .post
   ervoor en de vier aanvullingen hieronder (kleur, overflow-wrap,
   line-height en text-underline-offset, die anders van .tekst komen) waren
   alle 2.440 berekende eigenschappen van de inhoudsopgave gelijk aan vóór
   de verplaatsing. */
.post .inhoudsopgave {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--papier);
  color: var(--inkt);
  overflow-wrap: normal;
}
.post .inhoudsopgave h2 {
  margin: 0 0 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs);
  font-weight: 600;
  line-height: inherit;
  scroll-margin-top: 0;
  overflow-wrap: normal;
}
.post .inhoudsopgave ul { margin: 0; padding-left: 1.25rem; }
.post .inhoudsopgave li {
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.post .inhoudsopgave li:last-child { margin-bottom: 0; }
.post .inhoudsopgave a {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: normal;
  text-underline-offset: auto;
}
.post .inhoudsopgave a:hover { text-decoration: underline; }

/* ------------------------------------------------- luisterregel
   Staat boven een artikel dat bij een aflevering van de podcast hoort,
   tussen de deelknoppen en de tekst. Hetzelfde kader als de inhoudsopgave.
   Tot 22 sep 2026 stond de inhoudsopgave er direct onder, met 1rem ruimte
   ertussen zodat de twee één geheel vormden; sindsdien staat de
   inhoudsopgave in de tekst en volgt hier de inleiding. De ruimte eronder is
   daarom 2rem geworden, gelijk aan die onder de deelknoppen. */
.luisteren {
  margin: 0 0 2rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--papier);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.luisteren a { color: var(--accent); text-decoration: none; }
.luisteren a:hover { text-decoration: underline; }

/* ------------------------------------------------- podcastpagina
   De lijst met afleveringen op /podcast/. Die staat binnen .tekst; de
   gewone opmaak van lijsten daar wordt hier eerst weer uitgezet. */
.tekst .afleveringen { list-style: none; margin: 2rem 0 0; padding: 0; }
.tekst .afleveringen .aflevering {
  margin: 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tekst .afleveringen .aflevering:last-child { border-bottom: 1px solid var(--lijn); }
.afleveringen .nummer,
.afleveringen .gegevens {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs);
}
.tekst .afleveringen .titel {
  font-size: 1.125rem;
  line-height: 1.35;
  text-decoration: none;
}
.tekst .afleveringen .titel:hover { text-decoration: underline; }
.tekst .afleveringen .lees {
  font-family: system-ui, sans-serif;
  font-size: 0.8125rem;
  align-self: flex-start;
}

.tekst h2 {
  /* niet onder de twee plakkende balken verdwijnen bij een sprong vanuit de inhoudsopgave */
  scroll-margin-top: 8rem;
  font-size: 1.4375rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.tekst h3 { font-size: 1.1875rem; margin: 2rem 0 0.5rem; }
.tekst h4, .tekst h5, .tekst h6 {
  font-size: 1rem;
  margin: 1.75rem 0 0.5rem;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.tekst p { margin: 0 0 1.25rem; }
.tekst a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }

/* Lange webadressen en lange woorden mogen niet buiten de tekstkolom steken.
   Gemeten op 10 sep 2026 op de draaiende site: op een scherm van 375 punten
   liepen 15 van de 24 artikelen over, bijna altijd door een link die als één
   onbreekbaar woord telt. "anywhere" mag alleen op links: die hebben geen
   spaties om op af te breken. Gewone tekst breekt met "break-word" alleen af
   als een woord echt niet past. */
.tekst { overflow-wrap: break-word; }
/* De lopende tekst van een artikel krijgt de derde inkttint; koppen houden
   de donkerste. */
.tekst { color: var(--tekst); }
.tekst h2, .tekst h3, .tekst h4 { color: var(--inkt); }
.tekst a { overflow-wrap: anywhere; }
.post h1,
.tekst h2, .tekst h3, .tekst h4, .tekst h5, .tekst h6 { overflow-wrap: break-word; }
.tekst ul, .tekst ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.tekst li { margin-bottom: 0.5rem; }

.tekst img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto 0.5rem;
  border-radius: 2px;
}
.tekst img + em,
.tekst figcaption {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  color: var(--grijs);
}

.tekst blockquote {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--papier);
  font-size: 0.9375rem;
}
.tekst blockquote p:last-child { margin-bottom: 0; }

/* Een brede tabel schuift binnen zijn eigen kader en duwt de tekst
   eromheen niet naar buiten. Gemeten op 10 sep 2026: op een scherm van
   375 punten was de tabel in het pre-workoutstuk 511 punten breed in een
   tekstkolom van 320. */
.tabelrol { overflow-x: auto; margin: 1.75rem 0; }
/* Hier staat .tekst voor, en dat is met opzet: ".tabelrol table" is even
   sterk als ".tekst table" hieronder, en bij gelijke sterkte wint in CSS de
   regel die het laatst staat. Zonder dat woord bleef de marge van de tabel
   staan bovenop die van het omhulsel en werd het gat boven elke tabel 56
   punten in plaats van 28. Gemeten op 10 sep 2026. */
.tekst .tabelrol table { margin: 0; }

.tekst table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.9375rem;
  font-family: system-ui, sans-serif;
}
.tekst th, .tekst td {
  border: 1px solid var(--lijn);
  padding: 0.5rem 0.7rem;
  text-align: left;
}
.tekst th { background: var(--papier); font-weight: 600; }

/* Oordeelkleuren in tabellen. Deze kleuren dragen betekenis: ze kwamen zo
   van de oude site. Wie kleurenblind is of de pagina laat voorlezen, mist
   die betekenis nog; daarvoor moet er een woord bij komen te staan. */
.tekst td:has(.oordeel-groen)  { background: #25a55a; color: #fff; }
.tekst td:has(.oordeel-oranje) { background: #ffb700; color: #16181d; }
.tekst td:has(.oordeel-rood)   { background: #e62214; color: #fff; }

/* op een vaste pagina staat vaak een portretfoto; die hoeft het scherm
   niet te vullen */
/* min(22rem, 100%): 22rem is 352 punten, en op een telefoonscherm is de
   tekstkolom maar 320 punten breed. Met alleen 22rem stak de foto er 32
   punten uit, op Over Coen en op de ScienceChecker-pagina. Gemeten op
   10 sep 2026. */
.vaste-pagina .tekst img { max-width: min(22rem, 100%); margin: 2rem 0; }

/* --------------------------------------------------- aanbevelingen
   Een vaste pagina met "breed: ja" in het kopblok krijgt <body class="breed">.
   Die pagina is 62rem breed, maar de lopende tekst blijft 42rem: bredere
   regels lezen slechter. Dat gaat zo: de tekst is een rooster van drie
   kolommen, alles staat in de middelste van 42rem, en alleen het blok met
   aanbevelingen gebruikt alle drie de kolommen. Op een smal scherm zijn de
   buitenste kolommen nul breed en verandert er niets. */
body.breed main { max-width: var(--breed); }
body.breed .vaste-pagina .tekst {
  display: grid;
  grid-template-columns: 1fr min(var(--breedte), 100%) 1fr;
}
body.breed .vaste-pagina .tekst > * { grid-column: 2; }
body.breed .vaste-pagina .tekst > .aanbevelingen { grid-column: 1 / -1; }

.aanbevelingen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 3rem 0 0;
}
@media (max-width: 52rem) { .aanbevelingen { grid-template-columns: 1fr; } }
.aanbevelingen .aanbeveling {
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--papier);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
/* Baloo 2 heeft geen getekende cursief; de browser helt de rechte letter
   over. Die hoek staat hier vast, anders kiest elke browser zijn eigen
   schuinte. De naam onder het citaat blijft rechtop; dat staat hieronder
   bij .wie. */
.aanbevelingen .aanbeveling p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-style: oblique 10deg;
}
.aanbevelingen .aanbeveling .wie {
  margin-top: auto;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--grijs);
  border-top: 1px solid var(--lijn);
  padding-top: 0.9rem;
}

/* uitklapblokken */
.tekst details {
  margin: 1.75rem 0;
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--papier);
  padding: 0 1.1rem;
}
.tekst details[open] { padding-bottom: 0.5rem; }
.tekst summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font-family: system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
}
.tekst summary:hover { color: var(--accent); }

/* een leeg ankerpunt mag geen ruimte innemen */
/* scroll-margin-top: de inhoudsopgave springt naar dit ankerpunt, niet
   naar het kopje. Zonder deze ruimte verdween het kopje onder kop en
   hoofdstukbalk (gemeten 22 sep 2026: alle 197 sprongen 78 tot 106
   punten te ver). Met 7rem staat het kopje er 6 tot 34 punten onder. */
.tekst a[id]:empty { display: block; height: 0; scroll-margin-top: 7rem; }

/* ------------------------------------------------------------- tags */
.tags {
  margin: 3rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
  line-height: 2.2;
}
.tag {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--grijs);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}
.terug {
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------- knoppen
   Twee soorten. De gevulde vraagt iets van de lezer (mail mij, vraag een
   lezing aan). De lichte brengt je naar een andere pagina. Minstens
   2.75rem hoog: 44 punten is de gangbare ondergrens voor een aanraakdoel.
   Op verzoek van CB, 11 sep 2026: knoppen maken zichtbaar dat je kunt
   klikken en vergroten het vlak dat je moet raken. */
.knop, .knop-licht {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
.knop {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--papier);
}
.knop:hover { opacity: 0.88; }
.knop-licht {
  background: transparent;
  border-color: var(--lijn);
  color: var(--inkt);
}
.knop-licht:hover { border-color: var(--accent); color: var(--accent); }
/* Binnen de artikeltekst maakt ".tekst a" elke link accentkleurig en
   onderstreept, en die regel is sterker dan ".knop". Zonder de twee regels
   hieronder werd de tekst van de gevulde knop op de lezingpagina
   onleesbaar: accentkleur op een accentkleurige achtergrond. */
.tekst .knop { color: var(--papier); text-decoration: none; }
.tekst .knop-licht { color: var(--inkt); text-decoration: none; }
.tekst .knop-licht:hover { color: var(--accent); }

/* ------------------------------------------------------------- voet
   Drie kolommen, naar het voorbeeld van wnkl.nl dat CB aandroeg. Onder
   62rem worden het er twee, onder 34rem één. Het aanmeldveld voor een
   nieuwsbrief dat in dat voorbeeld staat, zit hier bewust niet in: die
   dienst bestaat nog niet. Zie MEMORY.md. */
.voet {
  border-top: 1px solid var(--lijn);
  background: var(--papier);
  padding: 3rem 1.25rem 2rem;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--grijs);
}
.voet-kolommen {
  max-width: var(--breed);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.voet-kolom h2 {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt);
}
.voet-kolom ul { list-style: none; margin: 0; padding: 0; }
.voet-kolom li { margin-bottom: 0.15rem; }
.voet-kolom li a,
.voet-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--inkt);
  text-decoration: none;
}
.voet-kolom li a:hover,
.voet-contact a:hover { color: var(--accent); }
.voet-leus {
  margin: 0 0 1rem;
  color: var(--inkt);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: oblique 10deg;
  line-height: 1.6;
}
.voet-contact { margin: 0 0 0.75rem; }
.voet-sociaal { display: flex; gap: 0.5rem; margin: 0; }
.voet-sociaal a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--inkt);
}
.voet-sociaal a:hover { color: var(--accent); }
.voet-sociaal svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.voet-onder {
  max-width: var(--breed);
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn);
}
@media (max-width: 62rem) {
  .voet-kolommen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
  .voet-kolommen { grid-template-columns: 1fr; gap: 2rem; }
}

/* wie met het toetsenbord navigeert moet kunnen zien waar hij is */
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================================== alle stukken, per onderwerp
   /alle-stukken/ toont elk onderwerp als een rij die opzij schuift. De
   pagina heeft body class="breed", dus main is 62rem (--breed). De klasse
   heet rijkaart en niet kaart: .kaart is de liggende regel op de
   onderwerppagina's, en die twee moeten elkaar niet in de weg zitten. */
.paginakop {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  text-wrap: balance;
}
.inleiding {
  margin: 0 0 2.5rem;
  color: var(--grijs);
  font-size: 0.9375rem;
}

.onderwerprij { margin-bottom: 2.75rem; }
.rijkop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 0.5rem;
}
.rijkop a { color: inherit; text-decoration: none; }
.rijkop a:hover h2 { color: var(--accent); }
.rijkop h2 {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.rijkop .aantal {
  margin: 0.15rem 0 0;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--grijs);
}

.pijlen { display: flex; gap: 0.4rem; flex: none; }
.pijlen[hidden] { display: none; }
.pijl {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--papier);
  color: var(--inkt);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.pijl svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pijl:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pijl:disabled { opacity: 0.3; cursor: default; }
.pijl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* De rij loopt over de volle breedte van de pagina: kaarten gaan links
   het scherm uit en komen rechts binnen. De opvulling links is precies zo
   breed als de marge van main, zodat de eerste kaart onder de naam van het
   onderwerp begint. cqw en niet vw: 100cqw is de breedte zonder de
   schuifbalk, want body is de container (zie body). Wat er is nagemeten en
   bij welke breedtes, staat in MEMORY.md onder 11 september 2026. */
.rij {
  display: flex;
  /* 2rem, niet 1rem: CB wilde meer lucht tussen de kaarten, naar het
     voorbeeld van De Correspondent, die op 30 punten zit. Gekozen op
     19 sep 2026. Het scriptje in bouw.py leest deze waarde zelf uit met
     getComputedStyle, dus de stap van de pijlen klopt vanzelf mee. */
  gap: 2rem;
  overflow-x: auto;
  /* Geen scroll-snap meer, gekozen door CB op 19 sep 2026: de rij blijft
     staan waar je hem laat in plaats van naar de dichtstbijzijnde kaart te
     springen. Hoort bij het weghalen van het kader: zonder doos en zonder
     vastklikken schuiven de kaarten los over het scherm. Er stond hier ook
     scroll-padding-inline-start; die hoorde bij het vastklikken en doet
     zonder snap niets meer. */
  margin-inline: calc(50% - 50cqw);
  padding-block: 0.25rem 1rem;
  padding-inline: max(1.25rem, calc(50cqw - var(--breed) / 2 + 1.25rem));
  /* Geen zichtbare schuifbalk onder de rij, gekozen door CB op
     12 sep 2026. Twee regels, want browsers regelen dit niet op
     dezelfde manier: scrollbar-width is de regel van Firefox en de
     nieuwere Chrome, ::-webkit-scrollbar die van Chrome, Edge en
     Safari. Schuiven blijft werken met het muiswiel, het touchpad,
     de twee pijlen naast de onderwerpnaam, en met het toetsenbord:
     de rij heeft tabindex="0" (zie bouw.py, de regel met
     class="rij"). Wat vervalt is de schuifbalk zelf slepen.
     De schuifbalk bij .tabelrol blijft wel staan: daar is hij het
     enige teken dat een tabel breder is dan de tekstkolom. */
  scrollbar-width: none;
}
.rij::-webkit-scrollbar { display: none; }
.rij:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Geen doos meer om de kaart: geen achtergrond, geen rand, geen afgeronde
   hoeken. Gekozen door CB op 19 sep 2026 uit zes varianten in
   Claude outputs/carrousel-varianten.html. Wat de kaarten zonder doos nog
   bij elkaar houdt is dat elk beeldvak even groot is — vierkant, even breed
   als de kaart; zie het blok hieronder. */
.rijkaart {
  flex: none;
  width: 16.5rem;
  overflow: hidden;
}
.rijkaart > a {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
/* Een vierkant vak, en het hele beeld past erin: contain, er gaat niets af.
   Gekozen door CB op 19 sep 2026, in twee stappen.

   Waarom het vak vierkant is. De verhoudingen van de twintig omslagen lopen
   van 0,61 tot 1,89, met zes precies vierkant — dat zijn de Instagram-posts.
   Een vierkant vak ligt daar middenin, dus de lege ruimte naast een beeld
   blijft klein en de zes vierkante vullen het precies. Bij het oude vak van
   262 bij 152 werden staande omslagen smalle stroken.

   Waarom niets wordt afgesneden. Eerst is die dag cover gekozen, omdat de
   rij zonder kader strakker oogt als elk beeld even groot is. Op de
   draaiende site bleek wat dat kost: op elf van de twintig omslagen staat
   tekst, en een vierkant vak snijdt bij liggende omslagen links en rechts
   weg. Er stond toen "ga-6 vetzuren & tstekingen" in plaats van "Omega-6
   vetzuren & ontstekingen", en "Ingelepeld" was aan beide kanten aangesneden;
   zes à acht omslagen hadden beschadigde tekst. De maatstaf waarop cover was
   aanbevolen — hoeveel procent van het oppervlak wegvalt — was de verkeerde:
   bij tekst telt leesbaarheid, en horizontaal snijden verminkt elke regel
   terwijl verticaal snijden regels heel laat. Daarom contain.

   Let op minmax(0, 1fr). Een gewone 1fr-rij heeft min-height: auto en groeit
   dan mee met het beeld; dan doet height: 100% op de img niets, loopt het
   beeld buiten het vak en snijdt overflow: hidden het af op een hoogte die
   niemand heeft gekozen. Precies dat gebeurde hier tot 19 sep 2026, ondanks
   de regel object-fit: contain, die daardoor nooit iets deed. */
.rijkaart .beeld {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.rijkaart .beeld img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Eén stuk heeft geen omslag; daar staat "Geen omslag" in het vak. Dat moet
   wel in het midden blijven staan, en de rij hierboven rekt alles op. */
.rijkaart .geen-beeld {
  place-self: center;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--grijs);
  letter-spacing: 0.06em;
}
/* Geen inspringing meer links en rechts: zonder kader zou de tekst anders
   scheef onder het beeld staan. */
.rijkaart-tekst { display: block; padding: 0.9rem 0 0; }
.rijkaart time {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--grijs);
  margin-bottom: 0.35rem;
}
.rijkaart h3 {
  margin: 0 0 0.4rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.rijkaart a:hover h3 { color: var(--accent); }
.rijkaart p {
  margin: 0;
  color: var(--grijs);
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 34rem) {
  .rijkaart { width: 14rem; }
}


/* Zegt in welk hoofdstuk je zit en hoever je bent. Alleen op artikelen.
   Verschijnt pas voorbij de inhoudsopgave; zonder JavaScript blijft hij
   onzichtbaar en verandert er niets aan de pagina. */
.hoofdstukbalk {
  position: sticky; top: 4.25rem; z-index: 15;
  background: var(--papier); border-bottom: 1px solid var(--lijn);
  font-size: 0.8125rem; color: var(--grijs);
  opacity: 0; transform: translateY(-0.5rem); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.hoofdstukbalk.aan { opacity: 1; transform: none; pointer-events: auto; }
.hoofdstukbalk .binnen {
  position: relative;
  max-width: var(--breed); margin: 0 auto; padding: 0.55rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.hoofdstukbalk b {
  color: var(--inkt); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hoofdstukbalk a { color: var(--accent); text-decoration: none; flex: none; }
.hoofdstukbalk .voortgang {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--accent); width: 0;
}
@media (max-width: 52rem) { .hoofdstukbalk { top: 0; } }
@media (prefers-reduced-motion: reduce) { .hoofdstukbalk { transition: none; } }

/* ------------------------------------------------- de huisstijlkleuren
   Gekozen door CB op 25 sep 2026, variant 3A uit
   Claude outputs/kleur-varianten.html: de kop en de voet turkoois met
   donkere letters en het zwarte beeldmerk, de introductie op de
   homepagina als donker vlak met witte letters. Turkoois is de kleur die
   je overal het eerst ziet; donker blauwpaars is de inkt en het accent.
   Gemeten contrasten: inkt op turkoois 9,7 op 1, de menuwoorden op
   turkoois 6,0, de voettekst op turkoois 7,6, de leus wit op het donkere
   vlak 17,2. De grens voor gewone tekst is 4,5.
   Let op: dit blok hoort ACHTERAAN in stijl.css te staan. Staat het eerder,
   dan winnen de latere regels voor .voet, .uitkaart, .sectiekop en
   .inhoudsopgave, en blijven die in hun oude kleur staan (gebeurd op
   25 sep 2026). */
.kop { background: var(--turkoois); border-bottom: 0; }
.kop .naam a { color: var(--inkt); }
.kop nav a { color: #3E3966; }
.kop nav a:hover { color: var(--inkt); }
.kop nav a.hier { color: var(--inkt); border-bottom-color: var(--inkt); }
.kop .menuknop { color: var(--inkt); }

.intro { background: var(--inkt); color: var(--papier); padding: 2.25rem 1.75rem;
         border-radius: 6px; }
.intro h1 { color: var(--papier); }
.intro .leus { color: var(--papier); }

.sectiekop { color: var(--inkt); border-bottom: 3px solid var(--turkoois);
             padding-bottom: 0.45rem; }
.uitkaart { border-color: var(--turkoois); }
.post .inhoudsopgave, .luisteren { background: var(--turkoois-licht); }

.voet { background: var(--turkoois); color: #2F2A50; border-top: 0; }
.voet a, .voet .voet-kolom h2 { color: var(--inkt); }
.voet-onder { color: #2F2A50; }
.voet-sociaal a { border-color: #5E9B9B; color: var(--inkt); }