/* iWorkers — statische site
   Eén stylesheet, opgebouwd in cascade layers. Geen build-stap nodig. */

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

/* Geen fontbestanden: alle lettertypekeuzes zijn systeemlettertypen. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

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

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

    /* Kleur. Merk: navy (#0b1532) en rood (#e6352b) uit het logo, altijd gelijk.
       Seizoen: season.js zet per dag --h (tint) en --c (sterkte); papier, vlakken en lijnen kleuren mee. */
    --h: 88;
    --c: 1.1;

    --navy: #0b1532;
    --red: #e6352b;

    --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));
    --pine: var(--ink);
    --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));
    --on-signal: var(--paper);
    --focus: var(--ink);
    --error: light-dark(oklch(45% 0.17 27), oklch(78% 0.13 27));

    /* Typografie */
    /* Standaard het systeemlettertype: geen download, direct scherp. Andere keuzes via het weergavepaneel. */
    --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: 650;
    --display-tracking: -0.028em;
    --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);
    --step-3: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
    --step-4: clamp(2.375rem, 1.45rem + 4.4vw, 5rem);

    /* 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);
    --radius-l: 1.25rem;
    --measure: 62ch;
    --radius: 0.375rem;
  }
}

@layer base {
  html {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: calc(100% * var(--text-scale));
    line-height: 1.6;
    font-optical-sizing: auto;
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body {
    font-size: var(--step-0);
    overflow-wrap: break-word;
    padding-block-end: calc(5rem + env(safe-area-inset-bottom));
  }
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    line-height: 1.08;
    letter-spacing: var(--display-tracking);
  }
  h1 {
    font-size: var(--step-4);
    line-height: 1.02;
  }
  h2 {
    font-size: var(--step-3);
  }
  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: 2rem;
  }
}

@layer layout {
  .wrap {
    inline-size: calc(100% - 2 * var(--gutter));
    margin-inline: auto;
  }
  .flow > * + * {
    margin-block-start: var(--flow, 1em);
  }
  .flow > h2 + *,
  .flow > h1 + * {
    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;
    gap: var(--space-s) var(--space-l);
  }
  .section__label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-soft);
  }
  .section__body > h2 {
    max-inline-size: 21ch;
  }
  .section__body > h2 + * {
    margin-block-start: var(--space-m);
  }
  .section__body > p,
  .section__body > ul:not([class]),
  .section__body > ol:not([class]) {
    max-inline-size: var(--measure);
  }
  @container main (min-width: 56rem) {
    .section__grid.section__grid {
      grid-template-columns: minmax(9rem, 2fr) minmax(0, 10fr);
    }
    .section__label {
      padding-block-start: 0.9em;
      position: sticky;
      inset-block-start: 2rem;
      align-self: start;
    }
  }

  .grid-3 {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  }
  .grid-2 {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
  }
}

@layer components {
  /* ---------- Skiplink ---------- */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 10;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    border-radius: var(--radius);
    transform: translateY(-200%);
  }
  .skip-link:focus {
    transform: none;
  }

  /* ---------- Schil ----------
     Bovenin alleen het woordmerk. Navigeren doe je met de wegwijzer onderin en met de volgende stap
     direct onder de inhoud. <main> is een container: secties reageren op hún ruimte. */
  main {
    container: main / inline-size;
    view-transition-name: main;
  }
  main:focus {
    outline: none;
  }
  .top {
    padding: var(--space-s) var(--gutter) 0;
    padding-block-start: calc(var(--space-s) + env(safe-area-inset-top));
  }
  .wordmark {
    display: inline-flex;
    color: var(--ink);
    padding-block: 0.35rem;
    border-radius: 4px;
  }
  .wordmark__svg {
    block-size: 1.75rem;
    inline-size: auto;
    fill: currentColor;
  }
  .wordmark__spark {
    fill: var(--signal);
  }
  .wordmark--footer .wordmark__svg {
    block-size: 1.6rem;
  }
  .nav-icon {
    flex: none;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .site-footer ul,
  .toc ul {
    list-style: none;
    padding: 0;
  }

  /* Leesvoortgang: scroll-gedreven, zonder JS */
  @supports (animation-timeline: scroll()) {
    body::before {
      content: "";
      position: fixed;
      inset: 0 0 auto 0;
      block-size: 3px;
      z-index: 6;
      background: var(--signal);
      transform-origin: 0 50%;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }
  @keyframes progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  /* ---------- Knoppen en links ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    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;
    color: var(--paper);
    background: var(--ink);
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
  }
  .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;
  }
  .btn--small {
    min-block-size: 2.75rem;
    padding: 0.5rem 1.1rem;
    font-size: 1rem;
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
    align-items: center;
  }
  * + .actions {
    margin-block-start: var(--space-l);
  }

  /* ---------- Hero (home) ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .hero__inner {
    position: relative;
  }
  .hero h1 {
    max-inline-size: 13.5ch;
  }
  .hero__who {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink-soft);
    margin-block-end: var(--space-m);
  }
  .hero__lede {
    font-size: var(--step-1);
    line-height: 1.45;
    max-inline-size: 40ch;
    margin-block-start: var(--space-l);
  }

  /* ---------- Paginakop (subpagina's) ---------- */
  .page-hero {
    padding-block: var(--space-xl);
  }
  .page-hero__label {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink-soft);
    margin-block-end: var(--space-m);
  }
  .page-hero h1 {
    font-size: clamp(2.125rem, 1.4rem + 3.4vw, 4.125rem);
    max-inline-size: 19ch;
  }
  .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);
  }

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

  /* ---------- Items zonder kaartdoos: een streep erboven is genoeg ---------- */
  .item {
    padding-block-start: var(--space-s);
    border-block-start: 2px solid var(--ink);
  }
  .item > * + * {
    margin-block-start: 0.5em;
  }
  .item p {
    color: var(--ink-soft);
  }
  .item--link a {
    color: var(--ink);
    text-decoration-color: var(--signal);
    text-decoration-thickness: 0.14em;
  }
  * + .grid-3,
  * + .grid-2 {
    margin-block-start: var(--space-l);
  }

  /* ---------- Kernzin ---------- */
  .principle {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.018em;
    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);
    position: relative;
  }
  .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%;
    border: 2px solid var(--ink);
    background: 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;
  }
  /* Scroll-gedreven: het nummer kleurt zodra de stap in beeld komt. Zuiver CSS, geen JS. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .steps > li::before {
        animation: step-in linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 38%;
      }
    }
  }
  @keyframes step-in {
    from {
      background: var(--paper);
      border-color: var(--line);
    }
    to {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--paper);
    }
  }

  /* ---------- Praktijkvoorbeelden ---------- */
  .case {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding-block-start: var(--space-s);
    border-block-start: 2px solid var(--ink);
  }
  .case__who {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-soft);
  }
  .case__shift {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .case p:not([class]) {
    color: var(--ink-soft);
  }
  .case__when {
    font-size: var(--step--1);
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--line);
    margin-block-start: 0.25rem;
  }

  /* ---------- 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);
  }
  .with-aside {
    display: grid;
    gap: var(--space-l);
  }
  @container main (min-width: 56rem) {
    .with-aside {
      grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
      align-items: start;
    }
  }

  /* ---------- 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-end: 1px solid var(--line);
    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-start: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 500;
    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: 500;
    letter-spacing: 0;
    color: var(--ink-soft);
  }
  .toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-block-start: 0.5rem;
  }
  .toc a {
    display: inline-block;
    padding-block: 0.5rem;
    color: var(--ink);
  }

  /* ---------- Formulier ---------- */
  .form {
    display: grid;
    gap: var(--space-m);
    max-inline-size: 38rem;
    margin-block-start: var(--space-m);
  }
  .form__row {
    display: grid;
    gap: var(--space-m);
    align-items: start;
  }
  @container (min-width: 34rem) {
    .form__row {
      grid-template-columns: 1fr 1fr;
    }
  }
  .form-container {
    container-type: inline-size;
  }
  .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 input:hover,
  .field 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: 500;
  }
  .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 en footer ---------- */
  .closing {
    padding-block: var(--space-xl);
    background: var(--tint);
  }
  .closing p {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    max-inline-size: 30ch;
  }
  .site-footer {
    padding-block: var(--space-xl) var(--space-l);
    border-block-start: 1px solid var(--line);
    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 {
    display: grid;
    gap: 0.1rem;
  }
  .site-footer li a,
  .site-footer__legal a {
    display: inline-block;
    padding-block: 0.4rem;
    color: var(--ink);
  }
  .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);
  }

  /* ---------- Lopende tekst (voorwaarden) ---------- */
  .prose {
    max-inline-size: var(--measure);
  }
  .prose h2 {
    font-size: var(--step-2);
    margin-block-start: var(--space-l);
  }
  .notice {
    padding: var(--space-m);
    background: var(--surface);
    border-inline-start: 0.35rem solid var(--signal);
    border-radius: var(--radius);
    max-inline-size: var(--measure);
  }
}

