/* ==========================================================================
   CentrAid — designtokens
   Eén bron voor website, IJK-landingspagina's, Tutor LMS en Centramma.

   Afgeleid van 04-branding/kleuren-en-fonts/designsysteem.md. Wijkt de CSS af
   van dat document, dan is het document leidend en is de CSS fout.

   Niet per project overschrijven. Heeft een drager andere waarden nodig, voeg
   dan hieronder een blok toe onder "Per drager" — dan blijft de afwijking
   zichtbaar in plaats van verstopt in een projectbestand.
   ========================================================================== */

:root {
  /* --- Palet: primair ---------------------------------------------------- */
  --ca-klei: #b0563b;     /* primair accent, knoppen, links, de hand in het logo */
  --ca-mos: #3f5641;      /* diep groen, de penseelcirkel, donkere vlakken */
  --ca-creme: #faf5ec;    /* hoofdachtergrond — vervangt wit */
  --ca-aarde: #3a322c;    /* koppen en primaire tekst */

  /* --- Palet: secundair --------------------------------------------------- */
  --ca-oker: #c98a4b;        /* warm accent — nooit als tekstkleur (2,7:1) */
  --ca-oker-zacht: #d8a362;  /* lichte tint — de binnenboog van het logo */
  --ca-salie: #8a9a7b;       /* zachte vlakken — nooit als tekstkleur (2,8:1) */
  --ca-schelp: #f7efe0;      /* de warme grond van de Voluit-stijl — warmer dan
                                crème, lichter dan zand. Uit Eveliens flyer;
                                officieel opgenomen 2026-08-06 */
  --ca-zand: #efe6d8;        /* kaarten, secundaire achtergrond */
  --ca-zand-warm: #f0e4cf;   /* warme kaartgrond uit de Voluit-referentiepagina --
                                dieper dan zand, voor kaarten op schelp */
  --ca-terra: #b45f3e;       /* terracotta uit de Voluit-stijl -- accentvlakken
                                en chips, niet als tekstkleur */
  --ca-steen: #6b5f55;       /* alléén kleine bijschriften — als kleur voor
                                lopende zachte tekst vervaagde hij (Evelien,
                                2026-08-06); daarvoor is er --ca-tekst-zacht */
  --ca-nacht: #231e1a;       /* de donkere paginagrond — aarde, dieper. Aarde
                                zelf bleef tekstkleur; als grond naast crème
                                kwam hij te grauw uit (gekozen 2026-08-05) */

  /* --- Betekenis, niet kleur ----------------------------------------------
     Gebruik in componenten altijd deze laag, nooit de palettokens direct.
     Zo blijft een donkere sectie een kwestie van omschakelen, niet herschrijven. */
  --ca-vlak: var(--ca-creme);
  --ca-vlak-zacht: var(--ca-zand);
  --ca-vlak-diep: var(--ca-mos);
  --ca-tekst: var(--ca-aarde);
  --ca-tekst-zacht: #55493f;  /* verdiepte steen — 7,6:1 op schelp, steen zelf
                                 haalde er 5,4:1 en oogde vervaagd */
  --ca-accent: var(--ca-klei);
  --ca-accent-op: var(--ca-creme);  /* tekst óp het accent — 4,6:1, haalt het nét
                                      (hier stond 5,0:1; fout, zie designsysteem.md) */
  --ca-lijn: color-mix(in srgb, var(--ca-steen) 22%, transparent);
  --ca-stippel: color-mix(in srgb, var(--ca-oker) 55%, transparent);  /* stippellijnen (Voluit) */
  --ca-link: var(--ca-klei);
  --ca-focus: var(--ca-mos);

  /* --- Letters -------------------------------------------------------------
     Zelf hosten, niet via fonts.googleapis.com. Een verzoek per bezoeker naar
     een Amerikaanse server met diens IP is voor deze doelgroep niet uit te
     leggen; beide fonts staan onder de SIL Open Font License. Zie de
     @font-face-blokken onderaan dit bestand. */
  --ca-kop: "Literata", Georgia, "Times New Roman", serif;
  --ca-tekst-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* De twee Voluit-accentletters (sinds 2026-08-06, zie designsysteem.md,
     "Script en handschrift"): Kaushan Script voor grote titels, Caveat voor
     accentregels. Nooit voor lopende tekst, nooit in Centramma; maximaal een
     brush-titel en een handregel per scherm. */
  --ca-brush: "Kaushan Script", "Brush Script MT", cursive;
  --ca-hand: "Caveat", "Segoe Script", cursive;

  /* --- Schaal --------------------------------------------------------------
     Modulair, verhouding 1,25. Body 18px desktop / 16px mobiel — de doelgroep
     leest lange teksten. De clamp-ondergrenzen zijn de mobiele maten. */
  --ca-t-hero: clamp(2.25rem, 1.30rem + 4.2vw, 3.5rem);   /* 36 → 56 */
  --ca-t-h1: clamp(2.00rem, 1.45rem + 2.4vw, 2.75rem);    /* 32 → 44 */
  --ca-t-h2: clamp(1.60rem, 1.30rem + 1.3vw, 2.00rem);    /* 26 → 32 */
  --ca-t-h3: clamp(1.30rem, 1.15rem + 0.6vw, 1.50rem);    /* 21 → 24 */
  --ca-t-body: clamp(1.00rem, 0.94rem + 0.28vw, 1.125rem);/* 16 → 18 */
  --ca-t-klein: 0.9375rem;                                /* 15 */

  --ca-r-hero: 1.1;
  --ca-r-h1: 1.15;
  --ca-r-h2: 1.2;
  --ca-r-h3: 1.3;
  --ca-r-body: 1.65;   /* ruime regelafstand is hier geen detail — het is hoe
                          "rust" zich vertaalt naar tekst */
  --ca-r-klein: 1.5;

  --ca-regellengte: 70ch;  /* maximale regellengte */

  /* --- Ruimte — raster van 8px --------------------------------------------- */
  --ca-r-1: 0.5rem;    /*  8 */
  --ca-r-2: 1rem;      /* 16 */
  --ca-r-3: 1.5rem;    /* 24 */
  --ca-r-4: 2rem;      /* 32 */
  --ca-r-5: 3rem;      /* 48 */
  --ca-r-6: 4rem;      /* 64 */
  --ca-r-7: 6rem;      /* 96 */

  --ca-sectie: clamp(3.5rem, 2rem + 5vw, 6rem);  /* 56 mobiel → 96 desktop */
  --ca-breedte: 72rem;

  /* --- Vorm ----------------------------------------------------------------
     Schaduwen: nauwelijks, en nooit blauwig grijs. */
  --ca-rond: 6px;
  --ca-rond-zacht: 14px;   /* marketingdragers (Voluit): kaarten en vlakken.
                              Centramma houdt het 6px-raster */
  --ca-rond-pil: 999px;    /* knoppen op marketingdragers lezen als pil */
  /* Rond genoeg om als schijf te lezen, ongelijk genoeg om niet als cirkel uit
     te vallen. Twee keer bijgesteld op de proefschermen van 2026-08-05: rond de
     50 % is de vorm niet van een cirkel te scheiden, en de eerste verbreding
     (66/34, 1/1.1) was te hoekig. Hoort bij aspect-ratio: 1 / 1.04. */
  --ca-rond-organisch: 60% 40% 53% 47% / 45% 55% 43% 57%;
  --ca-schaduw: 0 2px 12px rgb(58 50 44 / 6%);

  /* --- Logo ----------------------------------------------------------------
     De uitsparingen tussen de vingers zijn geen wit maar de achtergrondkleur.
     Zet deze variabele op het vlak waarop het logo staat. */
  --logo-uitsparing: var(--ca-vlak);

  /* --- Beweging ------------------------------------------------------------ */
  --ca-duur: 200ms;
  --ca-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Donkere secties: zet dit op de sectie, niet op :root. Het merk is
   crème-gebaseerd; donker is een accentvlak, geen tweede thema. */
.ca-diep {
  --ca-vlak: var(--ca-mos);
  --ca-vlak-zacht: color-mix(in srgb, var(--ca-mos) 88%, black);
  --ca-tekst: var(--ca-creme);
  --ca-tekst-zacht: color-mix(in srgb, var(--ca-creme) 78%, var(--ca-mos));
  --ca-accent: var(--ca-oker-zacht);   /* klei op mos haalt de norm niet */
  --ca-accent-op: var(--ca-aarde);
  --ca-link: var(--ca-oker-zacht);
  --ca-focus: var(--ca-creme);
  --ca-lijn: color-mix(in srgb, var(--ca-creme) 22%, transparent);
  --logo-uitsparing: var(--ca-mos);
  background: var(--ca-vlak);
  color: var(--ca-tekst);
}

/* Terracotta-accentvlak: zelfde idee als .ca-diep, maar warm in plaats van
   donker. Voor één energieke sectie per pagina (Voluit-referentie: pal-terra);
   op klei/terra staat alleen crème-tekst en géén logo. */
.ca-warm {
  --ca-vlak: var(--ca-terra);
  --ca-vlak-zacht: color-mix(in srgb, var(--ca-terra) 88%, black);
  --ca-tekst: var(--ca-creme);
  --ca-tekst-zacht: #f0d9cb;
  --ca-accent: var(--ca-oker-zacht);
  --ca-accent-op: var(--ca-aarde);
  --ca-link: var(--ca-creme);
  --ca-focus: var(--ca-creme);
  --ca-lijn: rgb(250 245 236 / 26%);
  --ca-stippel: rgb(250 245 236 / 38%);
  --logo-uitsparing: var(--ca-terra);
  background: var(--ca-vlak);
  color: var(--ca-tekst);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ca-duur: 1ms; }
}

