/* 00-letters.css */
/* =================================================================
   Letters, zelf gehost.
   Geen verbinding met Google: sneller, geen toestemming nodig onder
   de GDPR, en geen letters die na het laden nog verspringen.
   ================================================================= */

/* Archivo Variable, gewicht 100-900 en breedte 62-125% */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2-variations');
  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: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2-variations');
  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;
}

/* Instrument Sans Variable, gewicht 400-700 */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2-variations');
  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: 'Instrument Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/instrument-sans-latin-italic.woff2') format('woff2-variations');
  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: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2-variations');
  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;
}

/* Instrument Serif, enkel voor de spreuk en de korte kernzinnen */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/instrument-serif-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: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/instrument-serif-latin-italic.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;
}

/* 01-basis.css */
/* =================================================================
   KSA WAREGEM, basis: kleuren, letters, ritme, reset

   Twee dingen om te weten voor je hier iets wijzigt:

   1. De kleuren staan in oklch. Dat is een schrijfwijze waarbij het
      eerste getal de helderheid is. Wil je iets donkerder maken, dan
      verlaag je dat eerste getal en blijft de kleur zelf gelijk. Zo
      blijft het contrast voorspelbaar.

   2. De zes bankleuren staan niet hier maar in inhoud.json, want die
      horen bij de bantekens en de leiding past ze daar aan. Alles wat
      een ban kleurt, leidt zich af van die ene kleur.
   ================================================================= */

:root {
  /* papier & inkt, warm getint, nooit zuiver zwart of wit */
  --papier:    oklch(98.1% 0.009 82);
  --papier-2:  oklch(95.6% 0.016 80);
  --papier-3:  oklch(91.5% 0.021 76);
  --inkt:      oklch(22%   0.018 48);
  --inkt-2:    oklch(44%   0.016 48);
  --inkt-3:    oklch(52.5% 0.014 48);

  /* de donkere band onder de pagina's blijft donker, ook in lichte modus */
  --band:      oklch(20.5% 0.020 48);
  --op-band:   oklch(96.5% 0.012 82);
  --op-band-2: oklch(72%   0.012 80);

  /* wapenschild. Twee roden: één om mee te tekenen, één om in te lezen. */
  --rood:      oklch(60.5% 0.205 33);
  --rood-lees: oklch(51.5% 0.175 32);
  --blauw:     oklch(40%   0.150 268);
  --accent:    var(--rood);

  --lijn:       color-mix(in oklab, var(--inkt) 15%, transparent);
  --lijn-zacht: color-mix(in oklab, var(--inkt) 8%,  transparent);

  /* letters */
  --vlak:    'Instrument Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Archivo Variable', 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif;
  --serif:   'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

  /* De trap heeft nu ook een middenregister. Daarvoor sprong ze van
     reusachtig meteen naar broodtekst en viel alles ertussen weg. */
  --t-display: clamp(3rem,    8.6vw,           7rem);
  --t-1:       clamp(2.3rem,  4.9vw,           3.9rem);
  --t-2:       clamp(1.7rem,  2.9vw,           2.5rem);
  --t-3:       clamp(1.28rem, .9vw + .95rem,   1.6rem);
  --t-4:       clamp(1.08rem, .5vw + .92rem,   1.22rem);
  --t-lead:    clamp(1.1rem,  .8vw + .84rem,   1.3rem);
  --t-body:    clamp(1rem,    .26vw + .94rem,  1.07rem);
  --t-klein:   .8125rem;

  /* maat en ritme. Drie sectiehoogtes in plaats van één, anders krijgt
     elke pagina hetzelfde vlakke tempo. */
  --goot:     clamp(1.25rem, 5vw, 4.5rem);
  --breedte:  1240px;
  --rand:     max(var(--goot), calc((100vw - var(--breedte)) / 2));
  --sectie-s: clamp(2.5rem, 4.5vw, 4.5rem);
  --sectie:   clamp(3.75rem, 7vw, 7rem);
  --sectie-l: clamp(5rem, 10vw, 10rem);

  --r-s: 8px;
  --r:   14px;
  --r-l: 24px;

  /* uitlopende curve, geen veer en geen overshoot */
  --soepel: cubic-bezier(.22, 1, .36, 1);
  --vlot:   cubic-bezier(.33, 1, .68, 1);

  --schaduw:    0 1px 2px  color-mix(in oklab, var(--inkt) 6%, transparent),
                0 10px 30px -16px color-mix(in oklab, var(--inkt) 28%, transparent);
  --schaduw-op: 0 2px 6px  color-mix(in oklab, var(--inkt) 8%, transparent),
                0 26px 56px -26px color-mix(in oklab, var(--inkt) 36%, transparent);
}

@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) {
    --papier:    oklch(17.5% 0.011 60);
    --papier-2:  oklch(21.5% 0.013 60);
    --papier-3:  oklch(26.5% 0.015 60);
    --inkt:      oklch(94.5% 0.010 84);
    --inkt-2:    oklch(80%   0.012 80);
    --inkt-3:    oklch(68.5% 0.013 76);
    --band:      oklch(23%   0.014 60);
    --rood:      oklch(72%   0.160 33);
    --rood-lees: oklch(75.5% 0.150 34);
    --blauw:     oklch(72%   0.120 268);
    --lijn:       color-mix(in oklab, var(--inkt) 18%, transparent);
    --lijn-zacht: color-mix(in oklab, var(--inkt) 10%, transparent);
    --schaduw:    0 1px 2px #0007, 0 12px 32px -16px #000b;
    --schaduw-op: 0 2px 8px #0008, 0 28px 60px -26px #000d;
  }
}