@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);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  @media print {
    .wegwijzer,
    .next-step,
    body::before,
    .skip-link {
      display: none !important;
    }
  }
}

/* =====================================================================
   Versie 4: weergavepaneel, paletten, volle-breedte-grid, tegels, tabs, effecten
   ===================================================================== */

@layer tokens {
  /* ---------- Thema: schakelaar wint van het systeem ---------- */
  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  /* ---------- Lettertype ---------- */
  :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-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: 600;
    --display-tracking: -0.018em;
  }

  /* ---------- Paletten: elk palet vult dezelfde zeven rollen, in licht en donker ----------
     paper = achtergrond, surface = tegels en zijbalk, tint = nadruk-vlak, ink = tekst en knoppen,
     ink-soft = bijtekst, line = lijnen, signal = accent (alleen grafisch, nooit als tekstvlak). */
  :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 {
  /* Koppen groeien mee met de ruimte van de inhoud (cqi), tot een leesbaar maximum */
  main h1 {
    font-size: clamp(2.375rem, 1rem + 6.4cqi, 7.5rem);
  }
  main h2 {
    font-size: clamp(1.875rem, 1.1rem + 3cqi, 4rem);
  }
}

@layer components {
  /* ---------- Leesbaarheidsregels: het grid mag het hele scherm nemen, tekst nooit ----------
     lopende tekst ≤ 62ch · koppen ≤ 22ch · hero-kop ≤ 14ch · tegels ≥ 17rem · minimaal 1rem tekst */
  .hero {
    display: grid;
    align-content: center;
    min-block-size: min(100svh, 60rem);
  }
  .hero h1 {
    max-inline-size: 14ch;
  }
  .hero__lede {
    max-inline-size: 38ch;
  }
  .page-hero h1 {
    font-size: clamp(2.125rem, 1rem + 4.6cqi, 6rem);
    max-inline-size: 20ch;
  }
  .section__body > h2 {
    max-inline-size: 22ch;
  }
  .closing p {
    font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
    max-inline-size: 28ch;
  }

  /* ---------- Tegels ---------- */
  .item,
  .case,
  .tabs__panel {
    position: relative;
    padding: var(--space-m);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-l);
    overflow: clip;
    transition:
      transform 0.6s ease,
      border-color 0.6s ease,
      box-shadow 0.6s ease;
  }
  .item::before,
  .case::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    block-size: 3px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.8s ease;
  }
  .item:hover,
  .item:focus-within,
  .case:hover {
    transform: translateY(-3px);
    border-color: var(--line);
    box-shadow: 0 16px 32px -20px oklch(20% 0.04 268 / 0.35);
  }
  .item:hover::before,
  .item:focus-within::before,
  .case:hover::before {
    transform: scaleX(1);
  }
  .item--link a::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .case__when {
    border-block-start-color: var(--line);
  }

  /* ---------- Rijen: vlak schuift in bij hover ---------- */
  .rows a {
    padding-inline: var(--space-s);
    margin-inline: calc(-1 * var(--space-s));
    border-radius: var(--radius);
    background: linear-gradient(var(--surface), var(--surface)) no-repeat 0 0 / 0% 100%;
    transition: background-size 0.7s ease;
  }
  .rows a:hover,
  .rows a:focus-visible {
    background-size: 100% 100%;
  }

  /* ---------- Binnenkomen bij scrollen: zuiver CSS, alleen waar ondersteund ---------- */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .section__body > h2,
      .grid-3 > *,
      .grid-2 > *,
      .rows > li,
      .principle {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
      }
    }
  }
  /* Alleen een zachte verschuiving: niets is ooit verborgen of half zichtbaar */
  @keyframes rise {
    from {
      translate: 0 1.5rem;
    }
    to {
      translate: 0 0;
    }
  }
  .vraag .rows > li {
    animation: none;
  }

  /* ---------- 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;
    padding: 0.35rem;
    background: var(--surface);
    border-radius: 999px;
    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;
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    max-inline-size: 100%;
    min-inline-size: 0;
    white-space: normal;
    text-align: start;
    transition:
      background-color 0.2s,
      color 0.2s;
  }
  .tabs__tab:hover {
    background: var(--tint);
  }
  .tabs__tab[aria-selected="true"] {
    background: var(--ink);
    color: var(--paper);
  }
  .tabs__panel {
    padding: var(--space-l);
  }
  .tabs__panel h3 {
    font-size: var(--step-2);
    max-inline-size: 24ch;
  }
  .tabs.is-enhanced .tabs__panel {
    transition:
      opacity 0.35s ease,
      translate 0.35s ease;
    @starting-style {
      opacity: 0;
      translate: 0 0.75rem;
    }
  }
  @media (max-width: 40rem) {
    .tabs__list {
      border-radius: var(--radius-l);
    }
  }
  .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;
    background: var(--paper);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
  }

  /* ---------- Weergavepaneel ---------- */
  /* Panelen (overzicht en weergave) openen vlak boven de wegwijzer: korte weg voor muis en duim */
  .prefs[popover] {
    position: fixed;
    inset: auto;
    inset-inline: 0;
    inset-block-end: calc(4.5rem + env(safe-area-inset-bottom));
    margin: 0 auto;
    inline-size: min(26rem, calc(100vw - 1rem));
    max-block-size: min(76svh, 44rem);
    overflow-y: auto;
    padding: var(--space-m);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: 0 24px 60px -24px oklch(20% 0.04 268 / 0.5);
    font-family: var(--font-display);
  }
  .prefs[popover]:popover-open {
    display: grid;
    gap: var(--space-m);
    @starting-style {
      opacity: 0;
      translate: 0 0.75rem;
    }
    transition:
      opacity 0.25s ease,
      translate 0.25s ease;
  }
  .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;
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .chip {
    position: relative;
    cursor: pointer;
  }
  .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.5rem;
    padding: 0.35rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .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;
  }
  .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;
    font-size: var(--step--1);
    font-weight: 500;
    padding: 0.5rem 0;
    background: none;
    border: 0;
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

}

