/* ============================================================================
   familiedocufilm.nl — stylesheet
   Volgt assets/DESIGN.md; maatvoering nagemeten op assets/WebsiteLayout.jpg.
   De screenshot is 2062px breed en staat 1:1 met CSS-pixels (body 18px /
   line-height 27px komt exact uit), dus alle gemeten waarden hieronder zijn
   direct bruikbaar.

   Inhoud
   0.  Webfonts (@font-face, lokaal)
   1.  Design tokens (:root)
   2.  Reset & basis
   3.  Container / typografie / divider
   4.  Knoppen
   5.  Header: gradientstrook + navigatie
   6.  Hero
   7.  Quoteband
   8.  Trailer
   9.  Secties (doorlopend verloop)
   10. Momentkaarten
   11. Processtappen
   12. Contact + formulier
   13. Wie wij zijn
   14. Footer
   15. Responsive (768px / 480px)
   16. Voorkeuren (reduced motion)
   17. Jubileumpagina (/jubileum/) — alleen gebruikt door jubileum/index.html
   18. 404-pagina (/404.html)
   19. Scroll-onthulling (.reveal)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. WEBFONTS — lokaal, niet via fonts.googleapis.com

   De drie families stonden eerst als <link> naar Google. Dat kostte per
   pagina twee extra DNS-lookups en TLS-handshakes (fonts.googleapis.com en
   fonts.gstatic.com) op het kritieke pad, en het stuurt het IP-adres van elke
   bezoeker naar Google — waarvoor onder de AVG toestemming nodig is. Beide
   redenen zijn weg nu de bestanden in assets/fonts/ staan.

   Welke snedes er staan, is afgeleid uit de stylesheet zelf:
     Lato 300           body, formuliervelden
     Lato 700           koppen in de bodyfont, vetgedrukt
     Playfair Display   alle .section__title, .hero__title, .quoteband__text
     Poppins 300        uitsluitend .nav__link

   Lato heeft géén snede 600, ook niet bij Google. De regels die
   font-weight: 600 gebruiken (.btn, .skip-link) vielen daar al terug op 700
   en doen dat hier ook; het beeld verandert dus niet. Zet hier geen 600-face
   bij die er in het origineel niet is.

   latin-ext staat erbij maar wordt dankzij unicode-range alleen opgehaald als
   er een teken uit dat bereik op de pagina staat. Nederlands heeft dat niet,
   dus in de praktijk laadt de bezoeker alleen de vier latin-bestanden.

   font-display: swap houdt de tekst meteen leesbaar in de fallback en wisselt
   zodra het font er is. Zonder die regel blijft de kop onzichtbaar tot het
   font binnen is, wat direct de LCP verslechtert.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/lato-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/lato-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS — DESIGN.md §2 en §3
   --------------------------------------------------------------------------- */
