/* ==========================================================================
   VDMB · BASIS
   Reset, typografie, layoutprimitieven en de merkregels als code.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* De vaste header mag nooit een aangesprongen kop afdekken. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  /* De header is fixed en massief; de pagina begint eronder. */
  padding-top: var(--header-h);
  background: var(--vlak-licht);
  color: var(--tekst-op-licht);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  /* Regel: geen horizontale overflow, op geen enkele breedte. */
  overflow-x: hidden;
}

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

/* De browser geeft <figure> standaard margin: 1em 40px mee. Die 40 px duwt
   elk beeld uit het raster en uit de containerrand. Alle afstand komt uit
   het ruimtesysteem, niet uit een browserdefault.                         */
figure { margin: 0; }

/* Pagina 08, wat nooit gebeurt: geen slagschaduw, geen gloed, geen bevel,
   geen 3D-effect, nergens, ook niet subtiel.                              */
*:not(svg):not(svg *) { box-shadow: none !important; text-shadow: none !important; }


/* --- Koppen -------------------------------------------------------------
   Hoofdletters alleen voor labels, knoppen en de descriptor. Nooit voor
   een kop. Geen cursief, geen onderstreping, geen Light of Black.         */

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  line-height: var(--lh-kop);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: var(--w-bold);     letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); font-weight: var(--w-bold);     letter-spacing: var(--ls-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--t-body); font-weight: var(--w-semibold); letter-spacing: 0; }

.display {
  font-family: var(--font-kop);
  font-size: var(--t-display);
  font-weight: var(--w-extrabold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--r-2); max-width: var(--maat-tekst); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  max-width: var(--maat-lead);
  color: inherit;
}

.klein { font-size: var(--t-klein); letter-spacing: 0.005em; }

/* Label of eyebrow. Het enige element dat in hoofdletters staat. */
.label {
  display: block;
  font-family: var(--font-kop);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin: 0 0 var(--r-2);
  color: var(--tekst-op-licht-zwak);
}
.op-donker .label { color: var(--tekst-op-donker-zwak); }
/* In de hero staat het label op fotografie: volle merkkleur voor contrast. */
.hero .label { color: var(--valleibeige); }

/* Het merkgebaar: een enkele bronzen haarlijn boven een label of kop.
   Regel 02: een bronsgebaar per drager, nooit twee.                       */
.label--lijn::before {
  content: "";
  display: block;
  width: 3rem;
  height: var(--lijn-basis);
  background: var(--accent);
  margin-bottom: var(--r-2);
}

a { color: inherit; text-decoration: none; }

/* Link midden in lopende tekst. Onderstreept in het accent: kleur alleen is
   geen aanduiding voor wie kleuren slecht onderscheidt.                   */
.link-inline {
  text-decoration: underline;
  text-decoration-thickness: var(--lijn-haar);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}
.link-inline:hover,
.link-inline:focus-visible { text-decoration-color: currentColor; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--lijn-basis) solid var(--accent-tekst);
  outline-offset: 4px;
}
.op-licht a:focus-visible,
.op-licht button:focus-visible,
.op-licht input:focus-visible,
.op-licht select:focus-visible,
.op-licht textarea:focus-visible { outline-color: var(--nokzwart); }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* De skiplink verplaatst de focus naar main. Dat mag geen rand opleveren,
   want de gebruiker staat daar al. */
main:focus { outline: none; }

hr {
  border: 0;
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
  margin: var(--r-5) 0;
}
.op-donker hr { border-top-color: var(--lijn-op-donker); }



/* --- Vlakken ------------------------------------------------------------ */

.op-donker {
  background: var(--vlak-donker);
  color: var(--tekst-op-donker);
}
.op-donker-diep { background: var(--vlak-donker-diep); color: var(--tekst-op-donker); }
.op-licht  { background: var(--vlak-licht);  color: var(--tekst-op-licht); }
.op-beige  { background: var(--vlak-beige);  color: var(--tekst-op-beige); }

