/* Effectmodules voor de sac-site. Elk blok heeft zijn eigen voorvoegsel.
   Samengevoegd tot een bestand: minder verzoeken en maar een versiestempel. */

/* ===== rust ===== */
/* Ensar Yufka — module "rust": rustige weergave en meldingen
   ==========================================================================
   Twee dingen waar de rest van de site op leunt:

   1. De schakelaar "Rustige weergave" in de voettekst. Aan betekent: de klasse
      'rustig' staat op <html> en alle beweging is uit. Die klasse wordt al in
      de <head> gezet (zie "kopscript" in rust.json), dus vóór het eerste
      schilderen; daarom is er geen flits van beweging voordat dit script laadt.

   2. Het meldingsgebied rechtsonder, dat luistert naar 'ensar-melding'.

   De uit-stand staat hieronder twee keer: onder @media(prefers-reduced-motion)
   en onder html.rustig. Die twee blokken zijn regel voor regel gelijk. Wijzig
   je er een, wijzig dan de ander mee.

   Kleuren komen uit sac.css. Er wordt hier geen tweede palet gemaakt.
   Gemeten contrast (WCAG 2.1, berekend, niet geschat):
     --deeg #F3EBDD op paneel #17130F ............ 15,6:1
     --deeg-zacht #C9BFAF op paneel #17130F ...... 10,2:1
     --deeg-zacht #C9BFAF op grond #0D0B09 ....... 10,8:1
     --goud-licht #E8CE73 op paneel #17130F ...... 11,9:1
     #17130C op --goud #C9A227 (knop aan) ........  7,6:1
     paneelrand rgba(243,235,221,.38) op grond ...  3,4:1  (>= 3:1, 1.4.11)
     --goud #C9A227 op balkspoor #312D28 .........  5,7:1  (>= 3:1, 1.4.11)
     spoorrand rgba(243,235,221,.45) op grond ....  4,0:1  (>= 3:1, 1.4.11)
   ========================================================================== */


/* ═══════════════════════════════════════════════════════ 1. RUSTIGE WEERGAVE
   De site zelf zet zijn beweging uit onder prefers-reduced-motion (zie het
   blok onderaan sac.css). Die weg blijft bestaan. Hieronder staat dezelfde
   uit-stand nog een keer, nu onder html.rustig, zodat de schakelaar hetzelfde
   doet zonder dat de pagina herladen hoeft.

   animation-iteration-count staat er expres bij: alleen de duur op .01ms
   zetten laat een oneindige animatie flikkeren in plaats van stoppen.
   ═════════════════════════════════════════════════════════════════════════ */

html.rustig{scroll-behavior:auto !important}
html.rustig *,
html.rustig *::before,
html.rustig *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  animation-delay:0s !important;
  transition-duration:.01ms !important;
  transition-delay:0s !important;
  scroll-behavior:auto !important;
}
html.rustig .stapel{height:auto}
html.rustig .stapel-vast{position:static;min-height:0;padding:var(--ruim) clamp(1.25rem,4vw,3rem)}
html.rustig .vellen{display:none}
html.rustig .cijfer{opacity:1;transform:none}
html.rustig .sac[data-onthul] img{clip-path:none !important}
html.rustig .band{transform:none !important}
html.rustig .baan:hover .baan-beeld img{transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .stapel{height:auto}
  .stapel-vast{position:static;min-height:0;padding:var(--ruim) clamp(1.25rem,4vw,3rem)}
  .vellen{display:none}
  .cijfer{opacity:1;transform:none}
  .sac[data-onthul] img{clip-path:none !important}
  .band{transform:none !important}
  .baan:hover .baan-beeld img{transform:none}
}


/* ══════════════════════════════════════════════════════ 2. DE SCHAKELAAR
   Onderhuids een echte <input type="checkbox"> met een <label>. Spatie werkt,
   tab werkt, de focusring hangt om het spoor. Het vinkje zelf is doorzichtig
   maar niet display:none, want dan zou het niet meer focusbaar zijn.
   ═════════════════════════════════════════════════════════════════════════ */