@layer components {
  /* Grote cijfers op de resultaattegels */
  .case__stat {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    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-s) var(--space-xs);
  }
  .case__stat span {
    display: block;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-soft);
    margin-block-start: 0.5rem;
  }
  .case:has(.case__stat) .case__shift {
    font-size: var(--step-1);
  }
}

@layer layout {
  /* Eén kolom mag nooit breder worden dan het scherm: lange woorden breken af (lang="nl" geeft nette afbreking) */
  .section__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Afbreken alleen waar de ruimte krap is; op brede schermen blijven woorden heel */
  @container main (max-width: 34rem) {
    h1,
    h2,
    h3 {
      hyphens: auto;
      hyphenate-limit-chars: 10 4 4;
    }
  }
}

@layer components {
}

/* =====================================================================
   Versie 5: bovenbalk als standaard (zijbalk optioneel), meelezen, statement, finale, open data
   ===================================================================== */
@layer components {
  /* ---------- Statement: één uitspraak, schermvullend, kleurt in tijdens het scrollen ---------- */
  .statement {
    padding-block: var(--space-2xl);
  }
  .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;
  }

  /* ---------- Finale ---------- */
  .finale {
    padding-block: var(--space-2xl);
    background: var(--ink);
    color: var(--paper);
  }
  .finale h2 {
    font-size: clamp(2.5rem, 1rem + 7cqi, 8rem);
    line-height: 1;
    max-inline-size: 12ch;
  }
  .finale p {
    font-size: var(--step-1);
    max-inline-size: 36ch;
    margin-block-start: var(--space-m);
  }
  .finale .btn {
    background: var(--paper);
    color: var(--ink);
  }
  .finale .btn--quiet {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
  }
  .finale .btn--quiet:hover {
    background: oklch(from var(--paper) l c h / 0.12);
  }
  .finale :focus-visible {
    outline-color: var(--paper);
  }

  /* ---------- Meelezen ---------- */
  .w {
    display: inline-block;
    transition:
      color 0.9s ease,
      background-color 0.9s ease,
      box-shadow 0.9s ease,
      translate 1s ease;
  }
  /* Meelezen met de muis: gelezen woorden zijn gearceerd en blijven dat.
     De schaduw naar rechts vult de spatie, zodat de arcering doorloopt. Volle inkt op het tintvlak haalt AA. */
  .w.is-read {
    color: var(--ink);
    background-color: var(--tint);
    box-shadow: 0.3em 0 0 var(--tint);
  }
  .is-scroll-read .w {
    color: var(--ink-soft);
    translate: 0 0.1em;
  }
  .is-scroll-read .w.is-read {
    color: var(--ink);
    background-color: transparent;
    box-shadow: none;
    translate: 0 0;
  }
  /* Een echte tekstselectie blijft altijd zichtbaar, ook over gearceerde woorden */
  .w::selection {
    background: var(--ink);
    color: var(--paper);
  }
  .read-marker {
    position: absolute;
    inset: 0 auto auto 0;
    block-size: 3px;
    inline-size: 0;
    border-radius: 2px;
    background: var(--signal);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
  }

  /* ---------- Stappen: voortgangslijn (GSAP) ---------- */
  .steps__progress {
    position: absolute;
    inset-block: 1.6rem;
    inset-inline-start: calc(1.625rem - 1.5px);
    inline-size: 3px;
    background: var(--signal);
    transform-origin: 50% 0;
    border-radius: 2px;
  }

  /* ---------- 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 {
    margin-block-start: var(--space-l);
    font-size: var(--step--1);
    color: var(--ink-soft);
  }
}

/* =====================================================================
   Versie 6: rust. Vloeiend scrollen (Lenis), trager tempo, arcering die blijft staan
   ===================================================================== */