:root {
  /* Kleuren (DESIGN.md §2) */
  --c-accent:        #F7BC58;  /* accent geel: knoppen, accentwoorden, ster, hover-streepje */
  --c-accent-dark:   #E8A93C;  /* TODO [open punt §8.1 — hover]: voorstel uit DESIGN.md §4,
                                  iets donkerder geel. Vervangen zodra de hoverstijl vaststaat. */
  --c-quote-bg:      #21182E;  /* quoteband onder de hero */
  --c-nav-bg:        #253842;  /* navigatiebalk na scroll */
  --c-divider:       #394348;  /* sectiedivider + achtergrond formuliervelden */
  --c-step:          #54A3CB;  /* staalblauwe stap-labels */
  --c-text:          #FFFFFF;
  --c-btn-text:      #000000;
  --c-footer:        #273840;  /* TODO [open punt §8.2]: gemeten #263940 in de screenshot,
                                  DESIGN.md §2 noemt #273840. Aangehouden: #273840. */
  --c-footer-bar:    #000000;

  /* Sectie-achtergronden. DESIGN.md §2 noemt twee vlakke kleuren, maar in de
     screenshot loopt alles onder de trailer als één verloop door. Zie de TODO
     bij .pagebody. De twee vlakke waarden blijven hier staan als alternatief. */
  --c-bg-dark:       #111518;
  --c-bg-mid:        #121B22;
  --c-body-grad-top:    #05090B;
  --c-body-grad-bottom: #182128;

  /* Fonts (DESIGN.md §3) met nette fallbacks */
  --font-display: "Playfair Display", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui:      "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fontgroottes (DESIGN.md §3). De hero-kop schaalt met clamp() van 36 naar
     64px, conform DESIGN.md §6. */
  --fs-h1:    clamp(2.25rem, 1.05rem + 4.4vw, 4rem);   /* 36px -> 64px */
  --fs-h2:    clamp(1.625rem, 1.3rem + 1.1vw, 2rem);   /* 26px -> 32px */
  --fs-quote: clamp(1.375rem, 1.0rem + 1.6vw, 2rem);   /* 22px -> 32px */
  --fs-body:  1.125rem;   /* 18px */
  --fs-btn:   1.125rem;   /* 18px */
  --fs-step:  1.125rem;   /* 18px */
  --fs-menu:  0.75rem;    /* 12px */
  --lh-body:  1.5;        /* 27px op 18px — nagemeten in de screenshot */

  /* Maatvoering (nagemeten) */
  --container:      1140px;  /* inhoudsbreedte van de huidige site */
  --gap-grid:       20px;    /* kolomafstand in beide kaartgrids */
  --section-pad:    100px;   /* verticale ruimte boven/onder een sectie */
  --band-h:         8px;     /* hoogte gradientstrook */
  --nav-h:          82px;    /* hoogte navigatiebalk */
  --radius-btn:     8px;     /* TODO [open punt §8.1]: gemeten op de screenshot
                                (DESIGN.md stelde 6px voor als tijdelijke waarde). */
  --radius-card:    8px;

  /* Trailer. Twee verschillende dingen, houd ze uit elkaar:
     --video-aspect  het werkelijke beeldformaat van de trailer zelf. Gemeten
                     2062/846 = 2.438 op de screenshot. Bepaalt de cover-
                     berekening en mag NIET per breakpoint veranderen.
                     TODO: bevestigen aan de hand van het masterbestand.
     --stage-aspect  hoe hoog de strook op de pagina is, oftewel hoeveel er
                     links en rechts wordt weggesneden. Mag wel per breakpoint
                     veranderen; op mobiel staat hij lager zodat de strook niet
                     tot een streepje verschrompelt.
     --trailer-overscan schaalt nog 4% extra op zodat er ook geen letterbox
                     zichtbaar wordt als de bron toch 2.35:1 of 2.39:1 blijkt. */
  --video-aspect:     2.44;
  --stage-aspect:     2.44;
  --trailer-overscan: 1.04;

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* Scroll-onthulling (sectie 19). --reveal-trap is de tijd tussen twee
     kaarten in dezelfde rij; hoger voelt traag, lager valt niet meer op. */
  --reveal-shift: 18px;
  --reveal-duur:  .7s;
  --reveal-trap:  90ms;

  /* Hover op de kaarten (secties 10 en 11). Bewust klein gehouden: op een
     kaart van 360px is 1.025 zo'n negen pixels, genoeg om te merken en te
     weinig om af te leiden. */
  --hover-scale: 1.025;
  --hover-duur:  .32s;
}

/* ---------------------------------------------------------------------------
   2. RESET & BASIS
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* zodat ankerlinks niet onder de vaste header vallen */
  scroll-padding-top: calc(var(--band-h) + var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg-dark);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, p, blockquote, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-accent);
  color: var(--c-btn-text);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------
   3. CONTAINER / TYPOGRAFIE / DIVIDER
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Lopende tekst staat op de huidige site in een iets smallere kolom
   dan de kaartgrids. */
.container--narrow { max-width: calc(var(--container) - 22px); }

.section {
  padding-block: var(--section-pad);
}
.section--last { padding-bottom: 140px; }

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* Sectiedivider: dunne lijn met gele ster in het midden (DESIGN.md §4) */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 34px;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-divider);
}
.divider__star {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--c-accent);
}

.container--narrow p { text-align: center; }
.container--narrow p + p { margin-top: 27px; }

/* ---------------------------------------------------------------------------
   4. KNOPPEN — DESIGN.md §4
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--c-accent);
  color: var(--c-btn-text);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* TODO [open punt §8.1 — hoverstijl]: voorstel uit DESIGN.md §4 aangehouden,
   iets donkerder geel met een subtiele lift. */