/* --------------------------------------------------------------------------
   Per drager
   Centramma toont dichte informatie: kleinere ruimte, 16px body, en klei
   uitsluitend voor primaire acties. Zie designsysteem.md, "Toepassing per
   drager".
   -------------------------------------------------------------------------- */
.ca-dicht {
  --ca-t-body: 1rem;
  --ca-r-body: 1.5;
  --ca-sectie: var(--ca-r-4);
  --ca-breedte: none;
}

/* --------------------------------------------------------------------------
   Basis
   Bewust minimaal: dit bestand levert tokens, geen componentbibliotheek.
   -------------------------------------------------------------------------- */
body {
  background: var(--ca-vlak);
  color: var(--ca-tekst);
  font-family: var(--ca-tekst-font);
  font-size: var(--ca-t-body);
  line-height: var(--ca-r-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ca-kop);
  color: var(--ca-tekst);
  text-wrap: balance;
}

/* opsz volgt de werkelijke grootte: ~72 voor hero, ~36 voor koppen. Dat
   verfijnt de schreven groot en houdt ze stevig klein. */
.ca-hero { font-family: var(--ca-kop); font-size: var(--ca-t-hero); line-height: var(--ca-r-hero);
           font-variation-settings: "opsz" 72; }
h1 { font-size: var(--ca-t-h1); line-height: var(--ca-r-h1); font-variation-settings: "opsz" 48; }
h2 { font-size: var(--ca-t-h2); line-height: var(--ca-r-h2); font-variation-settings: "opsz" 36; }
h3 { font-size: var(--ca-t-h3); line-height: var(--ca-r-h3); font-variation-settings: "opsz" 24; }