.rust-schakel{
  position:relative;
  display:flex;
  justify-content:center;
  margin:0;
}

.rust-vink{
  position:absolute;
  left:0;top:0;
  width:1px;height:1px;
  margin:0;padding:0;
  opacity:0;
  pointer-events:none;
}

.rust-label{
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  /* de padding maakt van het geheel een raakvlak van ruim 40px hoog */
  padding:.5rem .25rem;
  cursor:pointer;
  color:var(--deeg-zacht);
  font-size:.875rem;
  font-weight:500;
  line-height:1.3;
}
.rust-label:hover{color:var(--deeg)}

.rust-spoor{
  position:relative;
  flex:none;
  width:2.75rem;height:1.5rem;
  border-radius:999px;
  background:rgba(243,235,221,.10);
  border:1px solid rgba(243,235,221,.45);
  transition:background-color .2s ease,border-color .2s ease;
}

.rust-knop{
  position:absolute;
  top:50%;left:3px;
  width:1rem;height:1rem;
  margin-top:-.5rem;
  border-radius:50%;
  background:var(--deeg-zacht);
  transition:transform .2s cubic-bezier(.2,.6,.2,1),background-color .2s ease;
}

.rust-vink:checked + .rust-label .rust-spoor{background:var(--goud);border-color:var(--goud)}
.rust-vink:checked + .rust-label .rust-knop{transform:translateX(1.25rem);background:#17130C}

/* De ring hoort zichtbaar om het spoor, niet om het onzichtbare vinkje. */
.rust-vink:focus-visible + .rust-label .rust-spoor{outline:2px solid var(--goud-licht);outline-offset:3px}

/* Beschrijving voor een schermlezer. Niet display:none, want dan leest hij hem niet. */
.rust-verborgen{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ═══════════════════════════════════════════════════════════ 3. MELDINGEN
   Rechtsonder, vast op het scherm. Het gebied spant met links én rechts een
   veilige marge en de melding zelf krijgt min(23rem,100%); zo kan er nooit
   iets buiten het scherm vallen en gaat de pagina nooit horizontaal schuiven.
   ═════════════════════════════════════════════════════════════════════════ */

.rust-meldingen{
  position:fixed;
  z-index:9000;
  left:clamp(.75rem,3vw,1.5rem);
  right:clamp(.75rem,3vw,1.5rem);
  bottom:clamp(.75rem,3vw,1.5rem);
  bottom:max(clamp(.75rem,3vw,1.5rem),env(safe-area-inset-bottom,0px));
  display:grid;
  gap:.5rem;
  justify-items:end;
  align-content:end;
  /* het gebied zelf vangt geen klikken; de meldingen erin wel */
  pointer-events:none;
}

.rust-melding{
  pointer-events:auto;
  position:relative;
  width:min(23rem,100%);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  column-gap:.625rem;
  padding:.875rem 1rem 1.0625rem;
  background:#17130F;
  border:1px solid rgba(243,235,221,.38);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  color:var(--deeg);
  font-size:.9375rem;
  line-height:1.5;
  overflow:hidden;
  opacity:0;
  transform:translateY(.75rem);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.6,.2,1);
}
.rust-melding.rust-in{opacity:1;transform:none}
.rust-melding.rust-uit{opacity:0;transform:translateY(.5rem)}

.rust-melding-teken{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.125rem;height:1.5rem;
  flex:none;
}
.rust-melding-teken svg{display:block;width:18px;height:18px}
.rust-melding-gelukt .rust-melding-teken{color:var(--goud-licht)}
.rust-melding-info .rust-melding-teken{color:var(--deeg-zacht)}

.rust-melding-tekst{
  margin:0;
  color:var(--deeg);
  overflow-wrap:anywhere;
}

.rust-melding-dicht{
  flex:none;
  width:2rem;height:2rem;
  margin:-.25rem -.25rem 0 0;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  background:none;
  border:0;
  border-radius:50%;
  color:var(--deeg-zacht);
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.rust-melding-dicht svg{display:block;width:14px;height:14px}
.rust-melding-dicht:hover{background:rgba(243,235,221,.10);color:var(--deeg)}
.rust-melding-dicht:focus-visible{outline:2px solid var(--goud-licht);outline-offset:1px}

/* Het aftellende balkje. De breedte wordt door rust.js gezet met scaleX. */
.rust-balk{
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:rgba(243,235,221,.12);
}
.rust-balk-vul{
  display:block;
  width:100%;height:100%;
  transform-origin:left center;
  transform:scaleX(1);
  background:var(--deeg-zacht);
}
.rust-melding-gelukt .rust-balk-vul{background:var(--goud)}

/* Bij rustige weergave verschijnt de melding zonder te schuiven en verdwijnt
   hij zonder te schuiven. Verschijnen doet hij wél: het is een bevestiging,
   geen versiering. */
html.rustig .rust-melding{opacity:1;transform:none !important}
html.rustig .rust-melding.rust-uit{opacity:0}
html.rustig .rust-knop{transition:none}
html.rustig .rust-spoor{transition:none}

@media(prefers-reduced-motion:reduce){
  .rust-melding{opacity:1;transform:none !important}
  .rust-melding.rust-uit{opacity:0}
  .rust-knop{transition:none}
  .rust-spoor{transition:none}
}

/* Op een smal scherm mag de melding de volle veilige breedte gebruiken. */
@media(max-width:26rem){
  .rust-melding{width:100%}
  .rust-melding-tekst{font-size:.9375rem}
}

/* ===== kop ===== */
/* Ensar Yufka: kopieerknop bij telefoon en e-mail
   ==========================================================================
   Voorvoegsel: kop

   De knop wordt door kop.js aangemaakt, nooit door de HTML. Zonder JavaScript
   staat er dus niets extra in de regel en blijft de tel:- of mailto:-link
   gewoon werken.

   Maatvoering: de knop is 24 bij 24 px (de ondergrens van WCAG 2.2 voor een
   raakvlak) en staat met vertical-align:-.4em precies binnen de regelhoogte
   die de tekst zelf al opeist (16 px tekst, regelhoogte 1,65 = 26,4 px).
   Daardoor wordt de regel niet hoger als de knop erbij komt.

   De twee tekens (kopie en vinkje) liggen in dezelfde rastercel op elkaar.
   Bij het wisselen verandert er geen enkele maat, dus de regel verspringt niet.

   Kleuren komen uit sac.css. Gecontroleerd op de grond waar de tekst echt op
   staat: --deeg-zacht (#C9BFAF) op de kaart --grond-op (#15110E) is 10,3:1,
   op de pagina --grond (#0D0B09) 10,8:1. Het vinkje --goud-licht (#E8CE73)
   haalt 12,1:1. Ruim boven 4,5:1.
   ========================================================================== */

:root{
  --kop-vlak:rgba(243,235,221,.08);
  --kop-vlak-diep:rgba(243,235,221,.15);
  --kop-rand-gelukt:rgba(201,162,39,.5);
}

.kop-knop{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:1.5rem;
  height:1.5rem;
  margin:0 0 0 .375rem;
  padding:0;
  vertical-align:-.4em;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:var(--deeg-zacht);
  font-family:inherit;
  font-size:inherit;
  line-height:1;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.kop-knop:hover{
  background:var(--kop-vlak);
  color:var(--deeg);
}
.kop-knop:active{background:var(--kop-vlak-diep)}
.kop-knop:focus-visible{outline:2px solid var(--goud-licht);outline-offset:2px}

/* Gelukt: het vinkje in goud. Mislukt: neutraal, met een dunne rand, want de
   uitleg staat in de melding en de tekst is dan zelf geselecteerd. */
.kop-knop[data-kop-staat="gelukt"]{
  color:var(--goud-licht);
  border-color:var(--kop-rand-gelukt);
  background:var(--kop-vlak);
}
.kop-knop[data-kop-staat="mis"]{
  color:var(--deeg);
  border-color:var(--lijn);
}

/* binnen.css geeft elke svg in de inhoud een maat en geeft die in de
   contactkaart bovendien de kleur goud-licht. Die regels wegen 0-2-1; hieronder
   staat daarom dezelfde regel met de kaart erbij (0-3-0), zodat de tekens hun
   eigen maat en de kleur van de knop houden, ongeacht de volgorde van de
   stylesheets. */
.binnen .contact-card .kop-knop .kop-teken,
.binnen .contact-grid .kop-knop .kop-teken,
.kop-knop .kop-teken{
  grid-area:1/1;
  display:block;
  width:1rem;
  height:1rem;
  color:inherit;
  vertical-align:middle;
  transition:opacity .18s ease,transform .18s ease;
}

.kop-teken-vink{opacity:0;transform:scale(.55)}
.kop-knop[data-kop-staat="gelukt"] .kop-teken-kopie{opacity:0;transform:scale(.55)}
.kop-knop[data-kop-staat="gelukt"] .kop-teken-vink{opacity:1;transform:none}

@keyframes kop-puls{
  0%{transform:scale(1)}
  45%{transform:scale(1.16)}
  100%{transform:scale(1)}
}
.kop-knop[data-kop-puls="ja"]{animation:kop-puls .34s cubic-bezier(.2,.7,.3,1)}

/* In geforceerde kleuren is een doorzichtige rand onzichtbaar. */
@media (forced-colors:active){
  .kop-knop{border-color:ButtonBorder;color:ButtonText}
}

/* ------------------------------------------------------- rustige weergave
   Twee keer hetzelfde: het systeemvoorkeur van de bezoeker en de knop op de
   site (html.rustig). Zonder beweging wisselen de tekens direct, zonder
   overgang en zonder puls. De knop blijft volledig bruikbaar. */
@media(prefers-reduced-motion:reduce){
  .kop-knop,
  .kop-knop .kop-teken{transition:none}
  .kop-knop[data-kop-puls="ja"]{animation:none}
  .kop-teken-vink,
  .kop-knop[data-kop-staat="gelukt"] .kop-teken-kopie{transform:none}
}

html.rustig .kop-knop,
html.rustig .kop-knop .kop-teken{transition:none}
html.rustig .kop-knop[data-kop-puls="ja"]{animation:none}
html.rustig .kop-teken-vink,
html.rustig .kop-knop[data-kop-staat="gelukt"] .kop-teken-kopie{transform:none}

/* ===== lees ===== */
/* Ensar Yufka — leesvoortgang bij een blogartikel   (voorvoegsel: lees)
   ==========================================================================
   Een dunne gouden balk bovenaan het scherm die meet hoever je in het ARTIKEL
   bent, niet hoever je in de pagina bent. Het verschil is niet cosmetisch: de
   kopbalk, de titel en de terugverwijzing onderaan zijn geen leesstof. Een
   balk die de hele pagina meet staat al een flink stuk vooruit voordat je de
   eerste zin gelezen hebt, en dat is precies het soort kleine onwaarheid dat
   een lezer onbewust registreert.

   Nulpunt   = de eerste alinea van het lopende verhaal.
   Eindpunt  = het einde van het artikel in beeld, dus zonder de link
               "Alle artikelen" die daaronder staat.

   Alles hier wordt door lees.js aangemaakt. Zonder JavaScript bestaat de balk
   niet en verandert er niets aan de pagina.

   Kleuren en letters komen uit sac.css (--goud, --goud-licht, --deeg-zacht).
   Er wordt hier geen tweede kleurenstelsel opgetuigd.
   ========================================================================== */

.lees-balk{
  /* eigen variabele, met voorvoegsel, alleen binnen deze balk */
  --lees-spoor:rgba(243,235,221,.12);

  position:fixed;
  inset:0 0 auto 0;
  /* boven de kopbalk (z-index 100), onder de overslaan-link (z-index 200):
     de skiplink moet altijd kunnen winnen als hij focus krijgt */
  z-index:150;
  height:3px;
  background:var(--lees-spoor);
  overflow:hidden;
  /* de balk is puur informatief; hij mag nooit een klik op de kopbalk vangen */
  pointer-events:none;
}

/* Op ruimere schermen mag hij een haartje steviger. Onder 820px valt de
   navigatie weg en wordt de kopbalk lager; 3px staat daar rustiger. */
@media(min-width:820px){
  .lees-balk{height:4px}
}

.lees-vulling{
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  /* het lichte uiteinde loopt vooruit, zodat de kop van de balk leest als
     richting en niet als een afgesneden blokje */
  background:linear-gradient(90deg,var(--goud) 0%,var(--goud-licht) 100%);
  transition:transform .12s linear;
  will-change:transform;
}

/* Contrast: --goud (#C9A227) haalt 8,1:1 op de grond (#0D0B09) en 6,2:1 op
   het eigen spoor. Ruim boven de 3:1 die een grafisch element nodig heeft. */

/* De regel onder "4 minuten leestijd" die meeloopt met de voortgang.
   Zelfde maatvoering als .blogmeta uit binnen.css, maar een tint helderder
   (--deeg-zacht op --grond = 10,7:1) omdat dit een regel is die verandert en
   dus gelezen moet kunnen worden zonder zoeken. */
.lees-resterend{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:.375rem 0 0;
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--deeg-zacht);
  font-variant-numeric:tabular-nums;
}
.lees-resterend::before{
  content:"";
  width:1.25rem;
  height:1px;
  background:var(--goud);
  flex:none;
}

/* Er valt niets te melden als er niets te meten valt: een artikel dat in zijn
   geheel op het scherm past krijgt geen balk en geen resterende tijd. */
.lees-balk[hidden],
.lees-resterend[hidden]{display:none}

/* ---------------------------------------------------- rustige weergave
   De balk blijft staan, want hij informeert. Alleen de vloeiende overgang
   gaat eraf: hij springt dan naar de juiste breedte. Twee keer opgeschreven,
   want de bezoeker kan het zelf aanzetten (html.rustig) én zijn systeem kan
   het al gezegd hebben (prefers-reduced-motion). De derde selector is de
   schakelaar die lees.js zelf omzet bij het signaal 'ensar-rust', zodat deze
   module niet afhankelijk is van de volgorde waarin modules laden. */
@media(prefers-reduced-motion:reduce){
  .lees-vulling{transition:none}
}
html.rustig .lees-vulling{transition:none}
.lees-balk.lees-rustig .lees-vulling{transition:none}

/* ===== dok ===== */
/* Ensar Yufka, module "dok": sprongrij boven de receptenlijst
   ==========================================================================
   Zes tegels die naar de zes recepten eronder springen. Het zijn gewone
   links; zonder JavaScript is het een rij die je zijwaarts veegt.

   Met een echte muis wordt de tegel onder de aanwijzer iets groter en komt
   hij omhoog; de directe buren doen een beetje mee en wijken opzij. Verder
   dan de buren gebeurt er niets. De transformaties komen uit dok.js, in een
   enkele requestAnimationFrame voor de hele rij, dus hier staat bewust GEEN
   transition op transform: die zou tegen de lus in werken.

   Kleuren en letters komen uit sac.css. Er wordt hier geen tweede
   kleurenstelsel bedacht.

   Contrast op --grond-op #15110E, nagerekend volgens WCAG 2.1:
     --deeg      #F3EBDD  15,9:1
     --deeg-zacht #C9BFAF 10,3:1
     --goud-licht #E8CE73 12,1:1
   Op --grond #0D0B09 haalt --goud-licht 12,6:1.
   ========================================================================== */

/* ---------------------------------------------------------------- omhulsel */
.dok-sprong{
  width:var(--breed);
  margin:clamp(1rem,3vh,2rem) auto 0;
}

.dok-sprong .dok-kop{
  display:flex;align-items:center;gap:.75rem;
  margin:0 0 .875rem;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--goud-licht);
}
.dok-sprong .dok-kop::before{
  content:"";width:1.75rem;height:1px;background:var(--goud);flex:none;
}

/* -------------------------------------------------------------------- rij */
/* Standaard is dit een veegrij. Dat werkt op elk scherm, ook zonder
   JavaScript, en het is de enige stand op aanraakschermen. De positionering
   is nodig omdat dok.js offsetLeft van de cellen ten opzichte van de rij
   uitleest; zonder position:relative is de offsetParent een willekeurige
   voorouder en klopt de meting niet. */
.dok-sprong .dok-rij{
  position:relative;
  list-style:none;
  margin:0;
  max-width:none;
  padding:.5rem .5rem 1rem;
  display:flex;
  gap:clamp(.5rem,1.4vw,.875rem);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:.5rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(243,235,221,.28) transparent;
}

.dok-sprong .dok-cel{
  margin:0;
  flex:0 0 clamp(8rem,28vw,10.5rem);
  scroll-snap-align:start;
}

/* -------------------------------------------------------------------tegel */
.dok-sprong .dok-tegel{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  text-decoration:none;
  background:var(--grond-op);
  border:1px solid var(--lijn);
  border-radius:12px;
  overflow:hidden;
  transform-origin:50% 50%;
  transition:border-color .25s ease,background-color .25s ease;
}
.dok-sprong .dok-tegel:hover{
  border-color:rgba(201,162,39,.55);
  background:#1B1611;
}

.dok-sprong .dok-beeld{
  display:block;
  background:var(--grond);
}
.dok-sprong .dok-beeld img{
  width:100%;height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:0;
  filter:brightness(.9);
  transition:filter .3s ease;
}
.dok-sprong .dok-tegel:hover .dok-beeld img,
.dok-sprong .dok-tegel:focus-visible .dok-beeld img{filter:none}

.dok-sprong .dok-tekst{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.625rem .6875rem .75rem;
}
.dok-sprong .dok-nr{
  flex:none;
  font-family:var(--kop);font-size:.9375rem;line-height:1.2;
  color:var(--goud-licht);
}
.dok-sprong .dok-titel{
  font-size:.8125rem;line-height:1.32;
  color:var(--deeg);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ------------------------------------------------------- de springbestemming */
/* De kopbalk staat vast bovenaan en is 70 tot 86px hoog. Zonder deze marge
   verdwijnt de foto van het recept eronder. */
.dok-doel{scroll-margin-top:clamp(6rem,14vh,9rem)}
.dok-doel:target{
  outline:2px solid var(--goud);
  outline-offset:4px;
}

/* -------------------------------------------------------------- muisstand */
/* Alleen bij een echte aanwijzer en genoeg breedte. Onder 860px zouden acht
   tegels naast elkaar smaller worden dan 85px en dat is geen tegel meer;
   daar blijft het een veegrij. In deze stand mag de rij niet meer klippen,
   anders snijdt de scrollbox de opgetilde tegel af. */
@media (hover:hover) and (pointer:fine) and (min-width:860px){
  .dok-sprong .dok-rij{
    overflow:visible;
    scroll-snap-type:none;
    padding:.75rem .75rem 1.25rem;
  }
  .dok-sprong .dok-cel{
    flex:1 1 0;
    min-width:0;
    scroll-snap-align:none;
  }
  .dok-sprong.dok-aan .dok-tegel{
    will-change:transform;
  }
}

/* ------------------------------------------------------- rustige weergave */
/* Twee keer opgeschreven, en allebei doen ze hetzelfde: geen vergroting,
   geen optillen, geen soepel springen. Alleen de gewone rij. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dok-sprong .dok-tegel{transform:none !important;transition:none !important}
  .dok-sprong .dok-tegel,
  .dok-sprong .dok-beeld img{transition:none !important}
  .dok-sprong .dok-rij{scroll-behavior:auto}
}
html.rustig{scroll-behavior:auto}
html.rustig .dok-sprong .dok-tegel{transform:none !important;transition:none !important}
html.rustig .dok-sprong .dok-beeld img{transition:none !important}
html.rustig .dok-sprong .dok-rij{scroll-behavior:auto}

/* ===== zij ===== */
/* Ensar Yufka — meelopende zijnavigatie   (voorvoegsel: zij)
   ==========================================================================
   De <nav> zelf staat IN de HTML: zij.py zet hem naast de tekstkolom. Zonder
   JavaScript is dit dus een gewone lijst ankerlinks die het gewoon doet.
   JavaScript voegt alleen de markering toe van de kop waar je nu bent.

   Kleuren en letters komen uit sac.css. Er wordt hier geen tweede
   kleurenstelsel opgezet; alleen drie afgeleide waarden met voorvoegsel.

   Contrast, nagerekend op de grond waar de tekst echt op staat:
     --deeg-zacht (#C9BFAF) op --grond   (#0D0B09)                 10,8:1
     --deeg-zacht (#C9BFAF) op --grond-op(#15110E)                 10,3:1
     --goud-licht (#E8CE73) op --grond                             12,6:1
     --goud-licht (#E8CE73) op --zij-vlak over --grond-op          9,7:1
   De randkleur van het actieve blokje (--zij-rand over --grond-op) haalt
   4,4:1 tegen de kaartgrond en 4,6:1 tegen de pagina, ruim boven de 3:1 die
   een zichtbare toestand nodig heeft.
   ========================================================================== */

/* ------------------------------------------------------- sticky en overflow
   sac.css zet overflow-x:hidden op <body>. Volgens de specificatie geeft de
   browser dat door aan de viewport (want <html> zelf heeft overflow:visible)
   en blijft position:sticky werken. Dat gaat alleen goed zolang <html> geen
   eigen overflow krijgt: gebeurt dat wel, dan wordt <body> alsnog een
   scroll-container en blijft de nav stilstaan.

   overflow-x:clip klemt net zo hard af maar maakt NOOIT een scroll-container,
   dus sticky blijft hoe dan ook aan de viewport hangen. Alleen op de pagina's
   waar deze nav echt staat, en alleen voor de horizontale as, zodat de
   bedoeling van sac.css (geen zijwaarts schuiven van de pagina) intact blijft.
   Kent de browser :has() niet, dan valt dit weg en geldt gewoon de regel uit
   sac.css. */
body:has(.zij-nav){overflow-x:clip}

:root{
  /* vrije ruimte boven een aangesprongen kop: de vaste balk is 70 tot 86px
     hoog (zie sac.css), hier zit altijd minimaal 18px lucht tussen */
  --zij-boven:clamp(5.5rem,12vh,7.5rem);
  --zij-vlak:rgba(201,162,39,.14);
  --zij-rand:rgba(201,162,39,.7);
}

/* ------------------------------------------------------------- de omhulling
   Dit blok is een direct kind van .section en krijgt van binnen.css al
   width:var(--breed) met auto-marges. Diezelfde maat staat hier nog een keer,
   zodat de opmaak ook klopt als de bewerking ooit op een pagina landt waar de
   inhoud anders is opgebouwd. */
.zij-omhulsel{
  width:var(--breed);
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.25rem,3vw,1.75rem);
}
/* een tabel of een lange URL mag de tekstkolom niet oprekken */
.zij-omhulsel > .prose{min-width:0}
/* binnen.css geeft elke h2 2,5rem ruimte erboven; bij de eerste kop zou de
   nav daardoor los boven de tekst gaan zweven */
.zij-omhulsel > .prose > :first-child{margin-top:0}

/* de aangesprongen kop valt niet onder de vaste balk */
.zij-doel{scroll-margin-top:var(--zij-boven,6.5rem)}

/* -------------------------------------------------------------------- nav */
.zij-nav{margin:0}

.zij-nav .zij-titel{
  margin:0 0 .625rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--deeg-zacht);
}