.btn:hover,
.btn:focus-visible {
  background: var(--c-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--block { width: 100%; }

/* ---------------------------------------------------------------------------
   5. HEADER — gradientstrook + navigatie (DESIGN.md §4)
   --------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
}

/* Vaste merkstrook over de volle breedte, boven de navigatie */
.brandband {
  height: var(--band-h);
  background: url("../assets/FamilieDocuFilm_GradientBand.jpg") center / 100% 100% no-repeat;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding-inline: 28px;
}

/* De #253842 balk fadet in bij scrollen. Als los ::before-vlak zodat de
   inhoud van de nav niet meefadet. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-nav-bg);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled .nav::before { opacity: 1; }

/* De ::before hierboven is absoluut gepositioneerd en schildert dus over alle
   niet-gepositioneerde kinderen heen. Zonder deze regel verdwijnen het logo en
   de social icons zodra de balk infadet. */
.nav__logo,
.nav__toggle,
.nav__panel {
  position: relative;
  z-index: 1;
}

.nav__logo {
  flex: none;
  display: block;
  line-height: 0;
}
.nav__logo img {
  width: auto;
  height: 62px;
}

.nav__panel {
  display: flex;
  align-items: center;
  gap: 58px;
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 42px;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-menu);
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
/* Geel streepje onder het menu-item bij hover (DESIGN.md §4) */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* Social icons in de navigatie */
.social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social__link {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.social__link svg { width: 18px; height: 18px; }
.social__link:hover { transform: translateY(-2px); filter: brightness(1.15); }

.social__link--facebook  { background: #3B5998; }
.social__link--youtube   { background: #E62117; }
.social__link--instagram { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.social__link--linkedin  { background: #0A84C1; }
.social__link--instagram svg { width: 20px; height: 20px; }

/* Hamburger — niet in de screenshot, alleen nodig onder 900px.
   TODO: gedrag/vormgeving van het mobiele menu nog even langs de
   ontwerper halen; dit is een functionele invulling. */
.nav__toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__toggle-bar {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle-bar + .nav__toggle-bar { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   6. HERO — DESIGN.md §5.1
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 760px);
  padding-top: calc(var(--band-h) + var(--nav-h));
  padding-bottom: 40px;
  overflow: hidden;
  background: #0E0C1A;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Verloop over de video zodat de tekst links altijd leesbaar blijft */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 8, 20, .82) 0%, rgba(10, 8, 20, .55) 45%, rgba(10, 8, 20, .15) 75%, rgba(10, 8, 20, 0) 100%),
    linear-gradient(180deg, rgba(10, 8, 20, .45) 0%, rgba(10, 8, 20, 0) 30%);
}

.hero__inner { position: relative; }

/* De regelafbrekingen komen uit de <br>'s in index.html, precies zoals op de
   huidige site. Geen max-width hier: die zou een extra afbreking forceren. */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
}
/* Accentwoorden in geel (DESIGN.md §5.1) */
.hero__title em {
  font-style: normal;
  color: var(--c-accent);
}

.hero__lead {
  max-width: 660px;
  margin-top: 26px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 40px;
}

/* ---------------------------------------------------------------------------
   7. QUOTEBAND — DESIGN.md §5.2
   --------------------------------------------------------------------------- */
.quoteband {
  background: var(--c-quote-bg);
  padding-block: 68px;
}
.quoteband__text {
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 700;
  line-height: 1.32;
  text-align: center;
}
.quoteband__mark { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   8. TRAILER — DESIGN.md §5.3
   Zie de uitleg in index.html bij de sectie zelf.
   --------------------------------------------------------------------------- */
.trailer {
  position: relative;
  background: #0B0F12;
}

.trailer__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--stage-aspect) / 1;
  min-height: 190px;
  overflow: hidden;
  container-type: size;   /* maakt 100cqw / 100cqh beschikbaar voor de cover-berekening */
}

.trailer__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trailer__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  /* De globale reset zet max-width:100% op iframes; dat zou de cover-
     berekening hieronder terugknijpen tot de stagebreedte. */
  max-width: none;
  /* Fallback zonder container queries: iframe op containerbreedte, 16:9,
     verticaal gecentreerd. Werkt zolang de stage breder is dan 16:9. */
  width: calc(100% * var(--trailer-overscan));
  aspect-ratio: 16 / 9;
  /* Verbergen tot de src door main.js is gezet, anders zie je een leeg vlak. */
  opacity: 0;
  transition: opacity .6s var(--ease);
}
/* Echte cover-berekening: neem de grootste van "vul de breedte" en
   "vul de hoogte", waarbij de zichtbare beeldhoogte binnen de 16:9-iframe
   gelijk is aan breedte / --video-aspect. */
@supports (width: 1cqw) {
  .trailer__frame {
    width: calc(max(100cqw, 100cqh * var(--video-aspect)) * var(--trailer-overscan));
  }
}
.trailer__frame.is-loaded { opacity: 1; }

/* Geluidsknop rechtsboven over de video (DESIGN.md §5.3) */
.btn--sound {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 2;
  min-height: 46px;
  padding: 10px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.btn__icon { width: 22px; height: 22px; flex: none; }
/* Toont het kruisje bij geluid uit, de golfjes bij geluid aan */
.btn--sound .icon-on { display: none; }
.btn--sound[aria-pressed="true"] .icon-off { display: none; }
.btn--sound[aria-pressed="true"] .icon-on { display: block; }

/* ---------------------------------------------------------------------------
   9. SECTIES — doorlopend verloop (zie TODO in index.html)
   --------------------------------------------------------------------------- */
.pagebody {
  background: linear-gradient(180deg, var(--c-body-grad-top) 0%, var(--c-body-grad-bottom) 100%);
}

/* ---------------------------------------------------------------------------
   10. MOMENTKAARTEN — DESIGN.md §5.6
   --------------------------------------------------------------------------- */
.cardgrid {
  display: grid;
  gap: var(--gap-grid);
}
.cardgrid--moments { grid-template-columns: repeat(3, 1fr); }

/* Titel bovenaan, bodytekst onderaan, en daartussen een open band waarin de
   achtergrondfoto goed te zien is. space-between duwt de twee uit elkaar;
   --moment-window bewaakt dat die band ook op de kaart met de langste tekst
   niet dichtslibt. */
.moment {
  --moment-window: 96px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--moment-window);
  min-height: 375px;
  padding: 28px 24px 30px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: center;
}
.moment__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Donkere overlay zodat de serif-titel en tekst leesbaar blijven. Donker aan
   de boven- en onderkant waar tekst staat, licht in het midden zodat de foto
   daar tot zijn recht komt. */
.moment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(8, 10, 12, .78)  0%,
    rgba(8, 10, 12, .52) 22%,
    rgba(8, 10, 12, .30) 42%,
    rgba(8, 10, 12, .38) 58%,
    rgba(8, 10, 12, .84) 100%);
}

/* Muisaanwijzer erover: de kaart licht op en wordt iets groter.

   `scale` en niet `transform: scale()`: `transform` is eigendom van de
   onthulling in sectie 19 en zou hier verliezen. De losse eigenschap staat
   daar los van en telt er gewoon bij op.

   Alleen op apparaten met een echte aanwijzer. Op een touchscreen blijft
   :hover na een tik hangen tot je ergens anders tikt; dan zou een aangetikte
   kaart vergroot blijven staan. */
@media (hover: hover) {
  .moment {
    transition: scale var(--hover-duur) var(--ease),
                border-color var(--hover-duur) var(--ease),
                box-shadow var(--hover-duur) var(--ease);
  }
  .moment:hover {
    scale: var(--hover-scale);
    border-color: rgba(255, 255, 255, .24);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  }

  /* Het oplichten zelf: de donkere laag over de foto wordt een stukje
     doorzichtiger, zodat het beeld eronder naar voren komt. De tekst heeft
     een text-shadow en blijft dus leesbaar. */
  .moment::after {
    transition: opacity var(--hover-duur) var(--ease);
  }
  .moment:hover::after { opacity: .78; }
}

.moment__title,
.moment__text { position: relative; z-index: 2; }

.moment__title {
  font-family: var(--font-display);
  font-size: 1.5rem;       /* 24px, nagemeten */
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.moment__text {
  font-size: 1rem;         /* 16px, nagemeten */
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------------------
   11. PROCESSTAPPEN — DESIGN.md §5.7
   --------------------------------------------------------------------------- */
.cardgrid--steps { grid-template-columns: repeat(2, 1fr); }

/* rgba(255,255,255,.10) over het paginaverloop — exact nagemeten op de
   screenshot (bg #0D1718 -> kaart #263031). */
.step {
  padding: 26px 30px 34px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .10);
  text-align: center;
}
/* Zelfde gedrag als de momentkaarten hierboven. Geldt ook voor de kaarten
   op de jubileumpagina: die zijn .step met .step--jub erbij. */
@media (hover: hover) {
  .step {
    transition: scale var(--hover-duur) var(--ease),
                background-color var(--hover-duur) var(--ease),
                box-shadow var(--hover-duur) var(--ease);
  }
  .step:hover {
    scale: var(--hover-scale);
    /* .10 -> .15: net genoeg om op te lichten tegen het paginaverloop */
    background: rgba(255, 255, 255, .15);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  }
}

.step__label {
  font-size: var(--fs-step);
  font-weight: 600;
  color: var(--c-step);
}
.step__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.75rem;      /* 28px, nagemeten */
  font-weight: 700;
  line-height: 1.3;
}
.step__text {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   12. CONTACT + FORMULIER — DESIGN.md §5.8
   --------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.contact__text p + p { margin-top: 24px; }
.contact__text strong { font-weight: 700; }

.contact__intro { margin-bottom: 26px; }

.form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__row + .form__row { margin-top: 15px; }

/* Zichtbare labels ontbreken in het ontwerp (alleen placeholders), maar voor
   screenreaders en autofill horen ze er wel te zijn. */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  background: var(--c-divider);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__field::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }
.form__field:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(247, 188, 88, .28);
}
.form__field--area {
  min-height: 165px;
  resize: vertical;
}
.form__field:user-invalid { border-color: #E2725B; }

.form .btn--block { margin-top: 15px; }

.form__status {
  margin-top: 14px;
  min-height: 27px;
  font-size: 1rem;
}
.form__status.is-error { color: #F0907A; }
.form__status.is-ok    { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   13. WIE WIJ ZIJN — DESIGN.md §5.9
   --------------------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.person {
  display: grid;
  grid-template-columns: 162px 1fr;
  gap: 30px;
  align-items: start;
}
.person__photo {
  width: 162px;
  aspect-ratio: 162 / 308;   /* portretbijsnede, nagemeten */
  object-fit: cover;
  border-radius: 4px;
}
.person__name {
  font-family: var(--font-display);
  font-size: 1.75rem;        /* 28px, nagemeten */
  font-weight: 700;
  line-height: 1.2;
}
.person__bio {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   14. FOOTER — DESIGN.md §5.11
   --------------------------------------------------------------------------- */
.site-footer { background: var(--c-footer); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-block: 46px 62px;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.footer__address,
.footer__mail,
.footer__mail a,
.footer__list a {
  font-size: 0.9375rem;      /* 15px, nagemeten */
  line-height: 1.75;
  font-style: normal;
  text-decoration: none;
}
.footer__muted,
.footer__address { color: rgba(255, 255, 255, .55); }
.footer__mail { margin-top: 20px; }

.footer__list a,
.footer__mail a {
  transition: color .2s var(--ease);
}
.footer__list a:hover,
.footer__mail a:hover { color: var(--c-accent); }

.footer__bar {
  background: var(--c-footer-bar);
  padding-block: 12px;
  text-align: center;
}
.footer__bar p { font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   15. RESPONSIVE — DESIGN.md §6
   Gecontroleerd op 375px, 768px en 1440px.
   --------------------------------------------------------------------------- */

/* Tablet en kleiner: menu naar een uitklappaneel */
@media (max-width: 900px) {
  .nav { padding-inline: 18px; }
  .nav__toggle { display: block; }

  .nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 18px 22px;
    background: var(--c-nav-bg);
    /* dicht by default */
    display: none;
  }
  .nav__panel.is-open { display: flex; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    padding-block: 14px;
    font-size: 1rem;
  }
  .nav__link::after { bottom: 8px; }

  .social--nav {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
  }
}

/* 768px: kaartgrids naar 2 kolommen, contact en profielen onder elkaar */
@media (max-width: 860px) {
  :root { --section-pad: 72px; }

  .cardgrid--moments { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; gap: 44px; }
  .people { grid-template-columns: 1fr; gap: 34px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  .section--last { padding-bottom: 96px; }
}

/* Mobiel: alle kaartgrids naar 1 kolom (DESIGN.md §6) */
@media (max-width: 620px) {
  :root {
    --section-pad: 58px;
    --nav-h: 70px;
  }

  .container { padding-inline: 18px; }

  .nav__logo img { height: 50px; }

  .hero { min-height: 0; padding-block: calc(var(--band-h) + var(--nav-h) + 56px) 64px; }
  /* De vaste afbrekingen van het desktopontwerp geven op smalle schermen
     losse woorden op een regel; hier laten we de tekst vrij lopen. */
  .hero__title br { display: none; }
  .hero__lead { margin-top: 20px; }
  .hero__actions { gap: 12px; margin-top: 30px; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* Op smalle schermen is een verloop van boven naar beneden leesbaarder
     dan van links naar rechts. */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(10, 8, 20, .70) 0%, rgba(10, 8, 20, .55) 55%, rgba(10, 8, 20, .80) 100%);
  }

  .quoteband { padding-block: 44px; }

  /* De cinemascope-strook wordt op 375px erg laag; een minder brede uitsnede
     houdt hem kijkbaar. Alleen --stage-aspect aanpassen: --video-aspect is
     een eigenschap van de bron en moet blijven staan, anders klopt de
     cover-berekening niet meer. */
  .trailer__stage { --stage-aspect: 1.9; min-height: 200px; }
  .btn--sound {
    top: 14px;
    right: 14px;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.875rem;
  }
  .btn__icon { width: 18px; height: 18px; }

  .divider { margin-block: 26px; }

  .cardgrid--moments,
  .cardgrid--steps { grid-template-columns: 1fr; }

  .moment { --moment-window: 70px; min-height: 330px; }
  .step { padding: 22px 22px 28px; }

  .person { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
  .person__photo { width: 190px; aspect-ratio: 3 / 4; }

  .footer__cols { grid-template-columns: 1fr; gap: 30px; padding-block: 38px 46px; }
}

/* ---------------------------------------------------------------------------
   16. VOORKEUREN
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Scroll-onthulling helemaal uit. Niet alleen de overgang korter maken:
     dan zou de tekst nog steeds pas verschijnen zodra je erbij scrolt. Alles
     staat meteen op zijn plek. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Hover: het oplichten blijft, het groter worden niet. Dat laatste is
     beweging en daar gaat dit voorkeursinstelling nu juist over. */
  .moment:hover,
  .step:hover { scale: 1 !important; }

  /* De hero-video wordt in js/main.js gepauzeerd; het posterframe blijft staan. */
}

/* ---------------------------------------------------------------------------
   17. JUBILEUMPAGINA — /jubileum/

   Alles hieronder wordt alleen gebruikt door jubileum/index.html. Het staat
   bewust bij elkaar in één genummerde sectie in plaats van verspreid over de
   secties 3 t/m 13: het zijn nieuwe componenten (vragenlijst, tweekolomsblok
   met beeld, genummerde proceskaart), geen varianten van bestaande. Zo is in
   één blok te zien wat de tweede pagina toevoegt, en blijft sectie 1 t/m 16
   precies de homepage.

   De responsive regels van deze componenten staan onderaan deze sectie, in
   dezelfde breakpointvolgorde als sectie 15: 900 / 860 / 620.
   --------------------------------------------------------------------------- */

/* 17.1 Hero van een subpagina: zelfde video en scrim als de homepage.

   De ruimte boven en onder de tekst is op de homepage een gevolg van het
   centreren binnen een hoge --min-height: op 1440x900 blijft daar 111px over
   boven de kop en 143px onder de knoppen. De tekst op deze pagina is hoger
   (vier regels kop plus twee alinea's), dus daar valt niets te centreren en
   drukte de tekst tegen de nav en tegen de quoteband aan. Vandaar dezelfde
   twee waarden hier als harde padding: die staat vast, ongeacht hoe de kop
   op een bepaalde breedte afbreekt.

   Beide waarden staan ook in het 620px-blok onderaan deze sectie. Dat moet,
   want deze regel staat later in het bestand dan de mobiele .hero-regel in
   sectie 15 en zou die anders overrulen. */
.hero--sub {
  min-height: clamp(460px, 68vh, 600px);
  padding-top: calc(var(--band-h) + var(--nav-h) + 111px);
  padding-bottom: 143px;
}

.hero__eyebrow {
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.hero--sub .hero__lead { max-width: 700px; }
.hero--sub .hero__lead + .hero__lead { margin-top: 24px; }

/* 17.2 Tweekolomsblok: beeld naast inhoud.
   --media-aspect stelt per sectie de bijsnede van de foto in; de bronbeelden
   hebben alle drie een andere verhouding, de uitsnede op de pagina niet. */
.split {
  --media-aspect: 16 / 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
/* Beeld rechts in plaats van links. De DOM-volgorde blijft beeld-dan-tekst,
   zodat de mobiele stapeling (beeld boven) voor alle blokken gelijk is. */
.split--reverse .split__media { order: 2; }

.split__media {
  width: 100%;
  aspect-ratio: var(--media-aspect);
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* Slottekst onder een tweekolomsblok, over de volle breedte gecentreerd */
.split__note {
  margin-top: 40px;
  text-align: center;
}

/* 17.3 Vragenlijst — gele tekstballon + vetgedrukte vraag */
.qlist {
  display: grid;
  gap: 22px;
}
.qlist__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 16px;
  align-items: start;
  font-size: 1.0625rem;   /* 17px */
  font-weight: 700;
  line-height: 1.4;
}
.qlist__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--c-accent);
}

/* 17.4 Tekstblokken met gele tussenkop ("Op de avond zelf", ...) */
.textblocks > * + * { margin-top: 26px; }

.textblocks__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-accent);
}
.textblocks__title + p { margin-top: 10px; }

/* 17.5 Proceskaart zonder blauw "Stap N"-label: het nummer zit in de gele
   kop zelf. Zelfde kaartvlak als .step (sectie 11). */
.step--jub .step__title {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: 1.1875rem;   /* 19px */
  font-weight: 700;
  color: var(--c-accent);
}

/* 17.6 Contactsectie van deze pagina: één kolom over de volle inhoudsbreedte,
   in plaats van de tekst-naast-formulier opzet van de homepage (sectie 12).
   .contact zet zelf een grid van 1fr 1fr; die moet hier plat. */
.contact--single {
  display: block;
  max-width: 1100px;
  margin-inline: auto;
}

.contact--single .contact__intro {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 34px;
  text-align: center;
}
.contact--single .form__status { text-align: center; }

.contact__signoff {
  margin-top: 8px;
  text-align: center;
}

/* 17.7 Responsive — zelfde breakpoints en volgorde als sectie 15 */

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  /* order terugzetten, anders springt het beeld bij .split--reverse
     onder de tekst zodra de kolommen op elkaar staan */
  .split--reverse .split__media { order: 0; }
  .split__media { --media-aspect: 16 / 9; }
  .split__note { margin-top: 30px; }
}

@media (max-width: 620px) {
  /* Zelfde maten als .hero in sectie 15; hier herhaald omdat deze sectie
     later in het bestand staat en de regel daar anders overruled wordt. */
  .hero--sub {
    min-height: 0;
    padding-block: calc(var(--band-h) + var(--nav-h) + 56px) 64px;
  }
  .hero__eyebrow { margin-bottom: 14px; font-size: 0.875rem; }
  .hero--sub .hero__lead + .hero__lead { margin-top: 18px; }

  .qlist { gap: 18px; }
  .qlist__item { font-size: 1rem; }

  .contact--single .contact__intro { margin-bottom: 26px; }
}

/* ---------------------------------------------------------------------------
   18. 404-PAGINA — /404.html

   Leent alles van de bestaande secties; alleen de linklijst en de knop
   eronder hebben eigen opmaak nodig.
   --------------------------------------------------------------------------- */
.errorpage {
  /* De pagina is kort; deze ondergrens voorkomt dat de footer halverwege
     het scherm blijft hangen. */
  min-height: calc(100vh - var(--band-h) - var(--nav-h) - 100px);
  padding-top: calc(var(--band-h) + var(--nav-h) + 80px);
}
.errorpage .hero__eyebrow { text-align: center; }

.errorpage__links {
  margin-top: 30px;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.errorpage__links a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.errorpage__links a:hover,
.errorpage__links a:focus-visible {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.errorpage__mail { margin-top: 30px; }
.errorpage__mail a { color: var(--c-accent); }

.errorpage__action {
  margin-top: 36px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   19. SCROLL-ONTHULLING — .reveal

   Koppen en tekst komen omhoog gefaded in beeld zodra ze in het zicht komen.
   Eenmalig: wat onthuld is blijft staan, ook als je terugscrolt.

   De verborgen begintoestand hangt aan .js op <html>. Die klasse wordt gezet
   door een klein script in de <head> van elke pagina. Dat is bewust:

     - zonder JavaScript komt .js er nooit, dus blijft alles gewoon zichtbaar.
       Dat is het uitgangspunt van dit project en het is ook wat AI-crawlers
       zonder JS-engine te zien krijgen;
     - het script staat inline in de <head> en niet in js/main.js, omdat dat
       bestand pas onderaan de <body> wordt geladen. Tegen die tijd heeft de
       browser de tekst al geschilderd en zie je hem eerst verschijnen en dan
       weer verdwijnen.

   De hero doet NIET mee. Twee redenen: hij staat al in beeld voordat je hebt
   gescrold, en de <h1> is op beide pagina's het LCP-element. Een element met
   opacity 0 telt niet als geschilderd, dus een fade van 0,7s zou de Largest
   Contentful Paint met precies die 0,7s verslechteren.

   WAAROM EEN ANIMATIE EN GEEN TRANSITION
   De kaarten in sectie 10 en 11 hebben ook een hover-effect nodig. Deed de
   onthulling het met een transition, dan zouden die twee elkaar in de weg
   zitten: `transition` is een shorthand, dus de laatst winnende declaratie
   gooit de hele lijst om, en `.js .reveal.is-in` (drie klassen) wint het van
   elke `.moment:hover` (twee klassen). Met een keyframe-animatie blijft
   `transition` helemaal vrij voor de hover.

   Let op: de animatie houdt met fill-mode `both` de eindwaarde vast, en een
   gevulde animatie wint het van een gewone declaratie. `transform` is daarmee
   eigendom van dit blok. Wil je iets schalen bij hover, gebruik dan de losse
   `scale`-eigenschap — die zit niet in de keyframes en botst dus niet. Zie
   sectie 10 en 11.

   Alleen opacity en transform worden geanimeerd: die twee kan de browser op
   de compositor afhandelen, zonder layout of repaint.
   --------------------------------------------------------------------------- */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(var(--reveal-shift)); }
  to   { opacity: 1; transform: none; }
}

.js .reveal { opacity: 0; }
.js .reveal.is-in {
  animation: reveal-in var(--reveal-duur) var(--ease) both;
}

/* 19.1 Trapsgewijs binnen één rij.

   De vertraging hangt aan de kolompositie, niet aan het volgnummer in de
   lijst: bij nth-child(4) zou de tweede rij van het momentengrid drie tellen
   moeten wachten terwijl hij net zo goed nieuw in beeld komt. Met 3n+1, 3n+2
   en 3n+3 begint elke rij weer bij nul. Daarom lopen de regels ook mee met de
   breakpoints uit sectie 15, waar het grid van drie naar twee naar één gaat. */
.js .cardgrid--moments > .reveal:nth-child(3n+2) { animation-delay: var(--reveal-trap); }
.js .cardgrid--moments > .reveal:nth-child(3n+3) { animation-delay: calc(2 * var(--reveal-trap)); }

.js .cardgrid--steps > .reveal:nth-child(2n) { animation-delay: var(--reveal-trap); }

/* Twee kolommen: momentkaarten volgen dezelfde logica als de processtappen. */
@media (max-width: 860px) {
  .js .cardgrid--moments > .reveal:nth-child(3n+2),
  .js .cardgrid--moments > .reveal:nth-child(3n+3) { animation-delay: 0s; }
  .js .cardgrid--moments > .reveal:nth-child(2n)   { animation-delay: var(--reveal-trap); }
}

/* Eén kolom: elk item komt op zijn eigen moment in beeld, een vertraging
   zou daar alleen maar traag aanvoelen. */
@media (max-width: 620px) {
  .js .cardgrid--moments > .reveal,
  .js .cardgrid--steps   > .reveal { animation-delay: 0s; }
}

/* 19.2 Trapsgewijs binnen een blok tekst.

   Deze staan onder elkaar maar zo dicht op elkaar dat ze in één keer in beeld
   komen; zonder vertraging springen ze gelijktijdig aan. */
.js .container--narrow > .reveal:nth-child(4) { animation-delay: var(--reveal-trap); }
.js .container--narrow > .reveal:nth-child(5) { animation-delay: calc(2 * var(--reveal-trap)); }

.js .qlist > .reveal:nth-child(2) { animation-delay: var(--reveal-trap); }
.js .qlist > .reveal:nth-child(3) { animation-delay: calc(2 * var(--reveal-trap)); }
.js .qlist > .reveal:nth-child(4) { animation-delay: calc(3 * var(--reveal-trap)); }
.js .qlist > .reveal:nth-child(5) { animation-delay: calc(4 * var(--reveal-trap)); }
.js .qlist > .reveal:nth-child(6) { animation-delay: calc(5 * var(--reveal-trap)); }

/* 19.3 De kop en het sterretje eronder horen bij elkaar; het streepje volgt
   een tel later zodat het niet als los element aan komt zetten. */
.js .section__title + .reveal.divider { animation-delay: var(--reveal-trap); }

/* 19.4 Afdrukken: alles zichtbaar. Zonder deze regel drukt de browser af wat
   op dat moment op het scherm staat en blijft alles wat nog niet onthuld was
   leeg op papier. */
@media print {
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}