:root {
  /* ── Huispalet ──
     cream = hoofdgrond, #222 = inkt/donker vlak; de negen gronden met hun
     steun- en knopkleuren zijn de sectiekleuren en staan als vaste hex in
     de .grond-*-klassen (zie het design-contract onderaan dit bestand).

     NEGEN GRONDEN (definitief, 2026-09, door Bram gekozen): cream ·
     mosterd · taupe · blauwdruk · klei · olijf · aubergine · steen ·
     donker. De volledige tabel met inkt, steunkleur, knopkleur en
     header-thema staat bij .grond-cream verderop; dit blok is alleen het
     palet zelf.
       #FEF7EE cream      #38332C cream-steun  #222222 inkt / knop op cream
       #DDA61F mosterd    #0A2E0E donkergroen (steun/knop op mosterd)
       #BEB38E taupe      #3A3218 taupe-steun
       #C7E5F2 blauwdruk  #254FAD blauw (steun)
       #D9A38C klei       #5B2415 klei-steun   #D92B00 vermiljoen (knop)
       #B5AC6B olijf      #2E2A0E olijf-steun  #B01E00 karmijn (knop)
       #C9A8D4 aubergine  #4A1D5C aubergine-steun #E10098 magenta (knop)
       #E6E2DA steen      #333840 leisteen     #0000EE elektrisch blauw
     De knopkleuren zijn sinds deze ronde LOSGEKOPPELD van de steunkleur:
     lijnwerk en labels houden de diepe tint, het knopvlak is feller. */
  --color-cream: #fef7ee;
  --color-mosterd: #dda61f;
  --color-groen: #0a2e0e;
  --color-bg: #ffffff;
  --color-bg-soft: #f9fafb;
  --color-dark: #222222; /* zelfde donker als de homepage (.fig-canvas / footer) */
  --color-muted: #9ca3af;
  --color-body: #4a5568;
  --color-body-light: #6b7280;
  --color-border: #e5e7eb;
  --color-teal: #00c9a7; /* alleen /blog gebruikt dit nog (statusstip) */

  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  /* next/font zet --font-mono zelf op <html>; dit is de fallback. */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ── Fundament van het celraster ──────────────────────────────────────
   --cell wordt normaal gezet door de container-query-containers
   (.fig-canvas, .fig-header, .site-foot) op 100cqw/32 resp. /8. Deze
   :root-waarde is puur een vangnet voor content buiten die containers;
   binnen de containers wint hun eigen declaratie altijd.

   ÉÉN RASTER, ÉÉN NULPUNT (2026-08, feedback Bram)
   Het raster wordt NIET meer per sectie getekend en heeft GEEN radiaal
   masker meer. Er is precies één rasterlaag: .fig-canvas::before, met
   nulpunt op de linkerbovenhoek van de canvas. Daardoor lopen de lijnen
   ononderbroken door van de hero tot de laatste sectie, exact op dezelfde
   kolommen als de header (die zijn eigen --cell = 100cqw/32 heeft, met
   hetzelfde nulpunt x = 0).

   --raster-inkt is het midden tussen inkt (#222) en cream (#FEF7EE):
   dezelfde lijn leest op élke grond — donker genoeg op cream/blauwdruk/
   steen, licht genoeg op #222. Eén kleur, één dekking, dus nergens
   een sprong van hard naar zacht. */
:root {
  --cell: calc(100vw / 32);
  --raster-inkt: rgba(144, 141, 136, 0.34);
  --raster-lijn-dikte: 0.5px;
  /* ── HULPLIJNEN OP HALVE CELLEN (2026-09) ────────────────────────
     Gemeten op de hele pagina: van de 152 opgemeten inhoudselementen
     stond 36% op een HELE cellijn en 41% op precies een HALVE cel —
     midden in een vierkantje, want daar werd geen lijn getekend. Dat
     is geen fout in de opbouw maar in de tekening: élke regelafstand
     en élke tussenruimte in dit ontwerp staat in hele of HALVE cellen
     (zie "REGELAFSTAND OP HET RASTER"), terwijl het raster alleen de
     hele cellen liet zien. Je zag dus stelselmatig het tegendeel van
     wat er stond.
     Een bouwtekening lost dat op met hiërarchie: een dikke hoofdmaat
     en een dunne hulpmaat ertussen. Dat is precies wat dit is — zelfde
     grijs, zelfde dikte, maar ruim een derde van de dekking (0.12 tegen
     0.34), zodat de hulplijn de hoofdlijn nooit beconcurreert en het
     raster niet druk wordt. */
  --raster-hulp-inkt: rgba(144, 141, 136, 0.12);
  --raster-hulp-dikte: 0.5px;

  /* ── DE NEGEN GRONDEN ALS TOKEN ──────────────────────────────────
     Eén waarheid per kleur. De .grond-*-klassen verderop zetten
     --grond hiermee, .site-foot pakt --g-donker, en een doorlopende
     vorm op een sectiegrens (.doorloop--kleur) kan zo de kleur van de
     BUURSTROOK noemen zonder een tweede hex te introduceren.
     De tabel met inkt, steun, knop en header-thema staat bij
     .grond-cream; dit blok is alleen het grondvlak zelf. */
  --g-cream: #fef7ee;
  --g-mosterd: #dda61f;
  --g-taupe: #beb38e;
  --g-blauwdruk: #c7e5f2;
  --g-klei: #d9a38c;
  --g-olijf: #b5ac6b;
  --g-aubergine: #c9a8d4;
  --g-steen: #e6e2da;
  --g-donker: #222222;

  /* ── DE NEGEN VLAKTINTEN (2026-09, door Bram opgegeven) ───────────
     Bram: "tevens hebben deze achtergrondvlakken niet de afgesproken
     kleuren conform het kleurenschema." Klopt — een genest vlak was
     ofwel hard cream (#FEF7EE, dus op een cream grond onzichtbaar en
     alleen leesbaar dóór een randlijn) ofwel een color-mix die per
     sectie een andere kant op viel.
     Dit zijn de negen door hem opgegeven waarden: per grond precies één
     tint, altijd één stap lichter dan de grond zelf, zodat een vlak
     zich zonder één lijn van zijn ondergrond losmaakt. Ze horen
     één-op-één bij de --g-*-tokens hierboven; .grond-* zet ze door als
     --vlak-tint en .vlak/.vlak-klein/.sys-blok putten daaruit.
       cream     #FEF7EE -> #FFFFFF
       mosterd   #DDA61F -> #EAC874
       taupe     #BEB38E -> #D7D0B9
       blauwdruk #C7E5F2 -> #E0EFF7
       klei      #D9A38C -> #E7C6B8
       olijf     #B5AC6B -> #D1CBA3
       aubergine #C9A8D4 -> #DDC9E4
       steen     #E6E2DA -> #EFEDE8
       donker    #222222 -> #3A3A3A  (hier juist lichter dan zwart) */
  --t-cream: #ffffff;
  --t-mosterd: #eac874;
  --t-taupe: #d7d0b9;
  --t-blauwdruk: #e0eff7;
  --t-klei: #e7c6b8;
  --t-olijf: #d1cba3;
  --t-aubergine: #ddc9e4;
  --t-steen: #efede8;
  --t-donker: #3a3a3a;
}
@media (max-width: 899.98px) {
  :root {
    --cell: calc(100vw / 8);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-sans);
  color: var(--color-dark);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Homepage — Figma frame "Site Claude"
   Cell-based grid system: the design is a 32-column grid of 80px cells
   at 2560px. Every position/size is expressed in --cell so the visible
   raster stays aligned with all elements at ANY viewport width.
   Desktop (≥900px): --cell = 100cqw / 32. Mobile: --cell = 100cqw / 8.
   (cqw instead of vw so the scrollbar width doesn't break alignment.)
   ════════════════════════════════════════════════════════════════════ */

.fig-root {
  container-type: inline-size;
}

.fig-canvas {
  --cell: calc(100cqw / 32);
  position: relative;
  z-index: 2; /* boven de fixed footer (opendue-reveal) */
  overflow: clip;
  /* ── DE CREAM ZIT SINDS DE ZESDE RONDE OP .fig-cream, NIET MEER HIER ──
     Bram: "aan de onderzijde wil ik dat je met scrollen links en rechts
     al de footer te ziet krijgt in plaats van die grijze achtergrond."
     De footer staat fixed op z 1 ónder deze canvas (z 2) en wordt onthuld
     doordat de canvas eroverheen wegschuift. Zolang de canvas zelf
     dekkend cream was, kon de footer nergens dóór de canvas heen te zien
     zijn — ook niet naast de laatste plaat. Daarom is de cream verhuisd
     naar .fig-cream (page.tsx): een wrapper om de hero en de negen
     stroken tot en met Bram Markus. De laatste strook (WaarBegint, de
     steen plaat) staat erbuiten, in dezelfde <main>: haar plaat is
     dekkend steen van kolom 1 tot 31, en in de twee kantlijnen en onder
     de ronde onderhoek is de canvas nu doorzichtig — dáár kijk je tijdens
     het scrollen al op de footer.
     De onthulling zelf verandert niet: .fig-root houdt margin-bottom
     --footer-h en de canvas schuift nog steeds over de footer weg. Alleen
     is "dekkend" nu een eigenschap van de wrapper plus de plaat, niet van
     de canvas. GEMETEN op de bevroren bouw van deze ronde (1440×900,
     1366×650, 1920×1080): de onthulling klopt op alle drie, --footer-h is
     de footerhoogte, en de headerwissel naar footer-stand valt op
     dezelfde scrollstand als voorheen (die kijkt naar de onderrand van
     .fig-canvas, en die is niet verschoven).
     LET OP: de hero heeft geen eigen grond en leunt op deze cream —
     daarom staat hij ín .fig-cream. */
  background: transparent;
  color: #222;
  font-family: var(--font-sans);

  /* ── DE MAAT VAN HET WATERMERK EN VAN DE PIJP (zesde ronde) ────────
     Het watermerk in de hero (.fig-merk, sinds deze ronde een kind van
     Verschuiving) is op desktop hero-hoogte − 1 cel: 19 cel op 1440×900,
     17 op de 18-cellige schermen. De hero is round(up, 100svh, cel), en
     dat is hier zonder de hero uit te rekenen: svh is overal dezelfde
     maat. Nooit meer dan 20 cel: gecentreerd op kolom 16 eindigt het
     teken dan op 26, en daar begint de portretdoos (het portret zelf op
     26,2); breder zou het teken onder het portret doorlopen en de snede
     door de benen weer op het teken laten vallen in plaats van op de
     gele rand (vierde ronde).
     --merk-d is hoeveel van het teken ONDER grens 01 hangt: precies zo
     veel dat de onderste punt van de zeshoek op de grens staat. In het
     merk ligt die punt op 604,4 van 1000 (HOEKPUNTEN in Zeshoek.tsx), dus
     de onderste 39,56 % van het teken hangt onder de lijn — 7,52 cel op
     1440, 6,73 op 18 cel. Zo staat de machine op de kleurwissel, op élk
     scherm, en niet toevallig een halve cel erover of eronder.
     --as-b is de BREEDTE VAN DE PIJP: de as-strook van het merk. In
     public/figma/beeldmerk.svg (viewBox 54) ligt de rechterhelft op
     x 28,0429 en eindigt de linkerhelft op 25,9842: een strook van
     2,0587 op 54 = 3,812 % van het teken. (De vorige ronde noemde 3,68 %;
     dat getal komt uit logo-shape.svg (1600: 770,78 → 830,02 = 3,70 %) en
     de daaruit afgeleide 481,8 … 518,6 op /about. Het watermerk en de
     header tekenen beeldmerk.svg, dus hier telt 3,812 %.) Op 1440 is dat
     0,724 cel = 32,6 px, op 1920 0,648 cel = 38,9 px: de pijp is exact zo
     breed als de strook waar hij uit komt, ook als het teken per scherm
     anders meet — één formule voor allebei.
     De kale regels zijn het vangnet voor browsers zonder round(). */
  --merk-h: min(calc(100svh - var(--cell)), calc(var(--cell) * 20));
  /* Logo, sluitende uitsparingen en doorlopende pijp gebruiken één wit.
     Daardoor wordt het merk massief en blijft de overgang op mosterd schoon. */
  --merk-kleur: var(--t-cream);
}
@supports (min-height: round(up, 100svh, 10px)) {
  .fig-canvas {
    --merk-h: min(
      calc(round(up, 100svh, var(--cell)) - var(--cell)),
      calc(var(--cell) * 20)
    );
  }
}
/* De cream grond van de pagina — zie .fig-canvas hierboven. De hoeken van
   de platen en de kantlijnen van Systematiseren laten deze laag zien;
   alleen de laatste strook (buiten deze wrapper) laat de footer zien.
   ALS PSEUDO-ELEMENT OP z −2, NIET ALS background OP DE WRAPPER — en dat
   is gemeten, niet bedacht. Een gewone achtergrond op een blok in de
   stroom wordt in de stapelvolgorde van .fig-canvas NÁ alle negatieve
   z-indexen geschilderd: de gronden (.sectie::before, z −1), de
   decorvormen, het watermerk en de pijp lagen er allemaal onder en de
   hele pagina was cream met alleen de tekst erop (eerste bouw van deze
   ronde). Een absoluut pseudo-element op z −2 schildert vóór de gronden
   (z −1) en ná de (doorzichtige) canvas — exact de plek waar de cream
   eerst als canvasachtergrond zat. De wrapper zelf krijgt géén z-index:
   die zou een eigen stapelcontext maken en alle inhoud onder het ambient
   veld (z 0 op de canvas) duwen. */
.fig-cream {
  position: relative;
}
.fig-cream::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--g-cream);
  pointer-events: none;
}

/* ── HET RASTER — één doorlopende laag over de hele canvas ────────────
   Nulpunt = linkerbovenhoek van .fig-canvas, celmaat = var(--cell). Omdat
   dit één element is dat de volle canvashoogte beslaat, lopen de lijnen
   door over álle sectiegrenzen heen; er is geen tweede raster dat ernaast
   kan vallen en geen per-sectie masker dat de dekking laat springen.

   Stapelorde binnen .fig-canvas (z 2, eigen stacking context):
     z -1  sectiegronden (.sectie::before)
     z  0  DIT raster            ← eerst in boomvolgorde
     z  0  .ambient-veld         ← eerste kind, tekent er dus bovenop
     z  1+ alle content
   Het raster ligt zo bóven de gekleurde gronden en ónder het ambient
   veld: het veld wordt nergens afgedekt. */
/* ── DE KRUISING WAS DONKERDER DAN DE LIJN (2026-09) ──────────────────
   HIER STONDEN VIER GRADIENTS: hoofdlijn horizontaal + verticaal op hele
   cellen, hulplijn horizontaal + verticaal op halve cellen, alle vier op
   dezelfde laag. Vier lagen op één element stapelen met source-over, en
   dat is een OPTELLING, geen vereniging: waar twee lijnen elkaar kruisen
   telde de dekking op in plaats van gelijk te blijven.

   GEMETEN (Chrome 152 headless, 1440x900, cel 45px, waterval uit, de
   dekking van de rasterinkt over de grond teruggerekend uit de pixels):
                              blauwdruk   aubergine
     hoofdlijn (H of V)          0,125       0,136
     KRUISING hoofd x hoofd      0,243       0,261   ← 1,93x de lijn
     hulplijn                    0,062       0,068
     kruising hulp x hulp        0,118       0,136
     hulplijn OP een hoofdlijn   0,183       0,205   ← 1,46x de lijn
   Die laatste rij is dezelfde fout, alleen minder zichtbaar: de hulplijn
   staat op HALVE cellen en dus ook op élke hele cellijn, waar hij onder de
   hoofdlijn schuift. De hoofdlijn tekende daardoor nergens op de
   gedeclareerde 0,34 maar op 1 − (1 − 0,34)(1 − 0,12) = 0,419.

   DIT IS DE PLEK WAAR TEKST ONDER DE NORM DOOK. De kruising is een
   toevallig donkere pixel achter een letter; het lettermasker (zie het
   rapport van deze ronde) wees op 1440 vier teksten aan die er onder
   4,5:1 kwamen, allemaal op een kruising.

   WAT NIET WERKT, en waarom het hier niet staat:
     · background-blend-mode: darken.  Een blend-mode verandert alleen de
       KLEUR, niet de alfa: de compositie blijft αo = αs + αb(1 − αs).
       Beide lagen dragen exact dezelfde grijstint, dus darken levert
       letterlijk hetzelfde beeld op als nu. Nagerekend en verworpen.
     · de rasterdekking verlagen.  Dan wordt élke lijn op de hele pagina
       lichter om één pixelsoort te repareren; de vorige ronde heeft dat
       gemeten (4,37:1, nog steeds onder de norm) en terecht verworpen.
     · een derde laag die op de kruisingen terugcorrigeert. Dat is een
       pleister op een optelling die er niet had moeten zijn.

   WAT WEL WERKT — ÉÉN MASKER IN PLAATS VAN VIER LAGEN.
   De inkt blijft precies waar hij hoorde: als KLEUR op het element, in
   het bestaande token --raster-inkt. Alleen de VORM verhuist naar een
   inline-SVG masker van één cel. In dat masker zijn de horizontale en de
   verticale lijn twee subpaden van ÉÉN path, dus de rasteriser rekent de
   dekking van de vereniging uit en tekent de kruising precies één keer.
   Een kruising is daarmee per constructie even donker als een lijn, en
   dat geldt net zo goed voor de hulplijnen onderling.
   HET MASKER IS WIT EN NIET ZWART: dan klopt het zowel als de browser
   het als alfa-masker leest (de standaard voor een SVG-afbeelding) als
   wanneer hij het als luminantiemasker leest — wit x alfa geeft in beide
   gevallen dezelfde waarde. Zwart zou in het tweede geval nul zijn en het
   hele raster wegpoetsen.

   DE HULPLIJN STAAT NU ALLEEN NOG OP DE HALVE CEL, niet meer óók op de
   hele. Dat is geen esthetische keuze maar dezelfde reparatie: hij lag
   daar onder de hoofdlijn en telde erbij op. De hoofdlijn tekent daardoor
   nu op de gedeclareerde 0,34 in plaats van op 0,419 — gemeten scheelt
   dat op blauwdruk 2 van de 255 niveaus op één pixelkolom, en dat is
   onder de waarneemdrempel (zie het rapport).

   DE MATEN IN HET MASKER. De tegel is 90 x 90 eenheden en wordt op
   var(--cell) geschaald, dus 1 eenheid = cel/90. De lijn is 1 eenheid
   breed — bij de referentiecel van 45px is dat exact de 0,5px die
   --raster-lijn-dikte al voorschreef. De hulplijn staat op eenheid 45,
   de halve cel, precies waar de gradient hem tekende.

   DE 0,722 IS GEMETEN EN GEEN SMAAK. Een masker tekent exacte meetkunde,
   een gradient niet: Chrome smeert de harde kleurstop over de pixel uit
   en tekende daardoor minder inkt dan hij beloofde. Op blauwdruk
   (#C7E5F2, blauwkanaal 242, volle inkt kost 106) zakte de pixel onder
   een hoofdlijn naar 229,5 — dekking 0,118, alsof de lijn 0,35px breed
   was in plaats van 0,5. Hetzelfde masker met fill-opacity 1 zette hem op
   0,170: geometrisch correct, maar 39 % donkerder dan het raster dat er
   stond. 0,722 = 0,118 / 0,170 zet de lijn terug op precies de gemeten
   waarde van vóór deze ronde. Het raster ziet er dus hetzelfde uit;
   alleen de kruising verandert.
   De correctie staat in het MASKER en niet in --raster-inkt, zodat dat
   token de gedeclareerde inkt blijft (0,34) en het vangnet met de vier
   gradients precies blijft tekenen wat het altijd tekende.

   DE HULPLIJN BEGINT PAS TWEE EENHEDEN NA DE HOOFDLIJN. Waar een hulplijn
   een hoofdlijn kruist zijn het twee paden met een verschillende dekking,
   en die kunnen niet in één path verenigd worden; ze telden daar dus
   alsnog op (gemeten 1,46x de lijn). Twee eenheden inkorten is 1px bij
   cel 45 — genoeg om elkaar niet meer te raken — en die kruising is nu
   exact de hoofdlijn.
   De hulplijn heeft fill-opacity 0.2548 = 0,722 x 0,3529, en die 0,3529
   is 0,12 / 0,34: het masker draagt de VERHOUDING tussen hulp- en
   hoofdlijn, precies zoals de twee tokens hierboven hem declareren.

   WAT ER OVERBLIJFT, eerlijk gemeten (cel 45, blauwdruk, dekking van de
   rasterinkt over de grond):
                         vóór     na
     hoofdlijn          0,1226  0,1132   (1 kwantiseringsniveau lichter)
     KRUISING hoofd     0,2358  0,1132   1,92x -> 1,00x   -52 %
     hulplijn           0,0566  0,0566   gelijk
     kruising hulp      0,1132  0,0849   2,00x -> 1,50x van de HULPlijn,
                                         en daarmee nog altijd lichter dan
                                         een hoofdlijn: geen enkel
                                         rasterpixel is nog donkerder dan
                                         een hoofdlijn.
     hulp op hoofdlijn  0,1792  0,1132   1,46x -> 1,00x
   De kruising van twee HULPlijnen is de enige die niet exact op 1,00x
   uitkomt: hij valt op de halve cel en die ligt bij een cel van 45px
   tussen twee pixels in, waardoor de twee balken over twee pixelkolommen
   uitsmeren en de vereniging daar niet meer op één pixel valt. Het is de
   lichtste lijnsoort van het raster en hij haalt met 0,085 nog steeds
   niet de 0,113 van een hoofdlijn, dus hij kan geen tekst meer onder de
   norm duwen.

   DEZELFDE LIJN OP ÉLKE GROND — nagemeten op alle negen, met de oude
   tekening en de nieuwe op dezelfde bouw naast elkaar. Het pixel onder een
   hoofdlijn is per grond identiek gebleven, en het pixel op de kruising is
   nu datzelfde pixel:
     grond       lijn (voor = na)   kruising voor -> na
     cream       241,234,226        228,222,214 -> 241,234,226
     taupe       185,174,141        178,170,139 -> 185,174,142
     blauwdruk   193,218,230        185,208,217 -> 193,218,230
     klei        208,160,140        199,157,138 -> 209,160,140
     olijf       167,159,105        162,156,107 -> 167,159,106
     aubergine   190,161,198        183,158,189 -> 190,161,198
     steen       220,215,208        209,206,198 -> 220,216,208
   Mosterd tekent de lijn op een subpixel en had daar al geen dubbele
   kruising; donker is de footer en ligt buiten .fig-canvas. Over alle
   gronden verandert de hoofdlijn tussen -0,027 en +0,029 dekking — één
   niveau van de 255 op één pixelkolom, en dus onder de waarneemdrempel.
   Geïsoleerd nagemeten op celmaten 40, 45, 48,75, 53,75, 60 en 80 (dus
   van 320px mobiel tot 2560px desktop) is de lijn op élke celmaat 0,1132
   en de kruising ook: de dikte springt nergens.

   HET VANGNET IS DE OUDE TEKENING. De vier gradients blijven ongewijzigd
   staan; het @supports-blok eronder vervangt ze pas als de browser
   mask-image kent (Chrome 120, Safari 15.4, Firefox 53 — ruim onder de
   ondergrens die .sectie met calc-size() al hanteert). Zonder masker
   krijg je dus exact het raster van vóór deze ronde, en nooit een dekkend
   grijs vlak over de hele pagina.

   Zelfde nulpunt (0 0) als altijd, dus hoofd- en hulplijnen kunnen per
   definitie niet uit fase raken, en het raster blijft ÉÉN laag met ÉÉN
   inkt op élke grond. */
.fig-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      to right,
      var(--raster-inkt) var(--raster-lijn-dikte),
      transparent var(--raster-lijn-dikte)
    ),
    linear-gradient(
      to bottom,
      var(--raster-inkt) var(--raster-lijn-dikte),
      transparent var(--raster-lijn-dikte)
    ),
    linear-gradient(
      to right,
      var(--raster-hulp-inkt) var(--raster-hulp-dikte),
      transparent var(--raster-hulp-dikte)
    ),
    linear-gradient(
      to bottom,
      var(--raster-hulp-inkt) var(--raster-hulp-dikte),
      transparent var(--raster-hulp-dikte)
    );
  background-size:
    var(--cell) var(--cell),
    var(--cell) var(--cell),
    calc(var(--cell) / 2) calc(var(--cell) / 2),
    calc(var(--cell) / 2) calc(var(--cell) / 2);
  background-position: 0 0;
}
@supports (
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E")
  ) {
  .fig-canvas::before {
    background-image: none;
    background-color: var(--raster-inkt);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.722' d='M0 0h90v1H0zM0 0h1v90H0z'/%3E%3Cpath fill='%23fff' fill-opacity='.2548' d='M2 45h88v1H2zM45 2h1v88H45z'/%3E%3C/svg%3E");
    mask-size: var(--cell) var(--cell);
    mask-repeat: repeat;
    mask-position: 0 0;
  }
}

/* ── Hero ──
   position: relative zodat absolute kinderen (de foto, het merkteken)
   zich tot de hero verhouden. Het raster hangt NIET meer hier: dat is één
   laag op .fig-canvas (zie hierboven).

   PRECIES SCHERMVULLEND ÉN OP HET RASTER (2026-08, feedback Bram)
   Bram: "de hero is niet meer precies schermvullend, alles lijkt wel te
   ver naar beneden te staan." Klopt: de hero stond op een vast aantal
   cellen (18). Eén cel is 100cqw/32, dus 18 cellen is 1080px op 1920 —
   ruim 100px méér dan een viewport van ~955. De hero stak dus onder de
   vouw uit, en omdat de tekst in díé te hoge doos verdeeld stond, viel
   het blok optisch te laag.

   DE HOOGTE — round(up, 100svh, --cell):
   `100svh` is exact de schermhoogte (small viewport height: de stabiele
   maat, dus geen sprong als de mobiele browserbalk in-/uitschuift).
   `round(up, …, var(--cell))` rondt die omhoog af naar de eerstvolgende
   hele cel. Twee dingen tegelijk:
     · de hero is nooit kleiner dan het scherm → altijd schermvullend, en
       de volgende sectie piept er nooit onderaan overheen;
     · de hoogte blijft een heel aantal cellen → de sectiegrens valt exact
       op een rasterlijn, dus alles daaronder blijft op het raster staan.
   Het surplus (max één cel) valt onder de vouw en telt niet mee voor de
   verticale verdeling — zie --hero-pad hieronder.

   VANGNET VOOR LANGE INHOUD: min-height i.p.v. height, plus dezelfde
   calc-size()-snap als .sectie. Past de inhoud niet in een scherm (mobiel,
   of een heel lage viewport), dan groeit de hero mee en wordt die hoogte
   opnieuw omhoog afgerond op een hele cel. Beide takken leveren dus een
   veelvoud van --cell: de grens ligt altijd op een lijn.

   DE VERDELING — --hero-pad:
   De inhoud (eyebrow → mono-regel) is 10.75 cellen hoog (was 11; de vier
   B-vlakken kosten een halve cel méér, de mono-regel onder de knop een
   kwart minder) en staat onder de header (2 cellen). De 13 in de formule
   hieronder is dus 2 + 10.75, naar boven afgerond — hij bepaalt alleen de
   optische verdeling, niet het ritme, dus een kwart cel speling verschuift
   niets van het raster. Wat overblijft binnen het SCHERM (niet binnen de
   afgeronde hoogte) is 100svh − 13 cellen; daarvan gaat de helft boven de
   inhoud zitten, afgerond op een halve cel zodat elke regel op het
   halve-celritme van de hero blijft staan. Zo staat het blok optisch
   midden tussen de header en de onderrand van het scherm, en niet meer
   naar beneden gedrukt. max(0px, …) vangt extreem lage viewports af. */
.fig-hero {
  position: relative;
  /* DE HERO KRIJGT DE TOKENS VAN DE CREAM GROND. Hij is geen .sectie en
     had daarom geen --grond/--inkt/--steun; elk stuk hero-CSS dat een
     kleur nodig had zette hem daardoor als vaste hex neer. De drie
     waarden hieronder zijn exact die van .grond-cream, dus er verandert
     visueel niets — maar de doorlopende vorm op de sectiegrens
     (.doorloop) en de focus-outline van .btn halen hun kleur nu uit
     dezelfde tokens als elke andere strook. */
  --grond: var(--g-cream);
  --inkt: var(--g-donker);
  --steun: #38332c;
  --vlak-tint: var(--t-cream); /* de vlaktint van de cream grond = #FFFFFF */
  /* Vangnet voor browsers zonder round(): schermvullend, alleen zonder de
     afronding op een cel. Het @supports-blok hieronder overschrijft dit
     zodra round() er wel is (Chrome 125+, Safari 15.4+, Firefox 118+).
     Twee losse declaraties zouden hier NIET werken: een var() met een
     onbekende functie erin is "invalid at computed-value time" en valt
     dan terug op de initiële waarde, niet op de vorige regel. */
  min-height: 100svh;
  padding-top: calc(var(--cell) * 2);
  /* Clipt het merkteken hieronder exact op de onderrand van de hero;
     het vervolg van die vorm staat in de sectie eronder (zie hieronder). */
  overflow: hidden;
  /* Geen eigen grond: de cream komt van .fig-canvas, zodat het ambient
     veld (eerste kind van .fig-canvas, z 0) door de hero heen zichtbaar
     blijft. Een eigen background zou het veld hier afdekken. */
}
@supports (min-height: round(up, 100svh, 10px)) {
  .fig-hero {
    --hero-h: round(up, 100svh, var(--cell));
    /* 12.5 = 2 cellen header + 10.25 cellen inhoud, omhoog afgerond op de
       halve cel waarop deze formule toch al rondt. De inhoud was 10.75 en
       verloor een halve cel toen de lucht tussen de typemachine en de kop
       van 1 naar 0.5 cel ging (zie .fig-headline). Zonder deze correctie
       zou het blok een kwart cel te hoog in het scherm hangen. */
    --hero-pad: max(
      0px,
      round((100svh - var(--cell) * 12.5) / 2, calc(var(--cell) / 2))
    );
    min-height: var(--hero-h);
    padding-top: calc(var(--cell) * 2 + var(--hero-pad));
  }
}
@supports (height: calc-size(auto, round(up, size, 10px))) {
  .fig-hero {
    height: calc-size(auto, round(up, size, var(--cell)));
  }
}

/* ══ HET WATERMERK — LAGER, OVER BEIDE STROKEN, EN VEEL ZACHTER (2026-09,
   zesde ronde) ═══════════════════════════════════════════════════════════
   Bram: "Ik ben nog niet te spreken over de hero, met name over hoe het
   beeldmerk gepositioneerd is. Ik denk dat hij lager moet, meer over
   beide stroken heen moet lopen. En de kleur vind ik ook nog niet mooi —
   kijk eens wat er nu echt goed bij dat crème past. Het moet veel minder
   hard dan dit; daarom sprak wit me aan, maar dat was het ook niet."

   WAAR HET STAAT. Het teken is nog steeds het complete merk (silhouet,
   as-strook en zeshoek als uitsparingen, zie Hero.tsx → nu
   Verschuiving.tsx) en nog steeds hero-hoogte − 1 cel groot (--merk-h op
   .fig-canvas), gecentreerd op kolom 16. Maar het hangt nu --merk-d onder
   grens 01: de onderste 39,56 % van het teken staat in de mosterd, zodat
   de onderste punt van de zeshoek exact op de kleurwissel staat (7,52 cel
   op 1440×900, 6,73 op de 18-cellige schermen; de afleiding staat bij
   --merk-d). Daarmee ligt de bovenrand van het teken op cellijn 8,5
   (1440) resp. 6,5 (18 cel) — onder de eyebrow, op de tweede regel van de
   kop — en staat alles wat eronder komt op het teken: de intro, de vier
   B-vlakken, de knop, de mono-regel. GEMETEN op de bevroren bouw van
   vóór deze ronde: de B-rij loopt van kolom 8,5 tot 23,5 op cellijn
   13,0–13,5 (1440) resp. 12,0–12,5 (18 cel); de koorde van het teken
   loopt daar van kolom 7,78 tot 24,22 (1440; middelpunt op 18, straal
   9,5) resp. 8,49 tot 23,51 (18 cel; middelpunt 16,2, straal 8,5) —
   nagemeten op de bouw van deze ronde. De rij staat er op beide formaten
   helemaal op, met 0,7 cel over op 1440 en op de 18-cellige schermen
   nog maar 0,01 cel: daar raakt de boog exact de buitenhoeken van 01 en
   04. Dat is geen toeval maar de grens van de keuze --merk-d: één cel
   lager en de twee buitenste vlakken zouden een hoek op cream hebben.
   De kop (cellijn 7,5–10,5 resp.
   6,5–9,5) raakt alleen de smalle top van de cirkel: op 1440 is die op de
   onderrand van de kop 2 × 4,2 cel breed, midden onder "Beoefen wat
   bepaalt.". In de mosterd staat het couplet van Verschuiving óp het
   teken (kolom 8 → 24 van het couplet 3 → 26,6, cellijn 4,2–7,2 sinds de
   halve cel die Verschuiving omhoog ging) en de twee panelen beginnen op
   8, een halve cel onder de rechte onderrand van het teken op 7,5. De
   as-strook loopt als uitsparing onder het couplet door, precies zoals
   hij in de hero al onder de mono-regel doorliep; de PIJP begint pas
   waar het teken ophoudt — zie .as-lijn en Verschuiving.tsx.

   ÉÉN ELEMENT, IN VERSCHUIVING. Een vorm die vanuit de hero omlaag hangt
   valt onder de grond van Verschuiving (gronden staan in boomvolgorde,
   zie .doorloop). Het teken is daarom een kind van Verschuiving met een
   negatieve top; het tekent over de hero heen (die geen eigen grond
   heeft) en de hero clipt niets meer van het teken. Het staat ná de
   decorlaag en vóór het as-segment van Verschuiving in de boom (later
   tekent bovenop), dus decorvorm A (die tot kolom 18 komt) blijft onder
   het teken en de pijp erboven. Het portret (kolom 26,2 → 32) raakt het niet: het teken
   eindigt op 25,5 (1440) resp. 24,5, en de benen worden nog steeds tegen
   mosterd afgesneden — Bram vroeg te beoordelen of het portret naast de
   vorm moet vallen, en dat doet het.

   DE TINT — EN WAAROM DE VORIGE AFLEIDING FOUT WAS. De vijfde ronde koos
   --t-taupe (ΔE 10,60 op cream) met het argument dat het verschil
   teken↔cream even groot moest zijn als vlak↔grond elders (band 8,7 –
   10,7). Dat was een verkeerde lezing van Brams "correspondeert met de
   kleurverschillen elders": hij bedoelde HARMONIE (een tint uit dezelfde
   familie), geen gelijke sprong — en het resultaat noemt hij nu "te
   hard". Een watermerk is per definitie een kleine stap. De nieuwe eis:
   iets tussen wit en cream in, of een zeer lichte warme tint, waarop de
   witte B-vlakken nog leesbaar zijn (ΔE wit↔teken boven de lat van 5,77
   uit de tweede ronde) en #222 ≥ 4,5:1 haalt. Alleen bestaande tokens of
   een color-mix van twee ervan. Gemeten (CIEDE2000, deltae.py in de
   meetmap), ΔE tegen cream · tegen mosterd (de vorm loopt daar nu in
   door) · wit erop · contrast #222 erop:
     --t-cream (wit)              4,94 · 33,0 ·  0,00 · 15,91   wit op wit
     --t-steen                    3,39 · 29,8 ·  4,45 · 13,60   wit erop te zwak
     cream 50 % + --g-steen       2,36 · 28,7 ·  5,65 · 13,56   net onder de lat
     cream 75 % + --t-taupe       2,54 · 27,9 ·  6,79 · 13,67   kandidaat A
     cream 60 % + --t-taupe       4,12 · 26,8 ·  8,13 · 12,93   kandidaat B ← gekozen
     cream 50 % + --t-taupe       5,33 · 26,2 ·  9,11 · 12,54   kandidaat C
     --t-taupe (was)             10,60 · 22,6 · 14,10 · 10,31   te hard
   Alle drie de kandidaten zijn warm (de taupe-familie, gemengd met de
   cream grond zelf), alle drie halen de latten. B is de middelste: op
   cream een duidelijk maar zacht vlak (ΔE 4,1, vergelijkbaar met het
   witte vlak op cream in de eerste ronde, 4,9), wit erop ΔE 8,1. A is
   nog zachter (ΔE 2,5: op een matig scherm bijna cream) en C begint
   weer naar het oude taupe te neigen. De drie staan naast elkaar in het
   rapport van deze ronde (schermafdrukken hero-tint-A/B/C); Bram kiest.
   Op mosterd is elk van de drie een licht vlak (ΔE 26 – 28) — dat is
   onvermijdelijk voor een lichte vorm die een verzadigde grond in loopt,
   en het is één vorm met één kleur (de druppelregel).

   Mobiel blijft het teken 6 cel, links (kolom 0,5 → 6,5), met de
   onderrand OP de grens: op 8 kolommen is er onder de grens geen ruimte
   voor een overhang plus de bocht van de as naar de kantlijn (zie
   Verschuiving.tsx, mobiel). */