.op-donker h1, .op-donker h2, .op-donker h3, .op-donker .display { color: var(--kalkwit); }
.op-donker .zwak { color: var(--tekst-op-donker-zwak); }
.op-licht  .zwak, .op-beige .zwak { color: var(--tekst-op-licht-zwak); }


/* --- Layout ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--smal { max-width: var(--container-smal); }

/* --y is het sectieritme van deze sectie. De scheiding tussen twee secties
   op hetzelfde vlak leest die waarde mee, zodat een ruime sectie ook een
   ruime scheiding krijgt.                                                */
.sectie { --y: var(--sectie-y); padding-block: var(--y); }

/* De eerste sectie onder een volbeeld-hero begint dichter op het beeld. De
   foto is zelf al de rustpauze; daar hoeft geen tweede leegte achteraan.  */
.hero--split + .sectie { padding-block-start: var(--r-6); }

/* Twee opeenvolgende secties op hetzelfde vlak lezen als één veld. Zonder
   deze regel stapelen hun paddings en valt er een gat van ruim 20 rem.   */
.sectie.op-donker + .sectie.op-donker,
.sectie.op-donker-diep + .sectie.op-donker-diep,
.sectie.op-licht + .sectie.op-licht,
.sectie.op-beige + .sectie.op-beige { padding-block-start: 0; }

/* De grens tussen die twee is dan een haarlijn op containerbreedte in plaats
   van een kleurwissel over de volle breedte. De pagina leest daardoor als
   één document met hoofdstukken, niet als een stapel losse blokken.      */
.sectie.op-donker + .sectie.op-donker > .container,
.sectie.op-donker-diep + .sectie.op-donker-diep > .container,
.sectie.op-licht + .sectie.op-licht > .container,
.sectie.op-beige + .sectie.op-beige > .container {
  border-top: var(--lijn-haar) solid var(--lijn-op-licht);
  padding-block-start: var(--y);
}
.sectie.op-donker + .sectie.op-donker > .container,
.sectie.op-donker-diep + .sectie.op-donker-diep > .container {
  border-top-color: var(--lijn-op-donker);
}

.sectie--ruim { --y: var(--sectie-y-ruim); }
.sectie--kop  { padding-block: calc(var(--y) * 1.2) var(--y); }

/* Twaalfkoloms raster. Asymmetrie komt uit de kolomindeling,
   niet uit losse marges.                                                   */
.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--raster-gap);
}
/* Breedte en startpositie staan bewust op losse eigenschappen. De shorthand
   grid-column zet ook grid-column-end op auto, waardoor een los toegevoegde
   startpositie de kolom terug zou brengen naar één kolom breed.           */
.kol-4  { grid-column-end: span 4; }
.kol-5  { grid-column-end: span 5; }
.kol-6  { grid-column-end: span 6; }
.kol-7  { grid-column-end: span 7; }
.kol-8  { grid-column-end: span 8; }
.kol-12 { grid-column-end: span 12; }
.start-2 { grid-column-start: 2; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }

/* Een stapraster is een beeld naast een tekstkolom. Zonder deze regel
   plakt de kortste van de twee aan de bovenrand.                        */
.raster--stap { align-items: center; }

.stapel      { display: flex; flex-direction: column; gap: var(--r-3); }
.stapel--ruim{ gap: var(--r-5); }
.stapel--krap{ gap: var(--r-1); }

/* Onder de 900 px is een twaalfkoloms indeling onleesbaar smal: elke kolom
   gaat over de volle breedte en de startposities vervallen.               */
@media (max-width: 900px) {
  .kol-4, .kol-5, .kol-6, .kol-7, .kol-8 { grid-column-end: span 12; }
  .start-2, .start-6, .start-7, .start-8, .start-9 { grid-column-start: auto; }
}

/* Sectiekop: label, kop, lead. Het vaste ritme van elke pagina. */
.sectiekop { max-width: 46rem; margin-bottom: var(--r-6); }
.sectiekop .lead { margin-top: var(--r-3); }
.sectiekop--breed { max-width: 58rem; }