p, li { max-width: var(--ca-regellengte); }

a { color: var(--ca-link); text-underline-offset: 0.15em; }

:focus-visible {
  outline: 3px solid var(--ca-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.ca-sectie { padding-block: var(--ca-sectie); }
.ca-omhulsel { max-width: var(--ca-breedte); margin-inline: auto; padding-inline: var(--ca-r-3); }

.ca-knop {
  display: inline-block;
  background: var(--ca-accent);
  color: var(--ca-accent-op);
  font-family: var(--ca-tekst-font);
  font-weight: 600;
  padding: var(--ca-r-2) var(--ca-r-4);
  border: 0;
  border-radius: var(--ca-rond);
  text-decoration: none;
  transition: background var(--ca-duur) var(--ca-curve);
}
.ca-knop:hover { background: color-mix(in srgb, var(--ca-accent) 88%, black); }

/* Borstelkader rond een beeld (Voluit, 2026-09-04). Eén drager:
   .ca-beeld-borstel op de figure rond een beeld met organische uitsnede.
   Belangrijk: de uitsnede (.ca-beeld-organisch met overflow hidden) moet op
   de img zelf zitten, anders clipt de figure het kader weg. De knop-variant
   (.ca-knop-borstel, pil-opbouw uit kappen + penseelstreep-bruggen) is op
   2026-09-04 op vraag van Pieter geschrapt — knoppen blijven de strakke
   .ca-knop; de kap-vormen penseelring-links/-rechts.svg blijven in de Brain
   bewaard maar zitten niet meer in de sync.
   Het kader is de vólledige penseelcirkel (penseelring.svg, strakke viewBox
   rond de ring, preserveAspectRatio none), meegestretcht naar de
   beeldverhouding. De geschilderde zwier ligt níét symmetrisch om zijn eigen
   opening (links een dikke haal, onderaan een uitzwaaiende staart, rechts-
   midden zelfs een gat), dus de ::after-box krijgt per zijde een eigen
   overhang. Gemeten (flood fill + radiale scan op de gerenderde ring,
   2026-09-04): bbox 23.01..277.13 x 21.34..320.48, binnenopening-centrum
   (153.75, 170.15), halfassen voor de foto 110 x 126 units — snug: de ring
   sluit aan op de fotorand met een smalle kier lucht, en op de linker-
   diagonalen (de dichtstbijzijnde binnenrandpunten) blijft ~2-4% over
   ("sluit nog niet goed aan", Pieter 2026-09-04, na een eerste te losse
   pas met halfassen 100 x 118). Inset per zijde = afstand centrum->boxrand
   in units, omgerekend naar % van de foto (1 unit = 50%/110 horizontaal,
   50%/126 verticaal), min 50%. Dat de haal links en rechts wat harder
   doordrukt dan boven en onder is de stretch — handwerk, geen passer. */
.ca-beeld-borstel {
  position: relative;
}
.ca-beeld-borstel::after {
  content: "";
  position: absolute;
  inset: -9.05% -6.08% -9.65% -9.43%;
  background: var(--ca-oker);
  -webkit-mask: url("../vormen/penseelring.svg") center / 100% 100% no-repeat;
  mask: url("../vormen/penseelring.svg") center / 100% 100% no-repeat;
  transform: rotate(0.9deg);
  pointer-events: none;
}

.ca-kaart {
  background: var(--ca-vlak-zacht);
  border-radius: var(--ca-rond);
  padding: var(--ca-r-4);
  box-shadow: var(--ca-schaduw);
}

/* Sfeer- en portretbeeld: zacht genoeg om als ronde vorm te lezen,
   onregelmatig genoeg om niet machinaal te zijn. Niet voor functionele
   elementen in Centramma — daar blijft het 6px-raster gelden. */
.ca-beeld-organisch { border-radius: var(--ca-rond-organisch); overflow: hidden; }

/* Foto uitgesneden in de penseelcirkel uit het logo. Vereist dat
   04-branding/vormen/penseelcirkel-masker.svg meegeleverd wordt. */
.ca-beeld-penseel {
  clip-path: url(../vormen/penseelcirkel-masker.svg#penseelcirkel);
  aspect-ratio: 1;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Voluit-accenten -- de flyer-laag. Referentie: de definitieve huisstijlpagina
   (link in designsysteem.md, "Script en handschrift"). Dosering is de regel:
   nooit meer dan een brush-titel en een handregel per scherm.
   -------------------------------------------------------------------------- */
.ca-brush {
  font-family: var(--ca-brush);
  font-weight: 400;
  font-variation-settings: normal;
  color: var(--ca-mos);
  rotate: -2deg;
}
.ca-diep .ca-brush { color: var(--ca-creme); }

/* Caveat tekent klein voor zijn korpsgrootte; de opschaling houdt hem
   optisch gelijk aan de omringende tekst maal ~1,3. */
.ca-hand {
  font-family: var(--ca-hand);
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1.25;
  color: var(--ca-accent);
}

/* Lijst met penseelvlek-bolletjes en stippellijnen — de Voluit-opsomming.
   Het bolletje is de vlek uit 04-branding/vormen/penseelvlek.svg (12 px als
   masker, zie vormen/_index.md); lever dat bestand mee naast deze css. */
ul.ca-vlekjes { list-style: none; margin: 0; padding: 0; }
ul.ca-vlekjes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.5rem;
  border-bottom: 2px dotted var(--ca-stippel);
}
ul.ca-vlekjes li:last-child { border-bottom: 0; }
ul.ca-vlekjes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.75rem;   /* 12px — groter oogde te zwaar (Evelien, 2026-08-06) */
  height: 0.75rem;
  background: var(--ca-accent);
  -webkit-mask: url("../vormen/penseelvlek.svg") center / contain no-repeat;
  mask: url("../vormen/penseelvlek.svg") center / contain no-repeat;
}

/* Verfveeg als tekstpaneel — de vlek uit het logo breed uitgesmeerd, zoals de
   verfvegen op Eveliens Voluit-flyer (besluit 2026-09-03; bestand
   04-branding/vormen/penseelveeg.svg meeleveren). Voor één korte gevoels- of
   kernzin, niet voor lopende tekst: de rafelrand snoept de padding op. Max één
   veeg per schermhoogte, en niet naast een golf in hetzelfde beeld. */
.ca-veeg {
  -webkit-mask: url("../vormen/penseelveeg.svg") center / 100% 100% no-repeat;
  mask: url("../vormen/penseelveeg.svg") center / 100% 100% no-repeat;
  background: var(--ca-mos);
  color: var(--ca-creme);
  padding: clamp(2.4rem, 3vw + 1.6rem, 3.4rem) clamp(3rem, 6vw + 1rem, 5rem);
  text-align: center;
  rotate: -1.5deg;
}
.ca-veeg-terra { background: var(--ca-terra); }

/* Handgetekend hartje als interpunctie (vormen/hartje.svg): achter een titel
   of onder een slotgroet. Interpunctie, geen strooisel — hooguit één per
   scherm; de flyer zet er ook nooit twee naast elkaar. */
.ca-hartje {
  display: inline-block;
  width: 0.75em;
  height: 0.7em;
  background: var(--ca-oker);
  -webkit-mask: url("../vormen/hartje.svg") center / contain no-repeat;
  mask: url("../vormen/hartje.svg") center / contain no-repeat;
  rotate: 8deg;
}

/* Uitroepteken waarvan de punt een hartje is (vormen/uitroep-hartje.svg) —
   het flyer-uitroepteken (besluit Pieter 2026-09-03). Vervangt de "!" in een
   (brush-)titel; het span is decoratief, zet de echte "!" er visueel
   verborgen naast voor voorleessoftware. Zelfde dosering als het hartje. */
.ca-uitroep-hartje {
  display: inline-block;
  width: 0.38em;
  height: 0.7em;
  background: var(--ca-terra);
  -webkit-mask: url("../vormen/uitroep-hartje.svg") center / contain no-repeat;
  mask: url("../vormen/uitroep-hartje.svg") center / contain no-repeat;
  rotate: 2deg;
}

/* Gouden penseelstreep onder een (brush-)titel, zoals op de flyer onder
   "Voluit jezelf!". Op de titel zelf zetten; maximaal één per pagina —
   hiermee komt de streep terug op de site, alleen in deze rol (2026-09-03). */
.ca-onderstreep::after {
  content: "";
  display: block;
  width: min(9em, 70%);
  height: 0.14em;
  margin: 0.18em auto 0;
  background: var(--ca-oker);
  -webkit-mask: url("../vormen/penseelstreep.svg") center / 100% 100% no-repeat;
  mask: url("../vormen/penseelstreep.svg") center / 100% 100% no-repeat;
}

/* Lijn-iconen (vormen/iconen/) met kapitaal-bijschrift — de programma-rail
   van de flyer. De bestanden zijn maskers: kleur komt uit background, dus op
   een donker vlak volstaat background: var(--ca-creme). */
.ca-icoon {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--ca-mos);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ca-icoon-hart    { -webkit-mask-image: url("../vormen/iconen/icoon-hart.svg");    mask-image: url("../vormen/iconen/icoon-hart.svg"); }
.ca-icoon-kompas  { -webkit-mask-image: url("../vormen/iconen/icoon-kompas.svg");  mask-image: url("../vormen/iconen/icoon-kompas.svg"); }
.ca-icoon-scheut  { -webkit-mask-image: url("../vormen/iconen/icoon-scheut.svg");  mask-image: url("../vormen/iconen/icoon-scheut.svg"); }
.ca-icoon-zon     { -webkit-mask-image: url("../vormen/iconen/icoon-zon.svg");     mask-image: url("../vormen/iconen/icoon-zon.svg"); }
.ca-icoon-golfje  { -webkit-mask-image: url("../vormen/iconen/icoon-golfje.svg");  mask-image: url("../vormen/iconen/icoon-golfje.svg"); }
.ca-diep .ca-icoon,
.ca-warm .ca-icoon { background: var(--ca-creme); }

.ca-icoonrail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ca-r-4) var(--ca-r-5);
  text-align: center;
}
.ca-icoonrail figure { margin: 0; max-width: 7.5rem; }
.ca-icoonrail figcaption {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-tekst-zacht);
  margin-top: 0.5rem;
}