/* ── DE VERF VAN DE PIJP, EN EEN VULLING DIE MEESCHRIJFT (2026-09, zevende
   ronde) — VOOR HET TEKEN HERROEPEN IN DE ACHTSTE, ZIE DAARONDER ─────────
   Bram: "Kunnen we voor het watermerk niet kiezen voor dezelfde kleur als
   de pijp, en dat als je gaat scrollen vanaf de hero het logo zich
   helemaal vult?" Het teken kreeg de verf van de pijp, --g-donker 15 %
   over de grond (op cream #DDD8D0, op mosterd #C69223; wit erop ΔE00
   9,42 / dSom 122, #222 erop 11,13:1), als contour van 20 % donker die
   zich bij het scrollen met de pen van de pijp vulde.

   ── LICHT, METEEN VOL, EN DE GATEN SCHRIJVEN DICHT (2026-09, achtste
   ronde) — TINT EN PIJPVERF HERZIEN IN DE NEGENDE, ZIE ONDER ──────────────────────────────────────────────────────────────
   Bram: "Super verbetering. Alleen de hero is niet helemaal goed
   overgekomen." Drie correcties, alleen aan het teken en de pijpstart.
   1  HET SILHOUET STAAT VOL BIJ BINNENKOMST. "Ik wil dat het logo al
      volledig de kleur heeft die hij nu krijgt als je scrolt." De contour
      is weg; de vorm is vanaf het eerste beeld één gevuld vlak.
   2  DE AS-STROOK EN DE ZESHOEK VULLEN BIJ HET SCROLLEN. "Als je gaat
      scrollen [worden] de pijp en de hexagon van het logo gevuld, en het
      [wordt] dus een volledig gevulde vorm vanwaaruit de pijp verder
      gaat." De twee uitsparingen zijn gaten in het MASKER van de vorm
      (Watermerk.tsx); een witte pen-rechthoek bóven die gaten in dat
      masker (.fig-merk-pen) wordt met de scroll van boven naar beneden
      vrijgegeven en sluit ze: dezelfde clip-animatie als de pijp, op de
      view-timeline van het teken (--merk, laag as-scroll onderaan). De
      vorm wordt één keer geschilderd — geen twee doorzichtige lagen die
      op een rand samenkomen — dus na het sluiten is er geen naad
      (pixelscan over de voormalige uitsparingen, zie het rapport van
      deze ronde). Waar de strook op de onderrand vol is, begint de pijp:
      zelfde pen, zelfde scrollstand. Statisch en bij prefers-reduced-
      motion staat de pen: alles dicht, het hele teken gevuld.
   3  EEN LICHTE TINT DIE VERLICHT. "Het is nu een zwarte tint die het
      donkerder maakt. Moet het niet een wittint zijn die transparant is
      en alles lichter maakt?" De keuze van de zevende ronde — donker 15 %,
      "één token voor pijp én merk" — is hiermee voor het TEKEN herroepen:
      die verf maakte de grond donkerder, en dat is precies wat Bram niet
      wil. De verf is nu --t-cream (wit) op --merk-dek over de grond (het
      token staat op .fig-canvas). Gemeten (deltae.py, CIEDE2000): wit X %
      op cream · op mosterd · de witte B-vlakken erop (ΔE00 / dSom, lat
      5,77 / 58) · #222 erop (de kop, lat 4,5):
        40 %   2,05 · 11,35 ·  2,91 / 16 · 15,3
        50 %   2,33 · 14,34 ·  2,69 / 14 · 15,4
        60 %   2,70 · 17,66 ·  2,26 / 10 · 15,6   ← gekozen
        70 %   3,31 · 21,16 ·  1,66 /  7 · 15,7
        80 %   4,10 · 24,84 ·  1,05 /  5 · 15,7
       100 %   4,94 · 33,03 ·  0,00 /  0 · 15,9   wit op wit
      De richtwaarde van de zesde ronde (ΔE ≥ 4 op cream, "zacht maar
      zichtbaar") haalt alleen 80 % en hoger — maar dat is bijna dekkend
      wit, en het "transparant" waar Bram om vraagt is dan weg. 60 % is
      de bovenkant van de band 40–60 die transparant blijft: op cream een
      lichte verdieping (#FFFCF8, ΔE 2,7 — als vlak subtiel, aan de rand
      van de vorm zichtbaar), op mosterd een lichter geel (#F1DBA5,
      ΔE 17,7; het couplet erop 11,7:1).
      DE WITTE B-VLAKKEN ZIJN HET PROBLEEM, EN GEEN ENKELE DEKKING LOST
      DAT OP: wit op een witte tint over cream kan nooit meer verschillen
      dan wit tegen cream zelf, ΔE 4,94, en de lat is 5,77. Op 60 % is het
      2,26 / dSom 10 — de vlakken staan er alleen nog door hun schaduw en
      hun letters. Dat is een keuze voor Bram: "lichter" (dit) of
      "B-vlakken leesbaar" (een donkerder teken, of de vlakken anders).
      DE PIJP HOUDT ZIJN DONKERE VERF. Wit 60 % als pijp haalt op cream
      ΔE 2,7 en op steen 4,3 (lat 4 op élke grond); 80 % haalt cream (4,1)
      maar is op mosterd, klei en olijf 21–25 — een witte balk. Donker
      15 % is op alle acht gronden 6,4–7,0, gelijkmatig. Dus: het merk
      licht, de pijp donker, en de as-strook ín het teken is de overgang —
      hij vult in de merkkleur, de pijp erbuiten in zijn eigen verf, en ze
      raken elkaar op de onderrand van het teken. Daar zit een sprong van
      ΔE 21 (#F1DBA5 → #C1921F); de eerste cel van de pijp onder het teken
      krijgt daarom een verloop van de strookkleur naar de eigen verf, zie
      .as-overgang bij .as-pad en de AsLijn in Verschuiving.tsx. */
/* ── NEGENDE RONDE — EEN TIK DONKERDER DAN CREAM, EN DE WITTE PIJP DOOR
   HET MERK ──────────────────────────────────────────────────────────────
   Bram: "Maak het wit wat op de crème achtergrond zit iets donkerder."
   Wit 60 % over de grond was op cream ΔE00 2,70 (#FFFCF8): als vlak te
   zacht. Niet witter dus, maar een lichte tint die op cream een tik
   donkerder dan cream uitkomt — een zachte verdieping — ÉÉN dekkende
   kleur voor de hele vorm (hij loopt over beide helften, de druppelregel),
   uit color-mix van bestaande tokens; richtwaarde ΔE 3,5–4,5 op cream.
   Gemeten (deltae.py, CIEDE2000): ΔE op cream · op mosterd · de witte
   B-vlakken erop ΔE00/dSom (lat 5,77/58, tweede ronde) · #222 erop:
     wit 60 % (was)              #FFFCF8   2,70 · 31,6 ·  2,26/10 · 15,6
     cream 92 % + donker         #ECE6DE   3,63 · 28,0 ·  6,58/77 · 12,8
     cream 91 % + donker         #EAE4DC   4,06 · 27,8 ·  6,93/83 · 12,6  ← gekozen
     cream 90 % + donker         #E8E2DA   4,50 · 27,6 ·  7,28/89 · 12,4
     cream 65 % + --t-taupe      #F0E9DB   3,77 · 27,0 ·  7,87/73 · 13,2
     cream 60 % + --t-taupe (B)  #EEE7D9   4,12 · 26,8 ·  8,13/79 · 12,9
   Cream met een klein deel donker is cream in de schaduw: dezelfde
   kleurtoon, alleen lager; de taupe-mengsels trekken naar olijfgeel, de
   familie die Bram in de zesde ronde "te hard" noemde. 91 % ligt in het
   midden van de band (4,06). BIJVANGST: de witte B-vlakken en de
   header-pill halen hun contrast terug (6,93/83, was 2,26/10) — op wit
   60 % kon dat per definitie niet. Op mosterd is het teken nu een licht
   dekkend vlak (ΔE 27,8; het couplet erop 12,6:1): onvermijdelijk voor
   één lichte kleur die een verzadigde grond in loopt, en precies wat de
   druppelregel vraagt.
   DE PIJP IS WIT (--t-cream, dekkend; de meting staat bij .as-pad) en
   vertrekt uit de as-strook van het teken. Twee varianten, allebei
   gebouwd (Watermerk.tsx, prop as; het woord staat in Verschuiving.tsx):
   (a) as-strook en zeshoek vullen in de merkkleur en de pijp begint wit
   op de onderrand — een kleurstap van ΔE 6,9 op de rand, verzacht door
   .as-overgang; (b) as-strook en zeshoek vullen in het pijpwit binnen het
   donkerder silhouet, zodat de witte pijp letterlijk door het merk loopt:
   één vorm, één kleur van de kruin tot de footer, geen stap. (b) staat
   erin; Bram kiest. */
.fig-merk,
.sectie > .fig-merk {
  position: absolute;
  top: auto;
  bottom: var(--cell);
  left: 50%;
  height: var(--merk-h);
  aspect-ratio: 1 / 1;
  width: auto;
  transform: translateX(-50%);
  z-index: -1;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.fig-merk-vul {
  fill: var(--merk-kleur);
}

/* ── GESCHIEDENIS (vierde en vijfde ronde) — het teken stond BINNEN de
   hero, op de gele rand, in --t-taupe. De redenering hieronder is
   bewaard omdat de metingen (B-rij, portret, kolommen) nog kloppen; de
   plaats en de tint zijn sinds de zesde ronde anders, zie hierboven. ──
   Bram: "De B-vlakken in de hero mogen wat mij betreft echt een witte
   achtergrond hebben, niet die crème." En: "mijn benen van de foto in de
   hero worden afgesneden, maar niet op een nette manier. Die moeten echt
   op die gele rand worden afgesneden. Dus dat beeldmerk, dat witte vlak,
   moet dan sowieso kleiner."

   WAT ER STOND: een wit merkteken van 24 cellen (kolom 4 → 28) dat als
   .doorloop-paar 4,5 cel de mosterd strook in zakte, met de vier
   B-vlakken in cream erop. Twee dingen klopten daardoor niet: de vier
   vlakken waren cream (afgekeurd), en onder het portret (kolom 26 → 32)
   liep het witte teken tot kolom 28 door — de snede door de dijen viel
   dus op wit en cream in plaats van op de gele rand.

   DRIE BESLISSINGEN, ELK GEMETEN.
   1  HET TEKEN BLIJFT IN DE HERO EN STAAT OP DE GELE RAND. Zijn onderrand
      valt exact samen met de grens hero → mosterd (bottom: 0). Dat is
      geen afsnijding: de rechte onderrand van het silhouet — van de boog
      linksonder tot de scherpe hoek rechtsonder — is een echte rand van
      de vorm, er ontbreekt niets. Het teken STAAT op het gele vlak, net
      als het portret ernaast; allebei eindigen ze op dezelfde lijn.
      Grens 01 is daarmee een schone kleurwissel, en de snede door de
      benen valt tegen mosterd — wat Bram vroeg, en wat zijn oude site
      deed (de foto stopte op de kleurwissel). Het .doorloop-paar op
      grens 01 is weg, hier én in Verschuiving.tsx.
   2  DE MAAT VOLGT DE HERO: hoogte = herohoogte − 1 cel, dus 19 cel op
      1440×900 (hero 20) en 17 op de 18-cellige schermen (1280×720,
      1366×768, 1920×1080, 2560×1440). Bovenrand op cellijn 1, onderrand
      op de grens. Gecentreerd op kolom 16: op 1440 kolom 6,5 → 25,5, op
      18 cel 7,5 → 24,5 — halve cellijnen, de hulplijnen van het raster.
      De scherpe hoek staat dus NIET op kolom 28 zoals bij de druppels:
      daar zou hij onder het portret vallen (kolom 26 → 32), en dat is
      precies de fout die weg moest. Kleiner dan 24, en toch de eerste
      vorm van de pagina: 855px hoog op 1440, de hele hero.
      De B-rij (kolom 8,5 → 23,5) staat er op élk formaat helemaal op —
      gemeten is het krapste geval 1366×768, waar de rij op cellijn 11,5
      staat en de linkerflank van het teken daar op 7,88 ligt (0,62 cel
      marge). Met de bovenrand ónder de header-pill (cellijn 2,5) zou het
      teken op 18 cel maar 15,5 zijn en lag die flank op 8,58: de rij er
      net buiten. Daarom start het teken op cellijn 1 en staat de witte
      pill over zijn top; op steen is die pill zichtbaar (ΔE 7,2), op cream
      was hij dat nauwelijks (4,9).
      Vangnet voor heel hoge vensters: nooit breder dan 30 cel.
   3  DE KLEUR WAS STEEN (--g-steen, #E6E2DA) EN IS SINDS DE VIJFDE RONDE
      DE VLAKTINT VAN TAUPE (--t-taupe, #D7D0B9). Bram: "Dat beeldmerk
      heeft nu een grijze tint. Zoek een tint die past bij dat beige, niet
      dat grijs" — en preciezer: "een warme tint die bij het cream past,
      die correspondeert met de kleurverschillen die ook in de andere
      stroken zichtbaar zijn." Dat laatste is een meetbare vraag: welke
      STAP maakt een vlak elders ten opzichte van zijn grond, en welke
      bestaande tint maakt op cream diezelfde stap? Gemeten met CIEDE2000
      (deltae.mjs in de meetmap), eerst de bestaande vlak-op-grond-paren:
        --t-mosterd op mosterd     ΔE 10,69   L 71 → 82  lichter
        --t-olijf op olijf         ΔE 10,38   L 70 → 81  lichter
        --t-klei op klei           ΔE  9,95   L 71 → 82  lichter
        --t-aubergine op aubergine ΔE  9,34   L 73 → 83  lichter
        --t-taupe op taupe         ΔE  8,74   L 73 → 84  lichter
      De band is dus 8,7 – 10,7, steeds een sprong van ruim tien L*. Op
      cream (L 97,5) kan een watermerk alleen DONKERDER gaan — lichter dan
      cream is wit, en dat zijn de B-vlakken. Dan de kandidaten op cream,
      alleen bestaande tinten:
        --g-steen op cream         ΔE  4,76   koel, grijs   ← was het
        --t-steen op cream         ΔE  3,39   te weinig
        --t-blauwdruk op cream     ΔE 11,20   koel, blauw
        --t-taupe op cream         ΔE 10,60   warm, olijfbruin  ← gekozen
        --t-klei op cream          ΔE 13,94   warm, rozig; boven de band
        --t-olijf op cream         ΔE 15,28   boven de band
      --t-taupe zit met 10,60 midden in de band van de andere stroken en is
      de enige warme tint die dat doet; steen maakte minder dan de halve
      stap en was bovendien de enige koele tint van het stel. De latten
      blijven ruim gehaald: wit (de B-vlakken) op --t-taupe ΔE 14,09 /
      dSom 157 (de lat was 5,77 / 58, steen gaf 7,20 / 91), en #222 op
      --t-taupe haalt 10,31:1 voor de kop en de mono-regel die erop staan.
      Geen nieuwe kleur: het is de vlaktint van de taupe strook twee
      stroken verderop.

   ── HET WATERMERK IS SINDS DE VIJFDE RONDE HET COMPLETE MERK ──────────
   Bram: "dat in de hero het logovlak gewoon het logo is als watermerk,
   dus zoals nu, alleen dan met de lijn en de zeshoek erin". In het echte
   beeldmerk (public/figma/beeldmerk.svg) zijn de as en de zeshoek geen
   lijnen óp het teken maar UITSPARINGEN erin: de grond schijnt erdoor.
   Zo staat het hier ook — dus in één tint, letterlijk. Het element is nu
   een inline <svg> (Hero.tsx) met het silhouet als pad en een masker dat
   de as-strook (x 481,8 … 518,6 van 1000, dus 3,68 % van de breedte) en
   de zeshoek (dezelfde zes hoekpunten als Zeshoek.tsx) eruit knipt. De
   maten en de plaats van het element veranderen niet: dezelfde doos,
   hetzelfde silhouet (drie ronde hoeken, scherp rechtsonder), alleen
   getekend als pad in plaats van als border-radius.
   DE AS-STROOK VALT PRECIES TUSSEN TWEE B-VLAKKEN. De strook is 3,68 % van
   het teken: 31 px op 1440 (teken 855 px), 37,5 px op 1920, 25 px op 1280.
   Hij staat op kolom 16, en de B-rij staat op kolom 8,5 → 23,5 in stappen
   van 4 cel (3 vlak + 1 gat): het gat tussen "02 Blauwdruk" (12,5 → 15,5)
   en "03 Bouw" (16,5 → 19,5) is exact kolom 15,5 → 16,5. De strook meet
   op 1440 kolom 15,65 → 16,35: 0,15 cel lucht aan elke kant, op 1920 0,19.
   De zeshoek staat waar hij in het merk staat, op 40 – 60 % van de hoogte
   — achter de kop dus. Dat is de bedoeling van een watermerk; de letters
   staan op cream (uitsparing) of op --t-taupe en halen allebei ruim de
   norm (14,97 resp. 10,31).
   DE AS LOOPT ERUIT. Onder de as-strook begint de lijn van 25 % inkt die
   de hele site doorloopt (.as-lijn hieronder, AsLijn.tsx): in de hero
   alleen de laatste 2 cel ín de strook — boven de tekst mag hij niet
   lopen, en de tekst staat op elk gemeten scherm boven cellijn H − 2
   (gemeten onderrand van de mono-regel: 16,3 op 1440×900, 15,3 op
   1920×1080, 14,75 op 1366×768, 15,0 op 2560×1440, tegen een hero van
   20, 18, 18 en 18) — en vanaf de grens gewoon door.
   z −1 zoals elke vorm: onder het raster en de waterval, boven niets —
   de hero heeft geen eigen grond. Niet roteren. Spiegelen mag sinds de
   vierde ronde elders (zie .doorloop--spiegel), maar het eerste teken van
   de pagina staat in de canonieke stand: scherpe hoek rechtsonder.
   (De regel .fig-merk zelf staat hierboven, bij de zesde ronde.) */

/* ── Oude hero-rasters — UITGESCHAKELD ────────────────────────────────
   .fig-raster was de SVG-rasterlaag over de hero: 38×38 cellen op
   left −3 / top −1 cel, met een eigen radiaal masker. Dat nulpunt week af
   van elk ander raster op de pagina, waardoor er in de hero een tweede,
   verschoven lijnenset overheen lag (de "dubbele lijn" in het midden van
   de hero). .fig-raster-m was de mobiele tegenhanger, geclipt tot de hero.
   Beide zijn vervangen door de ene laag op .fig-canvas.
   De <img class="fig-raster"> is uit page.tsx verwijderd; deze regel blijft
   als vangnet staan, zodat een teruggeplaatste oude rasterlaag nooit
   opnieuw een tweede lijnenset over de hero legt. */
.fig-raster,
.fig-raster-m {
  display: none;
}

/* ── Header layer: FIXED, altijd zichtbaar tijdens scrollen ──
   De header staat BUITEN .fig-root: container-type (contain: layout) op
   fig-root zou position: fixed anders aan fig-root vastpinnen i.p.v. aan
   de viewport. De header is daarom zijn eigen inline-size container en
   definieert zelf --cell; fixed left/right 0 spant exact de clientWidth
   (zonder scrollbalk), dus de cellen blijven raster-uitgelijnd. */
.fig-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* boven alles behalve modals/inspectie-overlay */
  container-type: inline-size;
  --cell: calc(100cqw / 32);
  color: #222;
}

/* Desktop nav pill: left 3, top 1, 21×1 cells */
.fig-navpill {
  position: absolute;
  left: calc(var(--cell) * 3);
  top: var(--cell);
  width: calc(var(--cell) * 21);
  height: var(--cell);
  border-radius: calc(var(--cell) * 1.5);
  background: #fff;
}

/* Logo: beeldmerk + letter, 118×54 design-px → height 0.675 cell */
.fig-logo {
  --logo-h: calc(var(--cell) * 0.675);
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.0926); /* 5/54 of the height */
}
.fig-navpill .fig-logo {
  position: absolute;
  left: calc(var(--cell) * 0.1625);
  top: 50%;
  transform: translateY(-50%);
}
.fig-logo-mark {
  width: var(--logo-h);
  height: var(--logo-h);
  display: block;
}
.fig-logo-word {
  width: calc(var(--logo-h) * 1.0926);
  height: var(--logo-h);
  display: block;
} /* 59×54 */

/* Readable navigation, with centers on whole and half grid cells. */
.fig-navlinks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fig-navlinks li {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.fig-navlinks li:nth-child(1) {
  left: calc(var(--cell) * 7.5);
}
.fig-navlinks li:nth-child(2) {
  left: calc(var(--cell) * 11);
}
.fig-navlinks li:nth-child(3) {
  left: calc(var(--cell) * 13.5);
}
.fig-navlinks li:nth-child(4) {
  left: calc(var(--cell) * 16);
}
.fig-navlinks li:nth-child(5) {
  left: calc(var(--cell) * 18.5);
}
.fig-navlinks a {
  font-size: max(14px, calc(var(--cell) * 0.25));
  font-weight: 500;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
}

/* Notches (flag shapes) */
.fig-notch {
  position: absolute;
  top: var(--cell);
  width: calc(var(--cell) * 0.5);
  height: var(--cell);
  display: block;
}
.fig-notch-nav {
  left: calc(var(--cell) * 23.5);
  color: #fff; /* zelfde wit als de nav-pill: notch = silhouet-vlaggetje */
  pointer-events: none;
}
.fig-notch-cta {
  left: calc(var(--cell) * 29.5);
  color: #222; /* inline-SVG notch kleurt mee met de CTA-pill */
  transition: color 0.36s cubic-bezier(0.4, 0, 0.2, 1); /* = .fig-cta */
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .fig-cta,
  .fig-notch-cta {
    transition: none;
  }
}

/* CTA pill: ontwerp-maat hersteld — nav-pill 3→24, lege cel 24→25,
   CTA-pill 25→29 (4 cellen). Font/tracking proportioneel verkleind zodat
   "PLAN EEN GESPREK" netjes gecentreerd past. */
.fig-cta {
  position: absolute;
  left: calc(var(--cell) * 25);
  top: var(--cell);
  width: calc(var(--cell) * 5);
  height: var(--cell);
  /* One silhouette and one transitioning fill: a separate logo-derived notch
     exposed its inner hexagon edge while the section colours were changing. */
  border-radius: calc(var(--cell) * 1.5) calc(var(--cell) * 1.5) 0
    calc(var(--cell) * 1.5);
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: max(11px, calc(var(--cell) * 0.25));
  font-weight: 700;
  /* Five grid cells leave room for readable uppercase text on small desktops. */
  text-transform: uppercase;
  letter-spacing: calc(var(--cell) * 0.03);
  text-decoration: none;
  white-space: nowrap;
  /* ── DE KLEURWISSEL IS EEN OVERGANG, GEEN SPRONG (2026-09, zesde ronde)
     Bram: "Als je scrolt en de knopkleur van 'Begin met begrip' verandert,
     wil ik daar een overgangseffect op — nu verandert hij plots van
     kleur, ik wil dat smooth." Er stond al een transitie van 0,2 s ease,
     maar die is te kort om als overgang te lezen: bij een gewone
     scrollsnelheid is de wissel in twee, drie frames klaar. Nu 0,36 s op
     een zachte curve (de standaardcurve van Material, snel weg en zacht
     aankomen), op de pill, de notch (een broertje, dezelfde regel), de
     burgerstrepen en de mobiele pill. GEMETEN op de bevroren bouw
     (1440×900, scroll van de hero de mosterd in, de achtergrondkleur van
     de pill per ~80 ms uitgelezen): t = 194 ms rgb(31,35,32), t = 303 ms
     rgb(15,43,18), t = 378 ms rgb(12,45,16), t = 449 ms #0A2E0E — de
     notch loopt op elk moment exact gelijk. Zie .fig-notch-cta en de
     mobiele regels. Bij prefers-reduced-motion vervalt de transitie: dan
     wisselt hij weer direct. */
  transition:
    background-color 0.36s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
.fig-cta span {
  margin-right: calc(var(--cell) * -0.03);
} /* offset trailing tracking */

/* ── Sectie-bewuste CTA-kleur ─────────────────────────────────────────
   De pill (en zijn notch) wisselt mee met de achtergrond die onder de
   header door scrolt (data-cta via JS, gevoed door data-hdr op de sectie).

   DE HEADER-CTA IS EEN KNOP, DUS HIJ PAKT DE KNOPKLEUR (--knop-grond) VAN
   DE GROND ERONDER — NIET DE STEUNKLEUR. Sinds de definitieve paletronde
   (2026-09) zijn die twee losgekoppeld: het lijnwerk houdt zijn diepe
   tint, het knopvlak is feller. Zou de pill de steunkleur pakken, dan
   stond er bovenaan het scherm een andere knop dan in de sectie zelf.
   Eén regel per grond, met de tekst altijd wit (footer uitgezonderd).
   De notch is hetzelfde vlak en krijgt dus dezelfde kleur.

   De negen namen zijn exact de negen gronden; een sectie hoeft alleen
   data-hdr="<naam>" te zetten. Zie de palettabel bij .grond-cream. */
.fig-header[data-cta="cream"] .fig-cta {
  background: #222222;
}
.fig-header[data-cta="cream"] .fig-notch-cta {
  color: #222222;
}
/* Mosterd (#DDA61F) draagt geen witte tekst; de knop is daar het
   donkergroen #0A2E0E met wit erop (14.89:1). */
.fig-header[data-cta="mosterd"] .fig-cta {
  background: #0a2e0e;
}
.fig-header[data-cta="mosterd"] .fig-notch-cta {
  color: #0a2e0e;
}
.fig-header[data-cta="taupe"] .fig-cta {
  background: #3a3218;
}
.fig-header[data-cta="taupe"] .fig-notch-cta {
  color: #3a3218;
}
/* Blauwdruk houdt #254FAD als STEUN (lijnwerk, maatvoering); de knop is
   het elektrische #0000EE — vandaar dat deze twee hier verschillen. */
.fig-header[data-cta="blue"] .fig-cta {
  background: #0000ee;
}
.fig-header[data-cta="blue"] .fig-notch-cta {
  color: #0000ee;
}
.fig-header[data-cta="klei"] .fig-cta {
  background: #d92b00;
}
.fig-header[data-cta="klei"] .fig-notch-cta {
  color: #d92b00;
}
.fig-header[data-cta="olijf"] .fig-cta {
  background: #b01e00;
}
.fig-header[data-cta="olijf"] .fig-notch-cta {
  color: #b01e00;
}
.fig-header[data-cta="aubergine"] .fig-cta {
  background: #e10098;
}
.fig-header[data-cta="aubergine"] .fig-notch-cta {
  color: #e10098;
}
.fig-header[data-cta="steen"] .fig-cta {
  background: #0000ee;
}
.fig-header[data-cta="steen"] .fig-notch-cta {
  color: #0000ee;
}
.fig-header[data-cta="footer"] .fig-cta {
  background: #ffffff;
  color: #222;
}
.fig-header[data-cta="footer"] .fig-notch-cta {
  color: #ffffff;
}

/* Mobile nav bits, hidden on desktop */
.fig-nav-m {
  display: none;
}

/* ── Copy (z 40) ─────────────────────────────────────────────────────
   HERO: GECENTREERD ÉN OP HET RASTER (2026-08).
   Bram, over de herbouw: "De hero is plots niet meer in het midden
   gecentreerd en het font is ook kleiner geworden." De vorige versie zette
   de kop links op cellijn 3; hier staat het oude, gecentreerde beeld weer.

   Centrering en rasteruitlijning botsen niet, omdat ze op verschillende
   niveaus werken: het BLOK ligt op cellijnen, de TEKST is daarbinnen
   gecentreerd. Eyebrow en kop delen één blok van cellijn 4 → 28 (24
   cellen, gecentreerd op canvas-midden 16); de bodykolom is 18 cellen
   breed van cellijn 7 → 25. Alle vier de randen vallen dus op een cellijn,
   terwijl de regels zelf netjes om het midden staan.

   VERTICAAL: DE INHOUD STAAT IN DE FLOW, NIET OP VASTE RIJEN (2026-08).
   De hero is nu schermhoog (zie .fig-hero) in plaats van 18 vaste cellen,
   dus vaste `top`-waarden zouden het blok op elk scherm ergens anders
   laten landen — precies waarom het te laag stond. De blokken stapelen
   daarom gewoon met marges in hele/halve cellen; de hero zet er met
   padding-top zoveel hele/halve cellen boven dat het blok optisch midden
   tussen de header en de onderrand van het scherm staat.
   Het onderlinge ritme loopt op hele en halve cellen:
     1 cel    eyebrow
     0.5 cel  lucht          ← was 1 cel, zie .fig-headline
     3 cellen kop (2 regels × 1.5 cel)
     1 cel    lucht
     0.5 cel  intro (1 regel; op smallere desktops 2 regels = 1 cel)
     1 + 0.5  de vier B's
     1 + 1    knop (.btn is exact 1 cel hoog)
     0.25+0.5 mono-regel onder de knop
     = 10.25 cellen op 1440 (gemeten: eyebrow-top 270 → onderrand
     mono-regel 731.25, dat is 461.25 px bij een cel van 45). Dat getal
     zit ook in --hero-pad op .fig-hero, als 2 + 10.25 → 12.5. */

/* Eyebrow: line-height = 1 cel, dus de regel is exact één cel hoog en het
   optische midden van de tekst valt (via half-leading) op een halve cel.
   Numeriek geverifieerd (±2px). */
.fig-eyebrow {
  position: relative;
  width: calc(var(--cell) * 24);
  height: var(--cell);
  line-height: var(--cell);
  margin: 0 auto;
  text-align: center;
  white-space: nowrap; /* "AI AUTOMATISERING" mag nooit afbreken */
  font-size: calc(var(--cell) * 0.375);
  font-weight: 400;
  letter-spacing: calc(var(--cell) * 0.075);
  /* compenseert de tracking áchter de laatste letter, zodat de regel
     optisch precies in het midden staat (zoals in de oude hero) */
  text-indent: calc(var(--cell) * 0.075);
  z-index: 40;
}
/* Alleen het zichtbare (aria-hidden) deel gaat naar kapitalen; de
   sr-only-regel eronder blijft gewone spelling, zodat screenreaders geen
   losse letters spellen. */
.fig-eyebrow-zicht {
  text-transform: uppercase;
}
/* Breedtereservering: het langste woord (AUTOMATISERING) staat onzichtbaar
   in dezelfde grid-cel als de getypte tekst. De regel houdt dus altijd
   dezelfde breedte terwijl de typemachine loopt — niets eronder verschuift
   en de cursor blijft gewoon achter de laatste letter meelopen. */
.fig-eyebrow-slot {
  display: inline-grid;
  vertical-align: top;
}
.fig-eyebrow-slot > * {
  grid-area: 1 / 1;
  /* Gecentreerde hero: de getypte regel staat gecentreerd IN het
     gereserveerde vak, zodat de zichtbare tekst om het midden van de hero
     staat en niet links in het vak begint. De reservering blijft, dus de
     regel houdt zijn breedte en niets eronder verspringt. */
  justify-self: center;
}
.fig-eyebrow-reserve {
  visibility: hidden;
}

/* Blinking typewriter cursor in de eyebrow: dun CAD-kruisdraad-plusje
   (twee lijntjes van ~0.14 cel, 1.5px, #222) — koppelt aan het
   vector-inspectiesysteem. Knippert met de bestaande blink-keyframes. */
.fig-eyebrow-cursor {
  position: relative;
  display: inline-block;
  width: calc(var(--cell) * 0.14);
  height: calc(var(--cell) * 0.14);
  /* tracking geeft al 0.075 cell ruimte na de laatste letter → netto gap ~0.06 */
  margin-left: calc(var(--cell) * -0.015);
  /* optisch centreren op de kapitaalhoogte (~0.27 cel) van de eyebrow */
  vertical-align: calc(var(--cell) * 0.065);
  animation: blink 0.8s step-end infinite;
}
.fig-eyebrow-cursor::before,
.fig-eyebrow-cursor::after {
  content: "";
  position: absolute;
  background: #222;
}
.fig-eyebrow-cursor::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
}
.fig-eyebrow-cursor::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
}