:root[data-thema="donker"] {
    --papier:    oklch(17.5% 0.011 60);
    --papier-2:  oklch(21.5% 0.013 60);
    --papier-3:  oklch(26.5% 0.015 60);
    --inkt:      oklch(94.5% 0.010 84);
    --inkt-2:    oklch(80%   0.012 80);
    --inkt-3:    oklch(68.5% 0.013 76);
    --band:      oklch(23%   0.014 60);
    --rood:      oklch(72%   0.160 33);
    --rood-lees: oklch(75.5% 0.150 34);
    --blauw:     oklch(72%   0.120 268);
    --lijn:       color-mix(in oklab, var(--inkt) 18%, transparent);
    --lijn-zacht: color-mix(in oklab, var(--inkt) 10%, transparent);
    --schaduw:    0 1px 2px #0007, 0 12px 32px -16px #000b;
    --schaduw-op: 0 2px 8px #0008, 0 28px 60px -26px #000d;
  }

/* Elke ban zet zelf --kleur. Daaruit volgt de rest, zodat de leiding
   maar één kleur hoeft te kiezen en niets uit de toon kan vallen:
     --vlak-kleur    het rustige vlak achter een ban
     --vlak-kleur-2  hetzelfde vlak, iets voller, voor aanwijzen
     --lees-kleur    dezelfde kleur, donker genoeg om in te lezen
   Hieronder staat eerst een versie die overal werkt, en daarna een
   nauwkeuriger versie voor browsers die met kleuren kunnen rekenen. */
[style*='--kleur'] {
  --vlak-kleur:   color-mix(in oklab, var(--kleur) 11%, var(--papier));
  --vlak-kleur-2: color-mix(in oklab, var(--kleur) 18%, var(--papier));
  --lees-kleur:   color-mix(in oklab, var(--kleur) 74%, var(--inkt));
  --rand-kleur:   color-mix(in oklab, var(--kleur) 34%, transparent);
}

@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) [style*='--kleur'] {
    --vlak-kleur:   color-mix(in oklab, var(--kleur) 13%, var(--papier));
    --vlak-kleur-2: color-mix(in oklab, var(--kleur) 22%, var(--papier));
    --lees-kleur:   color-mix(in oklab, var(--kleur) 62%, var(--inkt));
    --rand-kleur:   color-mix(in oklab, var(--kleur) 40%, transparent);
  }
}

:root[data-thema="donker"] [style*='--kleur'] {
    --vlak-kleur:   color-mix(in oklab, var(--kleur) 13%, var(--papier));
    --vlak-kleur-2: color-mix(in oklab, var(--kleur) 22%, var(--papier));
    --lees-kleur:   color-mix(in oklab, var(--kleur) 62%, var(--inkt));
    --rand-kleur:   color-mix(in oklab, var(--kleur) 40%, transparent);
  }

/* Zonder deze stap weegt het oranje van de pagadders veel zwaarder op de
   pagina dan het paars van de knapen, terwijl beide even zacht bedoeld
   zijn. Door de helderheid vast te zetten en alleen de verzadiging te
   laten meebewegen, krijgt elke ban precies evenveel gewicht. */
@supports (color: oklch(from red l c h)) {
  [style*='--kleur'] {
    --vlak-kleur:   oklch(from var(--kleur) 96.8% .048 h);
    --vlak-kleur-2: oklch(from var(--kleur) 94.8% .075 h);
    --lees-kleur:   oklch(from var(--kleur) min(l, .51) c h);
    --rand-kleur:   oklch(from var(--kleur) 86% .07 h);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-thema='licht']) [style*='--kleur'] {
      --vlak-kleur:   oklch(from var(--kleur) 21.5% .032 h);
      --vlak-kleur-2: oklch(from var(--kleur) 27% .055 h);
      --lees-kleur:   oklch(from var(--kleur) max(l, .78) c h);
      --rand-kleur:   oklch(from var(--kleur) 42% .08 h);
    }
  }
  :root[data-thema='donker'] [style*='--kleur'] {
    --vlak-kleur:   oklch(from var(--kleur) 21.5% .032 h);
    --vlak-kleur-2: oklch(from var(--kleur) 27% .055 h);
    --lees-kleur:   oklch(from var(--kleur) max(l, .78) c h);
    --rand-kleur:   oklch(from var(--kleur) 42% .08 h);
  }
}

/* ------------------------------------------------------------ reset */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  /* hoogte van alles wat bovenaan blijft plakken, opgemeten door site.js */
  scroll-padding-top: calc(var(--plakhoogte, 68px) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--vlak);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

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

::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); }

/* ------------------------------------------------------- typografie */

.titel-1, .titel-2, .titel-3, .hero__titel, .ban__naam {
  font-family: var(--display);
  font-weight: 800;
  line-height: .97;
  letter-spacing: -.025em;
  text-wrap: balance;
  font-variation-settings: 'wdth' 100;
}

.titel-1 { font-size: var(--t-1); letter-spacing: -.03em; }
.titel-2 { font-size: var(--t-2); letter-spacing: -.024em; }
.titel-3 { font-size: var(--t-3); font-weight: 700; line-height: 1.18; letter-spacing: -.014em; }


.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--inkt-2);
  text-wrap: pretty;
  max-width: 46ch;
}

/* Kapitalen met spatiëring waren overal in gebruik en werden daardoor
   betekenisloos. Nog twee plaatsen: het opschrift boven een titel en
   de kolomkoppen in de voet. */
.wenkbrauw {
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkt-3);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.wenkbrauw::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--kleur, var(--accent));
  flex: none;
  border-radius: 2px;
}


em { font-style: italic; }
strong { font-weight: 600; }


/* --------------------------------------------------------- omhulsel */

.omhulsel {
  width: 100%;
  max-width: calc(var(--breedte) + 2 * var(--goot));
  margin-inline: auto;
  padding-inline: var(--goot);
}

.overslaan {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--inkt);
  color: var(--papier);
  border-radius: var(--r-s);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--vlot);
}
.overslaan:focus { top: 1rem; }

