/* Hallmark · genre: editorial · macrostructure: Marquee Hero (03) + HP2 marquee-overflow
 * theme: custom (tuned) · vibe: "ivoor, kaarslicht, goud, hoge contrastserif"
 * paper: oklch(97.2% 0.008 85) · accent: oklch(61.3% 0.115 69)
 * display: Cormorant Garamond (roman, licht) · body: Jost
 * axes: light / classical-serif / warm · nav: N6 · footer: Ft6
 * enrichment: Tier C, fotografie met de echte fotowand als referentie + CSS-polaroids
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

/* ============================================================
   1 · Basis
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* clip, niet hidden: clip laat sticky/fixed kinderen intact en maakt
   geen extra scrollcontainer aan. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: var(--track-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;           /* koppen zijn altijd recht */
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1, h2 {
  font-weight: 300;             /* licht: waar Cormorant op zijn best is */
  line-height: 1.02;
  letter-spacing: -0.012em;
}
h3 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.006em;
}

p { text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--color-wash); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* focus verschijnt direct: nooit een transitie op outline */
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-sm); top: -100px;
  z-index: var(--z-top);
  background: var(--color-ink); color: var(--color-on-ink);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
}
.skip:focus { top: var(--space-sm); }

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.muted { color: var(--color-muted); }
.tnum  { font-variant-numeric: tabular-nums; }

/* Micro-label: Jost, wijd gespatieerd. De enige plek waar hoofdletters staan. */
.label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================================
   2 · Nav · N6 krantenmasthead
   ============================================================ */

.mast {
  padding: var(--space-lg) var(--page-gutter) 0;
  text-align: center;
}
.mast__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 5.4vw, 3.1rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  text-indent: 0.24em;           /* de laatste spatiëring aan de rechterkant compenseren */
  margin-top: 0;
}
.mast__name a { text-decoration: none; }

.mast__nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-lg);
  margin-top: var(--space-md);
}
.mast__nav a {
  white-space: nowrap;          /* klikbare tekst breekt nooit over twee regels */
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--space-3xs);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.mast__nav a:hover { border-bottom-color: var(--color-ink); }
.mast__nav a.is-cta { color: var(--color-accent-text); }
.mast__nav a.is-cta:hover { border-bottom-color: var(--color-accent); }

/* De burgerknop en het gedempte scherm bestaan alleen op smal scherm;
   de opmaak ervan staat bij de mobiele regels onderaan. */
.mast__burger, .mast__scrim { display: none; }

.mast__rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-top: var(--space-lg);
}

/* ============================================================
   3 · Hero · Marquee
   ============================================================ */

.hero { padding-block: var(--space-2xl) 0; }

.hero__statement {
  font-size: var(--text-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.022em;
}
.hero__statement .accent { color: var(--color-accent-text); }

.hero__lede {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}

.hero__figure { margin-top: var(--space-xl); }

/* ============================================================
   4 · Beeld
   ============================================================ */

.figure { margin: 0; }
.figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-paper-3);
}
.figure figcaption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 52ch;
}

.figure--bleed { width: 100%; }
.figure--bleed img { aspect-ratio: 16 / 9; }
.wat__beeld { margin-top: var(--space-3xl); }
.wat__beeld img { aspect-ratio: 3 / 2; }
.figure--bleed figcaption { padding-inline: var(--page-gutter); margin-inline: auto; max-width: var(--max-w); }

.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 3 / 2; }

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
@media (min-width: 760px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
}
.duo .figure figcaption { margin-top: var(--space-xs); }
.duo__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.2;
  margin-top: var(--space-sm);
}
.duo__note {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 40ch;
}

/* ============================================================
   5 · De wall
   ============================================================ */

.wall {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background: var(--color-paper-3);
  /* dubbele gouden lijn boven en onder, zoals de rand om het echte bord */
  border-block: var(--rule-hair) solid var(--color-accent);
  outline: var(--rule-hair) solid var(--color-accent);
  outline-offset: 4px;
}