/* Visually hidden but readable by screenreaders */
.fig-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fig-eyebrow-cursor {
    display: none;
    animation: none;
  }
}

/* De belangrijkste kop van de site — zo groot als het raster toelaat.
   Korpsgrootte is GEMETEN, niet gegokt: bij 1.80 cel is de langste regel
   — "Automatiseer wat schaalt." — 23 cellen breed. Gecentreerd in het blok
   4 → 28 loopt hij dus van cellijn 4.5 tot 27.5, met een halve cel lucht
   naar Brams hoofd in het portret (dat begint rond cellijn 28). Groter kan
   niet zonder over het portret te lopen.
   (Ter vergelijking: de oude Engelse kop stond op 2.625 cel, maar
   "Master the work" is een derde korter dan "Automatiseer wat schaalt.";
   in gerénderde regelbreedte is deze kop met 23 cellen ruim bréder dan de
   oude, die 21.8 cellen mat. De vorige herbouw stond op 1.648 cel.)
   Regelafstand 1.5 cel (ratio 0.83 — even krap als het origineel, dat op
   2.025/2.625 = 0.77 stond): twee regels = exact 3 cellen, rij 6 → 9.

   EEN HALVE CEL ONDER DE TYPEMACHINE (2026-09, feedback Bram: "in de hero
   de afstand tussen de typewriter en 'Automatiseer wat schaalt' verkleinen,
   is nu echt te groot"). De marge stond op 1 cel. Dat mat als LAYOUT 45 px
   op 1440, maar OPTISCH veel meer: de eyebrow staat met line-height 1 cel
   op een regel van 45 px terwijl zijn korps maar 0.375 cel is, dus onder de
   letters zit al ~16 px half-leading; de kop heeft daarentegen negatieve
   leading (korps 1.8 cel op een regel van 1.5) en begint dus pas ruim
   binnen zijn eigen doos. Gemeten in de screenshot op 1440: van de
   basislijn van "AI ADOPTIE" tot de bovenkant van de A van "Automatiseer"
   lag 68 px witruimte — anderhalve cel, niet één. Een halve cel layout
   haalt daar precies die extra cel af en houdt alles op het halve-celritme.
   Mobiel stond deze marge al op 0.5 cel; daar verandert dus niets. */
.fig-headline {
  position: relative;
  width: calc(var(--cell) * 24);
  margin: calc(var(--cell) * 0.5) auto 0; /* halve cel lucht onder de eyebrow */
  text-align: center;
  font-size: calc(var(--cell) * 1.8);
  line-height: calc(var(--cell) * 1.5);
  letter-spacing: calc(var(--cell) * -0.012);
  font-weight: 800;
  white-space: pre; /* houdt de handmatige regelovergang */
  z-index: 40;
}

/* Body-kolom: gecentreerd blok van cellijn 7 → 25 (18 cellen), dus links
   en rechts op een cellijn en het midden gelijk aan dat van de kop.
   Regelafstand 0.5 cel, dus twee regels = precies 1 cel. */
.fig-body {
  position: relative;
  width: calc(var(--cell) * 18);
  margin: var(--cell) auto 0; /* 1 cel lucht onder de kop */
  text-align: center;
  font-size: calc(var(--cell) * 0.34);
  line-height: calc(var(--cell) * 0.5);
  letter-spacing: calc(var(--cell) * 0.0075);
  font-weight: 400;
  z-index: 40;
}
.fig-body p {
  margin: 0;
}
/* Verticaal ritme binnen de hero-kolom, alles in halve/hele cellen:
     1 cel        intro (2 regels × 0.5 cel)
     0.5 + 0.5    de vier B's
     1 + 1        de knop (.btn is exact 1 cel hoog)
     0.5 + 0.5    de mono-regel onder de knop
   De selectors zijn .fig-body-gebonden omdat `.fig-body p { margin: 0 }`
   anders wint. */
/* ── DE VIER B'S ALS LOSSE VLAKKEN (2026-09, genummerd) ───────────────
   Bram, eerste ronde: "wil in de hero begrip blauwdruk bouw beheer los
   hebben en daar ook van die witte vlakken in de vorm van het logo achter
   zitten zonder omlijning."
   Bram, tweede ronde: "capitalen op die B-vlakken … maak de b vlakken ook
   veel kleiner dit is veel te groot."
   Bram, deze ronde: "zet op de hero de buttons begrip blauwdruk bouw en
   beheer dichter bij elkaar, zet er ook een cijfer wel klein font daarvoor
   gebruiken."

   DICHTER BIJ ELKAAR. Ze stonden op 4 × 2,25 cel met 3 cel ertussen,
   verdeeld over de volle bodykolom van 18 cellen. Nu 4 × 3 cel met 1 cel
   ertussen; de rij meet daarmee 15 cellen en staat gecentreerd in dezelfde
   18-cels kolom, dus links en rechts blijft 1,5 cel over. De randen van de
   rij vallen op cellijn 8,5 en 23,5 — halve cellen, en die dragen sinds
   deze ronde een HULPLIJN in het raster (zie --raster-hulp-inkt), dus de
   rij staat nog steeds aantoonbaar op de tekening.
   De vlakken werden bréder (2,25 → 3) omdat er een nummer bij komt; de
   tussenruimte ging van 3 naar 1 cel. Dat is wat "dichter bij elkaar"
   betekent: de vier lezen als één reeks stappen in plaats van als vier
   losse knoppen, en toch raken ze elkaar niet.

   HET NUMMER. 01 · 02 · 03 · 04 vóór het woord, in mono en op de kleinste
   labeltrap (0,13 cel, vloer 9px) tegen 0,2 cel voor het woord zelf — dus
   duidelijk kleiner, en met minder inkt (opacity 0,55). Het staat als een
   ECHT label in de markup, met aria-hidden, zodat een screenreader
   "Begrip" leest en niet "nul één begrip". De volgorde is precies die van
   de vier stapblokken in Systematiseren waar de vlakken naartoe linken.

   KORPS GECONTROLEERD. De vorige ronde zette het woord op 0,17 cel met een
   vloer van 10px; op 1440 (cel 45px) komt 0,17 cel uit op 7,7px, dus het
   label stond over de hele desktopreeks vastgeklemd op die 10px-vloer —
   te klein. Nu 0,2 cel met een vloer van 11px: op 1440 wordt dat 11px, op
   1920 12px en op 2560 16px, dus het korps groeit weer mee met het raster
   in plaats van op de vloer te blijven liggen.

   HET VERTICALE RITME BLIJFT GELIJK: 1 cel marge + 0,5 cel hoogte = 1,5
   cel, net als hiervoor. De hero telt dus nog steeds dezelfde 10,75 cellen
   inhoud en --hero-pad op .fig-hero hoeft niet mee te veranderen.

   RAAKVLAK. Een doos van 0,5 cel is op 1440px 22px hoog — ver onder de
   44px-duimmaat. De ::after eronder rekt het raakvlak op tot 44px zonder
   het vlak zelf groter te maken (hetzelfde patroon als .link op mobiel).
   De formule staat één keer, met --bvlak-h als enige knop, zodat de
   mobiele variant niet uit de pas kan lopen. */
.fig-body .fig-b-reeks {
  --bvlak-h: 0.5; /* hoogte in cellen */
  margin: var(--cell) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, calc(var(--cell) * 3));
  gap: var(--cell);
  justify-content: center;
}
/* Het vlak: de cream grond op het witte merkteken (zie de regel in het
   blok zelf), GEEN rand (expliciete eis). Cream op wit is een echt maar
   zacht verschil; een haarfijne schaduw tilt het plaatje van de grond
   zonder een lijn te tekenen. Het silhouet komt uit 1.5 cel ronding op een lage doos: de
   browser schaalt alle radii met dezelfde factor tot ze op de krapste
   rand passen, dus het wordt hier de halve hoogte — halve cirkels links
   en rechtsboven, scherpe hoek rechtsonder. Exact wat .btn met zijn
   <Notch/> tekent. */
.fig-b-vlak {
  /* Een B-vlak is een DOOS met een vulling, een ronding en de scherpe
     silhouethoek — geen regel tekst, ook al draagt hij .mono-label voor
     korps en tracking. De basislijncorrectie zou het hele vlak verschuiven
     in plaats van de letters erin; zie "DE BASISLIJN OP HET RASTER" in de
     typografieblok verderop. Het label staat hier bovendien optisch
     gecentreerd (align-items: center) en niet op een regelvak. */
  --bl-corr: 0px;
  position: relative;
  /* ── HET WOORD IN HET MIDDEN, HET NUMMER ERNAAST (2026-09, zesde ronde)
     Bram: "de tekst moet in het midden van de knop worden uitgelijnd en
     het cijfertje links ernaast, maar dat moet niet de centrering
     bepalen." Als flexrij stond het paar (nummer + woord) gecentreerd,
     dus het woord zat een halve nummerbreedte rechts van het midden:
     GEMETEN op 1440 stond "BEGRIP" op kolom 9,67 → 10,82 (midden 10,25)
     in een vlak van 8,5 → 11,5 (midden 10,0) — een kwart cel scheef.
     Nu een raster van drie sporen: 1fr · auto · 1fr. Het woord staat in
     het middelste spoor en de twee buitensporen zijn per constructie
     even breed, dus het midden van het woord ís het midden van het vlak.
     Het nummer staat rechts uitgelijnd in het LINKERspoor, met een gat
     van 0,16 cel tot het woord, en telt dus niet mee in de centrering.
     Past het? Het vlak is 3 cel; "BLAUWDRUK" is het breedste woord (1,9
     cel op 1440 incl. tracking), dus elk buitenspoor is (3 − 1,9)/2 =
     0,55 cel; het nummer ("02", 0,28 cel) plus het gat (0,16) is 0,44 en
     past er met 0,11 cel over — de padding is daarom van 0,24 naar 0,1
     cel gegaan, anders viel het nummer op het smalste vlak buiten de
     ronding. Op mobiel is het vlak ook 3 (mobiele) cel en het woord
     kleiner, dus daar is ruimte over. Zelfde opzet in de stapchips van
     Systematiseren (.sys-stap). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: calc(var(--cell) * 0.16);
  height: calc(var(--cell) * var(--bvlak-h, 0.5));
  padding: 0 calc(var(--cell) * 0.1);
  border: 0;
  border-radius: calc(var(--cell) * 1.5) calc(var(--cell) * 1.5) 0
    calc(var(--cell) * 1.5);
  /* ── WIT, OP HET STENEN MERKTEKEN (2026-09, vierde ronde) ─────────
     Bram: "De B-vlakken in de hero mogen wat mij betreft echt een witte
     achtergrond hebben, niet die crème, dat vind ik echt niet mooi."
     De derde ronde zette ze in cream omdat het merkteken erachter wit
     was geworden (wit op wit: dSom 0). Dat is nu omgedraaid, de kant op
     die hij vraagt: de vlakken zijn weer de vlaktint van de cream grond
     (#FFFFFF, zoals elk vlak op cream) en het TEKEN is van kleur
     veranderd — steen, zie .fig-merk hierboven. Wit op steen haalt
     ΔE 7,20 / dSom 91, boven de lat van 5,77 waarop de witte vlakken
     twee rondes geleden stonden. Geen rand (Bram: "zonder omlijning");
     de haarfijne schaduw hieronder is geen lijn en stond er al toen hij
     de witte vlakken goedkeurde. Op mobiel staat de B-rij niet op het
     teken (dat is daar 7 cel en staat onderin, achter het portret) maar
     op cream: ΔE 4,94 — het witte vlak op cream van de eerste ronde. */
  background: var(--vlak-tint);
  box-shadow: 0 calc(var(--cell) * 0.02) calc(var(--cell) * 0.07)
    rgba(34, 34, 34, 0.07);
  color: #222222;
  /* Kapitalen met de knop-tracking; korps op 0.2 cel met een 11px-vloer,
     zodat het label op smalle desktops leesbaar blijft én boven 1100px
     weer met het raster meegroeit. */
  font-size: max(11px, calc(var(--cell) * 0.2));
  letter-spacing: calc(var(--cell) * 0.045);
  text-transform: uppercase;
  opacity: 1; /* volle inkt: dit is een stap, geen bijschrift */
  text-decoration: none;
  white-space: nowrap;
  /* Geen transform meer in de transitie: het vlak mag bij hover niet
     verschuiven (zie .fig-b-vlak:hover hieronder). */
  transition: box-shadow 0.2s ease;
}
/* Het nummer: kleinste labeltrap, mono, minder inkt dan het woord. */
.fig-b-nr {
  justify-self: end; /* tegen het woord aan, in het linkerspoor */
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: max(9px, calc(var(--cell) * 0.13));
  font-weight: 700;
  letter-spacing: calc(var(--cell) * 0.02);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.fig-b-naam {
  margin-right: calc(var(--cell) * -0.045);
} /* trailing tracking */
/* Raakvlak op 44px zonder het vlak te vergroten. max(0px, …) zorgt dat de
   laag nooit KRIMPT als het vlak zelf al hoger is dan 44px. */
.fig-b-vlak::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(max(0px, (44px - var(--cell) * var(--bvlak-h, 0.5)) / 2) * -1);
  bottom: calc(max(0px, (44px - var(--cell) * var(--bvlak-h, 0.5)) / 2) * -1);
}
/* ── HOVER ZONDER BEWEGING (2026-09) ──────────────────────────────────
   Bram: "verder wil ik geen elementen op buttons die bij het hoveren
   omhoog gaan omdat de lijn die erna overheen getrokken wordt er dan niet
   meer recht op staat."
   Terecht, en het is geen smaak maar een meetfout: de constructietekening
   leest de doos van het element bij `mouseover`, waarna de CSS-transitie
   het nog 0.2 s verschuift. De maatlijnen liggen er dan structureel
   0.04 cel (1.8 px op 1440) naast — precies de sprong die hieronder
   stond. Weg dus.
   WAT ER VOOR IN DE PLAATS KOMT, verplaatst niets:
     · de schaduw wordt dieper (0.02→0.05 cel offset, 0.07→0.12 dekking) —
       het vlak licht op zonder van zijn plek te komen;
     · het nummer gaat van 0.55 naar volle dekking, dus de hover is ook
       zichtbaar voor wie de schaduw op een licht scherm nauwelijks ziet.
   Geen rand: "zonder omlijning" is een expliciete eis van Bram, en geen
   nieuwe kleur: het palet ligt vast. */
.fig-b-vlak:hover {
  box-shadow: 0 calc(var(--cell) * 0.05) calc(var(--cell) * 0.12)
    rgba(34, 34, 34, 0.12);
}
.fig-b-vlak:hover .fig-b-nr {
  opacity: 1;
}
.fig-b-vlak:focus-visible {
  outline: 2px solid #38332c; /* --steun van de cream grond */
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .fig-b-vlak,
  .fig-b-nr {
    transition: none;
  }
}
.fig-body .fig-knop-rij {
  margin-top: var(--cell);
  justify-content: center; /* gecentreerde hero */
}
/* Een KWART cel onder de knop (Bram, 2026-09: "Dat 45 min 1 op 1
   kosteloos dichter op de knop zetten"). Het is geen zelfstandige regel
   maar het bijschrift van de knop; op een halve cel las hij als los.
   Zelfde kwart cel in .bgp-cta-regel (blok 01 Begrip) en .wbg-cta-regel
   (slot-CTA), zodat het één patroon is. */
/* MEER GEWICHT, NIET MEER RUIMTE (2026-09, feedback Bram: "45 min · 1-op-1
   met Bram · kosteloos valt onvoldoende op, misschien nog dichter op de
   button zetten of iets met het font doen"). Van de twee wegen die Bram
   noemt is "dichter" al gelopen — de kwart cel hierboven is een eerdere
   wens van hem en is bovendien gedeeld met .bgp-cta-regel, .wbg-cta-regel
   en .slot-note. Nog dichter zou dat patroon breken op één plek. Dus het
   font, en wel drie dingen die elk apart gemeten zijn op 1440 (cel 45):
     · KAPITALEN. In een monospace kost dat exact niets aan breedte (elke
       glief heeft dezelfde voorsprong), maar de regel krijgt er een
       kwart aan letterhoogte bij: van x-hoogte naar kapitaalhoogte. Het
       leest daardoor als technisch stempel bij de knop, net als elk
       ander mono-label op deze site.
     · VOLLE INKT. Was 0.65 dekking (toen de standaard van .mono-label;
       sinds de contrastronde staat die op 0.85, nog steeds een
       bijschrift-dekking). #222 op cream haalt 15.5:1 vol tegen ~7.6:1 op
       0.65 — dat verschil is precies wat "valt onvoldoende op" beschrijft.
       Het argument blijft gelden op 0.85 (9.4:1), alleen kleiner.
     · KORPS VAN DE VLOER AF. .mono-label rekent max(10px, 0.17 cel); op
       1440 is 0.17 cel maar 7.65 px, dus de regel lag over de hele
       desktopreeks vastgeklemd op die 10px-vloer. Met 0.22 cel en een
       11px-vloer wordt het 11px op 1440, 13.2 op 1920 en 17.6 op 2560:
       het korps groeit weer mee met het raster. Zelfde correctie als bij
       .fig-b-vlak eerder deze ronde.
   TRACKING VOLGT DE KAPITALEN: 0.04 → 0.06 cel, dezelfde stap die .btn
   maakt (0.03 → 0.045) toen die kapitalen kreeg. text-indent compenseert
   de tracking áchter de laatste letter, zodat de gecentreerde regel
   optisch in het midden blijft — hetzelfde trucje als .fig-eyebrow.
   BREEDTE GECONTROLEERD: 36 tekens × (0.6 em + tracking) = 335 px in een
   bodykolom van 18 cellen (810 px op 1440, 506 px op 900). Blijft één
   regel over de hele desktopreeks; mobiel is krapper en houdt daarom zijn
   eigen korps, zie de media-query. */
.fig-body .fig-knop-noot {
  margin-top: calc(var(--cell) * 0.25);
  line-height: calc(var(--cell) * 0.5);
  text-transform: uppercase;
  font-size: max(11px, calc(var(--cell) * 0.22));
  letter-spacing: calc(var(--cell) * 0.06);
  text-indent: calc(var(--cell) * 0.06);
  opacity: 1;
}
/* Kernvraag als hero-slot: vet, #222 met een accent in de steunkleur van
   de cream grond (eerste van drie landingen — komt terug in 5D en het
   site-slot). CREAM VERLIEST ZIJN BLAUW (definitieve paletronde 2026-09):
   dit accent was #254FAD en is nu de warme houtskool #38332C, de nieuwe
   --steun van .grond-cream (11.77:1 op cream). De hero is geen .sectie en
   heeft dus geen tokens; vandaar de vaste hex. */
.fig-body .fig-kernvraag {
  margin-top: calc(var(--cell) * 0.35);
  font-weight: 800;
  font-size: calc(var(--cell) * 0.45);
  line-height: calc(var(--cell) * 0.62);
}
.fig-kernvraag strong {
  color: #38332c;
}

/* Large native portrait, grounded on the hero edge; header space stays clear. */
.fig-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: min(calc(var(--cell) * 15), calc(100svh - var(--cell) * 2.5));
  aspect-ratio: 1584 / 3270;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}