/* ---------------------------------------------------------- knoppen */

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.75rem;
}

.knop {
  --k-bg: transparent;
  --k-tekst: var(--inkt);
  --k-rand: var(--lijn);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* iets meer lucht links dan rechts leest optisch als gelijk, doordat
     de meeste labels op een ronde letter eindigen */
  padding: .78em 1.4em .82em 1.45em;
  border-radius: 999px;
  border: 1px solid var(--k-rand);
  background: var(--k-bg);
  color: var(--k-tekst);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.004em;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--vlot), border-color .22s var(--vlot), color .22s var(--vlot);
}
.knop--vol {
  --k-bg: var(--inkt);
  --k-tekst: var(--papier);
  --k-rand: transparent;
}
.knop--vol:hover { --k-bg: color-mix(in oklab, var(--inkt) 86%, var(--rood)); }
.knop--lijn:hover { --k-rand: color-mix(in oklab, var(--inkt) 34%, transparent); --k-bg: var(--papier-2); }
.knop:active { transform: translateY(1px); }

.tekstlink {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .45s var(--soepel), color .2s;
}
.tekstlink:hover { color: var(--rood-lees); background-size: 0% 1px; background-position: 100% 100%; }

/* Een link die alleen op een regel staat, is een knop in vermomming en
   hoort met een duim raakbaar te zijn. Links middenin een zin blijven
   ongemoeid, die moeten gewoon met de tekst mee kunnen lopen. */
p > .tekstlink:only-child,
.contactrij a,
.volgende__link {
  display: inline-block;
  padding-block: .28rem;
}

/* ---------------------------------------------------------- secties */

.sectiekop {
  display: grid;
  gap: .85rem clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: end;
  padding-bottom: clamp(1.75rem, 3.4vw, 2.75rem);
}
.sectiekop__zij { color: var(--inkt-3); max-width: 40ch; }

@media (min-width: 800px) {
  .sectiekop { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .sectiekop__zij { justify-self: end; text-align: right; }
}

.beeld { display: block; }
.beeld img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------- bantekens
   De tekens zijn rond getekend, met de naam van de ban langs de rand.
   Ze werden bijgesneden tot een cirkel, waardoor precies dat randschrift
   wegviel. Nu staan ze volledig in beeld op een rustig gekleurd vlak. */

/* De bantekens zijn vierkant getekend, met een zachte vlek en de namen
   van de ban langs de randen. Ze zaten in een ronde uitsnede, waardoor
   precies die namen wegvielen. Er staat nu geen vorm meer omheen: de
   witte achtergrond van de tekening vermengt zich met het papier, zodat
   het teken op de bladzijde lijkt gedrukt. */
.teken {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.teken img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) .teken {
    background: oklch(96.5% 0.012 84);
    border-radius: var(--r-l);
    padding: 3%;
    isolation: isolate;
  }
}

:root[data-thema="donker"] .teken {
    background: oklch(96.5% 0.012 84);
    border-radius: var(--r-l);
    padding: 3%;
    isolation: isolate;
  }

/* 02-kop-voet.css */
/* =================================================================
   Kop (header), mobiel menu en voet (footer)
   ================================================================= */

/* Eén doorschijnende laag op de hele site, hier. De leeftijdsbalk op de
   groepenpagina was er ook een; twee matglazen balken over elkaar maakte
   de tekst eronder onrustig. Die balk is nu gewoon dicht. */
.kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--papier) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--vlot), background .3s var(--vlot);
}
.kop.is-geplakt {
  border-bottom-color: var(--lijn-zacht);
  background: color-mix(in oklab, var(--papier) 93%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kop { background: var(--papier); }
}

.kop__binnen {
  width: 100%;
  max-width: calc(var(--breedte) + 2 * var(--goot));
  margin-inline: auto;
  padding-inline: var(--goot);
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
  padding-block: .5rem;
}
.merk__wapen {
  width: 36px; height: 36px;
  transition: transform .55s var(--soepel);
}
.merk:hover .merk__wapen { transform: rotate(-6deg); }
.merk__naam {
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.merk__naam b { font-weight: 800; }

.nav { display: none; }
@media (min-width: 940px) { .nav { display: block; } }

.nav__lijst { display: flex; gap: clamp(.35rem, 1.3vw, 1rem); }

.nav__link {
  position: relative;
  display: inline-block;
  padding: .55rem .35rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--inkt-2);
  text-decoration: none;
  transition: color .2s var(--vlot);
}
.nav__link span { position: relative; display: inline-block; }
.nav__link span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--soepel);
}
.nav__link:hover { color: var(--inkt); }
.nav__link:hover span::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--inkt); font-weight: 600; }
.nav__link[aria-current='page'] span::after { transform: scaleX(1); }

.themaknop {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--lijn);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--inkt-2);
  transition: color .2s, border-color .2s, background .2s;
}
.themaknop:hover {
  color: var(--inkt);
  border-color: color-mix(in oklab, var(--inkt) 30%, transparent);
  background: var(--papier-2);
}
.themaknop svg { width: 17px; height: 17px; }
.themaknop__zon { display: none; }
.themaknop__maan { display: block; line-height: 0; }
.themaknop--sheet { width: 44px; height: 44px; }
.themaknop--sheet svg { width: 20px; height: 20px; }

@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) .themaknop__zon { display: block; line-height: 0; }
:root:not([data-thema="licht"]) .themaknop__maan { display: none; }
}

:root[data-thema="donker"] .themaknop__zon { display: block; line-height: 0; }
:root[data-thema="donker"] .themaknop__maan { display: none; }

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--lijn);
  background: transparent;
  border-radius: 999px;
  padding: .5rem .95rem .5rem .8rem;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
}
.menuknop__streepjes { display: grid; gap: 4px; width: 15px; }
.menuknop__streepjes i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; }
.menuknop__streepjes i:last-child { width: 10px; margin-left: auto; }
@media (min-width: 940px) { .menuknop { display: none; } }