@layer base {
  /* Lenis regelt het scrollen zelf; native smooth scroll zou ermee botsen */
  html.lenis,
  html.lenis body {
    height: auto;
  }
  html.lenis {
    scroll-behavior: auto !important;
  }
  .lenis.lenis-stopped {
    overflow: clip;
  }
  [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
}
@layer components {
  /* Paginawissel: rustige overvloeiing */
  ::view-transition-group(*) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .tabs.is-enhanced .tabs__panel {
    transition-duration: 0.8s;
  }
  .prefs[popover]:popover-open {
    transition-duration: 0.5s;
  }
  .btn {
    transition:
      background-color 0.4s ease,
      box-shadow 0.4s ease;
  }
}

/* =====================================================================
   Versie 7: de reis. Wegwijzer, volgende stap, vraag, echo
   ===================================================================== */
@layer components {
  /* ---------- Wegwijzer: het enige vaste element, onderaan in het midden ---------- */
  .wegwijzer {
    position: fixed;
    inset-inline: 0;
    inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 5;
    margin-inline: auto;
    inline-size: fit-content;
    max-inline-size: calc(100% - 1rem);
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem;
    font-family: var(--font-display);
    background: oklch(from var(--paper) l c h / 0.9);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 14px 34px -18px oklch(20% 0.05 268 / 0.5);
    view-transition-name: wegwijzer;
  }
  .wegwijzer:focus {
    outline: none;
  }
  .wegwijzer__btn {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.4s ease;
  }
  .wegwijzer__btn:hover {
    background: var(--surface);
  }
  .wegwijzer__pos {
    padding-inline: 0.35rem 0.6rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-inline-size: 0;
  }
  .wegwijzer__here {
    color: var(--ink);
    font-weight: 600;
  }
  .wegwijzer__next {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    min-inline-size: 0;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow 0.4s ease;
  }
  .wegwijzer__next:hover {
    box-shadow: 0 0 0 3px var(--signal);
  }
  @media (max-width: 34rem) {
    .wegwijzer__here,
    .wegwijzer__verder {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .wegwijzer__next {
      padding-inline: 0.9rem;
      font-size: 0.9375rem;
    }
  }
  @media (scripting: none) {
    .wegwijzer .prefs-toggle {
      display: none;
    }
  }

  /* ---------- Overzicht ---------- */
  .overview__list {
    list-style: none;
    padding: 0;
    display: grid;
  }
  .overview__list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.4s ease;
  }
  .overview__list a:hover {
    background: var(--surface);
  }
  .overview__list a[aria-current="page"] {
    background: var(--ink);
    color: var(--paper);
  }
  .overview__list a[data-step]::before {
    content: attr(data-step);
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.8125rem;
  }
  .overview__list a.is-aside:not([aria-current]) {
    color: var(--ink-soft);
    font-weight: 400;
  }
  .overview__echo,
  .echo {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-soft);
  }
  .echo {
    padding: var(--space-m) var(--gutter) 0;
  }
  .echo::before,
  .overview__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);
  }

  /* ---------- Volgende stap: direct onder de laatste regel ---------- */
  .next-step {
    padding-block: var(--space-xl);
    border-block-start: 1px solid var(--line);
    background: var(--surface);
  }
  .next-step__label {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-soft);
    margin-block-end: var(--space-xs);
  }
  .next-step__link {
    display: inline-block;
    font-family: var(--font-display);
    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: none;
    background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 100% / 0% 0.08em;
    transition: background-size 0.9s ease;
  }
  .next-step__link:hover,
  .next-step__link:focus-visible {
    background-size: 100% 0.08em;
  }

  /* ---------- De vraag (home) ---------- */
  .hero {
    min-block-size: 0;
    padding-block: var(--space-xl) var(--space-l);
  }
  .vraag {
    padding-block: var(--space-l) var(--space-xl);
  }
  .vraag h2 {
    font-size: var(--step-2);
  }
  .vraag__sub {
    color: var(--ink-soft);
    margin-block-start: 0.5rem;
  }
  .vraag .rows {
    margin-block-start: var(--space-m);
  }
  .vraag .rows__title {
    font-size: clamp(1.5rem, 1rem + 2.4cqi, 3rem);
  }
  .vraag__anders {
    margin-block-start: var(--space-m);
    max-inline-size: var(--measure);
    color: var(--ink-soft);
  }
  .weglaten {
    margin-block-start: var(--space-l);
    padding-inline-start: var(--space-s);
    border-inline-start: 0.25rem solid var(--signal);
    max-inline-size: var(--measure);
  }
}