/* Foto als tekstdrager (de flyer-opbouw): de foto vult het vlak en loopt
   onderaan over in crème; dat verloop is meteen het scrim dat de tekst
   leesbaar houdt. De contrastregel uit het designsysteem blijft gelden —
   meet per foto het slechtste percentiel, niet het gemiddelde. */
.ca-fotogrond { position: relative; overflow: clip; }
.ca-fotogrond > * { position: relative; z-index: 2; }
.ca-fotogrond > img.ca-fotogrond-beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ca-fotogrond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ca-creme) 30%, transparent),
    color-mix(in srgb, var(--ca-creme) 52%, transparent) 55%,
    var(--ca-creme) 96%
  );
}

/* Golfovergang tussen twee sécties met verschillende achtergrond. Zet het
   element onderaan de bovenste sectie en geef het de kleur van de ónderste:
   <div class="ca-golf" style="color: var(--ca-creme)"></div>
   Regels (vormen/_index.md): alleen tussen twee verschillende kleuren, max
   één per schermhoogte, nooit stapelen. Omgekeerd: transform: scaleY(-1). */
.ca-golf,
.ca-golf-2,
.ca-golf-3 {
  display: block;
  height: clamp(48px, 6vw, 84px);
  background: currentColor;
  margin-bottom: -1px;   /* geen haarlijn tussen golf en volgende sectie */
  pointer-events: none;
  -webkit-mask: url("../vormen/golf-1.svg") center / 100% 100% no-repeat;
  mask: url("../vormen/golf-1.svg") center / 100% 100% no-repeat;
}
.ca-golf-2 {
  -webkit-mask-image: url("../vormen/golf-2.svg");
  mask-image: url("../vormen/golf-2.svg");
}
.ca-golf-3 {
  -webkit-mask-image: url("../vormen/golf-3.svg");
  mask-image: url("../vormen/golf-3.svg");
}