/* ------------------------------------------------------ mobiel menu */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--papier);
  display: flex;
  flex-direction: column;
  padding: 0 var(--goot) calc(var(--goot) + env(safe-area-inset-bottom));
  animation: sheet-in .4s var(--soepel);
}
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; } }

.sheet__kop {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--lijn-zacht);
}
.sluitknop {
  border: 1px solid var(--lijn);
  background: transparent;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}

.sheet__nav { flex: 1; display: flex; align-items: center; }
.sheet__nav ol { width: 100%; display: grid; gap: .1rem; }
.sheet__nav a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-decoration: none;
  padding-block: .2em;
  opacity: 0;
  transform: translateY(12px);
  animation: sheet-item .48s var(--soepel) forwards;
  animation-delay: calc(50ms + var(--i) * 40ms);
}
@keyframes sheet-item { to { opacity: 1; transform: none; } }
.sheet__nav a[aria-current='page'] { color: var(--rood-lees); }

.sheet__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--lijn-zacht);
  padding-top: 1.1rem;
  color: var(--inkt-3);
  font-size: .9rem;
}

/* -------------------------------------------------------------- voet */

/* De zes bankleuren als handtekening van de groep, één keer per pagina,
   vlak boven de voet. Verder blijft de site rustig. */
.kleurlint {
  display: flex;
  height: 4px;
  margin-top: var(--sectie-s);
}
/* na de donkere band hoeft er geen witte strook meer tussen */
.meedoen + .kleurlint { margin-top: 0; }
.kleurlint span { flex: 1; background: var(--kleur); }

.voet {
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem) 1.6rem;
  background: var(--papier-2);
}

.voet__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .voet__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .voet__raster { grid-template-columns: 1.5fr repeat(3, 1fr); } }

.voet__wapen { width: 64px; height: 64px; margin-bottom: .9rem; }
.voet__motto { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; }
.voet__motto-nl { color: var(--inkt-3); font-size: .9rem; margin-top: .25rem; }

.voet__titel {
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkt-3);
  margin-bottom: .9rem;
}
.voet__kolom ul { display: grid; gap: .5rem; font-size: .94rem; color: var(--inkt-2); }
.voet__kolom a { text-decoration: none; transition: color .2s; }
.voet__kolom a:hover { color: var(--rood-lees); }

.voet__balk {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn-zacht);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--inkt-3);
}
.voet__balk a { text-decoration: none; }
.voet__balk a:hover { color: var(--rood-lees); }

/* 03-home.css */
/* =================================================================
   Homepage
   ================================================================= */

.hero__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: clamp(1.35rem, 2.4vw, 2rem);
  padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(2.75rem, 5.5vw, 4.5rem);
  align-items: start;
}

.hero__wenkbrauw { grid-column: 1 / -1; }

.hero__titel {
  grid-column: 1 / -1;
  font-size: var(--t-display);
  line-height: .88;
  letter-spacing: -.035em;
  font-variation-settings: 'wdth' 94;
  margin-top: -.04em;
}
.hero__regel { display: block; }
/* De tweede regel stond in grijs, alsof ze half was uitgezet. Ze staat nu
   in het rood van het wapenschild: even leesbaar, en het is een kleur die
   iets betekent. */
.hero__regel:last-child { color: var(--rood-lees); }

.hero__tekst { grid-column: 1 / -1; }
.hero__tekst .lead { max-width: 38ch; }

.hero__beeld {
  grid-column: 1 / -1;
  margin-inline: calc(-1 * var(--rand));
}
.hero__beeld .beeld {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--papier-3);
}
.hero__beeld img { width: 100%; height: 100%; }

/* Het bijschrift stond in wit over de foto, met een schaduw eronder om
   het leesbaar te houden. Over een lichte lucht werkte dat niet. Het
   staat nu gewoon onder de foto, waar het rustig kan blijven. */
.hero__bijschrift {
  font-size: .84rem;
  color: var(--inkt-3);
  margin-top: .7rem;
  padding-inline: var(--rand) 0;
}

@media (min-width: 900px) {
  .hero__raster { row-gap: clamp(1.5rem, 2.8vw, 2.4rem); }
  .hero__regel { text-wrap: nowrap; }
  .hero__tekst { grid-column: 1 / span 5; grid-row: 3; align-self: start; }
  .hero__beeld {
    grid-column: 7 / -1;
    grid-row: 3;
    margin-inline: 0 calc(-1 * var(--rand));
    align-self: start;
    margin-top: -.5rem;
  }
  .hero__beeld .beeld { aspect-ratio: 16 / 10; border-radius: var(--r-l) 0 0 var(--r-l); }
  .hero__bijschrift { margin-top: .85rem; padding-inline: 0; }
}

/* ----------------------------------------- eerstvolgende activiteit */

.volgende {
  background: var(--band);
  color: var(--op-band);
}
.volgende[hidden] { display: none; }
.volgende__binnen {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-block: 1rem;
  flex-wrap: wrap;
}
.volgende__stip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rood);
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--rood) 60%, transparent);
  animation: pols 2.8s ease-out infinite;
}
@keyframes pols {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--rood) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.volgende__tekst { display: flex; flex-wrap: wrap; gap: .1rem .7rem; align-items: baseline; margin-right: auto; }
.volgende__label { font-size: .86rem; color: var(--op-band-2); }
.volgende__tekst strong { font-weight: 600; }
.volgende__link { font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--op-band-2); transition: color .2s; }
.volgende__link:hover { color: var(--op-band); }

/* ------------------------------------------------------------ feiten
   Dit was een rij reuzencijfers met een klein bijschrift eronder, het
   soort blok dat op elke productpagina staat. Het is nu een colofon:
   kleine, uitgelijnde cijfers met hun benaming erboven. */