/* --- De Snede · het signatuurelement ------------------------------------
   Rechterbovenhoek onder 45 graden weg. Altijd rechtsboven, nooit
   gespiegeld. Maximaal drie per compositie.                               */

.snede {
  clip-path: polygon(0 0, calc(100% - var(--snede-s)) 0, 100% var(--snede-s), 100% 100%, 0 100%);
}
.snede--klein { --snede-s: var(--snede-s-klein); }
.snede--groot { --snede-s: var(--snede-s-groot); }


/* --- Iconen · pagina 08 -------------------------------------------------
   Raster 24 bij 24, stroke 1/16 van het raster, uitsluitend outline,
   hoekradius 0, alleen 0, 45 en 90 graden.                                */

.icoon {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: butt;     /* nooit ronde lijneinden */
  stroke-linejoin: miter;   /* nooit afgeronde verbindingen */
  fill: none;
}
.icoon--groot { width: 3rem; height: 3rem; stroke-width: 1.25; }
/* Brons mag alleen op de USP-iconen en alleen vanaf 48 px. */
.icoon--accent { stroke: var(--accent); }


/* --- Hulpklassen -------------------------------------------------------- */

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: 100;
  background: var(--nokzwart); color: var(--kalkwit);
  padding: var(--r-2) var(--r-3);
  font-family: var(--font-kop); font-weight: var(--w-semibold);
  font-size: var(--t-klein); letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  transition: top var(--duur-kort) var(--ease);
}
.overslaan:focus { top: var(--r-2); }


/* --- Beweging -----------------------------------------------------------
   Alles wat beweegt, start hier. Zonder JavaScript blijft alles zichtbaar:
   de klasse .is-zichtbaar wordt toegevoegd, niet weggehaald.              */

.reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity var(--duur-lang) var(--ease-uit),
    transform var(--duur-lang) var(--ease-uit);
  transition-delay: var(--vertraging, 0ms);
  will-change: opacity, transform;
}
.reveal.is-zichtbaar { opacity: 1; transform: none; }

/* Regelsgewijs binnenkomen van een kop. */
.regels > span {
  display: block;
  overflow: hidden;
}
.regels > span > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--duur-reveal) var(--ease-uit);
  transition-delay: var(--vertraging, 0ms);
}
.regels.is-zichtbaar > span > span { transform: none; }

/* Beeldonthulling. Een vlak paneel schuift weg, geen verloop.
   Pagina 08 verbiedt gradients, ook als overlay.                          */
.onthul { position: relative; overflow: hidden; }

/* Een beeldband loopt over de volle kolombreedte. Zonder deze regel stopt
   een bestand dat smaller is dan het vlak op zijn eigen pixelmaat en staat
   het scheef in de sectie.                                               */
.beeld-band img { width: 100%; }
.onthul::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--valleibeige);
  transform-origin: 100% 0;
  transform: scaleX(1);
  transition: transform var(--duur-reveal) var(--ease-uit);
  transition-delay: var(--vertraging, 0ms);
  z-index: 2;
  pointer-events: none;
}
.onthul--zwart::after { background: var(--nokzwart); }
.onthul.is-zichtbaar::after { transform: scaleX(0); }

.onthul img { transform: scale(1.08); transition: transform 1600ms var(--ease-uit); }
.onthul.is-zichtbaar img { transform: none; }

/* Wie minder beweging wil, krijgt de pagina meteen compleet te zien. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .regels > span > span { transform: none; }
  .onthul::after { display: none; }
  .onthul img { transform: none; }
}

/* Zolang het script niet geladen is, is alles gewoon zichtbaar. */
.geen-js .reveal { opacity: 1; transform: none; }
.geen-js .regels > span > span { transform: none; }
.geen-js .onthul::after { display: none; }
.geen-js .onthul img { transform: none; }


/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .knop, .terug-naar-boven { display: none; }
  body { background: #fff; color: #000; }
  .op-donker { background: #fff !important; color: #000 !important; }
  .reveal, .onthul::after { opacity: 1; transform: none; display: none; }
}