/* Het masker zit op de rijen, niet op .wall: anders vervaagt de pauzeknop mee. */
.wall__rows {
  -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
          mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.wall__row {
  display: flex;
  align-items: flex-start;   /* kaartjes houden hun eigen hoogte, als op een echte muur */
  gap: var(--space-md);
  width: max-content;
  will-change: transform;
}
.wall__row + .wall__row { margin-top: var(--space-md); }
.wall__row--a { animation: wall-drift-a 86s linear infinite; }
.wall__row--b { animation: wall-drift-b 104s linear infinite; }

@keyframes wall-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes wall-drift-b {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.wall.is-paused .wall__row { animation-play-state: paused; }

.wall__pause {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: var(--z-raised);
  min-height: 36px;
  padding: var(--space-3xs) var(--space-sm);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.wall__pause:hover { background: var(--color-paper); border-color: var(--color-ink-2); }
.wall__pause:active { transform: translateY(1px); }

.wall__caption {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 52ch;
}

/* Eén polaroid op de muur. De maten zijn de proporties van de echte
   fotowand, teruggeschaald: die kaart is 960px breed, deze ongeveer 230px. */
.note {
  position: relative;
  flex: 0 0 auto;
  width: clamp(190px, 22vw, 250px);
  margin-top: 12px;                 /* ruimte waar de tape overheen valt */
  padding: 11px 11px 13px;
  background: var(--color-paper-2);
  border: 1.5px solid var(--color-frame);
  border-radius: 3px;
  box-shadow: var(--shadow-note);
  transform: rotate(var(--rot, 0deg));
}

/* De tape die de polaroid vasthoudt: doorschijnend goud met gerafelde zijkanten. */
.note::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 76px;
  height: 22px;
  transform: translateX(-50%) rotate(var(--tape-rot, -2deg));
  background: var(--color-tape);
  border-left: 2px dashed var(--color-tape-edge);
  border-right: 2px dashed var(--color-tape-edge);
}

.note:nth-child(6n+1) { --rot: -2.1deg; --tape-rot: -3deg; }
.note:nth-child(6n+2) { --rot:  1.6deg; --tape-rot:  2deg; }
.note:nth-child(6n+3) { --rot: -0.9deg; --tape-rot:  1deg; }
.note:nth-child(6n+4) { --rot:  2.4deg; --tape-rot: -2deg; }
.note:nth-child(6n+5) { --rot: -1.5deg; --tape-rot:  3deg; }
.note:nth-child(6n)   { --rot:  0.8deg; --tape-rot: -1deg; }

.note__slot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-paper-3);
  border-radius: 1px;
  outline: 1px solid var(--color-photo-edge);
  outline-offset: -1px;
}

.note__msg {
  font-family: var(--font-display);
  font-style: italic;           /* italic mag in lopende tekst, nooit in een kop */
  font-size: var(--text-lg);
  line-height: 1.32;
  margin-top: var(--space-2xs);
  color: var(--color-ink);
}
.note__by {
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.note--textonly { padding-top: var(--space-md); }

/* ============================================================
   6 · Secties
   ============================================================ */

.band { padding-block: var(--space-3xl); }
.band--tight { padding-block: var(--space-2xl); }
.band--wash { background: var(--color-paper-3); }
.band + .band { border-top: var(--rule-hair) solid var(--color-rule); }
.band--wash, .band--wash + .band { border-top: 0; }

/* Sectiekop staat over de volle breedte, met de tekst eronder.
   Nooit meer een kop alleen in een hoge lege kolom. */
/* De maatlengte staat op de kop zelf. Een em op .head zou tegen de
   body-fontsize rekenen en de kop veel te smal maken. */
.head h2 { font-size: var(--text-3xl); max-width: 13em; }
.head__deck {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  max-width: 44ch;
}
.head + * { margin-top: var(--space-xl); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-md); }
.prose p { font-size: var(--text-lg); line-height: 1.72; color: var(--color-ink-2); }
.prose strong { color: var(--color-ink); font-weight: 500; }