.feiten { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.feiten__lijst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--lijn-zacht);
  border-bottom: 1px solid var(--lijn-zacht);
}
@media (min-width: 700px) { .feiten__lijst { grid-template-columns: repeat(4, 1fr); } }

.feit {
  display: flex;
  flex-direction: column-reverse;
  gap: .25rem;
  padding: 1.15rem clamp(.75rem, 2vw, 1.75rem) 1.2rem 0;
}
.feit + .feit { border-left: 1px solid var(--lijn-zacht); padding-left: clamp(.9rem, 2vw, 1.75rem); }
@media (max-width: 699px) {
  .feit:nth-child(odd) { border-left: 0; padding-left: 0; }
  .feit:nth-child(-n+2) { border-bottom: 1px solid var(--lijn-zacht); }
}
.feit__getal {
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.feit__label { color: var(--inkt-3); font-size: .82rem; }

/* ----------------------------------------------------------- verhaal */

.verhaal { padding-block: var(--sectie) 0; }
.verhaal__raster { display: grid; gap: clamp(1.6rem, 3.5vw, 3.5rem); }
@media (min-width: 900px) {
  .verhaal__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .verhaal__kop { position: sticky; top: calc(var(--plakhoogte, 68px) + 2.5rem); align-self: start; }
}
.verhaal__wapenspreuk {
  margin-top: 1.35rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.35;
  color: var(--inkt-2);
}
.verhaal__wapenspreuk span { font-family: var(--vlak); font-size: .85rem; color: var(--inkt-3); }
.verhaal__tekst { display: grid; gap: 1.1rem; max-width: 66ch; }
.verhaal__tekst p { text-wrap: pretty; }

/* ------------------------------------------------------------ ladder */

.ladder { padding-block: var(--sectie) 0; }
.ladder__lijst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1.2vw, .85rem);
}
@media (min-width: 620px)  { .ladder__lijst { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .ladder__lijst { grid-template-columns: repeat(6, 1fr); } }

.ladder__item a {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .7rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) .7rem clamp(1.15rem, 2vw, 1.5rem);
  border-radius: var(--r);
  text-decoration: none;
  background: var(--vlak-kleur);
  transition: background .25s var(--vlot);
}
.ladder__item a:hover { background: var(--vlak-kleur-2); }
.ladder__teken { width: clamp(84px, 11vw, 116px); }
.ladder__naam {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.014em;
  color: var(--lees-kleur);
}
.ladder__leeftijd { font-size: .78rem; color: var(--inkt-3); line-height: 1.3; }

@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) .ladder__leeftijd { color: var(--inkt-2); }
}

:root[data-thema="donker"] .ladder__leeftijd { color: var(--inkt-2); }

/* -------------------------------------------------------- binnenkort
   Dit waren vier gelijke kaartjes naast elkaar. Het is nu dezelfde
   lijstvorm als op de kalenderpagina, zodat een datum er overal op de
   site hetzelfde uitziet. */

.binnenkort { padding-block: var(--sectie) 0; }
.binnenkort__lijst { border-top: 1px solid var(--lijn); }

.datumrij {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: .1rem clamp(.9rem, 2vw, 1.6rem);
  padding-block: clamp(.95rem, 1.8vw, 1.3rem);
  border-bottom: 1px solid var(--lijn-zacht);
  align-items: baseline;
}
@media (min-width: 700px) {
  .datumrij { grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; }
}
.datumrij__datum { display: flex; align-items: baseline; gap: .35rem; }
@media (min-width: 700px) { .datumrij__datum { display: grid; gap: 0; } }
.datumrij__dag {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.datumrij__maand { font-size: .78rem; color: var(--inkt-3); }
.datumrij__titel { font-size: var(--t-4); font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.datumrij__meta { font-size: .84rem; color: var(--inkt-3); }
.datumrij.is-bijzonder .datumrij__titel { color: var(--rood-lees); }

/* -------------------------------------------------------------- nieuws */

.nieuws { padding-block: var(--sectie) 0; }
.nieuws__lijst { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 860px) { .nieuws__lijst { grid-template-columns: repeat(2, 1fr); } }
.kaart--nieuws { border-radius: var(--r); overflow: hidden; background: var(--papier-2); }
.kaart__beeld img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.kaart__body { padding: clamp(1.2rem, 2.4vw, 1.8rem); display: grid; gap: .5rem; }
.kaart__meta { font-size: .84rem; color: var(--inkt-3); }

/* ------------------------------------------------------------- krantje */

.krantje { padding-block: var(--sectie) 0; }
.krantje__raster {
  display: grid;
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) { .krantje__raster { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); } }

.krantje__beeld a {
  display: block;
  width: min(100%, 340px);
  border-radius: var(--r-s);
  overflow: hidden;
  box-shadow: var(--schaduw-op);
  rotate: -1.2deg;
  transition: rotate .55s var(--soepel);
}
.krantje__beeld a:hover { rotate: 0deg; }
.krantje__tekst { display: grid; gap: .8rem; justify-items: start; }
.krantje__tekst p { max-width: 48ch; color: var(--inkt-2); }

/* ------------------------------------------------------------- meedoen */

.meedoen {
  margin-top: var(--sectie);
  background: var(--band);
  color: var(--op-band);
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
}
.meedoen__raster { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 900px) { .meedoen__raster { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); } }
.meedoen .lead { color: var(--op-band-2); max-width: 44ch; }
.meedoen .wenkbrauw { color: var(--op-band-2); }
.meedoen .knop--lijn { --k-rand: color-mix(in oklab, var(--op-band) 30%, transparent); --k-tekst: var(--op-band); }
.meedoen .knop--lijn:hover { --k-bg: color-mix(in oklab, var(--op-band) 10%, transparent); --k-rand: color-mix(in oklab, var(--op-band) 48%, transparent); }
.meedoen .knop--vol { --k-bg: var(--op-band); --k-tekst: var(--band); }
.meedoen .knop--vol:hover { --k-bg: #fff; }
.meedoen .tekstlink:hover { color: var(--rood); }

.praktisch {
  margin-top: 1.9rem;
  border-top: 1px solid color-mix(in oklab, var(--op-band) 18%, transparent);
}
.praktisch > div {
  display: grid;
  gap: .15rem .75rem;
  grid-template-columns: 8.5rem 1fr;
  padding-block: .8rem;
  border-bottom: 1px solid color-mix(in oklab, var(--op-band) 12%, transparent);
}
@media (max-width: 460px) { .praktisch > div { grid-template-columns: 1fr; } }
.praktisch dt { font-size: .86rem; color: var(--op-band-2); padding-top: .1rem; }
.praktisch dd { margin: 0; }

/* ------------------------------------------------------------- leiders */

.leiderlijst {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
}
@media (min-width: 560px) { .leiderlijst { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); } }
.wenkbrauw + .leiderlijst { margin-top: clamp(.9rem, 1.8vw, 1.3rem); }
.leiderlijst--groot { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 215px)); }