.fig-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ════════════════════ Mobile (< 900px): 8-column grid ═══════════════ */
@media (max-width: 899.98px) {
  .fig-canvas {
    --cell: calc(100cqw / 8);
    height: auto;
  }
  .fig-header {
    --cell: calc(100cqw / 8);
  }

  /* Mobiel is de hero gewone flow. min-height (round(up, 100svh)) en de
     calc-size-snap staan al in de basisregel, dus ook hier geldt: minstens
     schermvullend, altijd een heel aantal cellen hoog. Alleen de
     verdeling verschilt — op 8 kolommen is de inhoud (inclusief het
     portret) hoger dan één scherm, dus er valt niets te centreren en
     staat de kolom gewoon 2 cellen onder de bovenrand. */
  .fig-hero {
    padding-top: calc(var(--cell) * 2);
    /* Flexkolom, zodat het portret onderaan met margin-top: auto op de
       kleurwissel kan staan (zie .fig-photo in deze query). Verder
       verandert er niets: alle kinderen zijn blokken over de volle
       breedte, en de hero heeft padding-top, dus er klapte toch al geen
       marge in. De calc-size-snap uit de basisregel meet de auto-hoogte
       van de kolom en rondt die omhoog af, precies als bij block. */
    display: flex;
    flex-direction: column;
  }
  /* Het merkteken op 8 kolommen: 6 cel op kolom 0,5 → 6,5, op de gele
     rand (bottom: 0), van cellijn 12 tot 18 op 390×844.
     WAS 7 CEL, GECENTREERD (kolom 0,5 → 7,5). Sinds het teken de as-strook
     draagt telt waar die strook valt: gecentreerd op 7 cel staat de as op
     kolom 4, en dat is exact de linkerrand van het portret (kolom 4 →
     7,5) — de strook zou half achter de figuur verdwijnen en de lijn die
     eruit komt zou langs zijn arm lopen. Op 6 cel, links in de
     inhoudskolom, staat de as op kolom 3,5 en de strook (0,26 cel breed)
     op 3,37 → 3,63: 0,37 cel vrij van het portret. De zeshoek (1,1 cel
     breed) eindigt op 4,05 en raakt de rand van de fotodoos maar niet de
     figuur (die begint 0,03 cel verder). Het teken wordt een cel kleiner
     en houdt 1,75 cel tot de mono-regel (die eindigt op 10,25) in plaats
     van 0,75. De B-rij (cellijn 7 → 8,45) staat hier dus op cream, niet
     op het teken — zie .fig-b-vlak. */
  .fig-merk,
  .sectie > .fig-merk {
    top: auto;
    bottom: var(--cell);
    left: calc(var(--cell) * 0.5);
    height: calc(var(--cell) * 6);
    transform: none;
  }
  /* Op 8 kolommen is het teken 6 cel en hangt het niet over. */
  .fig-canvas {
    --merk-h: calc(var(--cell) * 6);
  }

  /* Geen apart hero-raster meer: .fig-canvas::before loopt ook op mobiel
     door de hele pagina, met --cell = 100cqw/8 → 8 kolommen. */

  /* Swap desktop nav for the mobile pill + hamburger */
  .fig-navpill,
  .fig-notch,
  .fig-cta {
    display: none;
  }

  .fig-nav-m {
    display: block;
  }
  /* The opening measurement animation must never cover an open menu. */
  .fig-header:has(.fig-menu-m) {
    z-index: 210;
  }
  .fig-navpill-m {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(var(--cell) * 0.35) calc(var(--cell) * 0.35) 0;
    height: calc(var(--cell) * 1.1);
    padding: 0 calc(var(--cell) * 0.35);
    background: #fff;
    border-radius: calc(var(--cell) * 1.5);
  }
  .fig-navpill-m .fig-logo {
    --logo-h: calc(var(--cell) * 0.7425);
  }

  .fig-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--cell) * 0.11);
    /* 0.9 cel ≈ 44px raakvlak; de strepen zelf blijven 0.5 cel breed */
    width: calc(var(--cell) * 0.9);
    height: calc(var(--cell) * 0.9);
    margin-right: calc(
      var(--cell) *
      -0.175
    ); /* strepen optisch op de oude plek */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .fig-burger span {
    display: block;
    width: calc(var(--cell) * 0.5);
    height: 2px;
    border-radius: 2px;
    background: #222;
    /* 0,36 s op de kleur, net als .fig-cta (zesde ronde). */
    transition:
      background-color 0.36s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s ease,
      opacity 0.2s ease;
  }
  .fig-navpill-m {
    transition: background-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .fig-burger span,
    .fig-navpill-m {
      transition: none;
    }
  }
  /* Burger → kruis zodra het menu open is (op de bestaande aria-expanded) */
  .fig-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(calc(var(--cell) * 0.11 + 2px)) rotate(45deg);
  }
  .fig-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .fig-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(calc((var(--cell) * 0.11 + 2px) * -1)) rotate(-45deg);
  }

  /* Sectie-bewuste headerkleur op mobiel: burger-strepen kleuren mee met
     data-cta — zelfde negen knopkleuren als de desktop-pill hierboven.
     Boven de donkere footer wordt de pil cream. */
  .fig-header[data-cta="cream"] .fig-burger span {
    background: #222222;
  }
  .fig-header[data-cta="mosterd"] .fig-burger span {
    background: #0a2e0e;
  }
  .fig-header[data-cta="taupe"] .fig-burger span {
    background: #3a3218;
  }
  .fig-header[data-cta="blue"] .fig-burger span {
    background: #0000ee;
  }
  .fig-header[data-cta="klei"] .fig-burger span {
    background: #d92b00;
  }
  .fig-header[data-cta="olijf"] .fig-burger span {
    background: #b01e00;
  }
  .fig-header[data-cta="aubergine"] .fig-burger span {
    background: #e10098;
  }
  .fig-header[data-cta="steen"] .fig-burger span {
    background: #0000ee;
  }
  .fig-header[data-cta="footer"] .fig-navpill-m {
    background: #ffffff;
  }

  /* Scrim achter het open menu (page.tsx rendert hem vóór de pil) */
  .fig-scrim {
    position: fixed;
    inset: 0;
    background: transparent;
  }

  .fig-menu-m {
    position: relative;
    z-index: 1;
    margin: calc(var(--cell) * 0.15) calc(var(--cell) * 0.35) 0;
    padding: calc(var(--cell) * 0.3);
    background: #fff;
    border-radius: calc(var(--cell) * 0.35);
  }
  .fig-menu-m ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .fig-menu-m a {
    display: block;
    padding: calc(var(--cell) * 0.2) calc(var(--cell) * 0.15);
    font-size: calc(var(--cell) * 0.34);
    font-weight: 500;
    color: #222;
    text-decoration: none;
  }
  .fig-menu-m a.fig-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: calc(var(--cell) * 0.2);
    padding: calc(var(--cell) * 0.24) 0;
    background: #222;
    color: #fff;
    font-family: var(--font-sans);
    font-size: max(11px, calc(var(--cell) * 0.25));
    font-weight: 700;
    text-transform: uppercase; /* kapitalen op élke knop */
    letter-spacing: calc(var(--cell) * 0.03);
    text-align: center;
    border-radius: 999px 999px 0 999px;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }
  /* Menu-CTA kleurt mee met de sectie onder de header (data-cta) — ook
     hier de KNOPKLEUR van de grond, gelijk aan de pill en de burger. */
  .fig-header[data-cta="cream"] .fig-menu-m a.fig-menu-cta {
    background: #222222;
  }
  .fig-header[data-cta="mosterd"] .fig-menu-m a.fig-menu-cta {
    background: #0a2e0e;
  }
  .fig-header[data-cta="taupe"] .fig-menu-m a.fig-menu-cta {
    background: #3a3218;
  }
  .fig-header[data-cta="blue"] .fig-menu-m a.fig-menu-cta {
    background: #0000ee;
  }
  .fig-header[data-cta="klei"] .fig-menu-m a.fig-menu-cta {
    background: #d92b00;
  }
  .fig-header[data-cta="olijf"] .fig-menu-m a.fig-menu-cta {
    background: #b01e00;
  }
  .fig-header[data-cta="aubergine"] .fig-menu-m a.fig-menu-cta {
    background: #e10098;
  }
  .fig-header[data-cta="steen"] .fig-menu-m a.fig-menu-cta {
    background: #0000ee;
  }
  .fig-header[data-cta="footer"] .fig-menu-m a.fig-menu-cta {
    background: #ffffff;
    color: #222;
  }

  /* Stacked content flow — mobiel-eigen hero: links uitgelijnd op een
     0.5-cel kantlijn, strakker verticaal ritme (geen verkleinde desktop). */
  .fig-eyebrow {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    /* Halve cel regelhoogte i.p.v. `normal`: de eyebrow mat 0.349 cel en
       schoof daarmee élk element eronder van het halve-celritme af. Nu
       kost hij precies een halve cel, net als op desktop. */
    line-height: calc(var(--cell) * 0.5);
    margin-top: calc(var(--cell) * 0.5);
    padding: 0 calc(var(--cell) * 0.5); /* zelfde 0.5-cel kantlijn als .container */
    text-align: left;
    font-size: max(13px, calc(var(--cell) * 0.28)); /* floor dekt ook 320px */
    letter-spacing: calc(var(--cell) * 0.06);
  }
  /* Mobiel blijft de hero links uitgelijnd (eigen ontwerp, geen verkleinde
     desktop): de getypte regel start dus links in het gereserveerde vak. */
  .fig-eyebrow-slot > * {
    justify-self: start;
  }
  .fig-eyebrow-cursor {
    /* proportional to the mobile eyebrow font-size (0.28 vs 0.375 cell) */
    width: calc(var(--cell) * 0.105);
    height: calc(var(--cell) * 0.105);
    margin-left: calc(var(--cell) * -0.011);
    vertical-align: calc(var(--cell) * 0.048);
  }
  /* Mobiel: 8 kolommen. De kop is GEMETEN op 0.551 cel — dan is
     "Automatiseer wat schaalt." 7 cellen breed, dus precies van de ene
     0.5-cel kantlijn tot de andere (0.5 → 7.5), zonder over te lopen.
     Regelafstand 0.5 cel → twee regels = 1 cel, dezelfde krappe
     verhouding (0.91) als op desktop. */
  .fig-headline {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-top: calc(var(--cell) * 0.5);
    padding: 0 calc(var(--cell) * 0.5);
    text-align: left;
    font-size: calc(var(--cell) * 0.551);
    line-height: calc(var(--cell) * 0.5);
    letter-spacing: calc(var(--cell) * -0.005);
  }
  .fig-body {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: calc(var(--cell) * 0.5) calc(var(--cell) * 0.5) 0;
    width: auto;
    text-align: left;
    font-size: max(14px, calc(var(--cell) * 0.34)); /* floor voor 320px */
    line-height: max(calc(var(--cell) * 0.5), 1.4em); /* 2 regels = 1 cel */
    letter-spacing: calc(var(--cell) * 0.007);
  }
  .fig-body .fig-kernvraag {
    margin-top: calc(var(--cell) * 0.4);
    font-size: max(17px, calc(var(--cell) * 0.42));
    line-height: 1.35;
  }
  /* Mobiel is de hero gewone flow; halve cellen als ritme, met een
     leesbaarheidsvloer op de mono-regels. */
  /* Op 8 kolommen past één rij van vier niet: de bodykolom is 7 cellen en
     "BLAUWDRUK" alleen al vraagt er bijna twee. Twee rijen van twee is
     het rustigste beeld en houdt de rij binnen de kantlijnen (0.5 → 7.5).
     De vlakken zijn hier 0.75 cel hoog (≈37px); de ::after eronder tilt
     het raakvlak over de 44px-duimmaat zonder het beeld te veranderen —
     de tussenruimte van 0.5 cel (≈24px) is ruim genoeg dat de twee
     raakvlakken elkaar niet overlappen. */
  .fig-body .fig-b-reeks {
    /* Mee verkleind met de desktop (Bram: "veel te groot"): 0.75 → 0.55
       cel hoog. Het blok kost daarmee 0.55 + 0.25 + 0.55 = 1.35 cel
       i.p.v. 1.75, dus de hero past ruimer binnen zijn 18 cellen. De
       ::after-hitlaag uit de basisregel rekent met --bvlak-h en tilt het
       raakvlak hier van ~27px terug naar 44px — één formule, twee maten,
       dus ze kunnen niet uit de pas lopen. */
    --bvlak-h: 0.55;
    margin-top: calc(var(--cell) * 0.5);
    /* DE KOLOM IS GEKOZEN, DE GAP VOLGT — zie "DE STEEKREGEL" verderop in
       deze file (boven .container). De rij staat in .container, die op
       mobiel 100% − 1 cel is: 7 cellen breed, startend op cel 0,5. Met
       `1fr 1fr` en de raakvlak-gap hieronder (17,19px op 390 = 0,3526 cel)
       werd de kolom (7 − 0,3526)/2 = 3,3237 cel en begon de rechter op
       0,5 + 3,3237 + 0,3526 = 4,1763 — ruim naast de lijn op 4,5.
       Twee kolommen van 3 cel met een hele cel ertussen tellen op tot
       precies 7: de steek wordt 4, dus de chips beginnen op 0,5 en 4,5.
       GECONTROLEERD DAT DE TEKST PAST: de breedste chip ("02 BLAUWDRUK")
       vraagt inclusief padding 108,7px op 390 en 101,8px op 320; een kolom
       van 3 cel is daar 146,3px resp. 120px. Ruim genoeg, ook op 320. */
    grid-template-columns: repeat(2, minmax(0, calc(var(--cell) * 3)));
    justify-content: stretch;
    /* DE RIJafstand IS DE RAAKVLAKMAAT, NIET EEN SMAAKWAARDE. Twee rijen
       van 0.55 cel krijgen elk een ::after die het raakvlak op 44px tilt;
       stond de gap op 0.25 cel (12px op 390), dan lagen die twee
       hitlagen ~5px over elkaar heen en kon een tik tussen de rijen de
       verkeerde link raken (gemeten op 390 én 320). De rijafstand is daarom
       minstens 44px − de hoogte van het vlak: precies genoeg om de twee
       raakvlakken te laten aansluiten zonder te overlappen, en op geen
       enkele schermbreedte meer dan dat. Het blok kost daarmee 1.45 cel
       op 390 en 1.65 op 320 — nog altijd minder dan de 1.75 van hiervoor,
       dus de hero blijft binnen zijn 18 cellen.
       ALLEEN de rij: deze maat is een fysieke duimmaat en heeft niets met
       het raster te maken, dus hij mag de kolomsteek hierboven niet meer
       bepalen. Daarom row-gap en column-gap nu apart. */
    row-gap: max(
      calc(var(--cell) * 0.3),
      calc(44px - var(--cell) * var(--bvlak-h, 0.55))
    );
    column-gap: var(--cell);
  }
  .fig-b-vlak {
    gap: calc(var(--cell) * 0.12);
    padding: 0 calc(var(--cell) * 0.18);
    font-size: max(11px, calc(var(--cell) * 0.2));
    letter-spacing: calc(var(--cell) * 0.03); /* kapitalen, zie .btn mobiel */
    border-radius: calc(var(--cell) * 1.2) calc(var(--cell) * 1.2) 0
      calc(var(--cell) * 1.2);
  }
  /* Op 8 kolommen is een cel 4x zo breed; het nummer mag daar iets
     kleiner staan t.o.v. het woord dan op desktop. */
  .fig-b-nr {
    font-size: max(9px, calc(var(--cell) * 0.13));
  }
  .fig-b-naam {
    margin-right: calc(var(--cell) * -0.03);
  }
  .fig-body .fig-knop-rij {
    margin-top: calc(var(--cell) * 0.5);
    justify-content: flex-start; /* mobiel links, zoals de rest van de hero */
  }
  /* Kwart cel, net als op desktop — het bijschrift hoort bij de knop.
     Ook de regel zelf kost een kwart cel, zodat het blok op het raster
     blijft en de hero binnen zijn 18 cellen.
     KAPITALEN EN VOLLE INKT KOMEN UIT DE BASISREGEL MEE; KORPS EN TRACKING
     NIET. Op 8 kolommen is de bodykolom 7 cellen (341 px op 390, 280 px op
     320) en de regel telt 36 tekens. Met het desktopkorps (11px) en de
     desktoptracking (0.06 cel = 2.93 px op 390) meet hij 343 px — dat is
     bréder dan de kolom en de regel zou afbreken naar twee, wat het
     kwart-cel-ritme en daarmee de 18 cellen van de mobiele hero breekt.
     Hier dus de maten die .mono-label mobiel al gaf: 0.22 cel met een
     10px-vloer en 0.04 cel tracking → 302 px, ruim binnen 341. Kapitalen
     kosten in een monospace niets extra, dus die kunnen wél gewoon mee. */
  .fig-body .fig-knop-noot {
    margin-top: calc(var(--cell) * 0.25);
    line-height: calc(var(--cell) * 0.25);
    font-size: max(10px, calc(var(--cell) * 0.22));
    letter-spacing: calc(var(--cell) * 0.04);
    /* Geen text-indent: die compenseert de tracking van een GECENTREERDE
       regel. Mobiel is de hero links uitgelijnd, dus een indent zou de
       regel juist van de 0.5-cel kantlijn af duwen. */
    text-indent: 0;
  }
  /* Mobile portrait stays in flow so a larger person cannot cover the CTA. */
  .fig-photo {
    position: relative;
    top: auto;
    left: auto;
    margin: calc(var(--cell) * 0.5) calc(var(--cell) * 0.5) 0 auto;
    flex: none;
    width: auto;
    height: calc(var(--cell) * 8.5);
  }
  .fig-photo img {
    width: 100%;
    height: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   DESIGN-CONTRACT — gedeelde sectieklassen voor de homepage
   ────────────────────────────────────────────────────────────────────
   Zelfde huisstijl als altijd: celraster (--cell), de negen gronden
   (zie de palettabel hieronder), logo-silhouet (drie ronde hoeken, scherp rechtsonder),
   Plus Jakarta Sans + JetBrains Mono voor blueprint-labels.

   STAPELORDE binnen .fig-canvas (dat is de stacking context, z 2):
     z -1  .sectie::before   — de grond (kleurvlak van de sectie)
     z  0  .fig-canvas::before — HET raster, één laag over de hele pagina
     z  0  .ambient-veld     — de binaire waterval (sticky canvas)
     z  1  .sectie > *       — alle content: altijd boven het veld
   Een sectie tekent dus GEEN eigen raster meer. Dat was precies de bron
   van de chaos: elke sectie begon zijn raster bij zijn eigen bovenhoek en
   legde er een eigen radiaal masker overheen, dus sprongen de lijnen bij
   iedere sectiegrens en ging de dekking van hard naar zacht. Er is nu één
   raster met één nulpunt en één dekking (zie .fig-canvas::before).
   .sectie krijgt BEWUST GEEN z-index: zodra de sectie zelf een stacking
   context wordt, valt het ambient veld onder de grond en is het nergens
   meer zichtbaar. Wil een tekstzware sectie het veld wegnemen, gebruik
   dan .sectie--dekkend (grond naar z 0 — dekt daar ook het raster af).
   Om dezelfde reden: zet data-reveal op de KINDEREN van een sectie, niet
   op de .sectie zelf (de reveal-transform maakt er een stacking context
   van zolang hij nog niet onthuld is).
   ════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ── Sectie: verticaal ritme in cellen + grond + raster ──────────── */
  .sectie {
    --grond: transparent; /* kleur van het sectievlak */
    --inkt: #222222; /* tekstkleur op deze grond */
    --steun: #38332c; /* accent-/lijnkleur op deze grond */
    --knop-grond: #222222; /* de ÉNE knopkleur van deze grond */
    --knop-inkt: #ffffff;
    --vlak-tint: var(--t-cream); /* vulling van een genest vlak op deze grond */
    /* --raster-lijn/--raster-sterkte gelden alleen nog voor .grond-raster
       in geneste vlakken; het paginaraster is één laag met één inkt. */
    --raster-lijn: #222222;
    --raster-sterkte: 1;
    position: relative; /* GEEN z-index — zie stapelorde hierboven */
    padding: calc(var(--cell) * 3) 0; /* hele cellen */
    color: var(--inkt);
    /* ── ELKE STROOK MINSTENS ÉÉN SCHERM ────────────────────────────
       Bram (2026-09): "zorg ervoor dat iedere strook iig de hoogte
       heeft van 1 scherm altijd". Zelfde mechaniek als .fig-hero:
       100svh (de STABIELE schermmaat — geen sprong als de mobiele
       adresbalk in- of uitschuift), omhoog afgerond op een hele cel in
       het @supports-blok hieronder. De kale 100svh blijft als eerste
       declaratie staan voor browsers zonder round(); daar valt alleen
       de snap weg, niet de schermvulling.

       min-height WINT van de height: calc-size()-snap verderop, dus
       beide takken leveren een veelvoud van --cell:
         · inhoud past in een scherm  → min-height = round(100svh)
         · inhoud is hoger            → height = round(up, auto)
       De kleurgrens valt dus in beide gevallen op een rasterlijn.

       DE INHOUD IN BALANS: een strook die van 0.75 scherm naar 1 scherm
       groeit, zou zijn tekst bovenaan laten plakken met een leeg gat
       eronder. Flex-kolom + justify-content: center verdeelt het
       overschot gelijk boven en onder de inhoud, binnen de padding van
       de sectie. Veilig, want de hoogte is per definitie >= de inhoud
       (zie hierboven), dus er kan niets buiten beeld gecentreerd raken.
       .sectie::before (de grond), .decor en .maatvoering zijn absoluut
       gepositioneerd en worden dus geen flex-item; de <style>-tags van
       de secties zijn display:none en tellen ook niet mee.

       ── HET CENTREREN AFGEROND OP HELE CELLEN (2026-09) ──────────
       Gemeten probleem: van de 152 inhoudselementen stond 41% op een
       HALVE cel in plaats van op een hele. De oorzaak zit precies
       hier. De vrije ruimte die deze centrering verdeelt is
         sectiehoogte − padding − hoogte van .container,
       en alle drie stonden op HELE cellen. Is dat verschil een ONEVEN
       aantal cellen, dan is de helft ervan een halve cel en landt de
       bovenkant van het hele tekstblok — en daarmee elke regel
       eronder — een halve cel naast de hoofdlijn.
       De oplossing is niet de centrering afschaffen (dan plakt de
       tekst weer bovenaan met een gat eronder) maar de drie maten op
       een EVEN aantal cellen afronden: even − even − even = even, en
       de helft daarvan is per definitie weer een heel aantal cellen.
       Daarom staat hieronder overal `round(up, …, var(--cell) * 2)`
       in plaats van `round(up, …, var(--cell))`.
       De padding is al even: 3+3 (basis), 4+4 (--ruim), 2+2 (--strak),
       mobiel 1+1 / 2+2 / 1+1. De sectie wordt hoogstens één cel hoger
       dan voorheen, en de kleurgrens blijft dus op een cellijn — een
       even aantal cellen is ook een heel aantal cellen. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
  }
  @supports (min-height: round(up, 100svh, 10px)) {
    /* --sectie-extra telt er een EVEN aantal cellen bij op; zie
       .sectie--extra-2 / --extra-4 hieronder voor het waarom van "even".
       --sectie-min-cel (2026-09, vijfde ronde) is een VLOER IN CELLEN
       naast de schermmaat, voor een strook waarvan de maat uit haar eigen
       meetkunde volgt en niet uit het scherm: Bewijs moet 24 cel zijn
       (plaatuitloop 6 + evenveel ruimte eronder + kop + kaarten + 2 cel
       overhang, zie Bewijs.tsx), op 16:10 én op 16:9 — met --extra alleen
       zou dat op 1440×900 --extra-4 zijn en op 1920×1080 --extra-6, twee
       klassen voor één maat. max() houdt de eis "minstens één scherm"
       intact: de vloer telt alleen als hij hoger is dan het scherm. Even
       houden, om dezelfde reden als --sectie-extra. */
    .sectie {
      min-height: max(
        calc(
          round(up, 100svh, calc(var(--cell) * 2)) +
          var(--cell) *
          var(--sectie-extra, 0)
        ),
        calc(var(--cell) * var(--sectie-min-cel, 0))
      );
    }
  }
  /* Alle directe kinderen boven het ambient veld */
  .sectie > * {
    position: relative;
    z-index: 1;
  }

  /* ── SECTIEGRENZEN OP HET RASTER ───────────────────────────────────
     Feedback Bram (aug 2026): "de rasters van de secties gaan nog verre
     van goed … de kleuren beginnen soms halfin, niet op de lijnen."
     Klopt: de sectiehoogte was padding (hele cellen) + inhoud (vrije
     tekst), dus elke sectie eindigde ergens midden in een cel en dáár
     wisselde de grondkleur.

     MECHANISME — waarom deze en niet een andere:
       (a) min-height in hele cellen  → valt om zodra één tekst langer
           wordt dan de aanname; de grens springt dan alsnog los.
       (b) padding-bottom laten opvullen → vereist de resthoogte, en die
           kent CSS niet.
       (c) calc-size() + round()  ← GEKOZEN.
     `height: calc-size(auto, round(up, size, var(--cell)))` laat de
     sectie eerst gewoon intrinsiek meten (`size` = de auto-hoogte) en
     rondt die daarna omhoog af naar de eerstvolgende hele cel. De
     sectie kan dus nooit te klein worden — hij groeit alleen, met
     hoogstens één cel, en dat overschot landt als extra ruimte onder de
     inhoud. Hij werkt bij élke tekstlengte, bij elke schermbreedte en op
     mobiel (waar --cell = 100cqw/8), zonder JS en zonder per-sectie
     getallen in de markup.

     Omdat de hero op y = 0 begint én zelf een heel aantal cellen hoog is
     (18 op desktop), staat iedere volgende sectiegrens daarmee
     automatisch op een cellijn: hele cellen stapelen tot hele cellen.

     VANGNET: calc-size() is Chromium-only. Browsers zonder ondersteuning
     slaan het @supports-blok over en krijgen exact het gedrag van
     hiervoor (auto-hoogte) — geen kapotte layout, alleen geen snap. */
  @supports (height: calc-size(auto, round(up, size, 10px))) {
    .fig-canvas .sectie {
      height: calc-size(auto, round(up, size, calc(var(--cell) * 2)));
    }
    /* ── DE INHOUDSKOLOM OOK OP HELE CELLEN ──────────────────────────
       Zonder deze regel breekt de verticale centrering hierboven het
       halve-celritme van de tekst: de vrije ruimte is dan
       sectiehoogte − padding − inhoudshoogte, en die inhoudshoogte is
       een willekeurig aantal pixels. De helft daarvan schuift élke
       regel van de sectie met een paar pixels van het raster af.

       Snap je de inhoudskolom óók op een hele cel, dan is de vrije
       ruimte een heel aantal cellen en de helft ervan dus altijd een
       heel of half aantal: elke regel landt weer op het halve-celritme
       waar de regelafstanden op ontworpen zijn. De extra ruimte (max
       één cel) valt ONDER de inhoud, binnen de kolom, en is onzichtbaar.

       Bewust alleen op .container en niet op ".sectie > *": .decor,
       .vsch-decor en .maatvoering staan absoluut met inset: 0, en een
       height zou daar de bottom-inset overrulen en de decorlaag
       platslaan. Elke sectie gebruikt .container als inhoudskolom. */
    .fig-canvas .sectie > .container {
      height: calc-size(auto, round(up, size, calc(var(--cell) * 2)));
    }
  }

  /* De grond: onder het ambient veld, boven de cream basis */
  .sectie::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grond);
  }
  /* GEEN .sectie::after meer — het raster is één laag op .fig-canvas.
     Een sectie die het raster niet wil, is er dus ook niet meer; die
     modifier bestaat alleen nog als no-op zodat oude markup niets breekt. */
  .sectie--zonder-raster {
    /* no-op: er is geen sectieraster meer */
  }
  /* Dekkende ondergrond: de grond schuift bóven het ambient veld (en
     daarmee ook boven het raster), zodat niets de leesbaarheid stoort. */
  .sectie--dekkend::before {
    z-index: 0;
  }

  /* ══ HET STROKENGEVOEL — DRIE METRONOMEN, DRIE MIDDELEN ════════════
     Bram (2026-09): "het is al een stuk beter, maar het zijn wel steeds
     stroken, dat gevoel moet er echt nog meer vanaf."

     GEMETEN WAAROM, op 1440×900 (cel 45px, scherm = 20 cellen):
       1  ELKE STROOK IS EXACT ÉÉN SCHERM. Zeven van de negen secties
          maten precies 20 cellen = 900px; de andere twee 22. De volgende
          kleurgrens kwam dus altijd op dezelfde scrollafstand.
       2  ELKE GRENS IS EEN KAARSRECHTE LIJN over alle 32 kolommen.
       3  ALLE INHOUD STAAT GECENTREERD, dus in élke strook vindt je oog
          hetzelfde op dezelfde plek. Gemeten vrije ruimte (hoogte −
          padding − inhoud) per sectie: verschuiving 2, vormen 2,
          systematiseren 0, bewijs 2, essentie 0, spreken 4, schrijven 4,
          bram 2, contact 0 cellen.
     Drie middelen, hieronder, elk tegen één van die drie. Ze staan
     BEWUST niet op alle grenzen: een accent dat overal staat is de
     nieuwe metronoom. Wie er wat draagt staat in de secties zelf.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── MIDDEL 1 · DE STROOK ALS PLAAT, NIET ALS BAND ────────────────
     HIER STOND DE TRAPGRENS (.sectie--trap): de grond van de volgende
     strook stak een paar cellen omhoog over een deel van de breedte.
     Bram over die ronde: "hebt nu alleen vierkanten toegevoegd aan de
     stroken". Weg, met klasse en al.

     WAT ER VOOR IN DE PLAATS KWAM — zijn eigen woorden: "of de stroken
     misschien toch meer iets in kaders gaan zetten, zie ook screen, niet
     allemaal, maar wel wat". De grond niet van rand tot rand, maar als een
     afgeronde plaat met de cream ondergrond eromheen zichtbaar. Een band
     is een band doordat hij de volle breedte pakt; trek de grond naar
     binnen en de sectie is een OBJECT dat op de cream pagina ligt.

     DE VORM IS HET MERK, OP ARCHITECTONISCHE SCHAAL: drie ronde hoeken
     en een scherpe hoek RECHTSONDER — exact dezelfde border-radius als
     .decor-vorm, .doorloop en het beeldmerk zelf, alleen dan met een
     radius in cellen in plaats van procenten. Niet roteren, niet
     spiegelen.

     DE MATEN
       --kader-x  hoeveel cellen de grond aan ELKE zijde naar binnen komt
                  (1). Hele cellen, dus de zijkant van de plaat valt op een
                  rasterlijn.
       --kader-r  hoekradius in cellen (3).

     ── 4 EN 5 CELLEN INZET WAREN TE VEEL, EN DAT IS BRAMS OORDEEL ────
     De vorige ronde zette de inzet van 2 op 4 cellen (Essentie en
     Systematiseren) en 5 (WaarBegint), en versmalde daarvoor de
     inhoudskolom van 26 naar 22 respectievelijk 18 cellen. Dat was
     geoptimaliseerd op de meetlat (breedte met een kleursprong), niet op
     het oog. Bram: "De breedte van de vlakken van de strook Systematiseren
     is zelfs te smal nu. De strook waarin staat 'van kunnen naar kiezen,
     van productie naar bedoeling' is ook nog veel te smal … bij 'Waar
     begint het bij jou' is de strook ook weer veel te smal."
     Gemeten wat hij zag op 1440: een plaat van 24 cel (1080px) met 180px
     cream per zijde, en in Systematiseren blokken van 22 in plaats van 26
     cel — 12,5 % van de breedte weggegeven aan een marge.

     NU: de inhoudskolom is weer .container (26 cel, kolom 3 → 29) — op
     álle drie de plaatstroken, want de breedte gaat vóór het middel — en
     de plaat loopt van kolom 1 tot 31. Dat is 30 van de 32 cellen: 45px
     cream per zijde op 1440 in plaats van 180, en TWEE cellen lucht tussen
     plaatrand en eerste letter in plaats van één. Wat een plaat van 30
     cellen nog toevoegt boven een band zijn de hoeken: de cream staat
     alleen nog in de vier hoeken van de strook en in twee smalle
     kantlijnen. Dat is genoeg om de strook als object te lezen en te
     weinig om hem smal te maken.
     .container-plaat en .container-smal zijn daarmee zonder gebruiker en
     verwijderd; de rasters in Systematiseren.tsx, Begrip.tsx en
     Blauwdruk.tsx rekenen weer met W = 26 (binnenwerks 23), zie de
     steekregel boven .container.

     ── RADIUS 3 EN NIET 5 — DE DRUPPELS BEPALEN DAT ──────────────────
     Sinds deze ronde geldt voor élke vorm die een grens kruist: één vorm,
     één kleur, nergens afgesneden (zie .doorloop). De druppel hangt met
     zijn scherpe hoek op kolom 28 (.doorloop--kantlijn) en moet dus op
     het RECHTE stuk van de plaatrand vallen — anders tekent hij over de
     cream hoek heen, of hij moet geknipt worden, en een knip is per
     definitie "afgebroken". Met inzet 1 loopt het rechte stuk van
     kolom 1 + R tot 31 − R. R = 3 geeft 4 → 28: precies tot de
     druppelhoek. Bij R = 5 (de vorige waarde) zou die hoek in de boog
     vallen. .doorloop--plaatrand — de knip die dat hiervoor repareerde —
     is daarom verwijderd, mét de --boven-variant.
     De onderrand van een plaat heeft linksonder dezelfde boog en
     rechtsonder de scherpe hoek; een druppel die UIT een plaat hangt
     (grens 04 en 06) valt met kolom 9 → 28 en 14 → 28 ruim binnen het
     rechte stuk 4 → 31.
     Op 1440 is R = 3 een boog van 135px op een plaat van 1350px breed.
     Dat is minder boog dan de 225px van hiervoor, maar het silhouet
     blijft onmiskenbaar: drie ronde hoeken en één scherpe.

     DE CIRKELTOETS (blijft gelden, maar bindt niet meer). Noem m de
     afstand van de plaatrand tot de eerste letter en p de afstand van de
     plaattop tot de eerste basislijn, in cellen. Een punt ligt binnen de
     plaat zodra (R − m)² + (R − p)² <= R². Met m = 2 en R = 3 is de
     eerste term 1, dus de toets klopt voor elke p >= 3 − √8 = 0,17 cel —
     en geen plaat heeft zijn eerste letter zo dicht op de rand
     (Systematiseren 2,8 cel, Essentie 4,5, WaarBegint 4).

     BEWUST GEEN VERTICALE INZET. De sectiegrens moet op een cellijn
     blijven vallen en elke strook moet minstens één scherm hoog blijven
     (beide harde eisen); zou de plaat ook boven en onder inspringen, dan
     kwam er tussen elke twee secties een cream band — een nieuwe
     metronoom in plaats van minder.

     NIET OP ALLE STROKEN, EN NOOIT TWEE NAAST ELKAAR. Twee platen onder
     elkaar geven een cream gleuf over de volle breedte, en dat is weer
     een streep. Drie stroken dragen er een: Systematiseren, Essentie en
     WaarBegint.

     SPECIFICITEIT: deze regel MOET ná .sectie::before staan — gelijke
     specificiteit, dus de laatste in de bron wint, en anders overschrijft
     de inset: 0 hierboven de inset hieronder.

     MOBIEL: op 8 kolommen is een cel vier keer zo breed; inzet en radius
     gaan daar terug naar 0,5 en 1 (zie de mobiele query). */
  .sectie--kader::before {
    inset: 0 calc(var(--cell) * var(--kader-x, 1));
    border-radius: calc(var(--cell) * var(--kader-r, 3))
      calc(var(--cell) * var(--kader-r, 3)) 0
      calc(var(--cell) * var(--kader-r, 3));
  }

  /* ── DE PLAAT DIE OVER DRIE STROKEN LIGT (2026-09, vierde ronde) ────
     Bram, over Systematiseren: "ik zou willen dat je dat blauwe vlak hoger
     laat beginnen, dus eigenlijk laat vallen op de strook van 'Ik
     systematiseer. Ik spreek. Ik schrijf.' Dat hij daarboven al begint,
     twee blokken daarboven bijvoorbeeld of drie, en dat die blauwe
     ronding dan ook al zo begint en dan gewoon naar beneden loopt — en
     dat hij op de strook eronder, wat hij daar ook overheen loopt, dat
     blauwe vlak. Die strook ligt dan als het ware over de andere stroken
     heen."

     Dat is de druppelregel toegepast op de plaat zelf: één vorm, één
     kleur (--g-blauwdruk), doorlopend, nergens afgesneden. De plaat
     steekt --kader-boven cellen omhoog de strook erboven in, mét zijn
     ronde bovenhoeken dáár, en --kader-onder cellen omlaag de strook
     eronder in, mét zijn ronde hoek linksonder en zijn scherpe hoek
     rechtsonder dáár. De SECTIEGRENZEN veranderen niet: de plaat is
     decor, de grens is de grens, en die blijft op een cellijn.

     DRIE STUKKEN, ÉÉN KLEUR, EN WAAROM HET ER DRIE ZIJN. De grond van een
     sectie is .sectie::before op z −1, en alle gronden staan in
     DOM-volgorde: een latere grond tekent over een eerdere. De plaat
     omhoog laten steken is dus gratis — ::before krijgt top: −3 cel en
     tekent over de grond van DrieVormen, die eerder in de boom staat.
     Omlaag steken kan zo NIET: de grond van Bewijs komt ná deze plaat en
     zou de uitloop bedekken. Daarom is de uitloop een eigen element IN
     Bewijs (.plaat-uitloop, direct kind, z −1, ná de grond van Bewijs
     in de boom, dus erbovenop) — precies het mechanisme van elke
     druppel. De naad tussen ::before en de uitloop ligt op de
     sectiegrens en overlapt 1px, zodat er op een fractionele celmaat
     (42,69px op 1366) geen haarlijn cream tussen kan vallen.

     DE MATEN, GEMETEN. Omhoog 3 cel: de slotregel van DrieVormen ("Drie
     vormen van hetzelfde werk.") eindigt op élk desktopformaat 5,4 cel
     boven grens 03 (--inhoud-laag met --ruim: onderrand − 4 cel padding
     − 0,5 regel − 0,9 snap), dus 3 cel omhoog houdt 2,4 cel lucht tot de
     tekst — Brams "twee of drie".

     OMLAAG WAS 8 CEL EN IS SINDS DE VIJFDE RONDE 6. Bram: "de manier
     waarop dat blauwe vlak nu eindigt vind ik nog niet zo fraai. Te ver
     doorlopen op Resultaten. Bedenk iets beters." En zijn regel voor élke
     overhang deze ronde: "als je zo'n element van een strook erboven op
     een strook eronder legt, moet die strook eronder meer ruimte krijgen"
     — hier uitgelegd als: de eerste regel onder een overhang staat
     minstens zo ver onder de voet van die overhang als de overhang diep
     is. GEMETEN op de bevroren bouw van vóór deze ronde: de eyebrow
     RESULTATEN stond 12,3 cel onder grens 04 (1440×900) en 10,3
     (1920×1080), dus 4,3 resp. 2,3 cel onder een plaatvoet van 8 — op
     16:9 minder dan een derde van de diepte. Dat is wat hij zag.
     Twee dingen tegelijk: de uitloop naar 6 cel (de acht liet het blad
     lomp in de klei hangen; op 6 zit de gevulde zeshoek er nog ruim op,
     zie .bwz-zeshoek) én Bewijs op een vloer van 24 cel (--sectie-min-cel,
     zie Bewijs.tsx), zodat de eyebrow op 12,5 staat: 6,5 cel onder de
     voet, meer dan de 6 die de regel vraagt, op 16:10 én 16:9. "Iets
     beters" zit verder in de as: de lijn buigt door de gevulde zeshoek
     op de uitloop en verlaat daar de plaat — de voet van de plaat is nu
     de plek waar de machine op de as staat, niet zomaar een rand (zie
     AsLijn in Bewijs.tsx). De scherpe hoek rechtsonder en de ronde hoek
     linksonder blijven. Op de plaat, in die uitloop, ligt de zeshoek
     (zie .zeshoek).

     WAT ER DAARDOOR MOEST WIJKEN. De taupe druppel op grens 03 (die 3
     cel de plaat in zakte) is weg: hij zou nu een taupe vorm midden op
     de blauwe plaat zijn, drie cellen onder de plaatrand, en nergens
     meer aan de taupe strook vastzitten. De decorvormen van DrieVormen
     zijn kleiner gemaakt zodat ze boven de plaatrand blijven — een
     decorvorm die onder de plaat verdwijnt is afgesneden.

     DE HEADER EN DE WATERVAL kijken naar [data-hdr] en [data-field] en
     kiezen de laatste in DOM-volgorde die het meetpunt dekt. De plaat
     is een pseudo-element en kan die attributen niet dragen; daarom
     staat in Systematiseren een onzichtbare .plaat-rand over de 3 cel
     boven de sectie en draagt .plaat-uitloop in Bewijs ze zelf. Zo
     wisselt de knop in de header op de plaatrand en niet 3 cel later op
     de sectiegrens. */
  .sectie--kader-door::before {
    top: calc(var(--cell) * var(--kader-boven, 3) * -1);
    border-bottom-left-radius: 0;
  }
  /* ── DE PLAAT DIE ALLEEN OMHOOG STEEKT (2026-09, zesde ronde) ────────
     Bram: "De strook 'Waar begint het bij jou' moet net zoals
     Systematiseren vallen over de strook 'Over Bram'." Dezelfde 3 cel
     omhoog, mét de ronde bovenhoeken in de klei van Bram Markus — maar
     zónder uitloop eronder: dit is de laatste plaat, en zij sluit de
     pagina af met haar eigen ronde onderhoek links en scherpe hoek
     rechts (daaronder verschijnt de footer). De onderradius blijft dus
     staan; alleen de top verhuist. De klei druppel die op grens 09 hing
     is daarmee overbodig: de plaat is zelf de kruisende vorm. */
  .sectie--kader-boven::before {
    top: calc(var(--cell) * var(--kader-boven, 3) * -1);
  }
  .sectie > .plaat-rand {
    position: absolute;
    left: calc(var(--cell) * var(--kader-x, 1));
    right: calc(var(--cell) * var(--kader-x, 1));
    top: calc(var(--cell) * var(--kader-boven, 3) * -1);
    height: calc(var(--cell) * var(--kader-boven, 3));
    pointer-events: none;
  }
  /* ── DE UITLOOP IS SINDS DE ZESDE RONDE 3 CEL (was 6, daarvoor 8) ──
     Bram: "Afstand tussen het blauwe vlak van Systematiseren aan de
     onderzijde: 3 blokken minder hoog maken. Je ziet nu te lang niets."
     GEMETEN vóór deze ronde op 1440×900: plaatvoet op 6 cel onder grens
     04, de eyebrow van de volgende strook op 12,5 — 6,5 cel klei met
     alleen de zeshoek erin. Nu: voet op 3, en de strook eronder begint
     haar tekst op 6 (--inhoud-hoog, zie Bewijs.tsx), dus 3 cel klei onder
     de voet — precies zoveel als de overhang diep is, wat Brams eigen
     regel voor overhangen vraagt, en niet méér. De zeshoek is mee
     verkleind (3,6 cel doos) en staat met zijn onderste punt 0,55 cel
     boven de voet (zie .bwz-zeshoek in Bewijs.tsx). */
  .sectie > .plaat-uitloop {
    position: absolute;
    z-index: -1;
    top: -1px;
    left: calc(var(--cell) * var(--kader-x, 1));
    right: calc(var(--cell) * var(--kader-x, 1));
    height: calc(var(--cell) * var(--kader-onder, 3) + 1px);
    background: var(--plaat-kleur, var(--g-blauwdruk));
    border-radius: 0 0 0 calc(var(--cell) * var(--kader-r, 3));
    pointer-events: none;
  }

  /* ── MIDDEL 2 · WISSELENDE HOOGTES ─────────────────────────────────
     Brams eerdere harde eis blijft staan: elke strook is MINSTENS één
     scherm. Variëren kan dus alleen naar boven, en dat kost scroll —
     iets waar hij eerder last van had. Daarom zuinig: drie stroken, acht
     cellen samen (360px op 1440×900), 2.8% van de paginahoogte.

     EVEN AANTAL CELLEN, GEEN UITZONDERING. De verticale centrering
     hierboven deelt (hoogte − padding − inhoud) door twee. Alle drie
     staan op een even aantal cellen, dus de helft is weer een heel
     aantal. Een ONEVEN toeslag maakt van dat verschil een oneven getal
     en zet daarmee élke regel van de sectie een halve cel naast de
     hoofdlijn — precies de fout die de vorige ronde eruit haalde. */
  .sectie--extra-2 {
    --sectie-extra: 2;
  }
  .sectie--extra-4 {
    --sectie-extra: 4;
  }

  /* ── MIDDEL 3 · DE INHOUD HOOG, MIDDEN OF LAAG ─────────────────────
     Het enige van de drie dat GEEN pixel extra scroll kost, en daarom
     het middel dat het breedst is ingezet.

     WAAROM DIT VEILIG IS VOOR HET RASTER. De centrering hierboven is
     bewust op een even aantal cellen afgerond, want de helft van een
     oneven aantal cellen is een halve cel en dan landt het hele
     tekstblok een halve cel naast de hoofdlijn. Bij flex-start en
     flex-end vervalt die deling — er wordt niets meer gehalveerd — maar
     dan moet de PADDING zelf op hele cellen staan. Dat doet ze:
     3+3 (basis), 4+4 (--ruim), 2+2 (--strak), mobiel 1+1 / 2+2 / 1+1.
     flex-start zet de inhoud dus op sectietop + padding (heel), flex-end
     op sectieonder − padding − inhoudshoogte, en die inhoudshoogte is
     door de calc-size()-snap op .container ook een heel aantal cellen.
     Beide takken landen dus op een cellijn — zonder de deling door twee
     is er zelfs één afrondingsstap mínder dan bij center.

     HOEVEEL HET VERSCHUIFT is de helft van de vrije ruimte, dus 1 cel
     bij vrij=2 en 2 cellen bij vrij=4. Op een strook met vrije ruimte 0
     (systematiseren, essentie, contact) doet dit middel per definitie
     niets; die drie houden center en dragen hun variatie in de grens. */
  .sectie--inhoud-hoog {
    justify-content: flex-start;
  }
  .sectie--inhoud-laag {
    justify-content: flex-end;
  }
  /* Ritme-varianten — allemaal in hele cellen */
  .sectie--ruim {
    padding: calc(var(--cell) * 4) 0;
  }
  .sectie--strak {
    padding: calc(var(--cell) * 2) 0;
  }

  /* Ankers landen net onder de vaste header */
  .sectie[id] {
    scroll-margin-top: calc(var(--cell) * 2);
  }
  /* #contact staat aan het einde van de content: ernaartoe scrollen duwt
     de pagina helemaal uit, waardoor de vaste footer wordt onthuld. */
  #contact {
    scroll-margin-top: calc(100vh - var(--footer-h, 100vh));
  }

  /* ══ DE NEGEN GRONDEN — HET DEFINITIEVE PALET (2026-09) ═════════════
     Door Bram gekozen na de kleurronde. Dit is de enige plek waar de
     kleuren van de site staan; secties zetten alleen de klasse.

     WAT ER VERANDERDE T.O.V. DE VORIGE RONDE
     · CREAM VERLIEST ZIJN BLAUW. Het lijnwerk was #254FAD; dat is nu de
       warme houtskool #38332C en de knop is #222222. Blauw bestaat nog
       maar op twee plekken: als steun op blauwdruk (#254FAD, het
       bouwtekening-karakter) en als knopvlak (#0000EE).
     · GEEL → MOSTERD. #FCB42A was te schel naast de warme aardtonen;
       #DDA61F houdt dezelfde rol maar zakt een toon dieper. De klasse
       heet daarom .grond-mosterd (data-hdr/data-field = "mosterd").
     · KNOP EN STEUN ZIJN LOSGEKOPPELD. Tot nu toe was --knop-grond altijd
       gelijk aan --steun. Vijf gronden (blauwdruk, klei, olijf, aubergine,
       steen) krijgen nu een FELLERE knop terwijl het lijnwerk zijn diepe
       tint houdt: de knop is het enige punt op de pagina waar de kleur
       schreeuwt, de rest blijft rustig.
     · VIER GRONDEN VERVALLEN: lila, roze, peach en nachtgroen. Ze werden
       door geen enkele sectie meer gebruikt; hun header-themas en hun
       AmbientField-regels zijn mee opgeruimd.

     TABEL — klasse · grond · inkt · steun · knop · data-hdr
     ┌──────────────────┬─────────┬─────────┬─────────┬─────────┬───────────┐
     │ .grond-cream     │ #FEF7EE │ #222222 │ #38332C │ #222222 │ cream     │
     │ .grond-mosterd   │ #DDA61F │ #222222 │ #0A2E0E │ #0A2E0E │ mosterd   │
     │ .grond-taupe     │ #BEB38E │ #222222 │ #3A3218 │ #3A3218 │ taupe     │
     │ .grond-blauwdruk │ #C7E5F2 │ #222222 │ #254FAD │ #0000EE │ blue      │
     │ .grond-klei      │ #D9A38C │ #222222 │ #5B2415 │ #D92B00 │ klei      │
     │ .grond-olijf     │ #B5AC6B │ #222222 │ #2E2A0E │ #B01E00 │ olijf     │
     │ .grond-aubergine │ #C9A8D4 │ #222222 │ #4A1D5C │ #E10098 │ aubergine │
     │ .grond-steen     │ #E6E2DA │ #222222 │ #333840 │ #0000EE │ steen     │
     │ .grond-donker    │ #222222 │ #FEF7EE │ #FEF7EE │ #FEF7EE │ footer    │
     └──────────────────┴─────────┴─────────┴─────────┴─────────┴───────────┘
     Knopinkt is overal #FFFFFF, behalve op .grond-donker (#222222).

     NEGEN GRONDEN OP ELF SECTIES: cream en klei komen elk twee keer terug
     (hero + Schrijven, resp. Bewijs + Bram Markus) en staan nooit naast
     elkaar. De volgorde over de pagina:
       hero cream → mosterd → taupe → blauwdruk → klei → olijf →
       aubergine → cream → klei → steen → footer donker

     GEBRUIK IN EEN SECTIE — de drie horen bij elkaar:
       <section class="sectie grond-klei" data-hdr="klei" data-field="klei">
     · class      → de grond + al zijn tokens (inkt, steun, knop, raster)
     · data-hdr   → SiteHeader kopieert dit naar data-cta op de header; de
                    naam MOET gelijk zijn aan de laatste kolom hierboven.
     · data-field → AmbientField kiest hierop zijn tint.
     .grond-donker draait de rollen om en gebruikt data-hdr="footer".
     Een grond toevoegen = één blok hier, één regel in deze tabel, één
     .fig-header[data-cta="…"]-paar hierboven (plus de twee mobiele regels
     in de media query) en één regel in FIELDS in AmbientField.tsx.

     CONTRAST (WCAG, gemeten — niet geschat)
       grond      inkt/grond  steun/grond  knopinkt/knop  knopvlak/grond
       cream         14.97       11.77         15.91          14.97
       mosterd        7.23        6.77         14.89           6.77
       taupe          7.60        6.08         12.73           6.08
       blauwdruk     12.06        5.68          9.40           7.12
       klei           7.25        5.60          4.89            2.23 <
       olijf          6.88        6.24          6.93            2.99 <
       aubergine      7.60        6.19          4.51            2.16 <
       steen         12.32        9.13          9.40            7.27
       donker        14.97       14.97         14.97           14.97
     Norm: 4.5:1 voor kleine tekst, 3:1 voor een grafisch vlak. "<" = onder
     de norm. Alle inkt- en steunwaarden halen het ruim; de afwijkingen
     zitten uitsluitend in de drie FELLE knoppen, en die zijn een bewuste
     keuze van Bram (gemeld, niet stilletjes gecorrigeerd):
       · KLEI IS GECORRIGEERD (2026-09, Bram: "doe die #D92B00"). De knop
         was #FF3B00 en haalde met witte tekst 3.57:1 — onder de norm van
         4.5. Hij is nu #D92B00: 4.89:1 met wit, en als vlak 2.23:1 tegen
         de grond. Visueel nauwelijks te onderscheiden van het oude
         vermiljoen, wel leesbaar volgens de norm. Daarmee halen alle
         knoppen op de site de tekstnorm; alleen de VLAK-verhouding blijft
         op drie gronden onder de 3:1 en dat is de bewuste keuze hieronder.
       · #B01E00 op olijf — wit erop 6.93:1 (ruim goed), het VLAK haalt
         2.99:1 tegen de grond: een haar onder de 3:1 voor grafische
         elementen.
       · #E10098 op aubergine — wit erop 4.51:1 (net boven de norm), het
         vlak 2.16:1 tegen de grond.
     Het knopvlak-criterium telt alleen als de knop zonder rand of tekst
     herkend moet worden; hier draagt hij altijd witte kapitalen én een
     notch, dus de knop is nooit onvindbaar.

     RASTER-STERKTE: 1 op de heldere gronden (cream, steen), 1.6 op
     blauwdruk (daar is de lijn het onderwerp), 0.7 op de middentonen —
     daar is #222 op volle sterkte te hard en hakt hij het vlak in
     blokken — en 0.5 op donker. */
  .grond-cream {
    --grond: var(--g-cream);
    --inkt: #222222;
    --steun: #38332c;
    --knop-grond: #222222;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 1;
    --vlak-tint: var(--t-cream);
  }
  /* Mosterd — steun én knop zijn donkergroen (#0A2E0E): wit op mosterd
     valt weg, donkergroen op mosterd haalt 6.77:1. */
  .grond-mosterd {
    --grond: var(--g-mosterd);
    --inkt: #222222;
    --steun: #0a2e0e;
    --knop-grond: #0a2e0e;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 0.7;
    --vlak-tint: var(--t-mosterd);
  }
  .grond-taupe {
    --grond: var(--g-taupe);
    --inkt: #222222;
    --steun: #3a3218;
    --knop-grond: #3a3218;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 0.7;
    --vlak-tint: var(--t-taupe);
  }
  /* Blauwdruk — Bram (aug 2026): "blauwdruk ook alleen wel zwarte tekst
     erin". De lopende tekst en de koppen zijn dus #222 (12.06:1 i.p.v.
     5.68:1); het BOUWTEKENING-karakter blijft blauw: --steun (lijnwerk,
     maatvoering, eyebrow-accent) en de rasterlijn. De KNOP is sinds de
     definitieve ronde het elektrische #0000EE — feller dan het lijnwerk,
     zodat de knop uit de tekening springt in plaats van erin op te gaan. */
  .grond-blauwdruk {
    --grond: var(--g-blauwdruk);
    --inkt: #222222;
    --steun: #254fad;
    --knop-grond: #0000ee;
    --knop-inkt: #ffffff;
    --raster-lijn: #254fad;
    --raster-sterkte: 1.6; /* lijnwerk iets zichtbaarder */
    --vlak-tint: var(--t-blauwdruk);
  }
  /* Klei · olijf · aubergine — middentonen met een zeer donkere steun uit
     dezelfde kleurfamilie, zodat de steun leest als de schaduw van de
     grond en niet als een tweede kleur. De KNOP komt daar sinds de
     definitieve ronde bovenop als het enige felle vlak in de sectie. */
  .grond-klei {
    --grond: var(--g-klei);
    --inkt: #222222;
    --steun: #5b2415;
    --knop-grond: #d92b00;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 0.7;
    --vlak-tint: var(--t-klei);
  }
  .grond-olijf {
    --grond: var(--g-olijf);
    --inkt: #222222;
    --steun: #2e2a0e;
    --knop-grond: #b01e00;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 0.7;
    --vlak-tint: var(--t-olijf);
  }
  .grond-aubergine {
    --grond: var(--g-aubergine);
    --inkt: #222222;
    --steun: #4a1d5c;
    --knop-grond: #e10098;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 0.7;
    --vlak-tint: var(--t-aubergine);
  }
  /* Steen — bijna-neutraal vlak. Het lijnwerk was #0000EE en is nu de
     leisteen #333840: het elektrische blauw is daar voortaan alléén de
     knop, en dat is precies waarom hij op dit vlak zo knalt. */
  .grond-steen {
    --grond: var(--g-steen);
    --inkt: #222222;
    --steun: #333840;
    --knop-grond: #0000ee;
    --knop-inkt: #ffffff;
    --raster-lijn: #222222;
    --raster-sterkte: 1;
    --vlak-tint: var(--t-steen);
  }
  .grond-donker {
    --grond: var(--g-donker);
    --inkt: #fef7ee;
    --steun: #fef7ee;
    --knop-grond: #fef7ee;
    --knop-inkt: #222222;
    --raster-lijn: #fef7ee;
    --raster-sterkte: 0.5;
    --vlak-tint: var(--t-donker);
  }

  /* ══ DECOR — HET MERKSILHOUET ALS SECTIEDECOR ═══════════════════════
     Bram (aug 2026): "de vormen in die geeltint op de achtergrond met de
     lijnen zijn wel echt heel vet, alleen dat zou ik dan op meer plaatsen
     willen en dan ook de vormen van het logo gebruiken subtiel, dat mag
     ook in de andere secties gebruikt worden."

     Dit is de herbruikbare versie van wat in Verschuiving.tsx als
     .vsch-*-klassen begon: een decorlaag met overlopende merkvormen die
     op de sectiegrens worden afgesneden, zodat het kleurvlak groter voelt
     dan het scherm. Twee soorten: GEVULD (een tint van de eigen grond) en
     LIJN (dunne contour in de steunkleur).

     ── ZO GEBRUIK JE HET IN EEN SECTIE ──────────────────────────────
       <section className="sectie grond-klei" data-hdr="klei" data-field="klei">
         <div className="decor" aria-hidden="true">
           <span
             className="decor-vorm decor-vorm--rechts"
             style={{ "--decor-maat": 16, "--decor-y": -3 } as React.CSSProperties}
           />
           <span
             className="decor-vorm decor-vorm--lijn decor-vorm--links"
             style={{ "--decor-maat": 11, "--decor-y": 4 } as React.CSSProperties}
           />
         </div>
         <div className="container"> … inhoud … </div>
       </section>

     REGELS VOOR DE SECTIE-AGENT
     · .decor is een DIRECT kind van .sectie en staat vóór de inhoud.
       Zet er nooit data-reveal op: dit is grond, geen inhoud.
     · aria-hidden="true" — het is decor, geen betekenis.
     · Twee, hooguit drie vormen per sectie. Het moet subtiel blijven;
       de tekst is de hoofdrol. Wissel gevuld en lijn af.
     · Kleuren NOOIT met de hand zetten: de vulling komt uit --inkt en de
       lijn uit --steun van de grond waarop de sectie staat, dus elke vorm
       klopt automatisch op elke grond (ook op de twee donkere, waar --inkt
       cream is en de vorm dus lichter wordt in plaats van donkerder).
     · --decor-maat = diameter in CELLEN (desktop). Op mobiel schaalt de
       laag zichzelf naar 50%, dus je hoeft maar één getal te kiezen.
     · Optioneel: --decor-hang (0–0.6, standaard 0.4) = welk deel van de
       vorm buiten de sectie hangt, --decor-sterkte (standaard 5) = de
       dekking van de vulling in procenten, en --decor-y = verschuiving
       in cellen ten opzichte van het midden van de sectie.
     · De vorm is het beeldmerk: drie ronde hoeken, scherpe hoek RECHTSONDER
       (border-radius 50% 50% 0 50%). Niet roteren. Spiegelen mag sinds de
       vierde ronde op sommige plekken (Bram: "om het spannend te maken"),
       zie .doorloop--spiegel; de decorvormen zelf blijven ongespiegeld.

     ── DE HARDE REGEL SINDS 2026-09: DECOR HANGT ALLEEN OPZIJ ────────
     Er waren zes plaatsingen (--linksboven, --rechtsboven, --linksonder,
     --rechtsonder, --links, --rechts). De vier HOEKPLAATSINGEN zijn
     verwijderd. Aanleiding is een fout die Bram in een screenshot
     aanwees: "hier stopt de grijze cirkel rechtsonder terwijl die lichte
     cirkel erboven er niet op aansluit".

     DE OORZAAK, gemeten op de grens klei → steen (1440×900, cel 45):
       · de klei strook had .decor-vorm--lijn.decor-vorm--rechtsonder van
         16 cellen, links op kolom 22,40, die op y 11070 werd afgekapt;
       · de steen strook eronder had .decor-vorm--rechtsboven van 14
         cellen, links op kolom 23,60, die op diezelfde y begon.
     .decor clipt zijn kinderen op de sectie (overflow: clip), dus beide
     vormen werden op de grens vlak afgesneden. Twee vormen met een ANDERE
     diameter (16 tegen 14) en een ANDERE x (22,40 tegen 23,60), pal op
     elkaar: je oog leest ze als één vorm die niet aansluit. Dezelfde
     fout stond op de grens klei → olijf (18 tegen 12, x 21,20 tegen
     24,80) en, minder opvallend, op nog drie grenzen waar een hoekvorm
     vlak werd afgekapt met níéts aan de andere kant.

     DE STRUCTURELE OPLOSSING, en niet "de getallen gelijk trekken":
       EEN DECORVORM RAAKT NOOIT EEN SECTIEGRENS.
       WIL EEN VORM DE GRENS OVER, DAN IS HET EEN .doorloop-PAAR.
     Daarom nog maar twee plaatsingen, allebei ZIJDELINGS (--links en
     --rechts), plus --decor-y om de vorm hoger of lager in de strook te
     zetten. Een .doorloop is per constructie één vorm: beide helften
     dragen dezelfde drie getallen en de twee randen die ze delen zijn per
     definitie dezelfde y. Daar KAN dus niets meer op stuk lopen, en het
     auditscript van deze ronde controleert het bovendien numeriek.

     HOUD DE DIAMETER MINSTENS 2 CELLEN ONDER DE SECTIEHOOGTE. Een strook
     is minstens 20 cellen (desktop) resp. 18 (mobiel, 100svh op 8
     kolommen); een --links-vorm staat verticaal gecentreerd, dus bij
     maat + 2 <= sectiehoogte blijft er boven én onder ruimte over en
     raakt hij geen grens. Zinvol bereik: 8 → 18.

     TECHNIEK: de laag ligt op z -1 (boven de grond, ónder het raster en
     het ambient veld) en clipt zijn kinderen, dus een vorm kan nooit
     horizontale scroll veroorzaken. `.sectie > *` zet position/z-index op
     élk direct kind; de selector `.sectie > .decor` is specifieker en
     wint daarvan. Op een .sectie--dekkend staat de grond zelf op z 0;
     daar gaat de decorlaag mee omhoog, anders zou hij eronder verdwijnen. */
  .decor,
  .sectie > .decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
  }
  .sectie--dekkend > .decor {
    z-index: 0;
  }

  .decor-vorm {
    --decor-maat: 12; /* diameter in cellen */
    --decor-d: calc(var(--cell) * var(--decor-maat) * var(--decor-schaal, 1));
    --decor-o: calc(var(--decor-d) * var(--decor-hang, 0.4));
    position: absolute;
    width: var(--decor-d);
    height: var(--decor-d);
    /* Het beeldmerk: cirkel met één vierkant kwadrant rechtsonder. */
    border-radius: 50% 50% 0 50%;
    background: color-mix(
      in srgb,
      var(--inkt, #222222) calc(var(--decor-sterkte, 5) * 1%),
      transparent
    );
  }
  /* Lijnvariant: dezelfde vorm als contour in de steunkleur. */
  .decor-vorm--lijn {
    background: none;
    border: 1.5px solid
      color-mix(in srgb, var(--steun, #222222) 30%, transparent);
  }
  /* Plaatsing — nog maar twee, allebei zijdelings; zie de harde regel
     hierboven. --decor-y verschuift de vorm in cellen ten opzichte van
     het midden van de strook (positief = omlaag) en schaalt mee met de
     decorlaag, zodat de vormen niet allemaal op dezelfde hoogte staan —
     dat zou zelf weer een metronoom zijn. Houd |--decor-y| klein genoeg
     dat de vorm de grens niet alsnog raakt:
       |y| <= (sectiehoogte − maat) / 2 − 1. */
  .decor-vorm--links,
  .decor-vorm--rechts {
    top: calc(50% + var(--cell) * var(--decor-y, 0) * var(--decor-schaal, 1));
    transform: translateY(-50%);
  }
  .decor-vorm--links {
    left: calc(var(--decor-o) * -1);
  }
  .decor-vorm--rechts {
    right: calc(var(--decor-o) * -1);
  }

  /* ══ DE ZESHOEK — DE MACHINE UIT HET BEELDMERK (2026-09, vierde ronde) ═
     Bram: "Ik zou ook willen dat de hexagon wordt toegevoegd, die mis ik
     nu." Het beeldmerk is cirkel + zeshoek + as; in de merkuitleg op
     /about staat de zeshoek voor de machine ("gebouwd, herhaalbaar,
     koppelbaar") en de cirkel voor de mens. Daarom staat hij hier alleen
     op de BLAUWDRUKPLAAT van Systematiseren — de strook waar de machine
     wordt getekend en gebouwd — en niet op de stroken die over spreken,
     schrijven en de persoon gaan; die houden de cirkel.

     DE GEOMETRIE IS UIT HET MERK GEHAALD, NIET UIT HET HOOFD: de zes
     hoekpunten zijn de gemeten hoekpunten uit public/figma/beeldmerk.svg
     (dezelfde die about/page.tsx als HEX_POINTS tekent), in de
     0–1000-ruimte van het merk, en het element (Zeshoek.tsx) tekent ze
     als één SVG-polygoon. Nagemeten op een raster van het merk: de
     zeshoek raakt de as-strook op 0,409 en 0,591 van de hoogte, precies
     waar die hoekpunten hem leggen. Punt boven en onder, vlakke zijden
     links en rechts, breedte : hoogte = 183 : 207.

     TWEE BEHANDELINGEN, DEZELFDE ALS BIJ DE CIRKELS:
       --lijn   contour van 1,5px (non-scaling) in de steunkleur op 30 %,
                als .decor-vorm--lijn — de machine als constructielijn,
                rechtsboven op de plaat, naast de maatvoering.
       --vlak   gevuld in één bestaande tint (--zes-kleur) — de machine
                als object, op de uitloop van de plaat in Bewijs, waar de
                plaat 8 cel over de klei ligt en niets anders staat.
     Kruist een zeshoek een grens, dan is hij aan beide kanten identiek
     (één kleur); de twee hier staan allebei binnen de plaat en kruisen
     niets. --zes-maat is de breedte van de doos in cellen (de doos is
     192 : 216, iets ruimer dan de zeshoek zelf, zodat de lijn niet tegen
     de rand van de SVG loopt). Op mobiel zet de plek zelf een eigen
     --zes-maat: de --decor-schaal van de cirkels staat op .decor en een
     zeshoek staat daar niet in (gemeten: met die factor als vanzelfsprekend
     aangenomen was de contour op 390px 4 cel breed en liep hij het beeld
     uit). z −1: onder het raster en de waterval, boven de gronden. */
  .zeshoek,
  .sectie > .zeshoek {
    --zes-maat: 6;
    position: absolute;
    z-index: -1;
    width: calc(var(--cell) * var(--zes-maat));
    height: auto;
    overflow: visible;
    pointer-events: none;
  }
  .zeshoek--lijn {
    color: color-mix(in srgb, var(--steun, #222222) 30%, transparent);
  }
  .zeshoek--vlak {
    color: var(--zes-kleur, var(--vlak-tint, #ffffff));
  }

  /* ── DE VIER HOEKPLAATSINGEN — ALLEEN NOG VOOR DE INHOUDSPAGINA'S ──
     Ze staan hier nog omdat /about, /blog, /privacy en /terms ze
     gebruiken. Daar is de val hierboven er niet: die pagina's hebben één
     inhoudssectie met één decorlaag, dus er is geen buurstrook die op
     dezelfde grens een tweede vorm neerzet en er kan dus niets "niet
     aansluiten". OP DE HOMEPAGE ZIJN ZE VERBODEN — daar raakt elke
     sectie aan twee andere en hoort elke grensoverschrijding een
     .doorloop-paar te zijn.
     LET OP MET --linksboven: van een vorm die links-boven uithangt zie je
     juist het kwadrant RECHTSONDER, en dat is de hoek die vierkant is;
     een gevulde vorm wordt daar een rechthoek in plaats van het
     merkteken. Gebruik daar de lijnvariant of een andere hoek. */
  .decor-vorm--linksboven {
    top: calc(var(--decor-o) * -1);
    left: calc(var(--decor-o) * -1);
  }
  .decor-vorm--rechtsboven {
    top: calc(var(--decor-o) * -1);
    right: calc(var(--decor-o) * -1);
  }
  .decor-vorm--linksonder {
    bottom: calc(var(--decor-o) * -1);
    left: calc(var(--decor-o) * -1);
  }
  .decor-vorm--rechtsonder {
    bottom: calc(var(--decor-o) * -1);
    right: calc(var(--decor-o) * -1);
  }

  /* ══ DE DRUPPEL — ÉÉN VORM DIE EEN GRENS KRUIST (2026-09, derde ronde) ═
     Bram, letterlijk: "Het gaat me niet om de kleuren — die tinten vind
     ik echt fantastisch zoals het nu is. Waar het mij om gaat is dat die
     vormen niet doorlopen maar afgebroken worden. Die vormen moeten juist
     door de stroken heen meelopen. Als je een vorm hebt die in de
     bovenste strook én in de onderste strook van toepassing is, moet die
     doorlopen, en er moet bepaald worden wat de kleur is. En dat is nu
     niet zo. Bij 'Ik systematiseer. Ik spreek. Ik schrijf.' staat nu een
     blauwe ronde vorm onderin, en die sluit niet aan op het stuk van
     Systematiseren. Dat mag niet."

     WAT ER STOND: tien grenzen, tien behandelingen. Boven de lijn een
     gevulde koepel, eronder alleen een contour (grens 03 — "het beste
     moment van de pagina" volgens de vorige ronde, het duidelijkste
     voorbeeld van wat fout was volgens Bram); boven een tint van de eigen
     inkt, eronder de buurkleur op 38 tot 70 procent (05, 06, 08, 09); een
     vorm die op de plaatrand werd afgeknipt (.doorloop--plaatrand); een
     mengtint die van geen van beide stroken was (#F3ECE4 op mosterd,
     grens 01 — "een grijs vlak bij de verschuiving, en dat slaat nergens
     op"). Elk paar droeg keurig dezelfde drie maten, maar de VULLING
     wisselde op de lijn, en dat is precies wat het oog als "afgebroken"
     leest: de vorm houdt op waar de kleur ophoudt.

     DE REGEL, IN ÉÉN ZIN: een vorm die een grens kruist is één vorm met
     één kleur, aan beide kanten van de lijn identiek, en wordt nergens
     afgesneden.

     HOE DAT HIER IS UITGEVOERD — DE DRUPPEL
     · De grond van de strook ERBOVEN zakt in het merksilhouet de strook
       eronder in. De kleur is dus altijd een --g-*-token dat aan beide
       kanten al bestaat: boven de lijn ís de vorm de strook. Geen mengsel
       (--door-vulling is weg: elke waarde onder 100 mengt de eigen grond
       erdoor en levert een derde tint op, en dat was het grijze vlak).
     · Het is daarmee ÉÉN element: een .doorloop--onder in de onderste
       strook, met --door-kleur op de grond van de bovenste. Er is geen
       bovenhelft meer die gelijk gehouden moet worden — de bovenhelft is
       de strook zelf. Vijf rondes lang was de naad tussen twee helften de
       bron van fouten (andere maat, andere x, andere vulling); die hele
       klasse van fouten bestaat nu niet meer. De enige uitzondering is
       grens 01, zie hieronder.
     · WAAROM OMLAAG EN NIET OMHOOG. Het zichtbare deel van een druppel is
       de ONDERKANT van het merkteken: links de boog, rechts de rechte
       flank en de scherpe hoek — het deel van het silhouet dat het van
       een cirkel onderscheidt. Een koepel (de kleur van de strook eronder
       die omhoog rijst) laat alleen twee ronde hoeken zien en leest als
       cirkel; dat was de "blauwe ronde vorm" op grens 03.
     · POSITIE: de scherpe hoek staat op élke grens op dezelfde kolom, 28
       — één cel binnen de rechterkantlijn van de inhoud (29) en precies
       het einde van het rechte stuk van een plaatrand (zie .sectie--kader:
       inzet 1, radius 3). Zo kan het oog het patroon lezen: rechts de
       hoek, links de boog, alleen de maat wisselt. Dat is
       .doorloop--kantlijn, met --door-rand als het ene getal (4 cel van de
       rechterrand van de strook).
     · MAAT EN DIEPTE variëren per grens — schaalvariatie is ritme,
       behandelingsvariatie was ruis: 14 tot 26 cel breed, 3 tot 12 cel
       diep. De afweging staat per grens bij het element in de sectie.
     · NIETS SNIJDT DE VORM. Geen plaatrandknip meer: op een plaat valt de
       druppel binnen het rechte stuk van de rand (kolom 4 → 28), en naar
       links steekt geen enkele druppel buiten het beeld — de breedste
       (26 cel, grens 07) staat op kolom 2 → 28. Dat wordt na elke bouw
       nagemeten (druppels.mjs in de meetmap): per druppel de kolommen
       op de grenslijn tegen het rechte stuk van de plaat eronder.
     · CONTRAST: de druppel mag achter tekst doorlopen, want #222 haalt op
       alle negen gronden de norm (tabel bij .grond-cream). De ene grond
       waarop dat niet geldt, --g-donker, komt op geen grens meer voor:
       grens 10 (steen → footer) is weer een schone kleurwissel — de
       footeronthulling zelf, precies zoals op de site die nu online staat
       en die Bram daar mooi vindt.

     GRENS 01 DRAAGT SINDS DE VIERDE RONDE GÉÉN VORM MEER. Het merkteken
     van de hero was tot dan een paar (wit, 24 cel, 4,5 cel de mosterd in)
     en liep onder het portret door; Bram wilde de benen van het portret
     "echt op die gele rand" afgesneden zien. Het teken staat nu binnen
     de hero, op die gele rand, en kruist niets (zie .fig-merk). Grens 01
     is daarmee een schone kleurwissel met het portret en het teken die
     er allebei precies op eindigen — een grens waar de INHOUD de vorm
     is. Het enige paar dat nog bestaat is de lijn van 14 cel op grens 06
     (Essentie boven, Spreken onder); controle.mjs telt de paren en meldt
     elke bovenhelft zonder partner.
     GRENS 03 EN 04 DRAGEN SINDS DEZELFDE RONDE GEEN DRUPPEL MEER: daar
     is de blauwdrukplaat zelf de kruisende vorm — 3 cel omhoog de taupe
     in, 8 cel omlaag de klei in (zie .sectie--kader-door).

     WAT ER NAAST DE DRUPPEL NOG DE GRENS OVER GAAT, en waarom dat mag
     · INHOUD die haar eigen vlak meebrengt: de twee panelen op grens 02,
       de twee casevlakken op grens 05, het Onschaalbaar-vel op grens 07.
       Elk is een heel, dekkend vlak dat over de naad ligt — niet
       afgesneden, één kleur. Ze liggen bovendien óp de druppel van hun
       eigen strook, dus wat je ziet is een strook waarvan de vloer
       doorzakt, met een stuk inhoud erop.
     · LIJNEN: de contour van 40 cellen over drie stroken (Spreken,
       .doorloop--vrij, Brams eigen suggestie) en de contour van 14 die
       rechts uit Spreken omhoog de olijf plaat in loopt (zijn verzoek:
       "dat de lijn die je rechts in het paarse vlak ziet dan ook doorloopt
       in het groene vlak daarboven"). Allebei nu één kleur over de hele
       lengte: de inkt op 20 %, niet meer de steunkleur van de eigen strook
       — die wisselde op de lijn (#2E2A0E boven, #4A1D5C onder) en was dus
       stilletjes twee kleuren (en waarom 20: zie .doorloop--lijn).
     · HET PORTRET IN DE HERO wordt op grens 01 door de lijn afgesneden.
       Dat is een bronkwestie (foto-bram.png stopt bij de dijen) en blijft
       zoals het is — zie .fig-photo.

     ── WAAROM TWEE HELFTEN OOIT NODIG WAREN, EN NU NOG ÉÉN KEER ────────
     .decor clipt zijn kinderen op de sectie (overflow: clip), dus een vorm
     dáárin kan de grens niet passeren. Eén los element dat vanuit sectie
     A naar BENEDEN hangt valt ónder de grond van sectie B: die grond
     staat op dezelfde z (−1) maar komt later in de boom. Een druppel is
     daarom een element IN de onderste strook, dat boven de grens niets
     hoeft te tekenen (daar is hij de strook) en zichzelf op de lijn
     afknipt. Alleen de hero heeft een eigen bovenhelft (zie boven).

     ── DE MATEN ──────────────────────────────────────────────────────
     --door-maat  diameter in cellen.
     --door-uit   hoeveel van die cellen ONDER de grens vallen.
     --door-rand  afstand van de scherpe hoek tot de rechterrand van de
                  strook, in cellen (4 = kolom 28). Staat op .fig-canvas en
                  wordt geërfd; mobiel 1 (kolom 7 van 8).
     --door-x     linkerpositie in cellen — alleen nog voor een vorm zonder
                  --kantlijn (er is er geen meer; --rechts en --vrij
                  rekenen vanaf de rechterrand).

     ── MOBIEL ────────────────────────────────────────────────────────
     Een druppel schaalt op 8 kolommen met 0,25: dezelfde FRACTIE van de
     breedte als op desktop (26 van 32 cel wordt 6,5 van 8), zodat hoek én
     boog in beeld blijven — op de oude 0,5 zou elke druppel boven 16 cel
     breder zijn dan het scherm en als balk lezen. (Het merkteken van de
     hero was hier tot de vierde ronde een .doorloop met een eigen schaal;
     het is nu .fig-merk met een eigen mobiele maat.)

     ── STAPELING ─────────────────────────────────────────────────────
     z −1, precies als .decor: boven de sectiegronden, ónder het raster
     en de binaire waterval (beide z 0) en ver onder de tekst (z 1). Het
     raster loopt er zichtbaar overheen en de waterval valt eroverheen —
     de vorm blijft achtergrond en kan geen letter raken.

     ── GEEN HORIZONTALE SCROLL, OOK NIET OP 390px ────────────────────
     .fig-canvas heeft overflow: clip; wat links of rechts buiten een
     sectie hangt wordt daar afgesneden en kan geen scrollbreedte maken.
     Een druppel met --kantlijn kan links buiten het beeld vallen (mobiel,
     als de maat groter is dan het scherm) — dat is een negatieve left en
     maakt nooit scrollbreedte.

     ── GEBRUIK ───────────────────────────────────────────────────────
       // eerste kind van de ONDERSTE strook
       <span className="doorloop doorloop--onder doorloop--kleur doorloop--kantlijn"
             aria-hidden="true"
             style={{ "--door-maat": 16, "--door-uit": 3,
                      "--door-kleur": "var(--g-taupe)" }} />
     De kleur is het token van de strook ERBOVEN. */
  .doorloop,
  .sectie > .doorloop {
    --door-maat: 10; /* diameter in cellen */
    --door-uit: 5; /* daarvan ONDER de grens */
    --door-x: 4; /* linkerpositie in cellen */
    --door-s: var(--door-schaal, 1);
    --door-d: calc(var(--cell) * var(--door-maat) * var(--door-s));
    --door-o: calc(var(--cell) * var(--door-uit) * var(--door-s));
    /* DE LINKERPOSITIE STAAT IN EEN VARIABELE zodat --kantlijn hem kan
       overschrijven. 100cqw en niet 100%: een sectie is altijd de volle
       breedte van .fig-root, dus de twee zijn hier gelijk, en 100cqw is de
       maat die ook in een inset() zou werken. */
    --door-l: clamp(
      0px,
      calc(var(--cell) * var(--door-x) * var(--door-x-schaal, 1)),
      max(0px, calc(100cqw - var(--door-d)))
    );
    position: absolute;
    z-index: -1;
    left: var(--door-l);
    width: var(--door-d);
    height: var(--door-d);
    /* Het beeldmerk: cirkel met één vierkant kwadrant RECHTSONDER —
       exact dezelfde ronding als .decor-vorm. Niet roteren. Spiegelen
       mag sinds de vierde ronde op sommige plekken: .doorloop--spiegel. */
    border-radius: 50% 50% 0 50%;
    pointer-events: none;
  }
  /* De helft BOVEN de grens (alleen nog het merkteken in de hero): hangt
     --uit cellen onder de onderrand van zijn eigen sectie en knipt dat
     deel er zelf weer af. Eigen clip-path in plaats van overflow op de
     sectie, zodat het op .fig-hero werkt, die geen .sectie is. */
  .doorloop--boven {
    bottom: calc(var(--door-o) * -1);
    clip-path: inset(0 0 var(--door-o) 0);
  }
  /* De druppel: (maat − uit) cellen boven de bovenrand van zijn sectie,
     alles bóven de grens weggeknipt — daar is hij de strook zelf. */
  .doorloop--onder {
    top: calc((var(--door-d) - var(--door-o)) * -1);
    clip-path: inset(calc(var(--door-d) - var(--door-o)) 0 0 0);
  }
  /* ── DE SCHERPE HOEK OP KOLOM 28 ───────────────────────────────────
     Rechts verankerd op --door-rand cellen van de rechterrand van de
     strook. DE DUBBELE SELECTOR IS NODIG: de basisregel hierboven staat
     als `.doorloop, .sectie > .doorloop` en die tweede telt twee klassen;
     een enkelvoudige `.doorloop--kantlijn` zou daarvan verliezen en de
     clamp op --door-x zou blijven staan. Zelfde les als bij --rechts.
     Geen clamp: een druppel die breder is dan wat er links van kolom 28
     over is, mag links buiten het beeld vallen (mobiel) — .fig-canvas
     clipt en een negatieve left maakt geen scrollbreedte. */
  .doorloop--kantlijn,
  .sectie > .doorloop--kantlijn {
    --door-l: calc(100cqw - var(--cell) * var(--door-rand, 4) - var(--door-d));
  }

  /* ── SPIEGELEN MAG, OP SOMMIGE PLEKKEN (2026-09, vierde ronde) ─────
     Bram: "Je mag die vorm van mij ook op sommige plekken in spiegelbeeld
     zetten om het spannend te maken, want nu is de vorm eigenlijk overal
     hetzelfde." Dat heft de regel "niet spiegelen" op die hierboven en
     bij .decor-vorm nog staat; roteren blijft uit den boze.
     Een gespiegelde druppel heeft de scherpe hoek LINKSonder, en met
     --kantlijn staat die hoek op --door-rand cellen van de LINKERrand:
     kolom 4 (het spiegelbeeld van 28 om het midden van de 32 kolommen),
     mobiel kolom 1. De boog zit dan rechts. Twee grenzen dragen hem, elk
     met een reden ter plekke (Spreken.tsx, WaarBegint.tsx); de rest
     houdt de hoek op 28, anders is het spiegelbeeld het nieuwe patroon.
     Op een plaat geldt spiegelbeeldig dezelfde eis: de vorm moet binnen
     het rechte stuk van de plaatrand blijven, dus met de hoek op 4 mag
     hij hoogstens 24 cel breed zijn (4 → 28).
     Dubbele selector, zelfde reden als bij --kantlijn: de regel hierboven
     telt twee klassen en wint anders. */
  .doorloop--spiegel,
  .sectie > .doorloop--spiegel {
    border-radius: 50% 50% 50% 0;
  }
  .doorloop--spiegel.doorloop--kantlijn,
  .sectie > .doorloop--spiegel.doorloop--kantlijn {
    --door-l: calc(var(--cell) * var(--door-rand, 4));
  }

  /* ── ÉÉN VORM OVER DRIE STROKEN ────────────────────────────────────
     Bram: "misschien zelfs vormen over drie stroken laten gaan
     bijvoorbeeld een lijn". Eén element in de ONDERSTE van de drie
     stroken, dat --door-op cellen boven zijn eigen bovenrand begint; het
     staat op z −1 vóór de gronden van de stroken erboven (die komen
     eerder in de boom) en tekent er dus overheen. Geen partner nodig, dus
     hij kan per definitie niet uit elkaar lopen — en één kleur over de
     hele lengte (--lijn, zie onder), precies de regel van deze ronde.
     Geen clip-path: hij mag juist door alles heen lopen. Verticaal wordt
     hij alleen door .fig-canvas (overflow: clip) begrensd. Houd hem op
     --lijn: een gevuld vlak van 40 cellen zou drie stroken decor
     uitgummen. */
  .doorloop--vrij,
  .sectie > .doorloop--vrij {
    top: calc(var(--cell) * var(--door-op, 20) * var(--door-s) * -1);
    bottom: auto;
    clip-path: none;
  }

  /* ── MAATKLASSE — ALLEEN VOOR DE MOBIELE SCHAAL ────────────────────
     Op desktop doet deze klasse niets; ze bestaat zodat de mobiele query
     (zie onderaan) de vorm over drie stroken apart kan schalen. (--xl,
     de klasse van het hero-merkteken, is met dat paar vervallen.) */
  .doorloop--mega {
    /* desktop: no-op, zie @media (max-width: 899.98px) */
  }

  /* ── RECHTS VERANKERD MET UITHANG (de twee lijnvormen) ─────────────
     --door-hang is dezelfde fractie als --decor-hang (0.4 standaard) en
     rekent met --door-d, dat al door --door-schaal is gehaald. Dubbele
     selector om dezelfde reden als bij --kantlijn. */
  .doorloop--rechts,
  .sectie > .doorloop--rechts {
    left: auto;
    right: calc(var(--door-d) * var(--door-hang, 0.4) * -1);
  }
  /* Spiegelbeeld daarvan: LINKS verankerd met uithang (zesde ronde, voor
     de vorm op grens 06 die vanuit Spreken de olijf in rijst). Zelfde
     dubbele selector, zelfde --door-hang. */
  .doorloop--links,
  .sectie > .doorloop--links {
    right: auto;
    left: calc(var(--door-d) * var(--door-hang, 0.4) * -1);
  }

  /* ══ DE KOEPEL — EEN RONDE VORM DIE DE GRENS OMHOOG OVER GAAT (2026-09,
     zesde ronde) ═══════════════════════════════════════════════════════
     Bram: "Ik zou veel meer willen dat die ronde vormen overlopen in de
     stroken eronder … misschien is de conclusie dat alleen organische
     vormen de strook erboven of eronder mogen overlappen als het een
     kleur betreft." En over de cream vorm op grens 08: "die grijze moet
     niet over de Bram Markus-strook gaan", maar "die ronding die je
     rechts ziet moet wel weer doorlopen naar boven."

     WAT ER MIS WAS MET DE DRUPPEL. Een druppel van 20 à 26 cel die 3 cel
     diep hangt laat vooral zijn RECHTE onderrand zien (bij 20 cel breed
     van kolom 18 tot 28, bij 26 van 15 tot 28) met links een stukje
     boog: dat leest als een flap, niet als een ronding. Gemeten op de
     grenzen 05, 07, 08 en 09 was het rechte stuk 10 tot 13 cel tegen 5
     tot 8 cel boog. Daarom zijn die vier druppels weg.

     WAT ERVOOR IN DE PLAATS KOMT is wat Bram aanwijst: de ronde
     decorvorm die in een strook al aan de zijkant uithangt, loopt door
     tot in de buurstrook. Zo'n vorm hangt met --rechts of --links deels
     buiten het beeld, dus wat er op de grens zichtbaar is, is per
     constructie een BOOG — de scherpe hoek rechtsonder van het silhouet
     valt buiten het beeld of ver van de grens. Dat is de "organische
     vorm" uit zijn conclusie.
     ÉÉN VORM, ÉÉN KLEUR: de decorvorm was een doorschijnende tint
     (--inkt op 5 à 9 % over de grond), en die tint zou op de grens van
     kleur wisselen. De koepel is daarom DEKKEND, in exact de kleur die
     de doorschijnende vorm op zijn eigen grond had — een color-mix van
     de inkt met de grond in dezelfde verhouding (--door-kleur, per vorm
     in de sectie genoemd; geen nieuwe hex). Gemeten: klei + 9 % inkt is
     #C99782, en dat is op olijf ΔE 21,7 en op klei ΔE 3,8 — boven de
     lijn dezelfde zachte vorm als altijd, onder de lijn een echte
     kleurvorm. #222 haalt op alle drie de koepeltinten ≥ 6,2:1.
     Bram liet open of de tint mag verkleuren door de laag eronder; hij
     verandert NIET, want dat is precies de druppelregel — een vorm die
     op de lijn van tint wisselt is twee vormen.

     HOE HET IS GEBOUWD: .doorloop--vrij (element in de ONDERSTE strook,
     --door-op cellen boven zijn eigen bovenrand, geen clip) plus
     --kleur voor de vulling en --rechts/--links voor de uithang. De as
     loopt op kolom 30 door de rechts hangende koepels heen; het segment
     van de strook erboven stopt daar `onder` zoveel cel boven de grens
     als de koepel hoog komt, en het segment eronder begint `boven`
     evenveel — zo staat de pijp altijd óp de koepel en niet eronder
     (zie AsLijn.tsx en de secties).
     Op mobiel staan de koepels niet (--desktop): op 8 kolommen dekt een
     halve koepel de halve kantlijn waar de as loopt, en de mobiele
     stroken hebben hun eigen kleinere decor. */
  .doorloop--desktop {
    /* desktop: no-op; mobiel verborgen, zie de mediaquery */
  }

  /* Behandeling KLEUR — de druppel. Dekkend, in het token van de strook
     erboven (of --t-cream voor het merkteken in de hero, zie boven).
     HIER STOND een color-mix van --door-kleur op --door-vulling procent
     met de eigen grond; elke waarde onder 100 maakte een derde tint. */
  .doorloop--kleur {
    background: var(--door-kleur, var(--g-cream));
  }
  /* Behandeling LIJN — alleen voor de twee vormen die als lijn een grens
     kruisen. In de INKT en niet in --steun: een lijn die door twee
     stroken loopt moet aan beide kanten dezelfde kleur hebben, en --steun
     is per strook anders. Zelfde 1.5px als .decor-vorm--lijn.

     20 % EN NIET 30 %, EN DAT IS GEMETEN MET HET LETTERMASKER. De vorm
     van 40 cellen loopt in Essentie onder de slotalinea door ("Automatiseren
     is maar de helft …", kolom 10,8 op die hoogte). Op olijf (181,172,107)
     geeft 30 % inkt onder een letter het pixel (133,127,83), en #222
     haalt daarop 3,91:1 — onder de 4,5 die kleine tekst vraagt (gemeten
     op 1440, zonder waterval; de mediaan van die regel is 6,88). Met de
     oude steunkleur van aubergine op 30 % was het 4,25:1: dezelfde
     misser, alleen nooit zo opgeschreven. Op 20 % wordt dat pixel
     (152,144,92) en haalt de regel 4,91:1; onder de openingsregel op de
     klei druppel (164,125,109 → 4,34) wordt het (180,137,119) en 5,14.
     De lijn blijft zichtbaar: 20 % inkt op olijf is ΔE 12 tegen de grond.
     De decorlijnen (.decor-vorm--lijn, --steun op 30 %) kruisen geen
     grens en staan nergens onder een regel; die blijven op 30. */
  .doorloop--lijn {
    background: none;
    border: 1.5px solid color-mix(in srgb, var(--g-donker) 20%, transparent);
  }

  /* ── Ambient veld (binaire waterval) ──────────────────────────────
     MOUNT: als EERSTE kind van .fig-canvas —
       <div class="fig-canvas"><div class="ambient-veld"><canvas …/></div> … </div>
     Een <canvas position:fixed> in <body> werkt NIET: .fig-canvas is
     dekkend cream op z 2 (dat dekvlak is precies wat de opendue-footer-
     reveal laat werken) en dekt zo'n body-laag volledig af. Binnen
     .fig-canvas zit het veld in de juiste stacking context: boven de
     sectiegronden (z -1), onder alle tekst (z 1).
     Sticky i.p.v. fixed omdat .fig-root een container-query-container is
     en een fixed kind aan zichzelf zou pinnen (= documenthoogte i.p.v.
     viewport). Sticky blijft net zo goed in beeld en kost niets extra.
     Het canvas zelf hoeft dan alleen width:100%; height:100% te zijn. */
  .ambient-veld {
    position: sticky;
    top: 0;
    z-index: 0;
    height: 100svh;
    margin-bottom: -100svh; /* neemt geen ruimte in de flow */
    pointer-events: none;
  }
  .ambient-veld canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── Raster-helper voor GENESTE VLAKKEN — UITGESCHAKELD ───────────
     Dit tekende een tweede raster binnen een .vlak, met het nulpunt op de
     linkerbovenhoek van dát vlak. Een vlak staat vrijwel nooit op een
     cellijn (kaartrasters hebben gaps, en verticaal ligt het vlak waar de
     tekst erboven het laat vallen), dus liep dit lijnwerk tot ~27px uit
     fase met het paginaraster: twee rasters over elkaar, net niet gelijk.
     Dat is precies wat het beeld onrustig maakt.

     KEUZE: weglaten in plaats van uitlijnen. Uitlijnen kan niet zonder de
     y-positie van het vlak, en die kent CSS niet (background-position kan
     alleen relatief aan het element zelf). Een .vlak is bovendien bewust
     een DEKKEND papiervlak dat op het raster ligt — een blad papier heeft
     zelf geen raster. Eén raster, één nulpunt, blijft zo overeind.
     De klasse blijft als no-op bestaan zodat bestaande markup
     (<div class="grond-raster"/> in Spreken/Schrijven) niets breekt. */
  .grond-raster {
    display: none;
  }

  /* ── Vlak: paper-achtig vlak MET het logo-silhouet ────────────────
     Huisregel: drie ronde hoeken, RECHTSONDER scherp.

     GEEN LIJN MEER OM EEN VLAK (2026-09). Bram: "wat me verder nog
     stoort is dat bij veel vlakken er een lijn omheen staat dat wil ik
     nergens." Dat draait een eerdere wens van hem om — .vlak--omlijnd
     bestond juist omdat hij "de blokken met de randen" terug wilde — en
     is nu integraal uitgevoerd: .vlak--omlijnd is verwijderd, de regel
     `.grond-cream .vlak` (die élk vlak op een cream grond een contour
     gaf) is verwijderd, en de stippelranden op de sys-blokken ook.

     WAT DIE LIJN DEED, MOET DE KLEUR NU DOEN. Een .vlak was dekkend
     #FEF7EE; op een cream grond viel het daardoor volledig weg en was
     alleen de rand nog zichtbaar. Haal je die weg, dan verdwijnt het
     vlak. Daarom staat er nu geen vaste cream meer maar --vlak-tint: de
     vlaktint die bij de grond hoort (de negen waarden staan bij
     --t-cream in :root). Op cream is dat #FFFFFF, op mosterd #EAC874,
     enzovoort — altijd één stap lichter dan de grond, dus het vlak maakt
     zich met KLEUR los in plaats van met een lijn.

     ── BINNENMARGE = FUNCTIE VAN DE HOEKRADIUS ──────────────────────
     Bram: "op heel veel plaatsen [is] de afstand tussen de rondingen en
     de tekst veel te klein … zo zit dat IHG veel te dicht op de rand en
     dat circa 30 uur ook."

     GEMETEN WAAROM. Het vlak had 3 cellen hoekradius en 1 cel padding.
     De ronding is een kwartcirkel met middelpunt (R, R). Op de hoogte
     waar de eerste tekstregel begint (y = P) ligt de linkerrand van de
     vorm niet op x = 0 maar op
         x = R − sqrt(R² − (R − P)²)
     en bij R = 3, P = 1 is dat 0,76 cel. De tekst begon op 1 cel, dus in
     de hoek bleef 0,24 cel lucht over — terwijl diezelfde tekst midden
     op het vlak, waar de rand recht is, een hele cel lucht had. Vier keer
     zo krap in de hoek als ernaast: precies wat je ziet bij "IHG" en bij
     "Circa 30 uur".

     DE FORMULE. Noem M de optische marge die je overal wilt zien. De
     kortste afstand van de HOEK van het tekstvak tot de boog loopt over
     de diagonaal en meet R − sqrt(2)·(R − P). Zet die gelijk aan M:
         R − sqrt(2)·(R − P) = M
         =>  P = R − (R − M) / sqrt(2)
     Met 1/sqrt(2) = 0,70710678 gaf dat bij R = 3 en M = 1 een P van
     1,586 cel: de tekst houdt de boog dan overal even ver vrij als de
     rechte rand, in plaats van er vier keer zo dicht op te staan.

     ── EN DAARNA OMGEDRAAID (2026-09) ───────────────────────────────
     Bram: "de elementen vallen nog steeds niet goed in het raster."

     GEMETEN WAAROM, TWEEDE RONDE. De geometrie hierboven klopt, maar hij
     rekent de verkeerde kant op. R en M zijn ronde getallen, sqrt(2) is
     dat niet, dus P werd onafrondbaar: 1,58579 cel voor .vlak. Alles
     BINNEN een vlak erft die verschuiving. Gemeten op 1440 (nulpunt =
     linkerbovenhoek van .fig-canvas, tolerantie 1,5px): van de elementen
     BUITEN een vlak stond 84% met de linkerrand op een hele of halve
     cellijn, van de elementen BINNEN een vlak nog maar 15%. Het raster
     was dus niet stuk — de vlakpadding duwde alles eruit.

     DE OMKERING. Van de drie getallen is P het enige dat op het raster
     moet vallen: het bepaalt waar de tekst begint. R is een boog en wordt
     door niemand tegen een rasterlijn gemeten. Dus kiezen we P en laten
     we R volgen. Dezelfde vergelijking, naar R opgelost:
         R − sqrt(2)·(R − P) = M
         =>  R·(1 − sqrt(2)) = M − sqrt(2)·P
         =>  R = (sqrt(2)·P − M) · (sqrt(2) + 1)
     met sqrt(2) = 1,41421356 en 1/(sqrt(2) − 1) = sqrt(2) + 1 =
     2,41421356. Dat is de regel hieronder.

     M VERANDERT NIET. De optische marge in de hoek blijft per constructie
     exact wat hij was — er gaat geen lucht verloren. Alleen de padding
     langs de RECHTE rand krimpt een paar pixels en de boog wordt iets
     minder rond: .vlak gaat van R = 3 naar R = 2 + sqrt(2)/2 = 2,70711,
     en levert daarmee precies P = 1,5 cel.

     TWEE KNOPPEN, ÉÉN WAARHEID (nu P en M). --vlak-pad-cel en
     --vlak-lucht zijn de enige twee getallen; zowel de padding als de
     border-radius komen eruit. Een vlak dat er later bij komt zet een
     P die op een RASTERLIJN valt — dus een veelvoud van een halve cel
     (0,5 / 1 / 1,5 / 2 …) — en kan de rasterfout zo niet opnieuw
     introduceren, precies wat er met R als knop wél steeds gebeurde.
     LET OP: 0,75 hoort daar NIET bij, hoe rond het ook oogt. Het raster
     kent hoofdlijnen op hele cellen en hulplijnen op halve; drie kwart
     valt er precies tussenin. Die fout stond hier één ronde lang op
     .vlak-klein — zie daar voor de meting en de correctie.

     ÉÉN UITZONDERING: .vlak-klein op mobiel, zie daar. */
  .vlak {
    /* EEN VLAK IS EEN DOOS, GEEN REGEL. Draagt een vlak óók een
       tekstschaal (.vlak.vlak-klein.body op de twee routekaarten in
       Begrip), dan zou de basislijncorrectie het hele vlak — vulling,
       ronding, silhouethoek — een paar pixel verschuiven in plaats van de
       tekst erin. Dit zet die correctie hier uit; zie "DE BASISLIJN OP HET
       RASTER" verderop. De tekstblokken BINNEN het vlak rekenen hun eigen
       correctie gewoon uit: de :where()-regel daar declareert --bl-corr op
       elk element dat hij raakt, dus deze 0 erft niet naar binnen door. */
    --bl-corr: 0px;
    /* P — binnenmarge in cellen. DIT getal valt op het raster; hou het
       op een heel of half getal. */
    --vlak-pad-cel: 1.5;
    /* M — optische marge in de hoek, in cellen. Ongewijzigd t.o.v. de
       oude afleiding, dus de hoek houdt exact evenveel lucht. */
    --vlak-lucht: 1;
    --vlak-pad: calc(var(--cell) * var(--vlak-pad-cel));
    /* R = (sqrt(2)·P − M) · (sqrt(2) + 1) — de boog volgt de padding.
       P = 1,5 en M = 1 geeft R = 2,70711 cel (was 3). */
    --vlak-radius: calc(
      (var(--vlak-pad-cel) * 1.41421356 - var(--vlak-lucht)) *
      2.41421356
    );
    position: relative;
    background: var(--vlak-tint, #ffffff);
    color: var(--inkt, #222222);
    padding: var(--vlak-pad);
    border-radius: calc(var(--cell) * var(--vlak-radius))
      calc(var(--cell) * var(--vlak-radius)) 0
      calc(var(--cell) * var(--vlak-radius));
    overflow: hidden;
  }
  .vlak > * {
    position: relative;
    z-index: 1;
  }
  /* `.vlak > *` zet relative; de (nu uitgeschakelde) rasterlaag moet dan
     wel display:none blijven houden, anders loopt hij in de flow mee. */
  .vlak > .grond-raster {
    display: none;
  }

  /* Kleiner/genest vlak: alleen de twee knoppen, de ronding volgt vanzelf.
     P = 0,5 en M = 0,5 geeft R = (sqrt(2)/2 − 0,5) · (sqrt(2)+1) = 0,5 cel.

     ── WAAROM 0,5 EN NIET 0,75 (2026-09) ────────────────────────────
     De vorige ronde zette hier P = 0,75 en noemde dat een ronde waarde.
     Dat is het niet: het raster kent hoofdlijnen op hele cellen en
     hulplijnen op halve, dus 0,75 valt er precies tussenin — een kwart
     cel naast de dichtstbijzijnde lijn, exact de fout die de omkering
     eruit moest halen. Een meting over de pagina vond 34 elementen die
     precies een kwart cel misten, allemaal binnen een .vlak-klein.
     De enige twee ronde alternatieven zijn P = 0,5 en P = 1,0, want een
     halve cel in P verschuift R met (2 + sqrt(2)) = 3,414 cel: er zit
     niets tussen.

     ── WAT P = 1,0 KOST, GEMETEN OP 1440 (cel 45 px) ────────────────
     · De padding gaat van 33,75 naar 45 px, dus élk klein vlak verliest
       22,5 px tekstbreedte. Gemeten in de browser: het vlak in blok 03
       Bouw (427,5 px breed) breekt daardoor van 3 naar 4 regels. Elk
       genest vlak wordt hoger en alles eronder schuift mee — een
       decoratieve boog die het verticale ritme van hele secties verzet.
     · R wordt 2,20711 cel tegen 2,70711 voor .vlak. Het kleine vlak is
       dan bijna even rond als het grote en het onderscheid tussen de
       twee leden van de familie verdwijnt. Op de kaarten in Spreken
       (360 × 202 px) wordt de bovenrand een koepel waar de kop in past.

     ── WAT P = 0,5 KOST ─────────────────────────────────────────────
     R zakt van 1,35 naar 0,5 cel (60,9 → 22,5 px op 1440): het silhouet
     wordt duidelijk platter. Dat is de prijs, en hij is echt. Maar hij is
     niet nieuw in dit systeem: de chip in Systematiseren koos deze ronde
     zelf al R = 0,74 cel en het mobiele kleine vlak staat op R = 0,45.
     0,5 ligt tussen twee waarden die al geaccepteerd zijn, terwijl 2,21
     buiten alles valt wat hier ooit heeft gestaan. De scherpe hoek
     rechtsonder — het enige dat het silhouet tot mérkteken maakt — blijft
     bovendien onaangetast; alleen de drie ronde hoeken worden rustiger.
     En dit is de eerste keer dat P én R allebei op een rasterlijn vallen.

     M IS NIET VERANDERD: de optische lucht in de hoek blijft 0,5 cel,
     precies zoals hiervoor. */
  .vlak-klein {
    --vlak-pad-cel: 0.5;
    --vlak-lucht: 0.5;
  }
  .vlak-donker {
    background: var(--g-donker);
    color: var(--g-cream);
    --inkt: #fef7ee;
    --steun: #fef7ee;
    --knop-grond: #fef7ee;
    --knop-inkt: #222222;
    --raster-lijn: #fef7ee;
    --raster-sterkte: 0.5;
    --vlak-tint: var(--t-donker); /* voor een vlak IN dit vlak */
  }
  /* Zelfde tokens als .grond-blauwdruk: zwarte tekst, blauw lijnwerk,
     elektrisch blauwe knop. */
  .vlak-blauwdruk {
    background: var(--g-blauwdruk);
    color: #222222;
    --inkt: #222222;
    --steun: #254fad;
    --knop-grond: #0000ee;
    --knop-inkt: #ffffff;
    --raster-lijn: #254fad;
    --raster-sterkte: 1.6;
    --vlak-tint: var(--t-blauwdruk); /* voor een vlak IN dit vlak */
  }

  /* ── Typografie ───────────────────────────────────────────────────
     Plus Jakarta Sans overal; JetBrains Mono alleen voor blueprint- en
     maatvoeringslabels. */
  .eyebrow {
    /* klein mono label boven een kop */
    display: block;
    /* Regel + marge samen = EXACT 0.5 cel, dus het label kost precies een
       halve cel in het verticale ritme. De max()-vloer voorkomt dat de
       regel krapper wordt dan het korps op smalle desktopbreedtes; zonder
       de compensatie hieronder maakte diezelfde vloer het label 0.528 cel
       hoog (gemeten op 1440: 12.5px regel + 11.25px marge) en schoof
       daarmee élke regel van de sectie 1.3px van het raster. De marge is
       nu de rest van de halve cel, wat de regel ook wordt. */
    line-height: max(calc(var(--cell) * 0.25), 1.25em);
    margin: 0 0
      max(0px, calc(var(--cell) * 0.5 - max(calc(var(--cell) * 0.25), 1.25em)));
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: max(10px, calc(var(--cell) * 0.19));
    font-weight: 700;
    letter-spacing: calc(var(--cell) * 0.045);
    text-transform: uppercase;
    /* KLEUR EN DEKKING ZIJN GEMETEN, NIET GESCHAT.
       Dit label stond op --inkt met dekking 0,6. Gemeten in de browser op
       1440 (de samengestelde glyphkleur tegen de werkelijk gerenderde
       grond, dus inclusief decor en veld) haalde het de 4,5:1 die kleine
       tekst nodig heeft op ACHT van de negen gronden niet:
         cream 4,25 · mosterd 3,30 · taupe 3,23 · blauwdruk 3,41 ·
         klei 3,25 · olijf 3,17 · aubergine 3,33 · steen 3,93 · donker 6,27
       Dat is geen randgeval. De eyebrow is het sectielabel op élke strook
       van de homepage én op elke subpagina: het is de meest herhaalde
       tekstrol van de site.

       DE OPLOSSING IS DE STEUNKLEUR OP VOLLE DEKKING, niet méér inkt.
       Dempen was juist wat het contrast sloopte. --steun is per grond de
       zeer donkere lijnkleur en haalt vol de norm op alle negen:
         cream 11,77 · mosterd 6,77 · taupe 6,08 · blauwdruk 5,68 ·
         klei 5,60 · olijf 6,24 · aubergine 6,19 · steen 9,13 · donker 14,97
       Laagste marge: klei op 5,60, een kwart boven de norm. Elke dekking
       ónder de 1 valt ergens om: 0,88 zakt op blauwdruk (4,48).

       HET LABEL BLIJFT STIL, want de rust komt nu uit de ROL van de kleur
       in plaats van uit vervaging: --steun is het lijnwerk (raster,
       maatvoering, decor) en niet de tekstkleur, dus de eyebrow groepeert
       met de tekening en niet met de kop. De hiërarchie zit waar hij hoort,
       in het korps: 0,19 cel tegen 1,6 cel voor .kop-xl, een factor 8.

       DIT WAS AL DE PRAKTIJK. .eyebrow-steun deed exact dit en stond al op
       /about, /blog, /privacy, /terms en op drie homepagesecties (Spreken,
       Schrijven, Verschuiving); twee eerdere rondes rekenden diezelfde som
       per geval al voor (zie de twee blokken in about/page.tsx). Het was
       dus geen nieuwe keuze maar een uitzondering die de regel had moeten
       zijn. Geen nieuwe kleur: --steun komt uit de grond zelf. */
    color: var(--steun);
    opacity: 1;
  }
  /* Bestond als accentvariant en is sinds bovenstaande meting gelijk aan de
     default. Blijft staan zodat de bestaande markup ongewijzigd kan blijven
     én omdat de klassenaam in de JSX de bedoeling leesbaar houdt: hier is
     de steunkleur een keuze, geen toeval. */
  .eyebrow-steun {
    color: var(--steun);
    opacity: 1;
  }

  .mono-label {
    /* technisch label, inline (Ø-notatie, celcoördinaten) */
    font-family: var(--font-mono), ui-monospace, monospace;
    /* Halve cel per regel, gelijk aan .lead en .body: een mono-label in de
       flow (de terzijde onder de stapchips, de metaregel onder een knop,
       de branche in een case-kaart) kost daarmee net zoveel ritme als een
       tekstregel. Stond op `normal` (0.333 cel) en dat schoof alles
       eronder van het halve-celritme af. */
    line-height: max(calc(var(--cell) * 0.5), 1.35em);
    font-size: max(10px, calc(var(--cell) * 0.17));
    font-weight: 700;
    letter-spacing: calc(var(--cell) * 0.04);
    color: var(--inkt);
    /* Was 0,65. Gemeten (zelfde methode als bij .eyebrow hierboven) haalde
       die dekking alleen cream 4,93 · steen 4,51 · donker 7,07; de zes
       middentonen zakten naar 3,38–3,62, ruim onder de 4,5:1.

       ANDERS DAN DE EYEBROW BLIJFT DIT LABEL IN DE INKTFAMILIE. Een
       mono-label staat inline in de lopende tekst — de terzijde onder de
       stapchips, de metaregel onder een knop, de branche in een case-kaart
       — en hoort daar bij de tekst, niet bij het lijnwerk. Het naar
       --steun tillen zou 26 bijschriften een kleur geven en het onderscheid
       met de eyebrow (die juist wél lijnwerk is) wegpoetsen.

       0,85 is de laagste dekking met echte marge op alle negen gronden:
         cream 9,44 · mosterd 5,45 · taupe 5,62 · blauwdruk 8,05 ·
         klei 5,43 · olijf 5,20 · aubergine 5,63 · steen 8,17 · donker 11,14
       0,80 haalt het net (olijf 4,68) maar 4% marge is te weinig voor een
       korps dat over de hele desktopreeks op de 10px-vloer staat; 0,75
       zakt op vier gronden. Op 0,85 blijft het bijschrift zichtbaar
       lichter dan de lopende tekst, die op dekking 1 staat.
       LET OP BIJ NIEUWE COMPONENTEN: een eigen opacity op een .mono-label
       zet deze regel weer uit. Twee plekken deden dat met 0,5 en zijn om
       die reden teruggedraaid (.sys-stap-nr en .sys-terzijde in
       Systematiseren.tsx, gemeten 3,05 en 2,95). Wil een label verder naar
       achteren, doe dat dan met korps of witruimte, niet met dekking. */
    opacity: 0.85;
  }

  /* Maatvoering in de kantlijn van een sectie (blueprint-esthetiek).
     Plaats als direct kind van .sectie; verdwijnt op mobiel. */
  .maatvoering {
    position: absolute;
    top: calc(var(--cell) * 0.9);
    left: calc(var(--cell) * 1);
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: max(9px, calc(var(--cell) * 0.16));
    font-weight: 700;
    letter-spacing: calc(var(--cell) * 0.035);
    color: var(--steun);
    opacity: 0.55;
    white-space: nowrap;
    pointer-events: none;
  }
  .maatvoering-rechts {
    left: auto;
    right: calc(var(--cell) * 1);
  }
  .maatvoering-onder {
    top: auto;
    bottom: calc(var(--cell) * 0.9);
  }
  /* ── DE MAATVOERING HANGT AAN EEN CELLIJN ─────────────────────────
     0,9 cel is geen rastermaat en was dat ook nooit: het is een optische
     plaatsing van de DOOS. Voor een bijschrift dat het raster benoemt is
     dat precies verkeerd om — wat op de lijn hoort te liggen is de
     BASISLIJN. --bl-vak (zie "DE BASISLIJN OP HET RASTER" verderop) is de
     gemeten afstand van de doostop tot die basislijn, dus `1 cel − --bl-vak`
     legt de basislijn exact op de eerste cellijn onder de sectiegrens.
     Op 1440 schuift het label daarmee 3,5px omhoog (van top 40,5 naar 37);
     de basislijn gaat van 48,5 naar 45,0 — de lijn zelf.
     Voor de onderste variant telt de LAATSTE regel, dus daar is de afstand
     tot de basislijn gerekend vanaf de onderrand: 1lh − --bl-vak.
     Deze twee regels staan in een @supports omdat de kale declaratie
     hierboven het vangnet is: zonder round()/lh blijft 0,9 cel staan en
     springt het label niet naar zijn statische plek. */
  @supports (top: round(nearest, 1lh, 1px)) {
    .maatvoering {
      top: calc(var(--cell) - var(--bl-vak));
    }
    .maatvoering-onder {
      top: auto;
      bottom: calc(var(--cell) - (1lh - var(--bl-vak)));
    }
  }

  /* ── REGELAFSTAND OP HET RASTER ────────────────────────────────────
     Elke regelafstand is een héle of hálve cel. Daardoor voegt élke extra
     tekstregel exact een halve of hele cel toe: tekstblokken lopen mee met
     het raster en een langere tekst schuift de rest van de sectie met
     hele/halve cellen op in plaats van met een willekeurig aantal pixels.
     (De snap op .sectie hierboven vangt de laatste halve cel op.)
     De max()-vloeren staan er omdat het korps op smalle desktopbreedtes
     (900–1100px) tegen zijn px-vloer aanloopt; daar wint de em-waarde,
     zodat de regel nooit krapper wordt dan de letters zelf. Boven ~1100px
     wint altijd de celwaarde en staat de tekst dus op het raster. */
  .kop-xl {
    margin: 0;
    font-size: calc(var(--cell) * 1.6);
    line-height: calc(var(--cell) * 1.5); /* 2 regels = 3 cellen */
    font-weight: 800;
    letter-spacing: calc(var(--cell) * -0.008);
  }
  .kop-l {
    margin: 0;
    font-size: calc(var(--cell) * 1.1);
    line-height: var(--cell); /* n regels = n cellen (ratio 0.91, huisstijl) */
    font-weight: 800;
  }
  .kop-m {
    margin: 0;
    font-size: calc(var(--cell) * 0.7);
    line-height: var(--cell); /* n regels = n cellen */
    font-weight: 800;
  }
  /* Vierde koptrap (2026-09). Was er niet, en precies daardoor stond in
     bijna elke sectie een eigen "iets kleiner dan .kop-m"-korps: 0.42
     (stapchip, bouw-statement), 0.46 (blauwdruk-toets), 0.5 (ladder-naam),
     0.54 (prijs) — vier maten voor één rol. Dit is die rol, één keer:
     statements, kaartnamen en subkoppen onder .kop-m. De waarden zijn
     letterlijk die van .kop-m op mobiel (0.42 cel korps op een halve cel
     regel, ratio 1.19), dus het is geen nieuwe maat maar een bestaande
     huiswaarde die nu ook op desktop een naam heeft.
     Trap: 1.6 → 1.1 → 0.7 → 0.42 (verhouding ~1.5) → lead 0.375 → body
     0.28 → eyebrow 0.19 → mono-label 0.17 → maatvoering 0.16. */
  .kop-s {
    margin: 0;
    font-size: max(15px, calc(var(--cell) * 0.42));
    line-height: max(calc(var(--cell) * 0.5), 1.19em); /* 2 regels = 1 cel */
    font-weight: 800;
    letter-spacing: calc(var(--cell) * -0.004);
  }
  .lead {
    margin: 0;
    max-width: calc(var(--cell) * 17);
    font-size: max(14px, calc(var(--cell) * 0.375));
    line-height: max(calc(var(--cell) * 0.5), 1.3em); /* 2 regels = 1 cel */
    font-weight: 400;
  }
  .body {
    margin: 0;
    max-width: calc(var(--cell) * 15);
    font-size: max(13px, calc(var(--cell) * 0.28)); /* leesbaarheidsvloer */
    line-height: max(calc(var(--cell) * 0.5), 1.35em); /* 2 regels = 1 cel */
  }
  .lead + .lead,
  .body + .body,
  .lead + .body,
  .body + .lead {
    margin-top: calc(var(--cell) * 0.5);
  }

  /* ── DE BASISLIJN OP HET RASTER ────────────────────────────────────
     De regelafstanden hierboven staan op hele en halve cellen, maar dat
     zet nog geen letter op een lijn. Wat er tot nu toe gemeten werd was de
     BOVENKANT VAN HET REGELVAK, en die kan per definitie niet op een
     cellijn vallen: hij ligt op halve regellucht boven de letters, en die
     halve regellucht is (regelafstand − fontvak) / 2 — een FONTgetal, geen
     rastergetal.

     De maat die het oog als "de regel" ziet is de BASISLIJN. Ligt de
     eerste basislijn van een blok op een cellijn, dan ligt élke volgende
     er ook op: de sprong ertussen is de regelafstand, en die is hierboven
     al een hele of halve cel. Eén correctie per blok, en het hele blok
     klopt.

     NULMETING (Chrome 141 headless, homepage, ná document.fonts.ready, met
     de scroll-reveals geforceerd zodat er geen 0,3 cel translate in de
     meting zit; basislijn gemeten met een nul-hoge inline-block, die per
     definitie ÓP de basislijn van zijn regel staat; tolerantie 1px):
       1440×900    8 van de 264 basislijnen op een hele/halve cellijn = 3,0%
        390×844    3 van de 343                                       = 0,9%
     Op de OUDE maat — de bovenkant van het regelvak — was dat 70,6% resp.
     37,8%; die 38% is het getal waar de vorige ronde op uitkwam. De twee
     maten zijn niet vergelijkbaar: de een meet de doos, de ander de regel.

     ── DE FORMULE, EN WAAROM ER round() IN ZIT ───────────────────────
     Chromium legt de eerste basislijn van een regelvak op
         floor((regelafstand − ⌊asc⌉ − ⌊desc⌉) / 2) + ⌊asc⌉
     met ⌊⌉ = afronden op HELE PIXELS. De browser rondt de ascent en de
     descent dus eerst af, en verdeelt pas daarna de regellucht — naar
     BENEDEN. Dat is geen aanname maar een meting: het model is getoetst
     tegen 1095 echt gemeten basislijnen per familie (korps 8→90px in
     stappen van 0,375px, vijf regelafstanden per korps):
       Plus Jakarta Sans  1091/1095 exact, 4 afwijkingen van 1px
       JetBrains Mono     1093/1095 exact, 2 afwijkingen van 1px
     De vier resp. twee missers liggen op een afrondingsgrens.

     ASCENT EN DESCENT ZIJN GEMETEN, NIET OPGEZOCHT. Een rasterzoektocht
     over A ∈ [0,98 … 1,08] en D ∈ [0,19 … 0,32], stap 0,001, tegen 219
     gemeten basislijnen wees per familie precies één paar aan:
       Plus Jakarta Sans  asc 1,038 em · desc 0,222 em   (samen 1,26 em, en
                          dat is exact de regelafstand die de browser voor
                          dit font als `normal` opgeeft — de controle)
       JetBrains Mono     asc 1,02  em · desc 0,30  em   (samen 1,32 em)
     Canvas TextMetrics geeft op 100px 104/22 en 102/30: dezelfde getallen,
     maar dan al op hele pixels afgerond. Op grote korpsen loopt die
     afronding tot 2px uit de pas (gemeten op 1000px: canvas voorspelt 910,
     de browser tekent 908). Daarom staan hier de em-waarden en niet de
     canvasmeting die InspectorOverlay voor zijn tekening gebruikt.

     1lh EN 1em DOEN HET REKENWERK, GEEN VAST GETAL PER SCHAAL. Een
     component mag korps of regelafstand van een schaal overschrijven
     (.kop-l staat op mobiel op twee korpsen, .maatvoering erft drie
     verschillende regelafstanden) en dan klopt een hardgecodeerd getal
     niet meer. Met 1lh (de gebruikte regelafstand) en 1em (het gebruikte
     korps) rekent de browser de correctie per element uit — ook op elke
     tussenbreedte waar de px-vloeren van max() winnen van de celwaarde,
     en dat gebeurt vaker dan je denkt: op 1440 staat .body op zijn vloer
     van 13px en niet op 0,28 cel (= 12,6px).

     ── DE CORRECTIE STAAT OP top, NIET OP DE DOOS ────────────────────
     padding-top en margin-top veranderen de HOOGTE van het blok, en dat is
     precies wat hier niet mag: de vlakpadding, de sectiehoogtes,
     .doorloop en de afronding die CelSnap uitrekent hangen
     allemaal aan die hoogtes. Een relatieve verschuiving verandert nul
     pixels aan de layout — alleen waar de letters getekend worden.
     text-box-trim zou optisch hetzelfde kunnen, maar dat SNIJDT de halve
     regellucht eraf en verandert dus wél de blokhoogte; bovendien is het
     jonger dan de ondergrens die deze site aanhoudt.

     round(nearest, …) en niet naar boven of naar beneden: de kleinste
     verschuiving, want de blokken staan al waar ze horen. Op 1440 komt dat
     neer op +4,5px voor .kop-xl, +3 voor .kop-l, +10 voor .kop-m, +3,5
     voor .kop-s, +4,5 voor .lead, +6,5 voor .body, −9 voor .eyebrow en
     +8,5 voor .mono-label (+7,5 waar een component daar 11px van maakt —
     de formule rekent per element, dus dat gaat vanzelf goed).

     VANGNET: kent een browser round() of de lh-eenheid niet, dan is de
     hele `top` ongeldig-op-computed-value-time en valt hij terug op `auto`
     — dan staat er exact wat er vóór deze ronde stond. Het @supports-blok
     houdt in dat geval ook `position: relative` weg, zodat er geen enkel
     element van schilderlaag verandert. Beide bouwstenen zijn er sinds
     Chrome 125 / Safari 16.4 / Firefox 118 — dezelfde ondergrens die
     .fig-hero en .sectie al hanteren met round().

     OPT-OUT: `--bl-corr: 0px` op een element dat wel een tekstschaal
     draagt maar géén regel tekst IS. Vijf plekken, allemaal met hun eigen
     reden ter plekke uitgelegd:
       .vlak            (hierboven)   — een vlak met .body erop
       .fig-b-vlak      (hierboven)   — de vier B-vlakken in de hero
       .link            (hieronder)   — een tekstlink midden in een zin
       .bhr-mededeling  (Beheer.tsx)  — een pil met rand en padding
       de cijfer-<p>    (Bewijs.tsx)  — doos met een blok-<span> erin
     Ze zetten de correctie alleen op ZICHZELF uit: de :where()-regel
     hierboven declareert --bl-corr op élk element dat hij raakt, dus de 0
     erft niet naar de tekstblokken binnenin door.

     WAT DIT NIET REPAREERT, en dat is de helft van de resterende missers:
     een blok waarvan het REGELVAK al naast een cellijn begint. De correctie
     is per definitie relatief aan de doostop, dus die fout blijft staan.
     Gemeten op de homepage van de blokken die wél op het raster beginnen
     landt 92% (1440) resp. 93% (390) van de basislijnen; van de blokken die
     ernaast beginnen 3 van de 23 resp. 1 van de 141. De grootste bronnen:
     .vdl-rij / .vdl-mal-panelen (desktop, de ladder in Verschuiving) en
     .sys-blokken (mobiel, precies een kwart cel — dezelfde soort fout als
     in "DE STEEKREGEL", maar dan verticaal). */
  :where(
      .kop-xl,
      .kop-l,
      .kop-m,
      .kop-s,
      .lead,
      .body,
      .eyebrow,
      .mono-label,
      .maatvoering
    ) {
    --bl-asc-em: 1.038; /* Plus Jakarta Sans, gemeten — zie hierboven */
    --bl-desc-em: 0.222;
    /* Eerst de fontmaten op hele pixels, precies zoals de browser doet. */
    --bl-asc: round(nearest, calc(var(--bl-asc-em) * 1em), 1px);
    --bl-desc: round(nearest, calc(var(--bl-desc-em) * 1em), 1px);
    /* Afstand van de bovenkant van het regelvak tot de eerste basislijn. */
    --bl-vak: calc(
      round(down, (1lh - var(--bl-asc) - var(--bl-desc)) / 2, 1px) +
      var(--bl-asc)
    );
    /* Naar de dichtstbijzijnde hele of halve cellijn. */
    --bl-corr: calc(
      round(nearest, var(--bl-vak), calc(var(--cell) * 0.5)) -
      var(--bl-vak)
    );
  }
  /* De drie mono-schalen; deze regel staat ná de vorige en heeft dezelfde
     (nul) specificiteit, dus hij wint voor de elementen die hij raakt. */
  :where(.eyebrow, .mono-label, .maatvoering) {
    --bl-asc-em: 1.02; /* JetBrains Mono, gemeten */
    --bl-desc-em: 0.3;
  }
  @supports (top: round(nearest, 1lh, 1px)) {
    /* .maatvoering staat er BEWUST niet bij: die is absoluut gepositioneerd
       en zet zijn eigen top/bottom (zie de regel hieronder). */
    :where(
        .kop-xl,
        .kop-l,
        .kop-m,
        .kop-s,
        .lead,
        .body,
        .eyebrow,
        .mono-label
      ) {
      position: relative;
      top: var(--bl-corr);
    }
  }

  /* ── HET VERTICALE RITME — één trap voor élke sectie ────────────────
     Bram (2026-09): "wil wel consistentie in de fontgrootte en opbouw".
     De koppen stonden al op een trap; de AFSTANDEN ertussen niet — elke
     sectie had zijn eigen 0.7, 0.8, 0.85, 0.9, 0.95, 1.1, 1.15, 1.2,
     1.25 of 1.6 cel. Dat is nu teruggebracht tot vijf stappen, allemaal
     hele of halve cellen. Deze tabel is de norm; de secties zetten hun
     eigen marges op precies deze waarden (component-CSS is ongelaagd en
     kan dus niet centraal worden afgedwongen, maar wel centraal worden
     vastgelegd).

       eyebrow            kost zelf 0.5 cel (regel 0.25 + marge 0.25)
       kop  → tekst       0.5 cel
       tekst → tekst      0.5 cel   (hierboven al automatisch)
       tekst → groep      1   cel   (lijst, kaartenrij, callout, vlak)
       groep → knoprij    1   cel
       knop → metaregel   0.5 cel
       grote blokscheiding 1.5 cel  (de vier sys-blokken, ess-regels)
       binnen een kaart: kop → tekst  0.25 cel
     Mobiel halveert waar globals dat al doet (.sectie-padding); de
     stappen hierboven blijven verder gelijk, want ze zijn in cellen
     uitgedrukt en een mobiele cel is al 4× zo groot. */

  /* Tekstlink in de huisstijl (onderstreping in de steunkleur bij hover) */
  .link {
    /* EEN LINK STAAT IN EEN REGEL, dus hij mag niet los van die regel
       schuiven. Draagt hij ook een tekstschaal (.link.mono-label op /blog
       en in het artikel), dan zou de basislijncorrectie hem als inline
       element ten opzichte van zijn eigen zin verplaatsen. De regel
       waarin hij staat krijgt zijn correctie al van het blok eromheen.
       Zie "DE BASISLIJN OP HET RASTER" hierboven. */
    --bl-corr: 0px;
    color: var(--inkt);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid color-mix(in srgb, currentColor 40%, transparent);
    transition:
      color 0.15s ease,
      border-color 0.15s ease;
  }
  .link:hover {
    color: var(--steun);
    border-color: currentColor;
  }

  /* ── Knoppen ──────────────────────────────────────────────────────
     KNOPREGEL: één knopkleur per grond. Kale .btn pakt automatisch de
     knopkleur van zijn grond (--knop-grond). De expliciete varianten
     zijn er voor wie hem toch met de hand wil zetten.

     KAPITALEN (2026-08, Bram: "verder wil ik dat de tekst in de buttons
     allemaal met capitalen is"). text-transform i.p.v. de labels in de
     markup omzetten: de bron blijft leesbaar Nederlands, screenreaders
     spellen niets letter-voor-letter, en het geldt in één keer voor élke
     knop op de site (.btn, de header-CTA, de mobiele menu-CTA en de
     slot-CTA in de footer).
     TRACKING: kapitalen staan optisch dichter op elkaar dan onderkast,
     dus de letterspatiëring gaat van 0.03 naar 0.045 cel (mobiel 0.02 →
     0.03). Gemeten in de browser op de langste knoptekst ("BEGIN MET
     BEGRIP", 1920px): 2.74 cellen tekst in een knop van 4.50 cellen —
     ruim binnen de 26-cels kolom, dus geen knop die uit zijn cellen
     loopt. */
  .btn {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--cell);
    padding: 0 calc(var(--cell) * 0.9);
    border: 0;
    border-radius: calc(var(--cell) * 1.5);
    background: var(--knop-grond, #222222);
    color: var(--knop-inkt, #ffffff);
    font-family: inherit;
    font-size: max(12px, calc(var(--cell) * 0.22));
    font-weight: 700;
    letter-spacing: calc(var(--cell) * 0.045);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      opacity 0.15s ease,
      background-color 0.2s ease,
      color 0.2s ease;
  }
  .btn > span {
    margin-right: calc(var(--cell) * -0.045);
  } /* trailing tracking */
  .btn:hover {
    opacity: 0.85;
  }
  .btn:focus-visible,
  .link:focus-visible {
    outline: 2px solid var(--steun);
    outline-offset: 3px;
  }
  .btn-ink {
    background: #222222;
    color: #ffffff;
  } /* op cream/paper */
  .btn-blauwdruk {
    background: #0000ee;
    color: #ffffff;
  } /* op blauwdrukgrond */
  .btn-cream {
    background: #fef7ee;
    color: #222222;
  } /* op donkere grond */
  .btn-ghost {
    background: transparent;
    color: var(--inkt);
    border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
  }
  .btn-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--cell) * 0.3);
  }
  /* Knop met het silhouet-vlaggetje, zoals de header- en footer-CTA:
     <span class="btn-wrap"><a class="btn">…</a><Notch className="btn-notch"/></span>

     ── DE HOVER STAAT OP DE GROEP, NIET OP DE KNOP (2026-09) ──────────
     Bram: "de hover op de buttons op de pagina gaat nog niet helemaal
     top: rechterkant van de button heeft andere kleur dan de rest van de
     button bij de hover."

     DE OORZAAK, GEMETEN. De notch is een BROERTJE van .btn, geen kind:
     hij ligt absoluut over de rechter halve cel van de knop en tekent
     daar de scherpe hoek rechtsonder die de pill-radius openlaat. Samen
     zijn ze één silhouet, maar `.btn:hover { opacity: .85 }` raakt alleen
     de <a>. Gemeten op 1440 in een screenshot van de hover van "BEGIN MET
     BEGRIP" (gemiddelde over 5×5 px):
       links in de knop  #3F3E3D  (34 op 85% over cream)
       laatste 0.5 cel   #222222  (de notch, onaangeroerd)
     Dat is 29 waarden verschil op een groot plat vlak — precies de band
     die Bram ziet. Het is dus geen gradient, geen radius en geen
     raakvlak-::after: het is een dekking die maar de helft van de vorm
     pakt.

     WAAROM DE DEKKING NAAR .btn-wrap MOET EN NIET NAAR .btn-notch.
     Zet je .btn-notch óók op 0.85, dan wordt het gebied waar de notch de
     knop OVERLAPT twee keer doorzichtig: 0.85 over 0.85 geeft #272726
     tegen #3F3E3D ernaast — dezelfde fout, alleen kleiner. Op de wrapper
     is het één groep: browser tekent knop + notch eerst dekkend in één
     buffer (waar de overlap dus verdwijnt) en zet die daarna in zijn
     geheel op 85%. Eén vorm, één dekking, op elke knopvariant tegelijk
     (.btn-ink, .btn-blauwdruk, .btn-cream, .btn-ghost) — daarom hier en
     niet in een kleurregel per variant.

     :has(> .btn:hover) EN NIET .btn-wrap:hover. De wrapper is een
     inline-block om een inline-flex knop; zijn regeldoos loopt een paar
     px onder de knop door (descender-ruimte). Op de wrapper hoveren zou
     dus net buiten de knop al aangaan. Met :has() hangt de groepsdekking
     exact aan de hover van de knop zelf, zonder één pixel layout te
     verschuiven. Kent een browser :has() niet, dan vallen deze twee
     regels weg en blijft precies het oude gedrag over — geen nieuwe
     fout, alleen de oude.
     De regel eronder zet de dekking van de knop zélf weer op 1, anders
     stapelt .btn:hover (0.85) op de groep (0.85) tot 0.72 en is de knop
     lichter dan zijn eigen notch. */
  .btn-wrap {
    position: relative;
    display: inline-block;
    transition: opacity 0.15s ease;
  }
  .btn-wrap:has(> .btn:hover) {
    opacity: 0.85;
  }
  .btn-wrap:has(> .btn:hover) > .btn {
    opacity: 1;
  }
  .btn-notch {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: calc(var(--cell) * 0.5);
    height: var(--cell);
    color: var(--knop-grond, #222222);
    pointer-events: none;
  }

  /* ── Scroll-reveals (ScrollReveals.tsx zet .rv-in) ────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 0;
      transform: translateY(calc(var(--cell) * 0.3));
    }
    [data-reveal].rv-in {
      opacity: 1;
      transform: none;
      transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    }
  }

  /* ── Mobiel (< 900px): 8 cellen breed, strakker ritme ─────────────── */
  @media (max-width: 899.98px) {
    /* Decor op 8 kolommen: één cel is daar 4× zo breed als op 32 kolommen,
       dus dezelfde --decor-maat zou het scherm overspoelen. De laag zet
       de schaal centraal op de helft; secties hoeven zelf niets te doen. */
    .decor {
      --decor-schaal: 0.5;
    }
    /* Zelfde reden voor de DOORLOPENDE VORMEN op de sectiegrenzen.
       Bewust op .fig-canvas en niet op het element zelf: zo wordt de
       schaal GEERFD en blijft een inline --door-maat op een sectie gewoon
       werken (inline wint anders van deze query).
       --door-schaal 0,5 en --door-x-schaal 0,25 gelden voor de twee
       lijnvormen; --door-rand 1 zet de scherpe hoek van elke druppel op
       kolom 7 van 8 — het einde van het rechte stuk van een mobiele
       plaatrand (inzet 0,5 + radius 0,5, zie onder), net als 28 van 32 dat
       op desktop is. */
    .fig-canvas {
      --door-schaal: 0.5;
      --door-x-schaal: 0.25;
      --door-rand: 1;
    }

    /* DE DRUPPELS OP 0,25: DEZELFDE FRACTIE VAN DE BREEDTE ALS OP DESKTOP.
       26 van 32 cel wordt 6,5 van 8, 14 van 32 wordt 3,5 van 8. Op de oude
       0,5 zou elke druppel breder dan 16 cel (03, 05, 07, 08, 09) breder
       zijn dan het scherm; rechts verankerd valt de boog dan buiten beeld
       en blijft er een balk met een hoek over. Op 0,25 blijven hoek én
       boog altijd in beeld. De diepte schaalt mee: 6 cel wordt 1,5
       mobiele cel = 73px op 390.
       DE PLAATRAND. Op mobiel loopt het rechte stuk van een plaatrand van
       0,5 + 0,5 = 1 tot 7,5 − 0,5 = 7 cel. Wat telt is niet de doos van de
       druppel maar zijn omtrek op de grenslijn: de breedste druppel op
       een plaat (26 cel, grens 05 en 09) is hier 6,5 cel breed en zijn
       doos begint dus op kolom 0,5, maar zijn linkerflank snijdt de lijn
       pas op kolom 1,1 (05: middelpunt 1,875 cel boven de lijn, straal
       3,25) respectievelijk 1,5 (09). Beide rechts van 1, dus binnen het
       rechte stuk; druppels.mjs meet het na. Met een mobiele radius van 1
       (de vorige waarde 1,5 al helemaal) zou dat niet passen — vandaar de
       0,5 hieronder.

       HET MERKTEKEN VAN DE HERO is sinds de vierde ronde geen .doorloop
       meer (het kruist grens 01 niet meer) en heeft zijn eigen mobiele
       maat bij .fig-merk in de hero-query: 7 cel, op de gele rand.

       De vorm over drie stroken (--mega): om vanuit aubergine tot in klei
       te reiken is op 8 kolommen minstens 20 cellen aanloop nodig, dus
       schaal 0,67, dus een diameter van 27 mobiele cellen = 3,4 schermen
       — precies de flauwe streep hierboven. Op 0,25 is hij 10 cellen breed
       (1,25 scherm), begint hij 7,5 cellen boven zijn sectie en kruist hij
       ÉÉN grens in plaats van twee: op mobiel raakt hij twee stroken, niet
       drie. Dat is geen slordigheid maar meetkunde — een cirkel die drie
       mobiele stroken hoog is, is vijf schermen breed.

       GEEN inline schaal in de secties: de schaal hoort bij de klasse,
       niet bij de plek. */
    .fig-canvas .doorloop--kantlijn {
      --door-schaal: 0.25;
    }
    .fig-canvas .doorloop--mega {
      --door-schaal: 0.25;
    }
    /* De koepels en de partnervormen van grens 02 bestaan alleen op 32
       kolommen (zie .doorloop--desktop bij de koepel). */
    .fig-canvas .doorloop--desktop {
      display: none;
    }

    /* DE PLAAT (.sectie--kader) op 8 kolommen — EEN PLAAT DIE JE NIET
       ZIET IS GEEN PLAAT.
       HIER STOND 0,25 cel inzet en 0,75 cel radius, en de reden was
       ruimtegebrek: de inhoudskolom is op mobiel `calc(100% - 1 cel)` en
       loopt dus van x 24,4 tot 365,6 op een scherm van 390. Een halve cel
       kantlijn, en dat is precies zoveel als de plaat zelf zou inspringen.
       Er bleef 12,2px cream over — 3,1 % van de schermbreedte. Dat was
       geen plaat meer maar een lijntje, terwijl het merksilhouet juist op
       de telefoon het meest gezien wordt.

       WAT ER NU GEBEURT, EN WAT HET KOST. De inhoudskolom van een
       PLAATSTROOK (en alleen daarvan) krijgt driekwart cel kantlijn in
       plaats van een halve: 316,9px in plaats van 341,25 op een scherm van
       390, oftewel 7 % smallere regels. De plaat springt daarmee een halve
       cel in (24,4px = 6,25 % van het scherm) en houdt nog steeds een
       kwart cel lucht tot de eerste letter.

       WAAROM EEN HALVE EN GEEN DRIEKWART CEL, GEMETEN. Met een hele cel
       kantlijn kan de plaat 0,75 cel inspringen — 36,6px, oftewel 9,4 %.
       De prijs staat er alleen niet tegenover: de smallere kolom laat de
       vier blokken in Systematiseren verder afbreken en die strook groeit
       dan van 112 naar 122 mobiele cellen. Bram heeft al eerder gezegd
       dat Systematiseren te lang is, en op mobiel zie je een plaat toch
       nooit in zijn geheel — dus wat de inzet daar doet is precies één
       ding: de kleur van de schermrand houden. Daar is 24,4px genoeg voor.
       De regel staat op .sectie--kader > .container en niet op een eigen
       kolomklasse, en HIJ STAAT ONDERAAN DIT BESTAND, BIJ .container, EN
       NIET HIER: die breedtes zijn ONGELAAGD, en ongelaagde CSS wint van
       elke @layer. Gemeten toen hij hier nog stond: de chiprij liep op
       390px van x 24 tot 358 terwijl de plaat op 37 begon.

       DE RADIUS IS 0,5 CEL EN GEEN 1,5, en dat volgt uit de druppels. Het
       rechte stuk van de bovenrand loopt van inzet + R tot 8 − inzet − R;
       de scherpe hoek van elke druppel staat op 8 − --door-rand = 7, en
       die moet op het rechte stuk vallen: 7,5 − R >= 7, dus R <= 0,5. En
       aan de linkerkant moet de omtrek van de breedste druppel (6,5 cel,
       flank op kolom 1,1) rechts van inzet + R = 1 blijven — ook R <= 0,5.
       Op 390 is dat een boog van 24px op een plaat van 341px: een
       kaartronding, geen lijntje, en de scherpe hoek rechtsonder blijft
       het merk. Groter kon alleen met kleinere druppels, en de druppels
       zijn waar deze ronde om draait. (De cirkeltoets met m = 0,25 cel en
       p = 0,78 cel gaf R <= 1,65; die bindt hier dus niet.) */
    .sectie--kader {
      --kader-x: 0.5;
      --kader-r: 0.5;
    }
    /* De plaat over drie stroken op 8 kolommen: een cel is hier vier keer
       zo breed, dus 3 cel omhoog zou 146px zijn en boven de slotregel van
       DrieVormen uitkomen (die eindigt daar 2,9 cel boven de grens). 1,5
       omhoog houdt 1,4 cel lucht. Omlaag 2 cel: de inhoud van Bewijs
       staat mobiel bovenaan (--inhoud-hoog) en krijgt daarom in Bewijs.tsx
       3 cel bovenpadding, zodat de eyebrow op 2,8 begint — 0,8 cel onder
       de uitloop. */
    .sectie--kader-door,
    .sectie--kader-boven {
      --kader-boven: 1.5;
    }
    .sectie > .plaat-uitloop {
      --kader-onder: 2;
    }

    /* Ook mobiel in hele cellen (8 kolommen, dus 1 cel = 12.5cqw) */
    .sectie {
      padding: calc(var(--cell) * 1) 0;
    }
    .sectie--ruim {
      padding: calc(var(--cell) * 2) 0;
    }
    .sectie--strak {
      padding: calc(var(--cell) * 1) 0;
    }
    .sectie[id] {
      scroll-margin-top: calc(var(--cell) * 1.5);
    }

    /* Mobiel: 8 kolommen, dus een cel is 4x zo breed en de ronding moet
       fors terug. Alleen de twee knoppen; padding en border-radius komen
       uit dezelfde omkering als op desktop.
         P = 0,5  M = 0,4  ->  R = 0,6 + sqrt(2)/10 = 0,74142 cel  (was 0,9)

       DE UITZONDERING. Het kleine vlak op mobiel houdt bewust zijn OUDE
       ronding: P afronden naar 0,25 cel zou R van 0,45 naar 0,25 duwen,
       en dat is zichtbaar platter — daar sneuvelt het logo-silhouet op de
       kleine geneste vlakken. Hier is R dus nog steeds de gekozen knop en
       volgt P eruit; de P hieronder is exact de oude waarde
       (0,45 − 0,2 · 0,70710678) en staat er als decimaal juist om te laten
       zien dat hij NIET op het raster valt. Dat mag hier: de padding is
       maar ~15px, dus de verschuiving die hij veroorzaakt is
       verwaarloosbaar tegenover een verpest silhouet. */
    .vlak {
      --vlak-pad-cel: 0.5;
      --vlak-lucht: 0.4;
    }
    .vlak-klein {
      --vlak-pad-cel: 0.30857864;
      --vlak-lucht: 0.25;
    }

    .eyebrow {
      font-size: max(11px, calc(var(--cell) * 0.24));
      line-height: max(calc(var(--cell) * 0.25), 1.25em);
    }
    .mono-label {
      font-size: max(10px, calc(var(--cell) * 0.22));
    }
    .maatvoering {
      display: none;
    } /* geen kantlijn op 8 cellen */

    /* Ook mobiel loopt alles op hele/halve cellen (1 cel = 12.5cqw). */
    .kop-xl {
      font-size: calc(var(--cell) * 0.82);
      line-height: var(--cell);
    }
    .kop-l {
      font-size: calc(var(--cell) * 0.7);
      line-height: var(--cell);
    }
    /* korps iets terug zodat 0.5 cel regelafstand niet krap wordt (1.19) */
    .kop-m {
      font-size: calc(var(--cell) * 0.42);
      line-height: calc(var(--cell) * 0.5);
    }
    /* .kop-s schuift op 8 cellen tussen .kop-m (0.42) en .lead (0.36) in:
       0.38 cel op een halve cel regel (ratio 1.32). Dichter op .kop-m dan
       op desktop, want op 390px is er geen ruimte voor een grote sprong. */
    .kop-s {
      font-size: max(15px, calc(var(--cell) * 0.38));
      line-height: max(calc(var(--cell) * 0.5), 1.25em);
    }
    .lead {
      max-width: none;
      font-size: max(15px, calc(var(--cell) * 0.36));
      line-height: max(calc(var(--cell) * 0.5), 1.3em);
    }
    .body {
      max-width: none;
      font-size: max(14px, calc(var(--cell) * 0.32));
      line-height: max(calc(var(--cell) * 0.5), 1.35em);
    }

    /* Hele cel hoog, net als op desktop: ritme klopt én het raakvlak is
       ruim (1 cel = 12.5cqw ≈ 49px op 390). */
    .btn {
      height: var(--cell);
      padding: 0 calc(var(--cell) * 0.6);
      font-size: max(13px, calc(var(--cell) * 0.26));
      letter-spacing: calc(var(--cell) * 0.03); /* kapitalen, zie .btn */
    }
    .btn-notch {
      width: calc(var(--cell) * 0.5);
      height: var(--cell);
    }
    /* Groter raakvlak (~44px) voor tekstlinks, zonder visuele wijziging */
    .link {
      position: relative;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -12px;
      bottom: -12px;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════
   DE STEEKREGEL — waarom een tweekoloms raster op het raster valt
   ════════════════════════════════════════════════════════════════════
   Zelfde soort fout als de vlakpadding hierboven, en dezelfde oplossing:
   een getal werd AFGELEID dat op het raster hoort te vallen, in plaats
   van gekozen.

   GEMETEN WAAROM (2026-09, na de padding-omkering). Van de resterende
   missers binnen een vlak week élke misser exact een KWART cel af
   (11,25px op 1440). Nulpunt = linkerbovenhoek van .fig-canvas,
   tolerantie 1,5px. De bron was steeds dezelfde: een tweekoloms raster
   met `1fr` kolommen en een gap van een halve cel. In een doos van 26
   cellen wordt een kolom dan (26 − 0,5)/2 = 12,75 cel, en begint de
   rechterkolom op 3 + 12,75 + 0,5 = 16,25 — een kwart cel naast de lijn
   op 16,5. Gemeten op 1440 stond 4 van de 10 meerkoloms rasters met ál
   zijn kolomstarts op een hele of halve cellijn; zes niet, en vijf
   daarvan begonnen op precies die 16,25.

   DE AFLEIDING. Voor n gelijke kolommen in een doos van W cellen met
   kolomgap g, beginnend op L:
       kolombreedte c = (W − (n−1)·g) / n
       start van kolom k = L + k · (c + g)
   en c + g laat zich vereenvoudigen tot
       c + g = (W − (n−1)·g)/n + g = (W + g) / n
   Noem dat de STEEK: de afstand van kolomstart tot kolomstart.
       start van kolom k = L + k · (W + g) / n

   DE REGEL. Ligt L op het raster, dan liggen ALLE kolomstarts erop
   zodra de steek een veelvoud van een halve cel is:
       (W + g) / n  moet een veelvoud van 0,5 cel zijn.

   TWEE DINGEN DIE HIERUIT VOLGEN, EN DIE NIET VANZELFSPREKEND ZIJN:
   (a) De KOLOMBREEDTE hoeft NIET op het raster te vallen. Alleen de
       steek telt. Een kolom van 12,5 cel is prettig leesbaar in de bron,
       maar niet wat het raster afdwingt.
   (b) Met `1fr` kolommen is de gap de ENIGE vrije knop: W en n liggen
       vast, dus de steek — en daarmee de fout — hangt volledig aan g.
       Een halve cel gap is precies de waarde die het stukmaakt.

   WAT DAT PER GEVAL OPLEVERT (W en n zoals ze in dit ontwerp voorkomen):
       n = 2, elke hele W  → W + g heel  → g = 1 cel  (steek W/2 + 0,5)
       n = 3, W = 26       → W + g deelbaar door 1,5  → g = 1 cel (steek 9)
       n = 4, W = 26       → W + g even  → g = 0 of 2 cel
   Voor twee én drie kolommen komt daar dus DEZELFDE waarde uit: een
   HELE cel gap. Dat is geen toeval maar het gevolg van W = 26 en W = 23,
   allebei hele cellen. Vier kolommen zijn het lastige geval — zie
   .sys-stappen in Systematiseren.tsx voor de afweging die daar gemaakt is.

   HOE HET IN DE BRON STAAT. De kolombreedte wordt EXPLICIET in cellen
   geschreven (`repeat(2, minmax(0, calc(var(--cell) * 12.5)))`) en de gap
   is een hele cel. Beide getallen staan er dus leesbaar, en de optelsom
   klopt per constructie met W. Dat is de kant die het minst kan
   verrotten: verandert W ooit, dan telt de rij zichtbaar niet meer op
   tot de containerbreedte in plaats van stilletjes een kwart cel te
   verschuiven. De minmax(0, …) blijft eromheen staan zodat een lang woord
   de kolom niet kan opblazen.

   UITZONDERING: auto-fit-rasters, waar n met de breedte meebeweegt en een
   vaste kolombreedte de media-query-loze opzet zou slopen. Daar blijft
   `1fr` staan en wordt alleen de GAP gezet — de steek klopt dan voor het
   aantal kolommen dat er feitelijk uitkomt. Staat per geval uitgelegd.
   ════════════════════════════════════════════════════════════════════ */

/* ── Kolom binnen het celraster ────────────────────────────────────────
   ONGELAAGD met opzet: Tailwind v4 genereert zelf een `.container`-
   utility (width:100% + breakpoint-max-widths) in @layer utilities, en
   die zou een @layer components-versie overschrijven. Ongelaagde CSS
   wint van elke @layer, dus hier blijft de celbreedte staan.

   W IN DE STEEKREGEL HIERBOVEN IS DEZE BREEDTE: 26 cellen voor .container
   (start op cel 3), 30 voor --breed (start op 1). Beide hele cellen, dus
   L ligt altijd op het raster en de steekregel is toepasbaar. Een vlak
   binnen de container trekt daar zijn padding nog vanaf: 26 − 2 × 1,5 =
   23 cel, start op 4,5 — ook heel/half.

   .container-plaat (22 cel) EN .container-smal (18 cel) ZIJN WEG (2026-09,
   derde ronde). Ze bestonden om één reden: een plaat (.sectie--kader) die
   4 à 5 cellen insprong kon alleen als de tekst een paar cellen verder
   naar binnen stond. Bram over het resultaat: "de breedte van de vlakken
   van de strook Systematiseren is zelfs te smal nu … veel te smal". De
   plaat springt nu 1 cel in en alle drie de plaatstroken staan weer op
   .container; zie .sectie--kader in de componentenlaag. */
.container {
  width: calc(var(--cell) * 26); /* 26 van 32 cellen */
  max-width: calc(100% - var(--cell) * 1);
  margin-inline: auto;
}
.container-breed {
  width: calc(var(--cell) * 30);
}
.container-vol {
  width: 100%;
  max-width: none;
}
@media (max-width: 899.98px) {
  .container,
  .container-plaat,
  .container-smal,
  .container-breed {
    width: calc(100% - var(--cell) * 1);
  } /* 0.5 cel kantlijn */
  /* DRIEKWART CEL KANTLIJN IN EEN PLAATSTROOK, zodat de plaat daar op 8
     kolommen ook echt te zien is. De volledige afweging staat in de
     mobiele query bij .sectie--kader hierboven; kort: met een halve cel
     kantlijn bleef er 12,2px cream naast de plaat over (3,1 % van 390px)
     tegen 12,5 % op desktop. Nu is dat 24,4px, oftewel 6,25 %, voor 1,9 %
     extra paginahoogte.
     DEZE REGEL MOET HIER STAAN EN NIET IN @layer components: .container
     en .container-plaat zijn ongelaagd, en ongelaagde CSS wint van elke
     laag ongeacht specificiteit. Gemeten toen hij in de laag stond: de
     stapchips liepen van x 24 tot 358 terwijl de plaat op 37 begon. */
  .sectie--kader > .container {
    width: calc(100% - var(--cell) * 1.5);
  }
}

/* ── Nieuwsbrief (NewsletterForm) in de huisstijl ──────────────────────
   Trekt het generieke Tailwind-formulier naar pill-vormen en paletkleuren.
   Hernoemd van .ab-form (de oude aanbod-sectie is weg); de Schrijven-
   sectie hangt deze klasse om de <NewsletterForm />. Ongelaagd, zodat het
   van de Tailwind-utilities in het component wint. */
.nieuwsbrief {
  margin-top: var(--cell);
} /* tekst → groep = 1 cel */
/* NewsletterForm centreert zichzelf en zet max-w-md (448px); dat is
   losgezongen van het celraster en maakte het veld te smal zodra de knop
   "ONTVANG ONSCHAALBAAR" ernaast staat. 13 cellen is een rastermaat en
   geeft het invoerveld weer een leesbare lengte. */
.nieuwsbrief form {
  margin-left: 0;
  max-width: calc(var(--cell) * 13);
}
.nieuwsbrief form > div {
  gap: calc(var(--cell) * 0.25);
}

/* ── HET LOGO-SILHOUET OP VELD ÉN KNOP ────────────────────────────────
   Bram (2026-09): "invoerveld ziet er echt nog ruk uit voor mailadres,
   wil daar voor het invoerveld en de button zo ie zo vorm van abram logo
   netzoals de buttons dat hebben." Het waren volledig ronde pillen
   (border-radius: 999px) — de enige vormen op de pagina zónder de scherpe
   hoek rechtsonder.

   DEZELFDE MAAT ALS .btn: 1.5 cel ronding op een doos van 1 cel hoog. De
   browser schaalt alle radii met dezelfde factor zodra ze op een rand
   niet passen; hier is dat de linkerrand (1.5 + 1.5 = 3 cel op 1 cel
   hoogte), dus alles wordt door 3 gedeeld: 0.5 cel = precies de halve
   hoogte, oftewel een halve cirkel links en rechtsboven. Rechtsonder
   blijft 0. Resultaat is exact het silhouet dat .btn + <Notch/> samen
   tekenen — maar zonder extra markup, want NewsletterForm.tsx is van een
   andere agent en heeft geen haakje voor een notch-SVG.

   Hoogte 1 cel maakt het veld bovendien rastermaat: de regel waarop het
   staat valt weer op een cellijn. */
.nieuwsbrief input[type="email"],
.nieuwsbrief button[type="submit"] {
  height: var(--cell);
  border-radius: calc(var(--cell) * 1.5) calc(var(--cell) * 1.5) 0
    calc(var(--cell) * 1.5);
  line-height: 1;
}
.nieuwsbrief input[type="email"] {
  border: 1.5px solid color-mix(in srgb, var(--inkt, #222222) 55%, transparent);
  background: #fff;
  color: #222;
  /* Iets ondieper dan de knop (0.9): dat is knopvlak, dit is een
     tekstinzet — 0.7 cel houdt de placeholder op leesafstand van de
     ronding zonder het veld op te eten. */
  padding: 0 calc(var(--cell) * 0.7);
  font-size: max(12px, calc(var(--cell) * 0.22)); /* = .btn-korps */
}
.nieuwsbrief input[type="email"]::placeholder {
  color: rgba(34, 34, 34, 0.45);
}
.nieuwsbrief input[type="email"]:focus {
  border-color: #222;
}
.nieuwsbrief input[type="email"]:focus-visible {
  border-color: var(--steun, #254fad);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--steun, #254fad) 25%, transparent);
  outline: none;
}
/* Exact de metriek van .btn (korps, gewicht, tracking, padding), zodat de
   nieuwsbriefknop en de knoppen elders één familie zijn. */
.nieuwsbrief button[type="submit"] {
  background: var(--knop-grond, #222222);
  color: var(--knop-inkt, #ffffff);
  padding: 0 calc(var(--cell) * 0.9);
  font-size: max(12px, calc(var(--cell) * 0.22));
  font-weight: 700;
  /* Kapitalen, net als .btn / .fig-cta / .slot-cta: élke knop op de
     homepage staat in kapitalen. Bewust op .nieuwsbrief gescoped en niet
     op de NewsletterForm zelf — /blog gebruikt diezelfde component in de
     oudere, gemengde-kast-huisstijl. */
  text-transform: uppercase;
  letter-spacing: calc(var(--cell) * 0.045);
  white-space: nowrap; /* net als .btn: het label breekt nooit */
  transition: opacity 0.15s ease;
}
.nieuwsbrief button[type="submit"]:hover {
  opacity: 0.85;
}
/* Statusregel onder het veld op de eyebrow-maat van de trap (0.19 cel). */
.nieuwsbrief form p {
  margin-top: calc(var(--cell) * 0.25);
  font-size: max(11px, calc(var(--cell) * 0.19));
}
.nieuwsbrief form .text-red-600 {
  color: #aa2d00;
} /* roest i.p.v. Tailwind-rood */
@media (max-width: 899.98px) {
  /* iOS zoomt in op inputs < 16px; forceer 16px op mobiel */
  .nieuwsbrief input[type="email"],
  .nieuwsbrief button[type="submit"] {
    font-size: 16px;
  }
  /* Gestapeld: input vol breed, knop eronder. Zelfde padding als .btn
     mobiel (0.6 cel), het veld een tikje ondieper — zie desktop. */
  .nieuwsbrief form {
    max-width: none;
  }
  .nieuwsbrief form > div {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--cell) * 0.25);
  }
  .nieuwsbrief input[type="email"] {
    padding: 0 calc(var(--cell) * 0.5);
  }
  /* Het label mag hier WEL breken: op 320px past "ONTVANG ONSCHAALBAAR"
     niet op één regel binnen de kantlijnen, en een knop die uit het
     scherm loopt is erger dan een knop van twee regels. height: auto met
     min-height van een cel laat hem meegroeien; het silhouet blijft
     kloppen omdat de browser de ronding met de doos meeschaalt. */
  .nieuwsbrief button[type="submit"] {
    width: 100%;
    height: auto;
    min-height: var(--cell);
    padding: calc(var(--cell) * 0.25) calc(var(--cell) * 0.6);
    line-height: 1.25;
    white-space: normal;
    letter-spacing: calc(var(--cell) * 0.03); /* kapitalen, zie .btn mobiel */
  }
}
/* ════════════════════════════════════════════════════════════════════
   SLOT/FOOTER (#222) met opendue-reveal.
   De footer staat BUITEN .fig-root (container-type = contain: layout op
   fig-root zou fixed anders hijacken) en is zijn eigen inline-size
   container voor --cell. Desktop (≥900px): fixed aan de onderzijde met
   lage z-index; .fig-root krijgt margin-bottom = footerhoogte (JS-gemeten
   CSS-var --footer-h) zodat de laatste sectie eroverheen wegschuift en
   hem onthult. Mobiel: gewone flow.
   ════════════════════════════════════════════════════════════════════ */
.site-foot {
  --cell: calc(100cqw / 32);
  position: relative;
  container-type: inline-size;
  /* Zelfde token als .grond-donker, zodat de .doorloop--kleur in de
     laatste sectie exact deze kleur door de grens omhoog trekt. */
  background: var(--g-donker);
  color: #fef7ee;
  font-family: var(--font-sans);
  overflow: hidden;
}
@media (min-width: 900px) {
  .site-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* onder de content (fig-canvas z 2) */
    /* ── DE FOOTER IS EEN STROOK, DUS SCHERMVULLEND (2026-09) ────────
       Bram: "footer is niet fullscreen, zie als ik helemaal uitscrol net
       nog bovenste pagina eruit steken."
       Precies wat er gebeurde. De reveal werkt zo: de footer staat fixed
       onderaan en .fig-root krijgt margin-bottom = --footer-h (de
       JS-gemeten hoogte), zodat de content er in dat laatste stuk scroll
       overheen wegschuift. Hoe hoog de footer is, zóveel scherm wordt er
       onthuld — en de footer mat op 1440x900 maar ~700px. Aan het einde
       van de pagina bleef dus altijd een strook van de steen sectie
       boven de footer staan.
       100svh maakt hem net zo schermvullend als elke andere strook (zie
       .sectie), en omdat --footer-h die hoogte meet, groeit de
       margin-bottom van .fig-root mee: helemaal uitgescrold is het beeld
       dan volledig footer.
       min-height en niet height: is de INHOUD hoger dan het venster (een
       laag venster als 1366x650), dan groeit de footer gewoon mee. Zijn
       bovenkant valt dan buiten beeld — onvermijdelijk bij een fixed
       element met bottom: 0 — maar dat gedrag bestond al en wordt door
       deze regel niet erger: 100svh is een ONDERgrens, geen bovengrens.
       svh en niet vh: de stabiele schermmaat, dus geen sprong als de
       mobiele adresbalk in- of uitschuift (de footer is hier weliswaar
       desktop-only, maar het houdt de maat gelijk aan .sectie). */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .fig-root {
    margin-bottom: var(--footer-h, 0px);
  }
}

/* ── Cookiekeuze: bewust een rustige, zelfstandige laag ────────────── */
.cookie-layer {
  position: fixed;
  inset: auto 0 0;
  z-index: 1000;
  padding: 16px;
  pointer-events: none;
}
.cookie-panel {
  pointer-events: auto;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
  color: #222;
  border: 1px solid rgba(34, 34, 34, 0.2);
  box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.18);
  border-radius: 20px 20px 0 20px;
}
.cookie-panel h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}
.cookie-panel p {
  margin: 10px 0 0;
  max-width: 54ch;
  line-height: 1.5;
}
.cookie-kicker {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cookie-choices {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.cookie-choice {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  background: #fef7ee;
  border: 1px solid rgba(34, 34, 34, 0.12);
  border-radius: 12px 12px 0 12px;
  cursor: pointer;
}
.cookie-choice span {
  display: grid;
  gap: 3px;
}
.cookie-choice small {
  color: #555;
  line-height: 1.35;
}
.cookie-choice input {
  width: 21px;
  height: 21px;
  accent-color: #222;
  flex: 0 0 auto;
}
.cookie-note {
  font-size: 13px;
}
.cookie-note a {
  color: inherit;
  text-underline-offset: 3px;
}
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.cookie-button {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #222;
  border-radius: 14px 14px 0 14px;
  background: #222;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cookie-button--quiet {
  background: #fff;
  color: #222;
}
.cookie-preferences-link,
.sf-cookie-link {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookie-preferences-link {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  /* The chat avatar occupies the opposing lower corner. Keep this small,
     isolated fixed control out of its tap target and paint surface. */
  z-index: 140;
  contain: layout paint;
  transform: translateZ(0);
  padding: 8px 10px;
  color: #222;
  background: #fff;
  border: 1px solid rgba(34, 34, 34, 0.2);
  border-radius: 8px 8px 0 8px;
  font-size: 12px;
}
@media (max-width: 520px) {
  .cookie-layer {
    padding: max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cookie-button {
    width: 100%;
  }
  .cookie-panel {
    max-height: calc(100svh - 16px);
    overflow: auto;
  }
}
/* Raster loopt door over het donkere vlak. De footer is een eigen
   container (eigen --cell = 100cqw/32), dus de kolommen vallen exact op
   dezelfde x als het paginaraster. Zelfde inkt, zelfde dekking, geen
   radiaal masker: de lijnen springen nergens van hard naar zacht. */
.foot-raster {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Zelfde vier lagen als .fig-canvas::before: hoofdlijn op hele cellen,
     hulplijn op halve. De footer is een eigen container met hetzelfde
     nulpunt x = 0, dus de kolommen (én de halve kolommen) vallen exact
     op die van het paginaraster. */
  background-image:
    linear-gradient(
      to right,
      var(--raster-inkt) var(--raster-lijn-dikte),
      transparent var(--raster-lijn-dikte)
    ),
    linear-gradient(
      to bottom,
      var(--raster-inkt) var(--raster-lijn-dikte),
      transparent var(--raster-lijn-dikte)
    ),
    linear-gradient(
      to right,
      var(--raster-hulp-inkt) var(--raster-hulp-dikte),
      transparent var(--raster-hulp-dikte)
    ),
    linear-gradient(
      to bottom,
      var(--raster-hulp-inkt) var(--raster-hulp-dikte),
      transparent var(--raster-hulp-dikte)
    );
  background-size:
    var(--cell) var(--cell),
    var(--cell) var(--cell),
    calc(var(--cell) / 2) calc(var(--cell) / 2),
    calc(var(--cell) / 2) calc(var(--cell) / 2);
  background-position: 0 0;
}
.foot-inner {
  position: relative;
  z-index: 2;
  padding: calc(var(--cell) * 3) calc(var(--cell) * 3) calc(var(--cell) * 0.9);
  text-align: center;
}
.slot-mega {
  margin: 0;
  font-size: calc(var(--cell) * 2.3);
  line-height: calc(var(--cell) * 1.85);
  font-weight: 800;
  color: #fef7ee;
}
.slot-sub {
  max-width: calc(var(--cell) * 18);
  margin: calc(var(--cell) * 1) auto 0;
  font-size: max(13px, calc(var(--cell) * 0.375));
  line-height: 1.6;
}
/* DE AGENDA-KNOP IN DE FOOTER IS WEG (2026-09, vierde ronde). Bram: "in de
   footer vind ik die twee CTA's echt te veel." .slot-cta-wrap, .slot-cta,
   .slot-notch, .slot-note en .slot-note-mono (de cream pill met notch en
   de regel "45 min · 1-op-1 met Bram · kosteloos" eronder) stonden hier
   en zijn met de knop mee verwijderd; de zin zelf staat nog op drie
   plekken (hero, blok 01, slot-CTA) met dezelfde zetting. Wat de footer
   nu draagt staat in SiteFooter.tsx: de payoff, ABRAM megagroot, en
   onderin alleen Onschaalbaar. */
.slot-footer {
  margin-top: calc(var(--cell) * 2.4);
}
/* Footer-regel: ALLEEN Plus Jakarta Sans (geen mono), met iconen */
.slot-footer-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cell) * 0.3);
  margin: 0;
  font-size: max(12px, calc(var(--cell) * 0.2));
  opacity: 0.9;
}
.slot-footer-regel a {
  color: #fef7ee;
  text-decoration: none;
  border-bottom: 1px solid rgba(254, 247, 238, 0.45);
}
.slot-footer-regel a:hover {
  border-color: #fef7ee;
}
.slot-footer-regel a.foot-icon {
  display: inline-flex;
  border-bottom: none;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.slot-footer-regel a.foot-icon:hover {
  opacity: 1;
}
.foot-icon svg {
  width: calc(var(--cell) * 0.3);
  height: calc(var(--cell) * 0.3);
  display: block;
}
.slot-divider {
  margin-top: calc(var(--cell) * 0.5);
  height: 1px;
  background: rgba(254, 247, 238, 0.35);
}

/* ════════════ Footer, mobiel (< 900px) ════════════ */
@media (max-width: 899.98px) {
  /* Footer mobiel: gewone flow (geen reveal), zelfde inhoud */
  .site-foot {
    --cell: calc(100cqw / 8);
  }
  .foot-inner {
    padding: calc(var(--cell) * 1.6) calc(var(--cell) * 0.5)
      calc(var(--cell) * 0.5);
  }
  .slot-mega {
    font-size: calc(var(--cell) * 0.85);
    line-height: calc(var(--cell) * 0.7);
  }
  .slot-sub {
    max-width: none;
    margin-top: calc(var(--cell) * 0.7);
    font-size: max(13px, calc(var(--cell) * 0.34));
    line-height: 1.62;
  }
  .slot-footer {
    margin-top: calc(var(--cell) * 1.6);
  }
  .slot-footer-regel {
    font-size: max(12px, calc(var(--cell) * 0.24));
    gap: calc(var(--cell) * 0.25);
  }
  .foot-icon svg {
    width: calc(var(--cell) * 0.36);
    height: calc(var(--cell) * 0.36);
  }
  /* Groter raakvlak voor de social-iconen zonder visuele wijziging */
  .slot-footer-regel a.foot-icon {
    position: relative;
  }
  .slot-footer-regel a.foot-icon::after {
    content: "";
    position: absolute;
    inset: -12px;
  }
}

/* ── Site-brede CAD-kruisdraad-cursor (z 199): twee hairlines + coord-chip ──
   Twee 1px lijnen over de volle viewport die de cursor volgen en op de
   dichtstbijzijnde cellijn snappen; een mono-chip toont K<kolom>·R<rij>.
   Kleur = sectie-accent via currentColor (JS zet `color` op .cad). Uit op
   touch/coarse pointers. Vervangt de oude grijze zweefcel (.fig-hovercell). */
.cad {
  position: fixed;
  inset: 0;
  z-index: 199;
  pointer-events: none;
  opacity: 0;
  color: #222;
  transition: opacity 0.15s ease;
}
.cad-h,
.cad-v {
  position: absolute;
  top: 0;
  left: 0;
  background: currentColor;
  opacity: 0.2;
  transition: transform 0.06s ease-out;
  will-change: transform;
}
.cad-h {
  right: 0;
  height: 1px;
}
.cad-v {
  bottom: 0;
  width: 1px;
}
.cad-chip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 6px;
  background: #fef7ee;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: currentColor;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: max(10px, 0.66rem);
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: transform 0.06s ease-out;
  will-change: transform;
}
/* Cream-accent (footer): chip geïnverteerd, anders cream-op-cream */
.cad[data-invert="1"] .cad-chip {
  background: #222;
}
@media (hover: none), (pointer: coarse) {
  .cad {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* geen smoothing/lerp: directe snap 1:1 met de eigen cursor */
  .cad-h,
  .cad-v,
  .cad-chip {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Vector-inspectie hoversysteem (InspectorOverlay): gestippelde
   bounding-box met marching ants, vier hoek-ankers en een mono-label
   met de gemeten maten. Eén fixed overlay (z 200, pointer-events none),
   kleur = sectie-accent via currentColor (JS zet `color` op .insp).
   ════════════════════════════════════════════════════════════════════ */
.insp {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  color: #222;
}
.insp-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.insp-rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: insp-march 10s linear infinite;
}
.insp-anc {
  fill: currentColor;
}
.insp-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  min-height: 17px;
  padding: 2px 7px;
  background: #fef7ee;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: currentColor;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  will-change: transform;
}
/* Cream-accent (footer): label geïnverteerd, anders cream-op-cream */
.insp[data-invert="1"] .insp-label {
  background: #222;
}
@keyframes insp-march {
  to {
    stroke-dashoffset: -240;
  }
}
@media (prefers-reduced-motion: reduce) {
  .insp-rect {
    animation: none;
  } /* statische stippellijn */
}

/* ════════════════════════════════════════════════════════════════════
   Zelfmeting-choreografie bij binnenkomst (MeasureIntro): dezelfde
   blueprint-taal als InspectorOverlay — gestippelde boxes met marching
   ants, hoek-ankers en typende mono-labels — maar één keer per sessie op
   load, ook op mobiel. Eigen fixed overlay (z 195, onder .insp), drie
   groepen die achtereenvolgens infaden en daarna samen uitfaden.
   ════════════════════════════════════════════════════════════════════ */
.mint {
  position: fixed;
  inset: 0;
  z-index: 195;
  pointer-events: none;
  opacity: 0;
  color: #222; /* hero = cream, geen data-inspect-accent → fallback #222 */
  transition: opacity 0.4s ease;
}
.mint-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mint-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.mint-rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: insp-march 10s linear infinite;
}
.mint-anc {
  fill: currentColor;
}
.mint-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  min-height: 17px;
  padding: 2px 7px;
  background: #fef7ee;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: currentColor;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .mint-rect {
    animation: none;
  } /* statische stippellijn, geen ants */
}

/* Homepage: one visible-edge rhythm. Intrinsic section content is measured
   once; a half-cell remainder is shared equally above and below it. Other
   pages retain their existing section-height contract. */
.fig-canvas
.home-band:is(
  #verschuiving,
  #vormen,
  #systematiseren,
  #bewijs,
  #essentie,
  #spreken,
  #schrijven,
  #contact
) {
  --home-sectie-ruimte: calc(var(--cell) * 4);
  --sectie-extra: 0;
  --sectie-min-cel: 0;
  --kader-boven: 0;
  min-height: 0;
  height: auto;
  padding-block: var(--home-sectie-ruimte);
  justify-content: center;
}
.fig-canvas
  .home-band:is(
    #verschuiving,
    #vormen,
    #systematiseren,
    #bewijs,
    #essentie,
    #spreken,
    #schrijven,
    #contact
  )
  > .container {
  height: auto;
  min-height: 0;
  flex-shrink: 0;
}
@supports (height: calc-size(auto, round(up, size, 10px))) {
  .fig-canvas
    .home-band:is(
      #verschuiving,
      #vormen,
      #systematiseren,
      #bewijs,
      #essentie,
      #spreken,
      #schrijven,
      #contact
    ) {
    height: calc-size(auto, round(up, size, calc(var(--cell) * 0.5)));
  }
}
.fig-canvas .home-band.sectie--kader::before {
  top: 0;
}
.fig-canvas .home-band.sectie--kader-door::before {
  border-bottom-left-radius: calc(var(--cell) * var(--kader-r, 3));
}
.fig-canvas .home-band > .plaat-rand,
.fig-canvas .home-band > .plaat-uitloop {
  display: none;
}
.home-band .home-section-title {
  margin: 0;
  font-size: calc(var(--cell) * 1.1);
  line-height: var(--cell);
  font-weight: 800;
  letter-spacing: normal;
}
.home-band .home-section-title + .lead {
  margin-top: calc(var(--cell) * 0.5);
}
.home-band .sys-blok {
  height: auto;
  align-content: start;
}
.home-band .sys-begrip {
  align-items: start;
}
.home-band .sys-begrip-cta {
  align-self: center;
}
.home-band .sys-card-header > .eyebrow {
  margin-top: 0;
}
.home-band .sys-card-header > .sys-kort-tekst {
  margin-top: calc(var(--cell) * 0.5);
}
.home-band .sch-kolommen {
  margin-top: var(--cell);
}
.home-band > .sch-vlak {
  flex-shrink: 0;
}
/* The portrait still crosses the speaking/writing boundary, but fits in
   the two shared section margins instead of needing a special blank strip. */
.home-band > .sch-figuur {
  --fig-h: 7.5;
  --fig-vel: 4;
}
@media (max-width: 899.98px) {
  .fig-canvas
    .home-band:is(
      #verschuiving,
      #vormen,
      #systematiseren,
      #bewijs,
      #essentie,
      #spreken,
      #schrijven,
      #contact
    ) {
    --home-sectie-ruimte: calc(var(--cell) * 1.5);
  }
  .home-band .home-section-title {
    font-size: calc(var(--cell) * 0.7);
    line-height: var(--cell);
  }
  .home-band > .sch-figuur {
    --fig-h: 2.5;
    --fig-vel: 1.5;
  }
}
/* Raised Systematiseren and Contact plates: paired border compensation.
   The shared reading margin is measured to the visible plate, not to the
   underlying section box. Neighbours reserve the overlap; the raised
   plate deducts it. The section heights still snap only once. */
.fig-canvas {
  --home-plaat-overlap: calc(var(--cell) * 3);
}
.fig-canvas #vormen.home-band {
  padding-bottom: calc(var(--home-sectie-ruimte) + var(--home-plaat-overlap));
}
.fig-canvas #systematiseren.home-band {
  padding-block: calc(var(--home-sectie-ruimte) - var(--home-plaat-overlap));
}
.fig-canvas #systematiseren.home-band::before,
.fig-canvas #contact.home-band::before {
  top: calc(-1 * var(--home-plaat-overlap));
}
.fig-canvas #systematiseren.home-band::before {
  border-bottom-left-radius: 0;
}
.fig-canvas #systematiseren.home-band > .plaat-rand,
.fig-canvas #contact.home-band > .plaat-rand {
  display: block;
  top: calc(-1 * var(--home-plaat-overlap));
  height: var(--home-plaat-overlap);
}
.fig-canvas #bewijs.home-band {
  padding-top: calc(var(--home-sectie-ruimte) + var(--home-plaat-overlap));
}
.fig-canvas #bewijs.home-band > .plaat-uitloop {
  display: block;
  height: calc(var(--home-plaat-overlap) + 1px);
}
.fig-canvas #schrijven.home-band {
  padding-bottom: calc(var(--home-sectie-ruimte) + var(--home-plaat-overlap));
}
.fig-canvas #contact.home-band {
  padding-top: calc(var(--home-sectie-ruimte) - var(--home-plaat-overlap));
}
/* A substantially larger portrait, with the head in the space between
   the speaking cards and the feet on the newsletter sheet. */
.home-band > .sch-figuur {
  --fig-h: 22;
}
@media (max-width: 899.98px) {
  .fig-canvas {
    --home-plaat-overlap: var(--cell);
  }
  .fig-canvas #bewijs.home-band > .plaat-uitloop {
    --kader-x: 0.5;
    --kader-r: 0.5;
  }
  .home-band > .sch-figuur {
    --fig-h: 6.5;
    left: calc(var(--cell) * 0.5);
    right: auto;
  }
}