@layer components {
  /* ---------- Binnenkomen bij laden: kleur en een kleine verschuiving, nooit doorzichtigheid ----------
     Kop en inleiding staan direct leesbaar op het scherm (bijtekstkleur haalt AA) en krijgen daarna
     rustig hun volle inkt. De failsafe zet alles op vol als het script niet laadt. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .hero h1,
    .page-hero h1,
    .hero [data-enter] {
      color: var(--ink-soft);
      animation: ink-failsafe 0.8s 3.5s forwards;
    }
    .hero [data-enter] {
      translate: 0 0.6rem;
    }
    .hero h1.ink-in,
    .page-hero h1.ink-in {
      color: var(--ink);
      animation: none;
    }
    .ink-in .w {
      color: var(--ink-soft);
      translate: 0 0.1em;
      transition:
        color 1.6s ease,
        translate 1.6s ease;
    }
    .ink-in .w.is-inked {
      color: var(--ink);
      translate: 0 0;
    }
    .hero [data-enter].is-entered {
      color: var(--ink);
      translate: 0 0;
      animation: none;
      transition:
        color 1.8s ease,
        translate 1.8s ease;
    }
  }
  @keyframes ink-failsafe {
    to {
      color: var(--ink);
      translate: 0 0;
    }
  }
}

@layer components {
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .hero h1.is-inked-done,
    .page-hero h1.is-inked-done {
      color: var(--ink);
      animation: none;
    }
  }
}

@layer components {
  .wegwijzer__next {
    gap: 0.3em;
  }
  /* De kop van de homepage laat ruimte, zodat de vraag in het eerste scherm begint */
  .hero h1 {
    font-size: clamp(2.375rem, 1rem + 4.4cqi, 5.5rem);
    max-inline-size: 15ch;
  }
}