.leider { display: grid; gap: .8rem; }
.leider__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--papier-3);
}
.leider__foto img { width: 100%; height: 100%; object-fit: cover; }
.leider__foto--leeg { display: block; }
.leider__naam { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.leider__rol { font-size: .84rem; color: color-mix(in oklab, currentColor 58%, transparent); margin-bottom: .3rem; }
.leider__info p { line-height: 1.4; }

/* ---------------------------------------------------------- contactlijst */

.contactlijst {
  margin-top: 1.1rem;
  border-top: 1px solid color-mix(in oklab, var(--op-band) 18%, transparent);
}
.contactrij {
  display: grid;
  gap: .15rem 1rem;
  grid-template-columns: minmax(0, max-content) 1fr;
  padding-block: .8rem;
  border-bottom: 1px solid color-mix(in oklab, var(--op-band) 12%, transparent);
}
@media (max-width: 460px) { .contactrij { grid-template-columns: 1fr; } }
.contactrij dt { font-weight: 600; }
.contactrij dd { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }

/* 04-paginas.css */
/* =================================================================
   Binnenpagina's
   ================================================================= */

.paginakop { padding-block: clamp(2.25rem, 5vw, 4.25rem) clamp(1.75rem, 3.4vw, 3rem); }
.paginakop__binnen { display: grid; gap: 1rem; }
.paginakop .titel-1 { max-width: 17ch; margin-top: .15rem; }
.paginakop .lead { max-width: 54ch; }
.paginakop .knoppen { margin-top: .7rem; }

/* --------------------------------------------------------- rail (ankers)
   Deze balk was ook matglas, net als de kop erboven. Twee doorschijnende
   lagen over elkaar maakten de tekst eronder onrustig; deze is nu dicht. */

.railbalk {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papier);
  border-block: 1px solid var(--lijn-zacht);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 940px) { .railbalk { top: 68px; } }

.rail {
  display: flex;
  gap: .35rem;
  padding-block: .65rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail li { flex: none; scroll-snap-align: center; }
.rail a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem .42rem .65rem;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--inkt-2);
  text-decoration: none;
  transition: background .22s var(--vlot), color .22s var(--vlot);
}
.rail a:hover { background: var(--vlak-kleur); color: var(--inkt); }
.rail a[aria-current='true'] {
  background: var(--vlak-kleur-2);
  color: var(--lees-kleur);
  font-weight: 600;
}
.rail__stip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kleur);
  flex: none;
  transition: transform .35s var(--soepel);
}
.rail a[aria-current='true'] .rail__stip { transform: scale(1.3); }


/* ----------------------------------------------------------------- ban */

.ban { padding-block: clamp(2.75rem, 5.5vw, 5rem); }
.ban:nth-child(even) { background: var(--vlak-kleur); }


.ban__raster { display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
@media (min-width: 800px) {
  .ban__raster { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .ban--gedraaid .ban__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
  .ban--gedraaid .ban__teken { order: 2; }
}

.ban__teken { width: min(260px, 58%); }
@media (min-width: 800px) { .ban__teken { width: 100%; } }

.ban__tekst { max-width: 64ch; }
.ban__leeftijd {
  font-size: .88rem;
  font-weight: 600;
  color: var(--lees-kleur);
}
.ban__naam {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  color: var(--lees-kleur);
  margin-top: .3rem;
  font-variation-settings: 'wdth' 98;
}
.ban__ook { color: var(--inkt-3); margin-top: .3rem; font-size: .92rem; }
.ban__kern {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.28;
  margin-top: 1.2rem;
  max-width: 28ch;
}
.ban__body { margin-top: 1rem; color: var(--inkt-2); text-wrap: pretty; }

/* ------------------------------------------------------------ uitleiding */

.uitleiding { padding-block: var(--sectie) var(--sectie-s); }
.uitleiding__binnen {
  display: grid;
  gap: .8rem;
  justify-items: start;
  max-width: 46ch;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--inkt);
}
.uitleiding .lead { max-width: 42ch; }

/* --------------------------------------------------------------- agenda
   Elke rij herhaalde het uur en droeg een etiket "Activiteit". Bij vijftien
   rijen leest dat als ruis. Wat altijd geldt staat nu één keer boven de
   lijst; in de lijst zelf staat alleen nog wat afwijkt. */

.agenda { padding-bottom: clamp(1rem, 2vw, 2rem); }

.agenda__vast {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  padding-bottom: 1rem;
  color: var(--inkt-3);
  font-size: .9rem;
}
.agenda__vast b { color: var(--inkt); font-weight: 600; }

.agenda__lijst { border-top: 1px solid var(--inkt); }

.maandkop {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-block: 1.5rem .5rem;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--inkt-3);
}
.maandkop::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lijn-zacht);
}
.maandkop:first-child { padding-top: .9rem; }