/* Twee tekstkolommen naast elkaar, allebei even hoog gevuld. */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .cols .prose { max-width: none; }
}

.head-inline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ============================================================
   7 · Vergelijking als specificatieblad
   ============================================================ */

.sheet-scroll { overflow-x: auto; }
.sheet-scroll--spaced { margin-top: var(--space-2xl); }
.sheet {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-base);
}
.sheet th, .sheet td {
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}
.sheet thead th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.15;
  border-bottom: var(--rule-hair) solid var(--color-ink);
  padding-bottom: var(--space-sm);
}
.sheet thead th:first-child { width: 20%; }
.sheet tbody th {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.sheet td { color: var(--color-ink-2); }
.sheet tr:last-child th, .sheet tr:last-child td { border-bottom: 0; }
.sheet .both { color: var(--color-ink); }
.sheet .both em { font-style: normal; color: var(--color-accent-text); }

/* ============================================================
   8 · Genummerde stappen
   ============================================================ */

.steps { list-style: none; }
.steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.steps li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 800px) {
  .steps li { grid-template-columns: 5rem minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
}
.steps .stage {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-2); max-width: 46ch; }

/* ============================================================
   9 · Haarlijnlijsten (gelegenheden, wat vooraf geregeld wordt)
   ============================================================ */

.list { list-style: none; }
.list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.list > div:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 760px) {
  .list > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
}
.list .term {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.list .desc { color: var(--color-ink-2); }

/* ============================================================
   10 · Vragen
   ============================================================ */

.qa { border-top: var(--rule-hair) solid var(--color-rule); }
.qa details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.28;
  transition: color var(--dur-fast) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--color-accent-text); }
.qa summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-right: var(--space-2xs);
  margin-top: -5px;                 /* optisch gecentreerd, de chevron staat gedraaid */
  border-right: var(--rule-hair) solid var(--color-ink-2);
  border-bottom: var(--rule-hair) solid var(--color-ink-2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.qa .answer { padding-bottom: var(--space-md); max-width: 56ch; color: var(--color-ink-2); }

/* ============================================================
   11 · Formulier
   ============================================================ */

.form { max-width: 760px; }
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-md); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--space-3xs); align-content: start; }
.field label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.field .hint { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0; text-transform: none; }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
  padding: var(--space-2xs) var(--space-2xs);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-bottom-color: var(--color-accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-bottom-color: var(--color-err); }
.field .err { font-size: var(--text-xs); color: var(--color-err); letter-spacing: 0; text-transform: none; }

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 4px; accent-color: var(--color-ink); }
.consent label { font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--track-body);
  text-transform: none; color: var(--color-ink-2); line-height: 1.6; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* De knop is inkt. Zwart op ivoor leest duurder dan welk accentvlak ook. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 56px;
  padding: var(--space-2xs) var(--space-xl);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-on-ink);
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-ink-hover); border-color: var(--color-ink-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn[data-state="loading"] { cursor: progress; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.form__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 38ch; }

.notice {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-base);
}
.notice[data-tone="ok"]  { background: var(--color-ok-bg);  border-color: var(--color-ok);  color: var(--color-ok); }
.notice[data-tone="err"] { background: var(--color-err-bg); border-color: var(--color-err); color: var(--color-err); }
.notice p + p { margin-top: var(--space-2xs); }

/* ============================================================
   12 · Footer · Ft6 briefafsluiting
   ============================================================ */