/* The about link belongs to the portrait and straddles the actual colour
   boundary; it does not borrow space from the newsletter content. */
#schrijven.home-band > .sch-about {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(var(--cell) * 26.75);
  transform: translateY(-50%);
  pointer-events: auto;
  white-space: nowrap;
  --knop-grond: #fff;
  --knop-inkt: #222;
}
#schrijven.home-band > .sch-about .btn {
  background: #fff;
  color: #222;
}
#schrijven.home-band > .sch-about .btn-notch {
  color: #fff;
}
.fig-body .fig-b-reeks {
  --bvlak-h: 1;
}
.fig-body .fig-b-vlak {
  align-items: center;
}
.fig-body .fig-b-vlak > span {
  --bl-corr: 0px;
  top: 0;
  line-height: 1;
}
#systematiseren .sys-stap {
  align-items: center;
}
#systematiseren .sys-stap > span {
  --bl-corr: 0px;
  top: 0;
  align-self: center;
  line-height: 1;
}
#systematiseren .sys-terzijde {
  margin-top: calc(var(--cell) * 0.5);
}
@media (max-width: 899.98px) {
  #schrijven.home-band > .sch-about {
    left: calc(var(--cell) * 3);
  }
}
@media (max-width: 899.98px) {
  #spreken .btn-rij {
    justify-content: flex-end;
  }
}