.rij {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .15rem clamp(.9rem, 2vw, 1.5rem);
  padding: clamp(.9rem, 1.7vw, 1.2rem) clamp(.5rem, 1vw, .9rem);
  margin-inline: clamp(-.9rem, -1vw, -.5rem);
  border-bottom: 1px solid var(--lijn-zacht);
  align-items: baseline;
  border-radius: var(--r-s);
  transition: background .25s var(--vlot);
}
@media (min-width: 720px) {
  .rij { grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; }
}
.rij:hover { background: color-mix(in oklab, var(--inkt) 3.5%, transparent); }

.rij__datum { justify-self: end; padding-right: .1rem; }
.rij__dag {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rij__titel { font-size: var(--t-4); font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.rij__nr { color: var(--inkt-3); font-weight: 500; }
.rij__meta { font-size: .84rem; color: var(--inkt-3); margin-top: .15rem; }

.rij.is-bijzonder .rij__titel { color: var(--rood-lees); }
.rij--geen .rij__dag { opacity: .45; }
.rij--geen .rij__titel { font-weight: 500; color: var(--inkt-3); }
.rij.is-voorbij { opacity: .4; }

/* De eerstvolgende zaterdag droeg een rood streepje aan de linkerkant.
   Ze is nu gemarkeerd zoals ze gelezen wordt: een vlak in de kleur en
   een woord dat zegt wat het is. */
.rij.is-volgende {
  background: color-mix(in oklab, var(--rood) 9%, transparent);
}
.rij.is-volgende .rij__titel { color: var(--rood-lees); }

.rij__merk { grid-column: 2; }
@media (min-width: 720px) { .rij__merk { grid-column: 3; justify-self: end; } }
.etiket {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--rood-lees);
  white-space: nowrap;
}

.rij__affiche { grid-column: 2; margin-top: .75rem; }
@media (min-width: 720px) { .rij__affiche { grid-column: 2; } }
.rij__affiche a {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  font-size: .86rem;
  color: var(--inkt-3);
}
.rij__affiche img {
  width: 132px;
  height: auto;
  border-radius: var(--r-s);
  box-shadow: var(--schaduw);
}
.rij__affiche a:hover { color: var(--rood-lees); }

.agenda__voetnoot {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--inkt-2);
}

/* --------------------------------------------------------------- albums
   De kaarten toonden abstracte kleurvlekken die niets betekenden. Nu
   dragen ze de naam van het album, in de kleur die de leiding eraan gaf,
   met een duidelijk verschil tussen op slot en open. */

.kluis { padding-bottom: var(--sectie); }

.albums {
  display: grid;
  gap: clamp(.7rem, 1.5vw, 1.1rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .albums { grid-template-columns: repeat(3, 1fr); } }

.album__link {
  display: grid;
  align-content: space-between;
  gap: clamp(1.5rem, 5vw, 2.5rem);
  min-height: clamp(132px, 26vw, 190px);
  padding: 1.1rem 1.2rem 1.15rem;
  border-radius: var(--r);
  text-decoration: none;
  background: var(--vlak-kleur);
  transition: background .3s var(--vlot);
}
.album__titel {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.028em;
  line-height: 1;
  color: var(--lees-kleur);
}
.album__voet { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--inkt-3); }
.album__voet svg { width: 15px; height: 15px; flex: none; }

.album.is-op-slot .album__link { cursor: not-allowed; }
.album.is-open .album__link { background: var(--vlak-kleur-2); }
.album.is-open .album__link:hover { background: color-mix(in oklab, var(--kleur) 26%, var(--papier)); }
.album__slot { display: inline; }
.album__open { display: none; color: var(--lees-kleur); font-weight: 600; }
.album.is-open .album__slot { display: none; }
.album.is-open .album__open { display: inline; }
.album.is-open .album__grendel { display: none; }


/* -------------------------------------------------------------- slotform */

.slotform {
  margin-top: clamp(1.4rem, 2.8vw, 2rem);
  padding-top: clamp(1.4rem, 2.8vw, 2rem);
  border-top: 1px solid var(--lijn);
  max-width: 640px;
}
.slotform.is-klaar { display: none; }
.slotform__binnen { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
.slotform__veld { flex: 1 1 12rem; display: grid; gap: .35rem; }
.slotform__veld label { font-size: .86rem; font-weight: 600; color: var(--inkt-2); }
.slotform__veld input {
  font: inherit;
  padding: .72rem .9rem;
  border-radius: var(--r-s);
  border: 1px solid var(--lijn);
  background: var(--papier);
  color: var(--inkt);
  width: 100%;
}
.slotform__veld input::placeholder { color: var(--inkt-3); }
.slotform__melding { min-height: 1.25rem; margin-top: .75rem; font-size: .88rem; color: var(--rood-lees); font-weight: 500; }
.slotform__hulp { font-size: .86rem; color: var(--inkt-3); margin-top: .1rem; }
.slotform.is-mis { animation: schud .45s; }
@keyframes schud {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.kluis__terug { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.kluis__terug[hidden] { display: none; }
.kluis__nota {
  margin-top: clamp(1.4rem, 2.8vw, 2rem);
  font-size: .88rem;
  color: var(--inkt-3);
  max-width: 64ch;
}

/* ---------------------------------------------------------------- krant */

.krant { padding-bottom: var(--sectie); }
.krant__raster { display: grid; gap: clamp(1.6rem, 3.5vw, 3.5rem); align-items: start; }
@media (min-width: 860px) { .krant__raster { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); } }
.krant__cover a {
  display: block;
  width: min(100%, 330px);
  border-radius: var(--r-s);
  overflow: hidden;
  box-shadow: var(--schaduw-op);
  transition: rotate .5s var(--soepel);
}
.krant__cover a:hover { rotate: -1.2deg; }
.krant__tekst { display: grid; gap: .7rem; justify-items: start; max-width: 46ch; }
.krant__jaargang { color: var(--inkt-3); }
.krant__nota { font-size: .86rem; color: var(--inkt-3); margin-top: .3rem; }

.archief { padding-bottom: var(--sectie); }
.archief__lijst { margin-top: 1.4rem; border-top: 1px solid var(--lijn); }
.archief__lijst a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem clamp(.5rem, 1vw, .9rem);
  margin-inline: clamp(-.9rem, -1vw, -.5rem);
  border-bottom: 1px solid var(--lijn-zacht);
  border-radius: var(--r-s);
  text-decoration: none;
  transition: background .25s var(--vlot);
}
.archief__lijst a:hover { background: color-mix(in oklab, var(--inkt) 3.5%, transparent); }
.archief__titel { font-weight: 600; }
.archief__jaar { color: var(--inkt-3); font-size: .9rem; margin-right: auto; }
.archief__pijl { color: var(--inkt-3); }

/* -------------------------------------------------------------- over ons */

.breedbeeld { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--papier-3); }
.breedbeeld .beeld, .breedbeeld img { width: 100%; height: 100%; }
@media (max-width: 700px) { .breedbeeld { aspect-ratio: 4 / 3; } }