.foot {
  padding-block: var(--space-2xl);
  border-top: var(--rule-thick) solid var(--color-rule-heavy);
}
.foot__close {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.3;
  max-width: 24ch;
}
.foot__sign { font-weight: 500; }
.foot__ps { margin-top: var(--space-lg); max-width: 52ch; color: var(--color-ink-2); }
.foot__ps a { color: var(--color-accent-text); text-underline-offset: 3px; }
.foot__meta {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.foot__meta a { white-space: nowrap; text-underline-offset: 3px; }

/* ============================================================
   13 · Mobiele balk
   ============================================================ */

.dock {
  position: fixed;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: none;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dock .btn { width: 100%; box-shadow: var(--shadow-lift); }
@media (max-width: 719px) {
  .dock { display: flex; }
  /* ruimte onderaan zodat de balk de laatste regels niet afdekt */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* De masthead wikkelde zes links over drie regels: 112px kop voordat de
     pagina begon, met raakvlakken van 30px. Een scrollende strook loste de
     hoogte op maar verborg de helft van de links achter een veeg. Op smal
     scherm gaat het menu daarom achter een knop, in een glazen paneel. */
  .mast { position: relative; }

  .js .mast__burger {
    position: absolute;
    top: var(--space-md);
    right: var(--page-gutter);
    z-index: var(--z-top);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-ink);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--rule-hair) solid var(--glass-rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glass);
    cursor: pointer;
  }

  .js .mast__burger-lijnen { position: relative; }
  .js .mast__burger-lijnen,
  .js .mast__burger-lijnen::before,
  .js .mast__burger-lijnen::after {
    display: block;
    width: 18px;
    height: var(--rule-thick);
    background: currentColor;
    transition: transform var(--dur) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }
  .js .mast__burger-lijnen::before,
  .js .mast__burger-lijnen::after { content: ""; position: absolute; left: 0; }
  .js .mast__burger-lijnen::before { transform: translateY(-6px); }
  .js .mast__burger-lijnen::after  { transform: translateY(6px); }

  /* Open: de middelste lijn verdwijnt, de andere twee worden een kruis. */
  .js .mast__burger[aria-expanded="true"] .mast__burger-lijnen { background: transparent; }
  .js .mast__burger[aria-expanded="true"] .mast__burger-lijnen::before { transform: rotate(45deg); }
  .js .mast__burger[aria-expanded="true"] .mast__burger-lijnen::after  { transform: rotate(-45deg); }

  /* Het scherm achter het paneel dempen, zodat duidelijk is wat er nu telt. */
  .js .mast__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--scrim);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
  }
  .js .mast__scrim.is-on { opacity: 1; }

  .js .mast__nav {
    position: fixed;
    top: calc(var(--space-md) + 44px + var(--space-2xs));
    right: var(--page-gutter);
    width: min(17rem, calc(100vw - var(--page-gutter) * 2));
    z-index: var(--z-top);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--rule-hair) solid var(--glass-rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glass);
    opacity: 0;
    transform: translateY(-6px);
    /* visibility haalt de links ook uit de tabvolgorde zolang het dicht is */
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
  }
  .js .mast__nav.is-open { opacity: 1; transform: none; visibility: visible; }

  .js .mast__nav ul {
    display: block;
    margin: 0;
    padding: var(--space-2xs);
  }
  .js .mast__nav li + li { border-top: var(--rule-hair) solid var(--color-rule-2); }
  .js .mast__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-2xs);
    border-bottom: 0;
  }

  .wall__pause { min-height: 44px; }

  /* De knop was al 56px hoog, alleen het opschrift bleef achter. */
  .btn { font-size: var(--text-sm); }
}

/* ============================================================
   14 · Entree
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .settle { opacity: 0; transform: translateY(10px); }
  .js .settle {
    animation: settle var(--dur-slow) var(--ease-out) forwards;
    animation-delay: var(--settle-delay, 0ms);
  }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

@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;
  }
  /* De muur staat stil, maar houdt zijn vervagende randen. */
  .wall__row { animation: none !important; transform: none !important; }
}

/* ============================================================
   15 · Print
   ============================================================ */

@media print {
  .wall, .dock, .mast__nav, .form { display: none; }
  body { background: var(--color-print); }
}