/* Hero and content leads share the same responsive reading size. */
.fig-canvas {
  --home-lead-size: max(14px, calc(var(--cell) * 0.375));
}
.fig-body > .hero-lead,
.home-band .lead {
  font-size: var(--home-lead-size);
  line-height: max(calc(var(--cell) * 0.5), 1.3em);
}
#essentie .ess-visie {
  justify-content: center;
}
@media (max-width: 899.98px) {
  .fig-canvas {
    --home-lead-size: max(15px, calc(var(--cell) * 0.36));
  }
}
/* Speaking offers have their own left column. The portrait occupies the
   free right column, so its complete silhouette stays in front naturally. */
@media (min-width: 900px) {
  #spreken .spr-rij {
    width: calc(var(--cell) * 15.5);
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--cell) * 0.5);
  }
}

/* Last contact plate: the footer ground starts behind the final three
   cells of the plate. Keep the existing content box and its reading
   margins unchanged: the overlap is entirely painted underneath it.
   This works with both the fixed reveal and the short/mobile flow footer,
   and also covers an enclosing cream ground on editorial pages. */
.fig-canvas .contact-footer-plate::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(var(--cell) * 3);
  z-index: -2;
  background: var(--g-donker);
  pointer-events: none;
}
.fig-canvas .contact-footer-plate::before {
  border-bottom-left-radius: calc(var(--cell) * 3);
}
@media (max-width: 899.98px) {
  .fig-canvas .contact-footer-plate::after {
    height: var(--cell);
  }
  .fig-canvas .contact-footer-plate::before {
    border-bottom-left-radius: var(--cell);
  }
}