@layer components {
  /* ---------- Begin (home): op een breed scherm staat de vraag naast de kop, niet eronder ---------- */
  .vraag .rows a {
    grid-template-columns: minmax(0, 1fr);
  }
  @container main (min-width: 70rem) {
    .begin {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: end;
      min-block-size: min(calc(100svh - 9rem), 52rem);
    }
    .begin .hero {
      padding-block-end: var(--space-xl);
    }
    .begin .vraag {
      padding-block: var(--space-xl);
    }
    .begin .vraag .wrap {
      inline-size: auto;
      margin-inline: 0 var(--gutter);
    }
    .vraag .rows__title {
      font-size: clamp(1.25rem, 0.8rem + 0.9cqi, 1.75rem);
    }
  }
}

@layer components {
  /* Spatie tussen 'Verder:' en de bestemming blijft staan, ook nadat reis.js het label vervangt */
  .wegwijzer__next {
    gap: 0.3em;
  }
}

/* =====================================================================
   Versie 8, prototype homepage: omslag → inhoudsopgave → een vraag krijgt de ruimte
   ===================================================================== */
@layer tokens {
  :root {
    /* Inverse vlak (omslag, gekozen vraag): draait vanzelf mee met thema en palet */
    --inverse: var(--ink);
    --on-inverse: var(--paper);
    --on-inverse-soft: color-mix(in oklab, var(--paper) 78%, var(--ink));
    --inverse-line: color-mix(in oklab, var(--paper) 32%, var(--ink));
    --rug: 1.5rem;
    --rug-px: 24;
    --band-inzet: clamp(1.5rem, 6vw, 4.5rem);
    --band-breed: clamp(0.75rem, 1.4vw, 1.125rem);
  }
}