/* Smal scherm: een rij die je zijwaarts kunt vegen. Niet vastgezet, want een
   tweede vaste balk onder de kopbalk kost op 360px te veel hoogte en levert
   een extra laag op die meebeweegt. binnen.css geeft elke ol in de inhoud een
   max-width en een inspringing; die worden hier bewust teruggezet. */
.zij-nav .zij-lijst{
  list-style:none;
  max-width:none;
  margin:0;
  padding:0 0 .25rem;
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.zij-nav .zij-lijst::-webkit-scrollbar{display:none}
.zij-nav .zij-lijst > li{
  margin:0;
  flex:none;
  scroll-snap-align:start;
}

.zij-nav .zij-link{
  display:block;
  padding:.5rem .875rem;
  border:1px solid var(--lijn);
  border-radius:999px;
  background:var(--grond-op);
  font-size:.875rem;
  line-height:1.35;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}

/* binnen.css kleurt elke link in de inhoud goud met een selector die 0-3-3
   weegt (.binnen main a:not(.knop):not(.balk-nav a)). Deze vier regels wegen
   0-4-0 en winnen dus, ongeacht de volgorde van de stylesheets. */
.zij-omhulsel .zij-lijst .zij-link:any-link{color:var(--deeg-zacht)}
.zij-omhulsel .zij-lijst .zij-link:any-link:hover{
  color:var(--deeg);
  border-color:rgba(243,235,221,.3);
}
.zij-omhulsel .zij-lijst .zij-link[aria-current="true"]{
  color:var(--goud-licht);
  font-weight:600;
  background:var(--zij-vlak);
  border-color:var(--zij-rand);
}

/* De focusring van sac.css staat 3px buiten het element; in een lijst die
   zijwaarts of verticaal kan schuiven wordt die weggeknipt. Naar binnen dus,
   even dik en even goed zichtbaar (12,6:1 op de grond). */
.zij-nav .zij-link:focus-visible{
  outline:2px solid var(--goud-licht);
  outline-offset:-2px;
}

/* ------------------------------------------------------------ breed scherm
   Naast de tekst, en hij blijft staan. */
@media(min-width:960px){
  .zij-omhulsel{
    grid-template-columns:15rem minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem);
    align-items:start;
  }

  .zij-nav{
    position:sticky;
    top:var(--zij-boven);
    /* meer koppen dan er hoogte is: dan schuift de nav zelf, nooit de pagina */
    max-height:calc(100vh - var(--zij-boven) - 2rem);
    max-height:calc(100svh - var(--zij-boven) - 2rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }

  .zij-nav .zij-lijst{
    display:block;
    overflow:visible;
    padding-bottom:0;
    scroll-snap-type:none;
  }

  .zij-nav .zij-link{
    padding:.5rem 0 .5rem 1rem;
    border:0;
    /* de lijnen van de blokjes onder elkaar vormen samen één haarlijn langs
       de hele lijst; het actieve onderdeel maakt daar een goudstreep van */
    border-left:2px solid var(--lijn);
    border-radius:0;
    background:none;
    white-space:normal;
    font-size:.9375rem;
  }
  .zij-omhulsel .zij-lijst .zij-link[aria-current="true"]{
    background:none;
    border-left-color:var(--goud);
  }
  .zij-nav .zij-link:focus-visible{outline-offset:-1px}
}

/* In geforceerde kleuren overschrijft het systeem de kleuren; dan is het
   vetter zetten van de tekst plus een systeemkleur het verschil. */
@media (forced-colors:active){
  .zij-nav .zij-link{border-color:CanvasText}
  .zij-omhulsel .zij-lijst .zij-link[aria-current="true"]{
    border-color:Highlight;
    color:Highlight;
  }
}

/* ------------------------------------------------------- rustige weergave
   Twee keer hetzelfde: de systeemvoorkeur van de bezoeker en de knop op de
   site (html.rustig). In beide gevallen: niet vloeiend springen, geen
   nawerkende snap in de rij, geen overgang op de markering. De nav werkt
   verder precies hetzelfde, alleen zonder beweging. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .zij-nav .zij-link{transition:none}
  .zij-nav .zij-lijst{scroll-snap-type:none;scroll-behavior:auto}
}

html.rustig{scroll-behavior:auto}
html.rustig .zij-nav .zij-link{transition:none}
html.rustig .zij-nav .zij-lijst{scroll-snap-type:none;scroll-behavior:auto}