/* Decoratieve penseelschijf: het zachte zand-warme vlak achter een kop, zoals
   op de Voluit-referentiepagina linksboven. Positioneer per gebruik (top/left,
   meestal deels buiten beeld); de drager heeft position:relative en een
   overflow-clip nodig zodat de schijf geen horizontale scroll veroorzaakt. */
.ca-schijf {
  position: absolute;
  width: 40rem;
  aspect-ratio: 1 / 1.04;
  border-radius: var(--ca-rond-organisch);
  background: var(--ca-zand-warm);
  opacity: 0.75;
  pointer-events: none;
}

/* Sectielabel boven een titel: kort, kapitaal, met het dikke klei-streepje. */
.ca-kicker {
  display: block;
  font-family: var(--ca-tekst-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-tekst-zacht);
  margin-bottom: var(--ca-r-1);
}
.ca-kicker::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 3px;
  border-radius: var(--ca-rond-pil);
  background: color-mix(in srgb, var(--ca-klei) 82%, var(--ca-oker) 18%);
  margin-right: 0.5rem;
  vertical-align: 0.22em;
}
/* Op een gekleurd vlak verdwijnt het klei-streepje in de ondergrond
   (klei op terra is bijna dezelfde kleur) — dan de zachte tekstkleur. */
.ca-diep .ca-kicker::before,
.ca-warm .ca-kicker::before { background: var(--ca-tekst-zacht); }

/* --------------------------------------------------------------------------
   Letters — variabele fonts, één bestand per familie voor alle gewichten.
   Zelf gehost, niet via fonts.googleapis.com. Beide onder de SIL Open Font
   License. Zie fonts/README.md.

   Twee bestanden per familie, met unicode-range: een Nederlandse pagina laadt
   alleen "latin" (samen 114 kB) en haalt "latin-ext" pas op als er een teken
   uit staat. Niet samenvoegen tot één bestand — dat verdubbelt wat elke
   bezoeker binnenhaalt zonder dat er iets tegenover staat.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Literata";
  src: url("fonts/Literata-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Literata";
  src: url("fonts/Literata-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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: "Source Sans 3";
  src: url("fonts/SourceSans3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* De Voluit-accentletters -- alleen latin: van deze twee bestaat geen
   latin-ext-subset in fonts/, en hun rollen (titels, een accentregel)
   komen niet buiten dat bereik. */
@font-face {
  font-family: "Kaushan Script";
  src: url("fonts/KaushanScript-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  src: url("fonts/Caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}