/* iWorkers — statische site, versie 9: het notitieboek.
   Eén stylesheet in cascade layers, geen build-stap, geen fontbestanden.

   Het beeld: een notitieboek dat open ligt. De omslag (navy) ligt om het blad (papier) heen:
   links de rug met de rode lijn van het elastiek, onderaan de balk met Index, terug, verder en contact.
   Het blad heeft afgeronde hoeken aan de buitenkant. Alles wat inhoud is, staat op het blad. */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }
  img {
    block-size: auto;
  }
  input,
  button,
  textarea {
    font: inherit;
    color: inherit;
  }
  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }
  p,
  li {
    text-wrap: pretty;
  }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Merk: navy en rood uit het logo. Seizoen: prefs.js zet per dag --h (tint) en --c (sterkte). */
    --h: 88;
    --c: 1.1;
    --navy: #0b1532;
    --red: #e6352b;

    /* Zeven rollen; elk palet vult ze in voor licht en donker */
    --paper: light-dark(oklch(97.8% calc(0.007 * var(--c)) var(--h)), var(--navy));
    --surface: light-dark(oklch(94.8% calc(0.017 * var(--c)) var(--h)), oklch(25% 0.045 268));
    --tint: light-dark(oklch(90.5% calc(0.034 * var(--c)) var(--h)), oklch(30% calc(0.035 * var(--c)) var(--h)));
    --ink: light-dark(var(--navy), oklch(96% 0.008 268));
    --ink-soft: light-dark(oklch(42% 0.04 268), oklch(80% 0.025 268));
    --line: light-dark(oklch(86.5% calc(0.016 * var(--c)) var(--h)), oklch(36% 0.04 268));
    --signal: light-dark(var(--red), oklch(68% 0.2 28));

    /* De omslag: het omgekeerde van het blad. Draait vanzelf mee met thema en palet. */
    /* De omslag is altijd donker, zoals het boek zelf: in licht de inktkleur, in donker een tint dieper dan het blad */
    --inverse: light-dark(var(--ink), color-mix(in oklab, var(--paper) 50%, #000));
    --on-inverse: light-dark(var(--paper), var(--ink));
    --on-inverse-soft: color-mix(in oklab, var(--on-inverse) 78%, var(--inverse));
    --inverse-line: color-mix(in oklab, var(--on-inverse) 30%, var(--inverse));
    --focus: var(--ink);
    --error: light-dark(oklch(45% 0.17 27), oklch(78% 0.13 27));

    /* Typografie: alleen systeemlettertypen */
    --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --display-weight: 700;
    --display-tracking: -0.03em;
    --text-scale: 1;

    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
    --step-1: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.3rem + 0.95vw, 2.125rem);

    /* Ruimte */
    --space-2xs: 0.375rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);
    --space-2xl: clamp(4.5rem, 3rem + 7vw, 9rem);
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 4.5rem);
    --measure: 62ch;
    --radius: 0.375rem;

    /* Het boek */
    --rug: 1.5rem; /* breedte van de rug links */
    --kaft: 0.375rem; /* hoeveel omslag er boven en rechts om het blad zichtbaar is */
    --hoek: 1.125rem; /* afronding van het blad aan de buitenkant */
    --balk: 3.5rem; /* hoogte van de balk onderaan */
    --band-inzet: clamp(1.5rem, 6vw, 4.5rem);
    --band-breed: clamp(0.75rem, 1.4vw, 1.125rem);

    /* Het elastiek: geweven band. Ribbels in de lengte, fijne steken dwars. Alleen kleur en lijnen, geen afbeelding. */
    --band-schaduw: color-mix(in oklab, var(--signal) 72%, #000);
    --band-licht: color-mix(in oklab, var(--signal) 86%, #fff);
    --band-staand:
      repeating-linear-gradient(0deg, transparent 0 1.5px, color-mix(in oklab, var(--band-schaduw) 55%, transparent) 1.5px 2.5px),
      repeating-linear-gradient(90deg, var(--band-schaduw) 0 1px, var(--band-licht) 1px 2px, var(--signal) 2px 4px);
    /* Het boek als voorwerp op tafel: marge rondom, maximale breedte, hoeken */
    --marge: clamp(0.5rem, min(2.2vw, 2.6vh), 2.5rem);
    --kop: 0rem; /* smal scherm: de rand van de omslag bovenaan */
    --boek-max: 92rem;
    --boek-zij: max(var(--marge), calc((100vw - var(--boek-max)) / 2));
    --hoek-rug: 0.375rem;
    /* Linkerbladzijde (alleen breed): breedte, en wat de linkerkant van het boek dan is */
    --links: 0rem;
    --rand-links: var(--rug);
    --hoek-links: var(--hoek-rug);
    /* Rechts houdt de inhoud afstand van het elastiek, dat over de bladzijde ligt */
    --gutter-eind: calc(var(--band-inzet) + var(--band-breed) + clamp(0.75rem, 2vw, 2rem));

    /* Het boek als voorwerp: zo groot ligt het dichte boek op tafel, en dit is de tafel */
    --boek-schaal: 0.92;
    --tafel: light-dark(color-mix(in oklab, var(--tint) 90%, var(--ink)), color-mix(in oklab, var(--paper) 25%, #000));

    /* Papier: de kleur van het palet met een fijne, bijna onzichtbare korrel erover (naadloze tegel, 5 kB).
       Niet korrelig, wel voelbaar. Het licht op het blad staat bij .lijst. */
    --papier: var(--paper) url("../img/papier.webp") 0 0 / 160px 160px;
    --licht: light-dark(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.035));
    --schaduw: light-dark(rgb(70 58 36 / 0.045), rgb(0 0 0 / 0.16));

    /* Tempo: één plek om alles rustiger of directer te maken */
    --tempo-blad: 1.3s; /* een bladzijde omslaan */
    --tempo-klein: 0.35s; /* hover en focus */
    --ease-rustig: cubic-bezier(0.45, 0, 0.15, 1);
  }
  @media (min-width: 48rem) {
    :root {
      --rug: 2rem;
      --kaft: 0.625rem;
      --hoek: 1.5rem;
    }
  }
  /* Breed scherm: het boek ligt open als twee bladzijden. Links de index, rechts de pagina; de vouw ertussen. */
  @media (min-width: 64rem) {
    :root {
      --rug: 0rem;
      --links: clamp(17rem, calc((100vw - 2 * var(--boek-zij)) * 0.3), 27rem);
      --rand-links: var(--kaft);
      --hoek-links: var(--hoek);
    }
  }
  /* Smal scherm: het blad vult het scherm tot aan de randen. De omslag is de balk onderaan,
     met het rode elastiek als lijn erboven. De zones van het besturingssysteem (statusbalk, werkbalk)
     nemen alleen een effen kleur aan: boven die van het blad, onder die van de balk. Zo loopt alles door. */
  @media (max-width: 47.99rem) {
    :root {
      --rug: 0rem;
      --kaft: 0rem;
      --hoek: 0rem;
      --balk: 3.75rem;
      --marge: 0rem;
      --boek-zij: 0rem;
      --band-inzet: 0.75rem;
      --band-breed: 10px;
      --boek-schaal: 0.86;
      --kop: 0.875rem;
    }
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  :root[data-font="serif"] {
    --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-text: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --display-weight: 700;
    --display-tracking: -0.02em;
  }
  :root[data-font="mono"] {
    --font-display: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --font-text: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --display-weight: 700;
    --display-tracking: -0.04em;
  }

  :root[data-palette="diepzee"] {
    --paper: light-dark(#f4f6fa, #001233);
    --surface: light-dark(#e6eaf2, #001845);
    --tint: light-dark(#d3dbea, #002855);
    --ink: light-dark(#001233, #f4f6fa);
    --ink-soft: light-dark(#33415c, #b3b9c7);
    --line: light-dark(#c3cad8, #33415c);
    --signal: light-dark(#0466c8, #4d9cf0);
  }
  :root[data-palette="strand"] {
    --paper: light-dark(#ffffff, #2b2b2b);
    --surface: light-dark(#eeeeee, #353535);
    --tint: light-dark(#d9d9d9, #284b63);
    --ink: light-dark(#353535, #ffffff);
    --ink-soft: light-dark(#575757, #d9d9d9);
    --line: light-dark(#c6c6c6, #585858);
    --signal: light-dark(#3c6e71, #7fb9bc);
  }
  :root[data-palette="oogst"] {
    --paper: light-dark(#fff7e3, #2c1a0f);
    --surface: light-dark(#f8ecc9, #432818);
    --tint: light-dark(#ffe6a7, #6f1d1b);
    --ink: light-dark(#432818, #ffe6a7);
    --ink-soft: light-dark(#6b4a33, #dcbf92);
    --line: light-dark(#e2cf9f, #6a452b);
    --signal: light-dark(#99582a, #d7ae6c);
  }
  :root[data-palette="aarde"] {
    --paper: light-dark(#f6f1ec, #143642);
    --surface: light-dark(#ebe3da, #263c41);
    --tint: light-dark(#dccdbd, #4a473e);
    --ink: light-dark(#143642, #f6f1ec);
    --ink-soft: light-dark(#4a473e, #d2c5b6);
    --line: light-dark(#cfc2b4, #4f5f60);
    --signal: light-dark(#b76935, #dd9462);
  }
  :root[data-palette="zand"] {
    --paper: light-dark(#f5ebe0, #2b2420);
    --surface: light-dark(#edede9, #382f2a);
    --tint: light-dark(#e3d5ca, #4d4038);
    --ink: light-dark(#3b2f28, #f5ebe0);
    --ink-soft: light-dark(#5c4d44, #d6ccc2);
    --line: light-dark(#d5bdaf, #62524a);
    --signal: light-dark(#a0705a, #d5bdaf);
  }
}

@layer base {
  html {
    background: var(--tafel);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: calc(100% * var(--text-scale));
    line-height: 1.6;
    scroll-padding-block-start: 1.5rem;
  }
  /* Smal scherm: je houdt het boek dichtbij en ziet één bladzijde. De bovenrand van het scherm (ook de statusbalk)
     en de balk onderaan zijn de omslag eromheen. Dicht ligt het boek op tafel. */
  @media (max-width: 47.99rem) {
    html {
      background: var(--inverse);
    }
    html[data-omslag="dicht"] {
      background: var(--tafel);
    }
  }
  body {
    font-size: var(--step-0);
    overflow-wrap: break-word;
    min-block-size: 100svh;
    padding: calc(var(--marge) + var(--kaft) + var(--kop)) calc(var(--boek-zij) + var(--kaft)) calc(var(--marge) + var(--balk) + env(safe-area-inset-bottom))
      calc(var(--boek-zij) + var(--rug) + var(--links));
  }
  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    line-height: 1.06;
    letter-spacing: var(--display-tracking);
  }
  main h1 {
    font-size: clamp(2.125rem, 1rem + 4.6cqi, 6rem);
    line-height: 1.02;
  }
  main h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.6cqi, 3.5rem);
  }
  h3 {
    font-size: var(--step-1);
    line-height: 1.2;
    letter-spacing: -0.012em;
  }
  a {
    color: var(--ink);
    text-decoration-color: var(--signal);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.2em;
  }
  a:hover {
    text-decoration-thickness: 0.16em;
  }
  strong {
    font-weight: 650;
  }
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }
  ::selection {
    background: var(--ink);
    color: var(--paper);
  }
  [id] {
    scroll-margin-block-start: 1.5rem;
  }
  [hidden] {
    display: none !important;
  }
}

@layer layout {
  /* ---------- Het boek ---------- */
  /* De lijst: alles wat om het blad heen ligt, in één vaste laag boven de inhoud.
     De rand is de tafel (met een afgeronde uitsparing voor het boek); ::before is de omslag (kaft boven en rechts,
     rug links); ::after is de schaduw in de vouw. Het blad schuift hieronder door. */
  .lijst {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-style: solid;
    border-color: var(--tafel);
    border-width: var(--marge) var(--boek-zij);
    /* Licht op het blad: een zachte gloed linksboven, iets donkerder naar rechtsonder,
       en rechts de rand van de bladen die eronder liggen. Vast, beweegt niet mee met de muis of het scrollen. */
    background:
      repeating-linear-gradient(90deg, var(--line) 0 1px, var(--paper) 1px 2.5px) right var(--kaft) top calc(var(--kaft) + var(--hoek)) / 5px
        calc(100% - var(--kaft) - 2 * var(--hoek) - var(--balk)) no-repeat,
      radial-gradient(ellipse at 34% 8%, var(--licht), transparent 62%),
      linear-gradient(108deg, transparent 52%, var(--schaduw)),
      linear-gradient(180deg, transparent 86%, var(--schaduw));
    view-transition-name: lijst;
  }
  .lijst::before {
    content: "";
    position: absolute;
    inset: 0;
    border-style: solid;
    border-color: var(--inverse);
    border-width: var(--kaft) var(--kaft) 0 var(--rand-links);
    border-radius: var(--hoek-links) var(--hoek) var(--hoek) var(--hoek-links);
    /* De hoekjes buiten de afronding horen bij de tafel */
    box-shadow: 0 0 0 var(--hoek) var(--tafel);
  }
  .lijst::after {
    content: "";
    position: absolute;
    inset-block: var(--kaft) var(--balk);
    inset-inline-start: var(--rug);
    inline-size: 1.75rem;
    background: linear-gradient(90deg, color-mix(in oklab, var(--ink) 16%, transparent), transparent);
  }
  @media (min-width: 64rem) {
    /* De vouw tussen de twee bladzijden */
    .lijst::after {
      inset-inline-start: calc(var(--links) - 2rem);
      inline-size: 4rem;
      background: linear-gradient(
        90deg,
        transparent,
        color-mix(in oklab, var(--ink) 9%, transparent) 40%,
        color-mix(in oklab, var(--ink) 24%, transparent) 50%,
        color-mix(in oklab, var(--ink) 9%, transparent) 60%,
        transparent
      );
    }
  }

  /* De linkerbladzijde: de index van het boek. Staat vast; alleen de rechterbladzijde wisselt en schuift. */
  .links {
    display: none;
  }
  @media (min-width: 64rem) {
    .links {
      position: fixed;
      z-index: 3;
      inset-block: calc(var(--marge) + var(--kaft)) calc(var(--marge) + var(--balk));
      inset-inline-start: calc(var(--boek-zij) + var(--kaft));
      inline-size: calc(var(--links) - var(--kaft));
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
      padding: var(--space-m) clamp(1.5rem, 2.5vw, 2.5rem) var(--space-m) clamp(1.25rem, 2vw, 2.25rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--papier);
      background-blend-mode: soft-light;
      font-family: var(--font-display);
      transform-origin: 100% 50%;
      view-transition-name: links;
    }
    /* Dicht: de linkerbladzijde is er nog niet; hij komt mee met de omslag die openslaat */
    :root[data-omslag="dicht"] .links {
      transform: perspective(2400px) rotateY(90deg);
    }
    .links__wie {
      display: grid;
      font-size: var(--step--1);
      font-weight: 600;
      line-height: 1.4;
    }
    .links__wie span + span {
      font-weight: 500;
      color: var(--ink-soft);
    }
    .links__kop {
      font-size: var(--step--1);
      font-weight: 600;
      letter-spacing: 0;
      color: var(--ink-soft);
      margin-block-end: var(--space-xs);
    }
    .links ol {
      list-style: none;
      padding: 0;
      border-block-start: 2px solid var(--ink);
    }
    .links li a {
      display: grid;
      grid-template-columns: 1.75rem minmax(0, 1fr);
      align-items: baseline;
      gap: 0 0.5rem;
      min-block-size: 3rem;
      padding-block: 0.65rem;
      border-block-end: 1px solid var(--line);
      text-decoration: none;
    }
    .links li a::before {
      content: attr(data-nr);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--ink-soft);
    }
    .links__naam {
      font-weight: 600;
      font-size: 1.0625rem;
      line-height: 1.25;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-underline-offset: 0.2em;
      transition: text-decoration-color var(--tempo-klein) ease;
    }
    .links li a:hover .links__naam {
      text-decoration-color: var(--signal);
    }
    .links__vraag {
      grid-column: 2;
      font-size: var(--step--1);
      font-weight: 500;
      line-height: 1.35;
      color: var(--ink-soft);
    }
    .links li a[aria-current="page"] {
      box-shadow: inset 4px 0 0 var(--signal);
      padding-inline-start: 0.75rem;
      background: var(--surface);
    }
    .links li a[aria-current="page"]::before {
      color: var(--ink);
    }
    /* Laag scherm (laptop): de index blijft in één oogopslag leesbaar, zonder de vragen eronder */
    @media (max-height: 50rem) {
      .links__vraag {
        display: none;
      }
      .links li a {
        min-block-size: 2.75rem;
        padding-block: 0.5rem;
      }
    }
    /* De index staat nu links; op home hoeft hij niet nog eens rechts */
    .paginas {
      display: none;
    }
  }

  /* Smal scherm: de lijst is alleen de rand van de omslag bovenaan */
  @media (max-width: 47.99rem) {
    .lijst {
      inset: 0 0 auto;
      block-size: var(--kop);
      border: 0;
      background: var(--inverse);
    }
    .lijst::before {
      display: none;
    }
.lijst::after {
      display: none;
    }
  }
  /* Het elastiek: altijd staand, rechts. Dicht zit het om de omslag; open ligt het langs de rechterrand van het blad. */
  .strap {
    position: fixed;
    inset-block: var(--marge);
    inset-inline-end: calc(var(--boek-zij) + var(--band-inzet));
    inline-size: var(--band-breed);
    z-index: 6;
    pointer-events: none;
    background: var(--band-staand);
    box-shadow: 2px 0 5px color-mix(in oklab, #000 22%, transparent);
    view-transition-name: strap;
  }
  /* Het blad: papier. De afgeronde hoeken en de omslag eromheen komen van de lijst erboven. */
  .blad {
    position: relative;
    min-block-size: calc(100svh - 2 * var(--marge) - var(--kaft) - var(--kop) - var(--balk) - env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    grid-template-columns: minmax(0, 1fr);
    background: var(--papier);
    background-blend-mode: soft-light;
  }
  main {
    container: main / inline-size;
  }
  main:focus {
    outline: none;
  }
  .wrap {
    margin-inline: var(--gutter) var(--gutter-eind);
  }
  .flow > * + * {
    margin-block-start: var(--flow, 1em);
  }
  .flow > h2 + * {
    margin-block-start: var(--space-m);
  }
  .measure {
    max-inline-size: var(--measure);
  }

  /* Sectie: smalle kantlijn met de sectienaam, daarnaast de inhoud */
  .section {
    padding-block: var(--space-xl);
    border-block-start: 1px solid var(--line);
  }
  .section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s) var(--space-l);
  }
  .section__label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
  }
  .section__body > h2 {
    max-inline-size: 22ch;
  }
  .section__body > h2 + * {
    margin-block-start: var(--space-m);
  }
  .section__body > p,
  .section__body > ul:not([class]) {
    max-inline-size: var(--measure);
  }
  @container main (min-width: 56rem) {
    .section__grid {
      grid-template-columns: minmax(9rem, 2fr) minmax(0, 10fr);
    }
    .section__label {
      padding-block-start: 0.6em;
    }
  }
  .grid-3 {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  }
  .grid-2 {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
  }
  * + .grid-3,
  * + .grid-2 {
    margin-block-start: var(--space-l);
  }
  .with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }
  @container main (min-width: 56rem) {
    .with-aside {
      grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
      align-items: start;
    }
  }
  /* Afbreken alleen waar het krap is; op een breed scherm blijven woorden heel */
  @container main (max-width: 30rem) {
    h1,
    h2,
    h3 {
      hyphens: auto;
      hyphenate-limit-chars: 10 4 4;
      overflow-wrap: anywhere;
    }
  }
}

@layer components {
  /* ---------- Skiplink ---------- */
  .skip-link {
    position: absolute;
    inset-block-start: calc(var(--marge) + 0.5rem);
    inset-inline-start: calc(var(--boek-zij) + var(--rug) + 0.5rem);
    z-index: 40;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--radius);
    transform: translateY(-300%);
  }
  .skip-link:focus {
    transform: none;
  }

  /* ---------- Kopregel van het blad: woordmerk, kruimelpad, weergave ---------- */
  .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--space-m);
    padding: var(--space-s) var(--gutter-eind) 0 var(--gutter);
    font-family: var(--font-display);
  }
  .wordmark {
    display: inline-flex;
    color: var(--ink);
    padding-block: 0.35rem;
    border-radius: 4px;
  }
  .wordmark__svg {
    block-size: 1.6rem;
    inline-size: auto;
    fill: currentColor;
  }
  .wordmark__spark {
    fill: var(--signal);
  }
  .kruimel {
    order: 3;
    flex-basis: 100%;
    font-size: var(--step--1);
  }
  .kruimel ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
  }
  .kruimel li + li::before {
    content: "/";
    margin-inline-end: 0.5rem;
    color: var(--ink-soft);
  }
  .kruimel a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-weight: 600;
  }
  .kruimel [aria-current] {
    color: var(--ink-soft);
  }
  .prefs-toggle {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.4rem 0.9rem;
    font-size: var(--step--1);
    font-weight: 600;
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color var(--tempo-klein) ease;
  }
  .prefs-toggle:hover {
    border-color: var(--ink);
  }
  @media (scripting: none) {
    .prefs-toggle {
      display: none;
    }
  }
  @media (min-width: 48rem) {
    .kruimel {
      order: 0;
      flex-basis: auto;
      padding-inline-start: var(--space-m);
      border-inline-start: 1px solid var(--line);
    }
  }
  .nav-icon {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---------- De balk onderaan: de onderrand van de omslag. Index, terug, waar je bent, verder, contact ---------- */
  .balk {
    position: fixed;
    inset-inline: var(--boek-zij);
    inset-block-end: var(--marge);
    z-index: 5;
    border-radius: 0 0 var(--hoek) var(--hoek-links);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.25rem;
    block-size: calc(var(--balk) + env(safe-area-inset-bottom));
    padding: 0 calc(var(--band-inzet) + var(--band-breed) + max(0.5rem, env(safe-area-inset-right))) env(safe-area-inset-bottom)
      calc(var(--rug) + 0.5rem);
    background: var(--inverse);
    color: var(--on-inverse);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    view-transition-name: balk;
  }
  .balk:focus {
    outline: none;
  }
  /* Tijdens het typen op een aanraakscherm maakt de balk plaats: het toetsenbord duwt hem anders over het formulier.
     Zodra het veld los is, staat hij er weer. */
  @media (pointer: coarse) {
    body:has(:is(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea):focus) .balk {
      display: none;
    }
  }
  @media (max-width: 47.99rem) {
    .balk {
      inset-block-end: 0;
      border-radius: 0;
      padding-inline-start: max(0.5rem, env(safe-area-inset-left));
    }
    .strap {
      inset-block: 0;
    }
  }
  .balk__knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: 0 0.8rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    transition: background-color var(--tempo-klein) ease;
  }
  .balk__knop:hover {
    background: color-mix(in oklab, var(--on-inverse) 14%, transparent);
  }
  .balk__knop[aria-current="page"] {
    box-shadow: inset 0 0 0 1.5px var(--inverse-line);
  }
  .balk__knop[aria-disabled="true"] {
    color: var(--on-inverse-soft);
    pointer-events: none;
  }
  .balk__knop--verder {
    background: var(--on-inverse);
    color: var(--inverse);
  }
  .balk__knop--verder:hover {
    background: var(--on-inverse);
    box-shadow: 0 0 0 3px var(--signal);
  }
  .balk :focus-visible {
    outline-color: var(--on-inverse);
  }
  .balk__pijl {
    font-size: 1.125rem;
    line-height: 1;
  }
  .balk__pos {
    min-inline-size: 0;
    padding-inline: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    color: var(--on-inverse-soft);
    font-variant-numeric: tabular-nums;
  }
  .balk__hier {
    color: var(--on-inverse);
    font-weight: 600;
  }
  .balk__naam {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 47.99rem) {
    .balk__knop {
      padding-inline: 0.6rem;
    }
    .balk__hier,
    .balk__tekst,
    .balk__naam {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (max-width: 22.49rem) {
    .balk {
      gap: 0.125rem;
      padding-inline-start: 0.25rem;
    }
    .balk__knop {
      min-inline-size: 44px;
      padding-inline: 0.35rem;
    }
    .balk__pos {
      padding-inline: 0.125rem;
    }
    .balk__woord {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* ---------- Knoppen ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    max-inline-size: 100%;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--paper);
    background: var(--ink);
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition:
      background-color var(--tempo-klein) ease,
      box-shadow var(--tempo-klein) ease;
  }
  .btn:hover {
    box-shadow: 0 0 0 3px var(--signal);
  }
  .btn--quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
  }
  .btn--quiet:hover {
    background: var(--surface);
    box-shadow: none;
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
    align-items: center;
  }
  * + .actions {
    margin-block-start: var(--space-l);
  }

  /* ---------- Je zei … ---------- */
  .echo {
    padding: var(--space-s) var(--gutter-eind) 0 var(--gutter);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
  }
  .echo::before {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-end: 0.5rem;
    border-radius: 50%;
    background: var(--signal);
  }

  /* ---------- Paginakop: groot cijfer in de kantlijn, zoals in de index ---------- */
  .page-hero {
    padding-block: var(--space-l) var(--space-xl);
  }
  .page-hero__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-soft);
    margin-block-end: var(--space-s);
  }
  .page-hero__nr {
    font-size: clamp(3.5rem, 2rem + 8cqi, 8rem);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .page-hero h1 {
    max-inline-size: 20ch;
  }
  .page-hero__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    max-inline-size: 48ch;
    margin-block-start: var(--space-l);
  }
  .page-hero__lede + p {
    max-inline-size: var(--measure);
    margin-block-start: var(--space-s);
  }

  /* ---------- Omslag (home) ---------- */
  .omslag {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: 86svh;
    margin-block-end: var(--kaft);
    background: var(--inverse);
    color: var(--on-inverse);
    font-family: var(--font-display);
  }
  /* Het elastiek: een rood vlak zonder tekst erop */
  .omslag__band {
    position: absolute;
    inset-block: 0;
    right: var(--band-inzet);
    width: var(--band-breed);
    background: var(--band-staand);
    box-shadow: 0 0 0 1px color-mix(in oklab, #000 25%, transparent);
    transform-origin: 100% 50%;
  }
  .omslag__inner {
    align-self: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    padding: var(--space-l) var(--gutter);
    padding-inline-end: calc(var(--band-inzet) + var(--band-breed) + var(--space-s));
  }
  .omslag__merk {
    display: none;
  }
  .omslag__merk .wordmark__svg {
    block-size: 1.75rem;
  }
  .omslag__wie {
    font-weight: 500;
    color: var(--on-inverse-soft);
  }
  .omslag h1 {
    /* Groeit met de breedte, maar nooit zo hoog dat de omslag niet meer in het scherm past */
    font-size: clamp(2.125rem, min(0.9rem + 8vw, 11svh), 8.5rem);
    line-height: 0.98;
    max-inline-size: 13ch;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .omslag__lede {
    font-family: var(--font-text);
    font-size: var(--step-1);
    line-height: 1.45;
    max-inline-size: 36ch;
  }
  .omslag__direct a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: inherit;
    font-weight: 600;
  }
  .omslag :focus-visible {
    outline-color: var(--on-inverse);
  }
  .omslag__open {
    display: none;
  }

  /* Met JavaScript en beweging is de omslag een laag over het boek (prefs.js zet data-omslag vóór de eerste weergave) */
  :root[data-omslag] .omslag {
    position: fixed;
    inset: var(--marge) var(--boek-zij) var(--marge) calc(var(--boek-zij) + var(--links));
    z-index: 30;
    border-radius: var(--hoek-rug) 1.5rem 1.5rem var(--hoek-rug);
    min-block-size: 0;
    margin: 0;
  }
  /* Dicht: het boek ligt als voorwerp op tafel. Scharnier links (de rug), afgeronde hoeken rechts. */
  .tafel {
    display: none;
  }
  :root[data-omslag="dicht"] .tafel {
    display: block;
    will-change: opacity;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: var(--tafel);
  }
  :root[data-omslag="dicht"] .omslag {
    will-change: transform;
    transform-origin: 0 50%;
    transform: translateX(calc((1 - var(--boek-schaal)) * 50%)) scale(var(--boek-schaal));
  }
  :root[data-omslag] .omslag__merk {
    display: block;
    align-self: start;
    margin-block-end: auto;
  }
  /* Kolom: het woordmerk bovenaan duwt de rest naar beneden. Wat niet past, schuift naar onderen (bereikbaar), nooit naar boven. */
  :root[data-omslag="dicht"] .omslag__inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  :root[data-omslag="dicht"] .omslag__inner > * {
    flex: none;
  }
  /* Laag scherm (telefoon met werkbalken, liggend): alles op de omslag wordt compacter, zodat hij altijd past.
     Past het bij extreme tekstgrootte toch niet, dan schuift de inhoud binnen de omslag in plaats van weg te vallen. */
  :root[data-omslag="dicht"] .omslag__inner {
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  @media (max-height: 46rem) {
    :root[data-omslag="dicht"] .omslag__inner {
      gap: var(--space-xs);
      padding-block: var(--space-s);
    }
    :root[data-omslag="dicht"] .omslag h1 {
      font-size: clamp(1.625rem, min(0.9rem + 8vw, 6.4svh), 8.5rem);
    }
    :root[data-omslag="dicht"] .omslag__lede {
      font-size: var(--step-0);
    }
    :root[data-omslag="dicht"] .omslag__open {
      min-block-size: 3.5rem;
      padding-block: var(--space-xs);
      font-size: var(--step-0);
    }
  }
  /* De rand van het eerste blad steekt al onder de omslag uit; dat is ook de knop om te openen */
  :root[data-omslag="dicht"] .omslag__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: 4.5rem;
    margin-inline: var(--gutter) calc(var(--band-inzet) + var(--band-breed) + var(--space-s));
    padding: var(--space-s) var(--space-m);
    font: inherit;
    font-size: var(--step-1);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-align: start;
    color: var(--inverse);
    background: var(--on-inverse);
    border: 0;
    border-radius: 1.125rem 1.125rem 0 0;
    cursor: pointer;
  }
  .omslag__open-actie {
    flex: none;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.4rem 0.9rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
  }
  :root[data-omslag="dicht"] .omslag__open:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 4px;
  }
  /* Open: de omslag is weg; de rug en de balk van het boek staan er al onder */
  /* De kernzin (h1) blijft bestaan voor schermlezers; alleen het vlak is uit beeld */
  :root[data-omslag="open"] .omslag {
    transform: translateX(-200vw);
  }

  /* ---------- Index (home): de vragen en alle pagina's ---------- */
  .index {
    padding-block: var(--space-l) var(--space-xl);
  }
  .index__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m) var(--space-xl);
  }
  /* De kernzin loopt mee als kopregel zodra de omslag een laag is; zonder die laag staat hij er al boven */
  .index__kern {
    display: none;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    max-inline-size: 22ch;
    color: var(--ink-soft);
    margin-block-end: var(--space-m);
  }
  :root[data-omslag] .index__kern {
    display: block;
  }
  .index h2 {
    font-size: clamp(2rem, 1rem + 4.2cqi, 4.5rem);
    max-inline-size: 12ch;
  }
  .index h2:focus {
    outline: none;
  }
  .index__sub {
    margin-block-start: var(--space-s);
    color: var(--ink-soft);
    max-inline-size: 34ch;
  }
  .index__anders {
    margin-block-start: var(--space-m);
    color: var(--ink-soft);
    max-inline-size: 52ch;
  }
  @container main (min-width: 60rem) {
    .index__grid {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      align-items: start;
    }
  }

  .vragen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-block-start: 3px solid var(--ink);
    font-family: var(--font-display);
  }
  .vraag-item {
    border-block-end: 1px solid var(--line);
  }
  .vraag-item summary {
    list-style: none;
    display: grid;
    grid-template-columns: clamp(3.25rem, 2rem + 7cqi, 7.5rem) minmax(0, 1fr);
    gap: 0 var(--space-s);
    align-items: start;
    padding-block: var(--space-s) var(--space-m);
    min-block-size: 3rem;
    cursor: pointer;
  }
  .vraag-item summary::-webkit-details-marker {
    display: none;
  }
  .vraag-item__nr {
    font-weight: 700;
    font-size: clamp(3rem, 1.5rem + 7cqi, 7rem);
    line-height: 0.8;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
  }
  .vraag-item__tekst {
    overflow-wrap: anywhere;
    font-weight: var(--display-weight);
    font-size: clamp(1.3125rem, 1rem + 1.7cqi, 2.375rem);
    line-height: 1.12;
    letter-spacing: var(--display-tracking);
    text-wrap: balance;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.14em;
    transition: text-decoration-color var(--tempo-klein) ease;
  }
  .vraag-item__sluit {
    display: none;
  }
  .vraag-item summary:hover .vraag-item__tekst {
    text-decoration-color: var(--signal);
  }
  @container main (max-width: 30rem) {
    .vraag-item__tekst {
      hyphens: auto;
    }
  }

  /* Gekozen: de regel is een vlak in de kleur van de omslag en neemt het scherm */
  .vraag-item details[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-m);
    min-block-size: min(76svh, 46rem);
    padding: var(--space-m) var(--gutter-eind) var(--space-l) var(--gutter);
    background: var(--inverse);
    color: var(--on-inverse);
  }
  .vraag-item details[open] summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-s);
    padding-block: 0;
  }
  .vraag-item details[open] .vraag-item__nr {
    grid-row: 1;
    grid-column: 1;
    font-size: clamp(7rem, 3rem + 20cqi, 15rem);
  }
  .vraag-item details[open] .vraag-item__tekst {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: clamp(2rem, 1rem + 4.4cqi, 4.75rem);
    line-height: 1.02;
    max-inline-size: 16ch;
    text-decoration: none;
  }
  .vraag-item details[open] .vraag-item__sluit {
    grid-row: 1;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-block-size: 2.75rem;
    padding: 0 1rem;
    font-size: var(--step--1);
    font-weight: 600;
    border: 1.5px solid var(--inverse-line);
    border-radius: 999px;
  }
  .vraag-item details[open] :focus-visible {
    outline-color: var(--on-inverse);
  }
  .vraag-item__paneel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
  }
  .vraag-item__lede {
    font-family: var(--font-text);
    font-size: var(--step-1);
    line-height: 1.45;
    max-inline-size: 38ch;
  }
  .vraag-item__links {
    border-block-start: 2px solid var(--on-inverse);
    max-inline-size: 34rem;
  }
  .vraag-item__links a {
    display: flex;
    align-items: center;
    min-block-size: 3.25rem;
    border-block-end: 1px solid var(--inverse-line);
    color: inherit;
    font-size: var(--step-1);
    font-weight: 600;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--tempo-klein) ease;
  }
  .vraag-item__links a:hover {
    text-decoration-color: var(--signal);
  }
  /* De andere vragen: klein, bovenaan, met hun volledige tekst nog als toegankelijke naam */
  .vragen:has(details[open]) {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: var(--space-s);
    border-block-start: 0;
    align-items: center;
  }
  .vragen:has(details[open])::before {
    content: "Andere vraag";
    grid-row: 1;
    grid-column: 3;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
  }
  .vragen:has(details[open]) .vraag-item {
    border: 0;
  }
  .vragen:has(details[open]) .vraag-item:not(:has(details[open])) {
    grid-row: 1;
  }
  .vragen:has(details[open]) .vraag-item:has(details[open]) {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-eind));
  }
  .vragen:has(details[open]) details:not([open]) summary {
    grid-template-columns: auto;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    transition: background-color var(--tempo-klein) ease;
  }
  .vragen:has(details[open]) details:not([open]) summary:hover {
    background: var(--surface);
  }
  .vragen:has(details[open]) details:not([open]) .vraag-item__nr {
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0;
  }
  .vragen:has(details[open]) details:not([open]) .vraag-item__tekst {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  @container main (min-width: 60rem) {
    .vragen:has(details[open]) .vraag-item:has(details[open]) {
      margin-inline-start: 0;
    }
    .vraag-item details[open] {
      padding-inline-start: var(--space-l);
    }
  }

  /* Alle pagina's, met paginanummer rechts en een stippellijn ertussen */
  .paginas {
    margin-block-start: var(--space-xl);
    font-family: var(--font-display);
  }
  .paginas h2,
  .paginas h3 {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-soft);
    margin-block-end: var(--space-xs);
  }
  .paginas ol {
    list-style: none;
    padding: 0;
    border-block-start: 2px solid var(--ink);
  }
  .paginas a {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-block-size: 3rem;
    padding-block: 0.7rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--step-1);
    font-weight: 600;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--tempo-klein) ease;
  }
  .paginas a:hover {
    text-decoration-color: var(--signal);
  }
  .paginas__naam {
    flex: none;
    max-inline-size: 100%;
  }
  .paginas__vraag {
    order: 2;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-soft);
  }
  @container main (max-width: 40rem) {
    .paginas a {
      flex-wrap: wrap;
    }
    .paginas__vraag {
      order: 6;
      flex-basis: 100%;
    }
  }
  .paginas a::after {
    content: attr(data-nr);
    order: 5;
    font-size: var(--step-0);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .paginas a::before {
    content: "";
    order: 3;
    flex: 1;
    align-self: center;
    min-inline-size: 1.5rem;
    border-block-end: 2px dotted var(--line);
  }

  /* ---------- Uitspraak ---------- */
  .statement {
    padding-block: var(--space-2xl);
    border-block-start: 1px solid var(--line);
  }
  .statement p {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: clamp(2rem, 1rem + 5.2cqi, 6.5rem);
    line-height: 1.04;
    letter-spacing: var(--display-tracking);
    max-inline-size: 18ch;
    text-wrap: balance;
  }

  /* ---------- Rijen ---------- */
  .rows {
    margin-block-start: var(--space-l);
    border-block-start: 2px solid var(--ink);
  }
  .rows > li {
    border-block-end: 1px solid var(--line);
  }
  .rows a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem var(--space-l);
    padding-block: var(--space-m);
    text-decoration: none;
  }
  .rows__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--display-weight);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.16em;
    transition: text-decoration-color var(--tempo-klein) ease;
  }
  .rows__more {
    color: var(--ink-soft);
  }
  .rows a:hover .rows__title {
    text-decoration-color: var(--signal);
  }
  @container main (min-width: 44rem) {
    .rows a {
      grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
      align-items: baseline;
    }
  }

  /* ---------- Blokken: een lijn erboven, zoals een regel in een notitieboek ---------- */
  .item,
  .case {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.5rem;
    padding-block-start: var(--space-s);
    border-block-start: 2px solid var(--ink);
  }
  .item p,
  .case p:not([class]) {
    color: var(--ink-soft);
  }
  .case__who {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
  }
  .case__shift {
    font-size: var(--step-1);
  }
  .case__stat {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.75rem, 1.5rem + 5cqi, 5.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    margin-block: var(--space-xs);
  }
  .case__stat span {
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-soft);
    margin-block-start: 0.5rem;
  }
  .case__when {
    font-size: var(--step--1);
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--line);
    margin-block-start: 0.25rem;
  }

  /* ---------- Werkvlakken: tegels van ongelijke grootte, één draagt de hoofdgedachte ---------- */
  .vlakken {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
    margin-block-start: var(--space-l);
  }
  .vlak {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-xs);
    padding: var(--space-m);
    border: 1.5px solid var(--line);
    border-radius: 0.75rem;
  }
  .vlak h3 {
    font-size: var(--step-2);
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-inline-size: 18ch;
  }
  .vlak p {
    color: var(--ink-soft);
    max-inline-size: 46ch;
  }
  .vlak--groot {
    align-content: end;
    min-block-size: 16rem;
    background: var(--inverse);
    border-color: var(--inverse);
    color: var(--on-inverse);
  }
  .vlak--groot h3 {
    font-size: clamp(2rem, 1.2rem + 3cqi, 3.75rem);
    line-height: 1.02;
    max-inline-size: 12ch;
  }
  .vlak--groot p {
    color: var(--on-inverse-soft);
    font-size: var(--step-1);
    line-height: 1.45;
  }
  @container main (min-width: 52rem) {
    .vlakken {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
    .vlak--groot {
      grid-row: span 3;
      padding: var(--space-l);
    }
  }

  /* ---------- Schetsen: potloodkrabbels in de marge, zoals in een notitieboek. Altijd decoratief. ---------- */
  .schets-defs {
    position: absolute;
    inline-size: 0;
    block-size: 0;
  }
  .schets {
    flex: none;
    inline-size: 4.25rem;
    block-size: 4.25rem;
    fill: none;
    stroke: color-mix(in oklab, var(--ink) 50%, var(--paper));
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url("#potlood");
  }
  .links__kopregel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-s);
  }
  .links__kopregel .schets {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin-block-start: -0.25rem;
    rotate: 7deg;
  }
  /* De tweede schets staat onderaan, alleen als de bladzijde daar ruimte voor heeft */
  .links__schetsen {
    display: none;
  }
  @media (min-height: 62rem) {
    .links__schetsen {
      display: flex;
      justify-content: flex-end;
      margin-block-start: auto;
    }
    .links__schetsen .schets {
      inline-size: 5rem;
      block-size: 5rem;
      rotate: -6deg;
    }
  }
  .vlak {
    position: relative;
  }
  .vlak .schets {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-end: var(--space-s);
    inline-size: 3.25rem;
    block-size: 3.25rem;
    rotate: 4deg;
  }
  .vlak:has(.schets) h3 {
    padding-inline-end: 3.5rem;
  }
  .vlak--groot .schets {
    inline-size: 5.5rem;
    block-size: 5.5rem;
    stroke: var(--on-inverse-soft);
    rotate: -5deg;
  }

  /* ---------- Kernzin ---------- */
  .principle {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--display-weight);
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-inline-size: 26ch;
    padding-inline-start: var(--space-m);
    border-inline-start: 0.35rem solid var(--signal);
    margin-block: var(--space-l);
  }

  /* ---------- Stappen: dit ís een volgorde, dus genummerd ---------- */
  .steps {
    counter-reset: step;
    margin-block-start: var(--space-l);
    display: grid;
    gap: var(--space-l);
  }
  .steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0 var(--space-m);
    position: relative;
  }
  .steps > li::before {
    content: counter(step);
    grid-row: 1 / span 2;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    position: relative;
    z-index: 1;
  }
  .steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: 3.25rem calc(-1 * var(--space-l));
    inset-inline-start: calc(1.625rem - 1px);
    inline-size: 2px;
    background: var(--line);
  }
  .steps h3 {
    align-self: end;
    padding-block-start: 0.55rem;
  }
  .steps p {
    grid-column: 2;
    color: var(--ink-soft);
    max-inline-size: 52ch;
    margin-block-start: 0.4em;
  }

  /* ---------- Portret ---------- */
  .portrait {
    max-inline-size: 22rem;
  }
  .portrait img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--surface);
  }
  .portrait figcaption {
    font-family: var(--font-display);
    font-size: var(--step--1);
    color: var(--ink-soft);
    margin-block-start: var(--space-xs);
  }

  /* ---------- Lijsten ---------- */
  .ticks {
    display: grid;
    gap: 0.6rem;
    margin-block-start: var(--space-s);
  }
  .ticks > li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.75rem;
    max-inline-size: 56ch;
  }
  .ticks > li::before {
    content: "";
    inline-size: 0.6rem;
    block-size: 0.6rem;
    margin-block-start: 0.55em;
    border-radius: 50%;
    background: var(--signal);
    justify-self: center;
  }
  .ticks--no > li::before {
    background: none;
    border: 1.5px solid var(--ink-soft);
  }
  .questions {
    counter-reset: q;
    display: grid;
    margin-block-start: var(--space-m);
    border-block-start: 2px solid var(--ink);
    max-inline-size: 46rem;
  }
  .questions > li {
    counter-increment: q;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: 1.3;
  }
  .questions > li::before {
    content: counter(q);
    color: var(--ink-soft);
    font-size: var(--step--1);
    padding-block-start: 0.35em;
  }
  :is(.questions, .rows, .ticks) + p {
    margin-block-start: var(--space-m);
  }

  /* ---------- Inhoudsopgave op de pagina ---------- */
  .toc {
    font-family: var(--font-display);
    margin-block-start: var(--space-l);
  }
  .toc h2 {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-soft);
  }
  .toc ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-block-start: 0.5rem;
  }
  .toc a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-weight: 600;
  }

  /* ---------- Tabs ---------- */
  .tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
    margin-block-start: var(--space-l);
  }
  .tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-self: start;
    max-inline-size: 100%;
  }
  .tabs__tab {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    min-block-size: 2.75rem;
    max-inline-size: 100%;
    padding: 0.5rem 1.1rem;
    text-align: start;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition:
      background-color var(--tempo-klein) ease,
      border-color var(--tempo-klein) ease;
  }
  .tabs__tab:hover {
    border-color: var(--ink);
  }
  .tabs__tab[aria-selected="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .tabs__panel {
    padding: var(--space-m) 0 0;
    border-block-start: 2px solid var(--ink);
  }
  .tabs__panel + .tabs__panel {
    margin-block-start: var(--space-m);
  }
  .tabs__panel > * + * {
    margin-block-start: var(--space-s);
  }
  .tabs__panel h3 {
    font-size: var(--step-2);
    max-inline-size: 24ch;
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: var(--space-m);
  }
  .tags li {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
  }

  /* ---------- Filter op praktijkvoorbeelden: zuiver CSS met :has() ---------- */
  .filter {
    border: 0;
    padding: 0;
    margin-block-start: var(--space-l);
    min-inline-size: 0;
  }
  .filter + .cases {
    margin-block-start: var(--space-m);
  }
  .section__body:has(#f-verhaal:checked) .case:not([data-domein="verhaal"]),
  .section__body:has(#f-web:checked) .case:not([data-domein="web"]),
  .section__body:has(#f-proces:checked) .case:not([data-domein="proces"]) {
    display: none;
  }
  .open-data,
  .weglaten {
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    color: var(--ink-soft);
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .chip {
    position: relative;
    cursor: pointer;
    font-family: var(--font-display);
  }
  .chip input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .chip span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.35rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: border-color var(--tempo-klein) ease;
  }
  .chip:hover span {
    border-color: var(--ink);
  }
  .chip input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .chip input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  /* ---------- Formulier ---------- */
  .form-container {
    container-type: inline-size;
  }
  .form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    max-inline-size: 38rem;
    margin-block-start: var(--space-m);
  }
  .form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    align-items: start;
  }
  @container (min-width: 34rem) {
    .form__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  .field {
    display: grid;
    gap: 0.4rem;
  }
  .field label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
  }
  .field__hint {
    font-size: var(--step--1);
    color: var(--ink-soft);
  }
  .field input,
  .field textarea {
    inline-size: 100%;
    padding: 0.75rem 0.9rem;
    font-size: 1.0625rem;
    background: var(--paper);
    border: 1.5px solid var(--ink-soft);
    border-radius: var(--radius);
    min-block-size: 3rem;
  }
  .field textarea {
    min-block-size: 9rem;
    resize: vertical;
    field-sizing: content;
  }
  .field :is(input, textarea):hover {
    border-color: var(--ink);
  }
  .field :is(input, textarea):user-invalid {
    border-color: var(--error);
    border-width: 2px;
  }
  .field__error {
    display: none;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--error);
  }
  .field:has(:user-invalid) .field__error {
    display: block;
  }
  .form__status {
    font-family: var(--font-display);
    font-weight: 600;
  }
  .form__status:empty {
    display: none;
  }
  .form__status[data-state="ok"],
  .form__status[data-state="error"] {
    padding: var(--space-s);
    border-radius: var(--radius);
    background: var(--surface);
    border-inline-start: 0.35rem solid var(--signal);
  }
  .form__status[data-state="error"] {
    border-inline-start-color: var(--error);
  }
  .hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---------- Afsluiting, volgende stap, voet ---------- */
  .closing {
    padding-block: var(--space-xl);
    background: var(--surface);
  }
  .closing p {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-inline-size: 28ch;
  }
  /* Volgende stap: direct onder de laatste regel, in de kleur van de omslag */
  .next-step {
    padding-block: var(--space-xl);
    background: var(--inverse);
    color: var(--on-inverse);
    font-family: var(--font-display);
  }
  .next-step__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--on-inverse-soft);
    margin-block-end: var(--space-xs);
  }
  .next-step__link {
    display: inline-block;
    color: inherit;
    font-weight: var(--display-weight);
    font-size: clamp(2.25rem, 1rem + 6vw, 6.5rem);
    line-height: 1.02;
    letter-spacing: var(--display-tracking);
    text-decoration-color: transparent;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.12em;
    transition: text-decoration-color var(--tempo-klein) ease;
  }
  .next-step__link:hover {
    text-decoration-color: var(--signal);
  }
  .next-step :focus-visible {
    outline-color: var(--on-inverse);
  }
  .site-footer {
    padding-block: var(--space-xl) var(--space-l);
    font-size: var(--step--1);
  }
  .site-footer__grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .site-footer h2 {
    font-size: 1rem;
    letter-spacing: 0;
    margin-block-end: var(--space-xs);
  }
  .site-footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.1rem;
  }
  .site-footer li a,
  .site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
  .site-footer dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
  }
  .site-footer dt {
    color: var(--ink-soft);
  }
  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    align-items: center;
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--line);
    color: var(--ink-soft);
  }
  .wordmark--footer .wordmark__svg {
    block-size: 1.4rem;
  }

  /* ---------- Lopende tekst (voorwaarden) ---------- */
  .prose {
    max-inline-size: var(--measure);
  }
  .notice {
    padding: var(--space-m);
    background: var(--surface);
    border-inline-start: 0.35rem solid var(--signal);
    max-inline-size: var(--measure);
  }

  /* ---------- Weergavepaneel ---------- */
  .prefs[popover] {
    position: fixed;
    inset: auto;
    inset-block-start: calc(var(--marge) + 4rem);
    inset-inline-end: calc(var(--boek-zij) + var(--gutter-eind));
    margin: 0;
    inline-size: min(24rem, calc(100vw - 2 * var(--boek-zij) - var(--gutter) - var(--gutter-eind)));
    max-block-size: calc(100svh - 2 * var(--marge) - 5rem - var(--balk));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-m);
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 1rem;
    font-family: var(--font-display);
  }
  .prefs[popover]:popover-open {
    display: grid;
    gap: var(--space-m);
  }
  .prefs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .prefs__head h2 {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
  }
  .prefs__close {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
  }
  .prefs__group {
    border: 0;
    padding: 0;
    min-inline-size: 0;
    display: grid;
    gap: 0.5rem;
  }
  .prefs__group legend,
  .prefs__label {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
    padding: 0;
    margin-block-end: 0.5rem;
  }
  .prefs__label {
    display: flex;
    justify-content: space-between;
    margin: 0;
  }
  .prefs .chip span {
    min-block-size: 2.5rem;
  }
  .sw {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px #0003;
    background: conic-gradient(var(--a) 0 33%, var(--b) 0 66%, var(--d) 0);
  }
  .sw--merk {
    --a: #f8f5f0;
    --b: #0b1532;
    --d: #e6352b;
  }
  .sw--diepzee {
    --a: #f4f6fa;
    --b: #001233;
    --d: #0466c8;
  }
  .sw--strand {
    --a: #ffffff;
    --b: #353535;
    --d: #3c6e71;
  }
  .sw--oogst {
    --a: #ffe6a7;
    --b: #432818;
    --d: #99582a;
  }
  .sw--aarde {
    --a: #f6f1ec;
    --b: #143642;
    --d: #b76935;
  }
  .sw--zand {
    --a: #f5ebe0;
    --b: #3b2f28;
    --d: #d5bdaf;
  }
  .prefs input[type="range"] {
    inline-size: 100%;
    min-block-size: 2rem;
    accent-color: var(--ink);
  }
  .prefs__reset {
    justify-self: start;
    min-block-size: 2.75rem;
    font-size: var(--step--1);
    font-weight: 600;
    padding: 0;
    background: none;
    border: 0;
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
  @media not ((hover: hover) and (pointer: fine)) {
    .prefs__group--muis {
      display: none;
    }
  }

  /* ---------- Leeshulp: arceren met de muis (standaard uit) ---------- */
  .w.is-read {
    background-color: var(--tint);
    box-shadow: 0.3em 0 0 var(--tint);
    color: var(--ink);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .soft {
    color: var(--ink-soft);
  }

  /* ---------- Een bladzijde omslaan ----------
     Elke paginawissel is een bladzijde die omslaat om de vouw, net als de omslag. Wat er omslaat is het beeld van
     de rechterbladzijde (uitgesneden uit het schermbeeld); tafel, omslag, balk en elastiek blijven liggen.
     Verder: de oude bladzijde slaat naar links om en komt (breed scherm) neer als de linkerbladzijde.
     Terug: omgekeerd. Geen doorzichtigheid: tekst is óf de oude bladzijde, óf de nieuwe. */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
    :root {
      --vouw: calc(var(--boek-zij) + var(--rug) + var(--links));
      --blad-uitsnede: inset(
        calc(var(--marge) + var(--kaft) + var(--kop)) calc(var(--boek-zij) + var(--kaft))
          calc(var(--marge) + var(--balk) + env(safe-area-inset-bottom)) var(--vouw)
      );
    }
    ::view-transition-group(*) {
      animation: none;
    }
    ::view-transition-old(*),
    ::view-transition-new(*) {
      mix-blend-mode: normal;
      animation: none;
    }
    ::view-transition-old(lijst),
    ::view-transition-old(strap),
    ::view-transition-old(balk) {
      display: none;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
      transform-origin: var(--vouw) 50%;
    }
    ::view-transition-old(links),
    ::view-transition-new(links) {
      transform-origin: 100% 50%;
    }

    /* Verder, één bladzijde: de oude slaat helemaal om */
    ::view-transition-new(root) {
      z-index: 1;
    }
    ::view-transition-old(root) {
      z-index: 2;
      clip-path: var(--blad-uitsnede);
      animation: blad-weg var(--tempo-blad) var(--ease-rustig) both;
    }
    /* Terug, één bladzijde: de nieuwe slaat terug over de oude */
    :root[data-richting="terug"]::view-transition-old(root) {
      z-index: 1;
      clip-path: none;
      animation: none;
    }
    :root[data-richting="terug"]::view-transition-new(root) {
      z-index: 2;
      clip-path: var(--blad-uitsnede);
      animation: blad-weg var(--tempo-blad) var(--ease-rustig) both reverse;
    }

    /* Smal scherm: rustig. Geen draaiing; het nieuwe blad wordt over het vorige gelegd, vanaf de kant van het
       elastiek naar de rug. Terug: het bovenste blad wordt er weer af geschoven. Zelfde richting als het boek. */
    @media (max-width: 47.99rem) {
      ::view-transition-old(root) {
        z-index: 1;
        clip-path: none;
        animation: none;
      }
      ::view-transition-new(root) {
        z-index: 2;
        box-shadow: -0.75rem 0 1.5rem color-mix(in oklab, #000 16%, transparent);
        animation: blad-erover 0.8s var(--ease-rustig) both;
      }
      :root[data-richting="terug"]::view-transition-new(root) {
        z-index: 1;
        clip-path: none;
        box-shadow: none;
        animation: none;
      }
      :root[data-richting="terug"]::view-transition-old(root) {
        z-index: 2;
        box-shadow: -0.75rem 0 1.5rem color-mix(in oklab, #000 16%, transparent);
        animation: blad-erover 0.8s var(--ease-rustig) both reverse;
      }
    }

    /* Breed scherm: twee helften. Tot haaks op de ene bladzijde, daarna van haaks tot plat op de andere. */
    @media (min-width: 64rem) {
      ::view-transition-old(root) {
        animation: blad-op calc(var(--tempo-blad) / 2) cubic-bezier(0.5, 0, 1, 1) both;
      }
      ::view-transition-old(links) {
        z-index: 1;
      }
      ::view-transition-new(links) {
        z-index: 2;
        animation: blad-neer calc(var(--tempo-blad) / 2) cubic-bezier(0, 0, 0.3, 1) calc(var(--tempo-blad) / 2) both;
      }
      :root[data-richting="terug"]::view-transition-new(links) {
        z-index: 1;
        animation: none;
      }
      :root[data-richting="terug"]::view-transition-old(links) {
        z-index: 2;
        animation: blad-neer calc(var(--tempo-blad) / 2) cubic-bezier(0.5, 0, 1, 1) both reverse;
      }
      :root[data-richting="terug"]::view-transition-new(root) {
        animation: blad-op calc(var(--tempo-blad) / 2) cubic-bezier(0, 0, 0.3, 1) calc(var(--tempo-blad) / 2) both reverse;
      }
    }
  }
  /* De rechterbladzijde: van plat tot voorbij haaks (weg), of tot precies haaks (op) */
  @keyframes blad-weg {
    from {
      transform: perspective(2400px) rotateY(0deg);
      filter: brightness(1);
    }
    to {
      transform: perspective(2400px) rotateY(-92deg);
      filter: brightness(0.82);
    }
  }
  @keyframes blad-erover {
    from {
      transform: translateX(100%);
    }
    to {
      transform: none;
    }
  }
  @keyframes blad-op {
    from {
      transform: perspective(2400px) rotateY(0deg);
      filter: brightness(1);
    }
    to {
      transform: perspective(2400px) rotateY(-90deg);
      filter: brightness(0.84);
    }
  }
  /* De linkerbladzijde: van haaks tot plat */
  @keyframes blad-neer {
    from {
      transform: perspective(2400px) rotateY(90deg);
      filter: brightness(0.84);
    }
    to {
      transform: perspective(2400px) rotateY(0deg);
      filter: brightness(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  /* Lenis regelt het scrollen zelf */
  html.lenis,
  html.lenis body {
    height: auto;
  }
  .lenis.lenis-stopped {
    overflow: clip;
  }
  @media print {
    html {
      background: none;
    }
    body {
      padding: 0;
    }
    .lijst,
    .links,
    .strap,
    .tafel,
    .balk,
    .prefs-toggle,
    .skip-link {
      display: none !important;
    }
    :root[data-omslag] .omslag {
      position: static;
      transform: none;
      visibility: visible;
    }
  }
}