/* Size the supplied lockup by its visible 804.4002-unit mark, not its padded 1060-unit canvas. */
.fig-logo {
  height: var(--logo-h);
  align-items: flex-start;
}
.fig-logo-lockup {
  display: block;
  width: calc(var(--logo-h) * 3.4255);
  height: auto;
  flex-shrink: 0;
}
@media (max-width: 899.98px) {
  .fig-navpill-m {
    padding-left: calc(var(--cell) * 0.17875);
  }
}

/* Kostr keeps the Abram CTA shape, with a readable label on the dark ink. */
.fig-body .btn.btn-ink {
  color: #fff;
}
.fig-headline,
.fig-body .hero-lead,
.fig-navlinks a,
.fig-cta,
.site-foot {
  font-family: var(--font-sans), system-ui, sans-serif;
}
.site-foot .sf-powered {
  margin-top: calc(var(--cell) * 0.25);
}
.sf-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--cell) * 2);
}

/* Kostr-logo: centreer de zichtbare 804.4px hoge tekening in de header,
   niet het 1060px hoge SVG-canvas met transparante ruimte onderaan. */
.fig-logo {
  position: relative;
  display: block;
  width: calc(var(--logo-h) * 3.4255);
  height: var(--logo-h);
}
.fig-logo-lockup {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
}