@layer components {
  /* ---------- Omslag ---------- */
  .omslag {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: 88svh;
    background: var(--inverse);
    color: var(--on-inverse);
    font-family: var(--font-display);
  }
  /* Het rode elastiek: een vlak zonder tekst erop */
  .omslag__band {
    position: absolute;
    inset-block: 0;
    right: var(--band-inzet);
    width: var(--band-breed);
    background: var(--signal);
  }
  .omslag__inner {
    align-self: end;
    display: grid;
    gap: var(--space-m);
    padding: var(--space-l) var(--gutter) var(--space-l);
    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;
    inline-size: auto;
    fill: currentColor;
  }
  .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;
    /* Smal scherm, grote tekst of een breed systeemlettertype: lange woorden breken af in plaats van weg te vallen */
    hyphens: auto;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  .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);
  }
  /* De rand van de eerste pagina steekt al onder de omslag uit; dit is ook de knop om te openen */
  .omslag__open {
    display: none;
  }

  /* Met JavaScript en beweging: de omslag is een laag over de pagina (prefs.js zet data-omslag vóór de eerste weergave) */
  :root[data-omslag] body {
    padding-inline-start: var(--rug);
  }
  :root[data-omslag] .omslag {
    position: fixed;
    inset: 0;
    z-index: 30;
    min-block-size: 0;
  }
  :root[data-omslag] .omslag__merk {
    display: block;
    align-self: start;
    margin-block-end: auto;
  }
  :root[data-omslag="dicht"] .omslag__inner {
    align-self: stretch;
    align-content: end;
    grid-template-rows: 1fr;
    grid-auto-rows: auto;
  }
  :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: var(--radius-l) var(--radius-l) 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: dezelfde laag, bijna helemaal naar links geschoven. Wat overblijft is de rug. */
  :root[data-omslag="open"] .omslag {
    z-index: 3;
    transform: translateX(calc(-100% + var(--rug)));
  }
  :root[data-omslag="open"] .omslag__band {
    right: 0;
    width: 6px;
  }

  /* ---------- Inhoudsopgave: wat speelt er bij jullie? ---------- */
  .inhoud-vraag {
    padding-block: var(--space-l) var(--space-xl);
  }
  .inhoud-vraag__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 dicht of rug is; zonder omslag-laag staat hij er al boven */
  .inhoud-vraag__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] .inhoud-vraag__kern {
    display: block;
  }
  .inhoud-vraag h2 {
    font-size: clamp(2rem, 1rem + 4.2cqi, 4.5rem);
    max-inline-size: 12ch;
  }
  .inhoud-vraag h2:focus {
    outline: none;
  }
  .inhoud-vraag__sub {
    margin-block-start: var(--space-s);
    color: var(--ink-soft);
    max-inline-size: 34ch;
  }
  .inhoud-vraag__anders {
    margin-block-start: var(--space-m);
    color: var(--ink-soft);
    max-inline-size: 52ch;
  }
  @container main (min-width: 60rem) {
    .inhoud-vraag__grid {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      align-items: start;
    }
    .inhoud-vraag__kop {
      position: sticky;
      inset-block-start: var(--space-l);
    }
  }

  .vragen {
    list-style: none;
    margin: 0;
    padding: 0;
    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 {
    hyphens: manual;
    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;
  }
  .vraag-item__sluit {
    display: none;
  }
  .vraag-item summary:hover .vraag-item__tekst {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.14em;
  }

  /* Gekozen: de regel is een vlak geworden dat het scherm neemt */
  .vraag-item details[open] {
    display: grid;
    align-content: start;
    gap: var(--space-m);
    min-block-size: min(76svh, 46rem);
    padding: var(--space-m) var(--gutter) var(--space-l);
    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 {
    font-size: clamp(7rem, 3rem + 20cqi, 15rem);
  }
  .vraag-item details[open] .vraag-item__nr {
    grid-row: 1;
    grid-column: 1;
  }
  .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;
  }
  .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] summary:hover .vraag-item__tekst {
    text-decoration: none;
  }
  .vraag-item details[open] :focus-visible {
    outline-color: var(--on-inverse);
  }
  .vraag-item__paneel {
    display: grid;
    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 {
    list-style: none;
    margin: 0;
    padding: 0;
    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: none;
  }
  .vraag-item__links a:hover {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
  }

  /* 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: 500;
    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;
  }
  /* Het gekozen vlak loopt door tot de schermrand. De regel zelf krijgt de uitloop, zodat de overgang hem meeneemt. */
  .vragen:has(details[open]) .vraag-item:has(details[open]) {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-inline: calc(-1 * var(--gutter));
  }
  .vragen:has(details[open]) details:not([open]) summary {
    display: grid;
    grid-template-columns: auto;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
  }
  .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;
  }
  .vragen:has(details[open]) details:not([open]) summary:hover {
    background: var(--surface);
  }
  @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);
    }
  }

  /* Leeshulp met de muis is alleen zinvol waar een muis is */
  @media not ((hover: hover) and (pointer: fine)) {
    .prefs__group--muis {
      display: none;
    }
  }
  @media print {
    :root[data-omslag] .omslag {
      position: static;
      transform: none;
    }
  }
}

@layer components {
  /* Tijdens de wissel snijdt elke regel zijn eigen inhoud af, zodat niets over iets anders heen valt */
  .vragen.is-wisselend .vraag-item {
    overflow: clip;
  }
}

@layer components {
  /* Kolommen mogen nooit breder worden dan het scherm, ook niet bij 130% tekst of een breed systeemlettertype */
  .omslag,
  .omslag__inner,
  .vraag-item details[open],
  .vraag-item__paneel {
    grid-template-columns: minmax(0, 1fr);
  }
  .btn {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
}

@layer components {
  /* De wegwijzer past altijd in het scherm; een te lang label wordt afgekapt in plaats van buiten beeld te vallen */
  .wegwijzer {
    max-inline-size: calc(100vw - 1rem);
  }
  .wegwijzer__next {
    min-inline-size: 0;
  }
  .wegwijzer__next [data-reis-next-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@layer components {
  /* Afbreken alleen waar het krap is; op een breed scherm blijven woorden heel */
  @container main (max-width: 30rem) {
    .vraag-item__tekst {
      hyphens: auto;
    }
  }
}