.tekstblok { padding-block: var(--sectie); }
.tekstblok__binnen { max-width: calc(68ch + 2 * var(--goot)); margin-inline: auto; display: grid; gap: 1.15rem; }
.tekstblok__binnen p { font-size: clamp(1.04rem, .45vw + .95rem, 1.18rem); text-wrap: pretty; }

/* Het citaat had een rood streepje aan de linkerkant. Het hangt nu aan een
   aanhalingsteken dat buiten de kolom staat, zoals in een gezet boek. */
.citaat {
  position: relative;
  margin-top: 1.75rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.3;
  text-wrap: pretty;
}
.citaat::before {
  content: '\201C';
  position: absolute;
  left: -.55em;
  top: -.07em;
  font-size: 1.9em;
  line-height: 1;
  color: var(--rood);
}
@media (max-width: 900px) {
  .citaat { padding-left: .6em; }
  .citaat::before { left: -.16em; }
}

.hoofd { padding-bottom: var(--sectie); }

/* ---------------------------------------------------------------- ploeg */

.ploeg { padding-bottom: 0; }
.ploeg__ban {
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--lijn-zacht);
}
.ploeg__ban:first-of-type { border-top: 1px solid var(--lijn); }
.ploeg__kop { display: flex; align-items: center; gap: .9rem; }
.ploeg__teken { width: 48px; flex: none; }
.ploeg__naam { font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--lees-kleur); }
.ploeg__ook { font-size: .85rem; color: var(--inkt-3); }
.ploeg__ban .leiderlijst { margin-top: 1.1rem; }


/* Zolang de foto's er niet zijn, staat er één zin onder de lijst in
   plaats van vijf keer hetzelfde kadertje met "binnenkort". */
.ploeg__nota {
  margin-top: 1.25rem;
  font-size: .92rem;
  color: var(--inkt-3);
  max-width: 56ch;
}

/* 05-motie.css */
/* =================================================================
   Beweging

   Twee regels: niets beweegt wat de lay-out doet verspringen, en alles
   loopt uit in plaats van te veren. Wie beweging heeft uitgezet in zijn
   toestel krijgt een stille site.
   ================================================================= */

.js [data-onthul] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--soepel), transform .6s var(--soepel);
  transition-delay: calc(var(--i, 0) * 45ms);
  will-change: opacity, transform;
}
.js [data-onthul].is-zichtbaar {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.js .hero__regel {
  opacity: 0;
  transform: translateY(.12em);
  animation: regel-op .8s var(--soepel) forwards;
  animation-delay: calc(100ms + var(--i) * 80ms);
}
@keyframes regel-op { to { opacity: 1; transform: none; } }

.js .hero__wenkbrauw,
.js .hero__tekst,
.js .hero__beeld,
.js .hero__bijschrift {
  opacity: 0;
  animation: zacht-op .85s var(--soepel) forwards;
}
.js .hero__wenkbrauw { animation-delay: 50ms; }
.js .hero__beeld { animation-delay: 200ms; }
.js .hero__tekst { animation-delay: 300ms; }
.js .hero__bijschrift { animation-delay: 420ms; }
@keyframes zacht-op { to { opacity: 1; } }

/* de foto komt tot rust in plaats van binnen te schuiven */
.js .hero__beeld img {
  transform: scale(1.045);
  animation: beeld-rust 1.4s var(--soepel) forwards;
  animation-delay: 200ms;
}
@keyframes beeld-rust { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-onthul],
  .js .hero__regel,
  .js .hero__wenkbrauw,
  .js .hero__tekst,
  .js .hero__beeld,
  .js .hero__bijschrift,
  .js .hero__beeld img,
  .sheet,
  .sheet__nav a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .volgende__stip { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------- print
   Op papier hoort de site zwart op wit, zonder navigatie en zonder
   vlakken die de inkt opsouperen. */

@media print {
  .kop, .sheet, .voet__balk, .knoppen, .volgende, .menuknop, .railbalk, .kleurlint { display: none !important; }
  body { background: #fff; color: #000; }
  .ban, .ban:nth-child(even), .ladder__item a, .album__link, .uitleiding__binnen, .voet { background: none !important; }
  a { text-decoration: underline; }
  .hero__beeld, .breedbeeld, .rij, .ban { break-inside: avoid; }
  .agenda__lijst, .maandkop { break-inside: avoid; }
}