/* Alleen het witte Kostr-beeldmerk. De bovenrand begint altijd onder de
   vaste header; bij een lage viewport krimpt het teken proportioneel zodat
   het binnen de resterende hero-ruimte blijft. */
#hero > .fig-merk.kostr-watermerk {
  top: calc(var(--cell) * 2.5);
  bottom: auto;
  width: min(
    calc(var(--cell) * 20),
    max(0px, calc(153.846svh - var(--cell) * 5.385))
  );
  height: min(
    calc(var(--cell) * 13),
    max(0px, calc(100svh - var(--cell) * 3.5))
  );
  aspect-ratio: 20 / 13;
  transform: translateX(-50%);
  background: #fff;
  -webkit-mask: url("/brand/regelr-mark.svg") center / 100% 100% no-repeat;
  mask: url("/brand/regelr-mark.svg") center / 100% 100% no-repeat;
}
@media (max-width: 899.98px) {
  #hero > .fig-merk.kostr-watermerk {
    top: calc(var(--cell) * 2);
    width: min(
      calc(var(--cell) * 6),
      max(0px, calc(150svh - var(--cell) * 4.5))
    );
    height: min(
      calc(var(--cell) * 4),
      max(0px, calc(100svh - var(--cell) * 3))
    );
    aspect-ratio: 3 / 2;
  }
}

/* Zonder portret kan de volledige hero weer exact om kolom 16 centreren. */
#hero .fig-headline,
#hero .fig-body,
#hero .fig-eyebrow {
  margin-left: auto;
  margin-right: auto;
}