@charset "utf-8";
/* ==========================================================================
   NATURE vzw, richting 3: "rivier". De agenda is de site.
   Chronologie als interface. Kalme visuele taal, de structuur is de ster.
   ========================================================================== */

/* ---------- tokens ---------- */
/* De vier merkstrengen van de knoop in het logo. Enige plaats waar deze
   hexwaarden staan. Alles wat kleur nodig heeft, leest hieruit. */
:root {
  --brand-cyan:    #44B4D4;
  --brand-olive:   #B3B200;
  --brand-red:     #C31428;
  --brand-magenta: #BD0BB1;
}

/* Categoriekleuren, gekoppeld aan data-type op een agenda-item.
   Dit blok is bewust de enige toewijzing: na de merkaudit wisselen we
   hier de strengen om, en de rest van de stylesheet volgt vanzelf.
   Let op de fysica: cyaan en olijf zakken onder AA als tekst op papier,
   dus deze tokens zijn voorlopig alleen voor grafische vlakken. */
:root {
  /* Besluit Fady 2026-09-03, na de audit van nature.be (research/13):
     hun eigen code blijft. jongeren = rood, jeugdwerkers = olijf,
     scholen = cyaan-blauw; vrijwilligers krijgt de vierde, verweesde streng: magenta.
     Internationaal (Adventure Europe) is een traject voor jeugdwerkers en volgt olijf. */
  --type-vorming:        var(--brand-olive);
  --type-kamp:           var(--brand-red);
  --type-jongeren:       var(--brand-red);
  --type-school:         var(--brand-cyan);
  --type-vrijwilligers:  var(--brand-magenta);
  --type-internationaal: var(--brand-olive);
  /* Tekstvarianten, herberekend voor AA op papier #F5F4EF (grafische vlakken
     gebruiken de zuivere streng, woorden gebruiken deze donkere variant):
     olijf #666500 5.1:1, cyaan #17708A 5.1:1, rood #C31428 5.6:1, magenta #BD0BB1 4.9:1 */
  --type-vorming-ink:        #666500;
  --type-kamp-ink:           var(--brand-red);
  --type-jongeren-ink:       var(--brand-red);
  --type-school-ink:         #17708A;
  --type-vrijwilligers-ink:  var(--brand-magenta);
  --type-internationaal-ink: #666500;
}
/* elk item draagt zijn code als twee variabelen; alles daaronder leest die */
.entry[data-type~="vorming"]        { --cat: var(--type-vorming);        --cat-ink: var(--type-vorming-ink); }
.entry[data-type~="kamp"]           { --cat: var(--type-kamp);           --cat-ink: var(--type-kamp-ink); }
.entry[data-type~="jongeren"]       { --cat: var(--type-jongeren);       --cat-ink: var(--type-jongeren-ink); }
.entry[data-type~="school"]         { --cat: var(--type-school);         --cat-ink: var(--type-school-ink); }
.entry[data-type~="vrijwilligers"]  { --cat: var(--type-vrijwilligers);  --cat-ink: var(--type-vrijwilligers-ink); }
.entry[data-type~="internationaal"] { --cat: var(--type-internationaal); --cat-ink: var(--type-internationaal-ink); }
/* Blokken op de startpagina dragen dezelfde code. Grafisch vlak = --cat,
   woorden = --cat-ink (de AA-donkere variant). */
.tint-vorming        { --cat: var(--type-vorming);        --cat-ink: var(--type-vorming-ink); }
.tint-kamp           { --cat: var(--type-kamp);           --cat-ink: var(--type-kamp-ink); }
.tint-jongeren       { --cat: var(--type-jongeren);       --cat-ink: var(--type-jongeren-ink); }
.tint-school         { --cat: var(--type-school);         --cat-ink: var(--type-school-ink); }
.tint-vrijwilligers  { --cat: var(--type-vrijwilligers);  --cat-ink: var(--type-vrijwilligers-ink); }
.tint-internationaal { --cat: var(--type-internationaal); --cat-ink: var(--type-internationaal-ink); }

:root {
  --paper:      #F5F4EF;
  --paper-2:    #EDEBE2;
  --paper-3:    #E4E1D5;
  --ink:        #14181A;
  --ink-2:      #55605C;
  --ink-3:      #7C857F;
  --rule:       #D6D2C4;
  --rule-2:     #C2BDAB;
  --accent:     var(--brand-red);      /* AA op papier (5.6:1) */
  --accent-2:   var(--brand-magenta);  /* AA op papier (5.2:1) */
  --cyan:       var(--brand-cyan);     /* NOOIT tekst op papier: enkel grafisch */
  --olive:      var(--brand-olive);    /* idem */
  --forest:     #1E2A23;

  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1220px;

  /* ---- het verticale ritme, één schaal voor de hele site ----
     Eén sectie-afstand, één kopschaal, één binnenafstand. Geen sectie
     mag hier nog van afwijken, ook niet met een losse inline-waarde. */
  --section-gap:  clamp(3rem, 6.4vw, 5rem);   /* padding boven en onder elke sectie */
  --section-head: clamp(1.8rem, 1.3rem + 2.2vw, 3.1rem); /* de h2 in elke sectiekop */
  --head-inner:   clamp(.7rem, 1.6vw, 1rem);  /* eyebrow -> h2 -> lede */
  --head-gap:     clamp(1.6rem, 3.4vw, 2.4rem); /* sectiekop -> inhoud */
  --block-gap:    clamp(1.4rem, 3vw, 2.2rem); /* blok -> blok binnen een sectie */
  --hero-top:     clamp(1.4rem, 3vw, 2.2rem); /* lucht tussen de plakbalken en de eyebrow */
  /* Twee vaste hoogtes, randen inbegrepen. Alles wat onder de balken
     plakt rekent met --stack, nooit met een los getal. */
  --headerH: 60px;
  --barH: 60px;
  --stack: calc(var(--headerH) + var(--barH));

  --ease: cubic-bezier(.2, .7, .2, 1);
  --slow: 620ms;
  --med: 340ms;
  --fast: 170ms;

  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-place: "Newsreader", Georgia, "Times New Roman", serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--stack) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  /* Geen woord mag middenin breken. Dus geen automatische afbreking;
     break-word blijft als noodrem voor een woord dat echt niet past. */
  hyphens: manual;
  overflow-wrap: break-word;
  overflow-x: hidden;
  /* Eén crèmekleurig papier voor de hele site. Geen gekleurde wassing meer:
     die las op sommige schermen als blauwgrijs. Secties scheiden we met
     haarlijnen en ritme, niet met vlakken. */
}

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

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: #14181A; color: var(--paper); }

/* ---------- hulpklassen ---------- */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
/* onzichtbaar ankerpunt voor oude links, zonder eigen ruimte */
.anchor-alias { position: absolute; width: 0; height: 0; overflow: hidden; }
.fineprint { margin-top: var(--block-gap); font-size: .9rem; color: var(--ink-3); max-width: 46ch; }

/* focus: overal zichtbaar, nooit verwijderd */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; border-radius: 3px; text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .skip { transition: top var(--fast) var(--ease); }
}
.skip:focus { top: 8px; }

/* ---------- intro (één keer per sessie, < 1.5 s) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--paper);
}
.intro__inner { display: grid; justify-items: center; gap: 1.1rem; }
.intro__logo { width: min(190px, 46vw); height: auto; opacity: 0; }
.intro__line { width: 1px; height: 0; background: var(--ink); }
.intro__word {
  font-size: .74rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0;
}
html.is-intro body { overflow: hidden; }
html:not(.is-intro) .intro { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.is-intro .intro__logo { animation: introLogo 700ms var(--ease) 80ms forwards; }
  html.is-intro .intro__line { animation: introLine 620ms var(--ease) 340ms forwards; }
  html.is-intro .intro__word { animation: introWord 500ms var(--ease) 620ms forwards; }
  html.is-intro .intro { animation: introOut 460ms var(--ease) 1000ms forwards; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-intro .intro { display: none; }
}
@keyframes introLogo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes introLine { from { height: 0; } to { height: 74px; } }
@keyframes introWord { to { opacity: 1; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--headerH);   /* rand inbegrepen, zodat --stack klopt */
  background: rgba(245,244,239,.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  view-transition-name: site-header;
}
.site-header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 100%;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; padding: .35rem 0; }
.brand img { height: 34px; width: auto; view-transition-name: brand; }

.nav { display: flex; gap: clamp(.85rem, 2.4vw, 1.8rem); }
.nav a {
  position: relative; text-decoration: none;
  font-size: .84rem; letter-spacing: .045em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2);
  padding: .55rem 0; min-height: 24px; display: inline-flex; align-items: center;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .28rem; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
}
@media (prefers-reduced-motion: no-preference) {
  .nav a::after { transition: transform var(--med) var(--ease); }
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }
@media (max-width: 560px) {
  .nav { gap: .62rem; }
  .nav a { font-size: .7rem; letter-spacing: .02em; }
  .brand img { height: 28px; }
}
@media (max-width: 400px) {
  .nav { gap: .5rem; }
  .nav a { font-size: .64rem; }
  .brand img { height: 24px; }
}

/* ---------- de band: seizoenen op de agenda, hoofdstukken op de home ----------
   Eén component, twee varianten. De hoogte staat vast op --barH zodat alles
   wat eronder plakt exact aansluit. */
.seasons {
  position: sticky; top: var(--headerH); z-index: 40;
  height: var(--barH); overflow: hidden;
  background: rgba(245,244,239,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  view-transition-name: seasons;
}
.seasons__in {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
/* het spoor zelf: 12 px lucht boven de lijn, waar de pin in staat */
.seasons__rail {
  container-type: inline-size; position: relative;
  padding-top: 13px;
}
.seasons__track {
  position: relative; display: grid;
  grid-template-columns: 3fr 3fr 3fr 1.4fr;
  gap: 5px; list-style: none; margin: 0; padding: 0;
}
.seasons__seg {
  --tint: var(--rule-2);
  position: relative; padding-top: .5rem;
  border-top: 3px solid var(--tint);
  font-size: .66rem; line-height: 1.1; letter-spacing: .15em; text-transform: uppercase;
  /* --ink-2, niet --ink-3: op 8 tot 10 px moet ook een niet-actief label
     boven AA blijven (5.9:1 op het papier) */
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: no-preference) {
  .seasons__seg { transition: color var(--med) var(--ease), border-color var(--med) var(--ease); }
}
.seasons__seg[data-season="herfst"] { --tint: var(--brand-red); }
.seasons__seg[data-season="winter"] { --tint: var(--brand-cyan); }
.seasons__seg[data-season="lente"]  { --tint: var(--brand-olive); }
.seasons__seg[data-season="zomer"]  { --tint: var(--brand-magenta); }
.seasons__seg.is-now { color: var(--ink); font-weight: 600; }

/* de pin: staat vrij in de lucht boven het spoor, raakt niets aan */
.seasons__marker {
  position: absolute; top: 0; left: 0; width: 2px; height: 19px;
  border-radius: 1px; background: var(--marker, var(--ink));
  transform: translateX(calc(var(--flow, 0) * (100cqw - 2px)));
}
@media (prefers-reduced-motion: no-preference) {
  .seasons__marker { transition: transform 180ms var(--ease), background var(--med) var(--ease); }
  .seasons__marker::after { transition: background var(--med) var(--ease); }
}
.seasons__marker::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marker, var(--ink)); transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--paper);
}

/* het huidige hoofdstuk in woorden, alleen op smalle schermen */
.seasons__now {
  display: none; margin: .5rem 0 0;
  font-size: .66rem; line-height: 1.1; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* variant: hoofdstukken op de startpagina, vier gelijke stukken.
   Dezelfde band als op de agenda: vier gekleurde strengen met hun woord
   eronder, ook op een telefoon. De pin neemt de kleur van het hoofdstuk
   waarin je staat. Het zijn grafische vlakken, geen tekst, dus cyaan en
   olijf mogen hier. */
.seasons--chapters { --marker: var(--brand-cyan); }
.seasons--chapters[data-now="intro"] { --marker: var(--brand-cyan); }
.seasons--chapters[data-now="wat"]   { --marker: var(--brand-olive); }
.seasons--chapters[data-now="hoe"]   { --marker: var(--brand-magenta); }
.seasons--chapters[data-now="actie"] { --marker: var(--brand-red); }
.seasons--chapters .seasons__track { grid-template-columns: repeat(4, 1fr); }
.seasons--chapters .seasons__seg[data-chapter="intro"] { --tint: var(--brand-cyan); }
.seasons--chapters .seasons__seg[data-chapter="wat"]   { --tint: var(--brand-olive); }
.seasons--chapters .seasons__seg[data-chapter="hoe"]   { --tint: var(--brand-magenta); }
.seasons--chapters .seasons__seg[data-chapter="actie"] { --tint: var(--brand-red); }
@media (max-width: 420px) {
  .seasons__seg { font-size: .6rem; letter-spacing: .1em; }
  .seasons__now { font-size: .6rem; letter-spacing: .1em; }
}
/* De woorden blijven staan op een telefoon. "wat we doen" is het langste
   label, dus daarop meten we: vier kolommen van (331 - 15) / 4 = 79 px op
   een scherm van 360. Deze twee blokken staan bewust NA de algemene
   420-regel hierboven, anders wint die. */
@media (max-width: 700px) {
  .seasons--chapters .seasons__seg { font-size: .58rem; letter-spacing: .05em; }
  .seasons--chapters .seasons__now { display: none; }
}
@media (max-width: 420px) {
  .seasons--chapters .seasons__seg { font-size: .58rem; letter-spacing: .03em; }
}

/* ---------- hero ---------- */
/* De eyebrow zit dicht onder de plakbalken: --hero-top, niet een scherm lucht. */
.hero { padding-block: var(--hero-top) var(--block-gap); }
/* De startpagina heeft geen eyebrow meer, dus daar mag er iets meer lucht
   tussen de balken en de titel staan. */
.hero--split { padding-top: calc(var(--hero-top) + clamp(.4rem, 1.6vw, 1.2rem)); }
/* Op een telefoon staan kop en onderschrift onder elkaar; vanaf 900 px
   staat de kop links en het onderschrift rechts, op dezelfde onderlijn. */
.hero__head { display: grid; gap: var(--head-inner); }
/* Kop links, onderschrift rechts, twee gelijke kolommen, onderlijn gelijk.
   De kop is bewust niet zo groot als ze kan: 50/50 werkt alleen als de twee
   blokken ongeveer even hoog uitkomen, en dat lukt met een kop van twee
   regels naast een onderschrift van drie. De tussenruimte is kleiner dan
   eerst, zodat de twee blokken bij elkaar horen zoals de blokken lager op
   de pagina. Splitsing vanaf 820 px, dus ook op een tablet in staande stand. */
@media (min-width: 820px) {
  .hero__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 2.6vw, 2.6rem);
    align-items: end;
  }
  .hero--split .hero__head h1 {
    max-width: none;
    font-size: clamp(2.1rem, 3.5vw, 2.97rem);
    letter-spacing: -.026em;
  }
  .hero__head .hero__lede {
    margin: 0; max-width: none;
    /* Vlakkere helling dan de body-lede: anders staat het onderschrift rond
       820 px op vier regels terwijl de kop er twee heeft. Zo blijft het
       overal drie regels naast een kop van twee. */
    font-size: clamp(1rem, .84rem + .5vw, 1.25rem);
  }
}
.eyebrow {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--head-inner);
  display: flex; align-items: center; gap: .6rem;
}
/* Geen haarlijn meer achter het labeltje: de sectie heeft al haar eigen
   scheidingslijn bovenaan, en twee lijnen vlak onder elkaar lazen als één
   rommelige overgang. */

.hero h1 {
  font-size: clamp(2.5rem, 8.4vw, 6.1rem);
  font-stretch: 108%;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-wrap: balance;
}
/* Op de telefoon: zwaarder, strakker, en klein genoeg om in twee gebalanceerde
   regels te vallen. Gemeten op 360 px met Archivo 800 (gutter 2 x 18.4 px). */
@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(1.45rem, 8.6vw, 3rem);
    font-weight: 800;
    font-stretch: 100%;
    letter-spacing: -.025em;
    line-height: 1.06;
    max-width: none;
  }
}
.hero__lede {
  margin-top: var(--head-inner);
  max-width: 46ch; font-size: clamp(1.02rem, .98rem + .35vw, 1.25rem);
  color: var(--ink-2);
}
/* Vandaag en eerstvolgende: label boven de waarde, met een streep onder het
   label in plaats van een pil. De streep van "eerstvolgende" neemt de kleur
   van het eerstvolgende programma; JS zet die kleur, en zonder JS blijft het
   inkt. Zo klopt de kleur altijd met wat eronder staat. */
.today {
  margin: var(--block-gap) 0 0;
  display: grid; gap: clamp(1.1rem, 3vw, 1.8rem);
}
@media (min-width: 620px) {
  .today { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
}
.today__item { min-width: 0; }
.today__k {
  margin: 0 0 .5rem; display: inline-block;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-2);
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--k, var(--ink));
}
.today__v {
  margin: 0; font-weight: 600;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem); color: var(--ink);
}
.today__v a { color: inherit; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.today__v a:hover { text-decoration-thickness: 2px; }

/* gestaffelde titelreveal, aria-veilig */
.stagger > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .stagger > span { opacity: 0; transform: translateY(.5em); animation: rise 760ms var(--ease) forwards; }
  .stagger > span:nth-child(1) { animation-delay: 40ms; }
  .stagger > span:nth-child(2) { animation-delay: 130ms; }
  .stagger > span:nth-child(3) { animation-delay: 220ms; }
  .stagger > span:nth-child(4) { animation-delay: 310ms; }
  .stagger > span:nth-child(5) { animation-delay: 400ms; }
  .stagger > span:nth-child(6) { animation-delay: 490ms; }
  .stagger > span:nth-child(7) { animation-delay: 580ms; }
  .stagger > span:nth-child(8) { animation-delay: 670ms; }
  html.is-intro .stagger > span { animation-play-state: paused; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- filmstrook ----------
   Beeldverhouding 2.35:1, zoals de bronbestanden, en zonder geluidsspoor:
   de audio is er bij het encoderen uit gehaald, niet enkel gedempt.
   Het posterbeeld staat er meteen (in de hero is dat het LCP-beeld), de
   video schuift er na load overheen. Tikken op het beeld zet af en aan.
   Dat is geen luxe: Safari bevriest een automatisch spelende video als je
   de app verlaat en terugkomt, en zonder knop staat het beeld dan stil. */
.clip {
  position: relative; margin: 0;
  border-radius: 14px; overflow: hidden; background: var(--paper-3);
  aspect-ratio: 2.35;
}
@media (min-width: 760px) { .clip { border-radius: 4px; } }
.clip--hero { margin-top: clamp(1.8rem, 5vw, 3rem); }
.clip img, .clip video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* Op iPhone bleef er een haarlijn van het posterbeeld links en rechts naast
   de video staan: Safari rondt de geschaalde videorechthoek naar beneden af,
   waardoor er een halve pixel poster onder vandaan piept. Twee maatregelen:
   de video krijgt één pixel overschot aan elke kant, en zodra ze loopt
   verdwijnt het posterbeeld er helemaal onder. */
.clip video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; }
.clip video { opacity: 0; }
.clip.is-ready video { opacity: 1; }
.clip.is-ready img { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .clip video { transition: opacity 700ms var(--ease); }
  /* het poster gaat pas weg als de video er helemaal overheen ligt */
  .clip img { transition: opacity 300ms var(--ease) 700ms; }
}

/* het hele beeld is de knop */
.clip__tap {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; background: transparent;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.clip__tap:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.clip__badge {
  display: grid; place-items: center;
  width: clamp(46px, 9vw, 62px); height: clamp(46px, 9vw, 62px);
  border-radius: 50%; background: rgba(20,24,26,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}
.clip__ico { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .clip__badge { transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); }
}
/* Speelt de film, dan vervaagt het insigne en blijft het weg. Niet bij
   hover terugbrengen: op een aanraakscherm blijft :hover na een tik plakken,
   waardoor de knop op het beeld bleef staan na pauze en weer spelen.
   Toetsenbordfocus laat hem wel zien, anders is de knop onvindbaar. */
.clip.is-playing .clip__badge { opacity: 0; transform: scale(.86); }
.clip.is-playing .clip__tap:focus-visible .clip__badge { opacity: 1; transform: none; }
.clip__ico--pause { opacity: 0; }
.clip.is-playing .clip__ico--pause { opacity: 1; }
.clip.is-playing .clip__ico--play { opacity: 0; }

/* de voortgangsbalk ligt precies op de onderrand van de container */
.clip__track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: rgba(255,255,255,.26); opacity: 0;
}
.clip.is-ready .clip__track { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .clip__track { transition: opacity var(--med) var(--ease); }
}
.clip__bar {
  display: block; width: 100%; height: 100%; background: #fff;
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}

/* de twee losse stroken tussen de secties. De secties leveren zelf al
   --section-gap lucht aan beide kanten, dus we trekken er wat af. */
.clipband { margin-block: calc(var(--section-gap) * -.3); }

/* ---------- onder de film op een telefoon: twee wegen verder ----------
   Zonder kleur: beide links leiden naar alle vier de sporen, en één kleur
   zou hier een spoor beloven dat er niet is. Vanaf 900 px staat de hero
   al vol en verdwijnt dit blok. */
.herocta {
  margin-top: 1rem; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 12px;
}
.herocta__a {
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px; padding: .8rem 1rem;
  text-decoration: none; color: var(--ink);
}
.herocta__a + .herocta__a { border-top: 1px solid var(--rule); }
.herocta__a:hover { background: var(--paper-2); }
.herocta__txt { display: grid; gap: .12rem; }
.herocta__t { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.herocta__s { font-size: .82rem; color: var(--ink-2); }
.herocta__a svg { flex: none; margin-left: auto; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .herocta__a svg { transition: transform var(--med) var(--ease); }
  .herocta__a:hover svg { transform: translateX(5px); }
}
@media (min-width: 900px) { .herocta { display: none; } }

/* ---------- tijdchips + filters ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.chip {
  font: inherit; font-size: .82rem; line-height: 1;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .6rem .95rem;
  border: 1px solid var(--rule-2); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { font-size: .74rem; opacity: .6; font-variant-numeric: tabular-nums; }
/* Geen gekleurde bolletjes op de chips: die lazen als uitgeschakeld.
   De categoriekleur staat op de items zelf, niet op de filters. */

/* De filterbalk staat nu binnen de kop van de agenda, zonder eigen lijn
   erboven: kop, de twee data en de filters vormen samen één sectie. De
   enige lijn die volgt is die van de eerste maandgroep. */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  align-items: center; justify-content: space-between;
  margin-top: var(--head-gap);
}
.filterbar__note { font-size: .84rem; color: var(--ink-3); margin: 0; }

/* ---------- de rivier ---------- */
.river { padding-bottom: clamp(3rem, 8vw, 6rem); }
.month {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .month { grid-template-columns: minmax(9rem, 15rem) 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
}
.month__marker {
  position: sticky; top: var(--stack);   /* exact tegen de band, geen kier */
  align-self: start;
  padding-block: .95rem .85rem;
  z-index: 5;
}
/* vaste grond onder de plakkende maandkop: loopt door tot de rand van de
   wrap, zodat er niets doorheen schuift en de tekst niet op de inhoud ligt */
.month__marker::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .month__marker { top: calc(var(--stack) + 1.4rem); padding-block: 2.2rem 1rem; }
  .month__marker::before { display: none; }
}
.month__name {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  font-stretch: 112%; letter-spacing: -.03em; text-transform: lowercase;
}
.month__year {
  display: block; font-size: .72rem; letter-spacing: .22em;
  color: var(--ink-3); margin-top: .35rem; font-weight: 500;
}
.month__count { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .1rem; }

.month__list {
  position: relative; list-style: none; margin: 0;
  padding: 0 0 clamp(1.5rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.6rem);
}
/* de stroomlijn: grijze bedding + inkt die meevloeit.
   --line-top en --line-h zet JS in pixels: van net boven de eerste knoop tot
   de ONDERKANT van de maandgroep, niet tot de laatste knoop. Zo houdt de lijn
   niet halverwege op en loopt ze van groep naar groep door. */
.month__list::before,
.month__list::after {
  content: ""; position: absolute; left: 0; width: 1px; z-index: 0;
  top: var(--line-top, 1.6rem);
  height: var(--line-h, calc(100% - 1.6rem));
}
/* De uiteinden vervagen, zodat de verticale lijn nergens hard tegen een
   horizontale scheidingslijn aan botst. De bedding vervaagt aan beide
   kanten, de inkt aan de bovenkant en aan haar eigen kop, zodat ze zacht
   vooruit kruipt in plaats van met een snijrand. */
.month__list::before {
  background: var(--rule);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 20px), transparent 100%);
}
.month__list::after {
  background: var(--ink);
  height: calc(var(--fill, 0) * var(--line-h, 0px));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
}
/* zonder JS is er geen meting, dus tonen we alleen de bedding */
html:not(.js-on) .month__list::after { display: none; }

/* ---------- de kaart (het item in de stroom) ---------- */
.entry {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: .55rem 0;
  padding: clamp(1.4rem, 3.4vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .entry {
    grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) minmax(0, auto);
    column-gap: clamp(1.2rem, 3vw, 2.6rem);
    align-items: start;
  }
}
/* knoop op de lijn. Ligt altijd boven de lijn, nooit eronder. */
.entry::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(clamp(1.5rem, 4vw, 2.6rem) * -1 - 4.5px);
  top: calc(clamp(1.4rem, 3.4vw, 2.1rem) + .55rem);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--rule-2);
}
@media (prefers-reduced-motion: no-preference) {
  .entry::before { transition: transform var(--med) var(--ease), background var(--med) var(--ease), border-color var(--med) var(--ease); }
}
/* is-reached zet JS op exact het moment dat de inkt de knoop bereikt */
.entry.is-reached::before { border-color: var(--cat, var(--ink)); background: var(--cat, var(--ink)); }
.entry[data-status="binnenkort"].is-reached::before { background: var(--paper); border-color: var(--cat, var(--ink)); }
.entry[data-status="voorbij"]::before { border-color: var(--rule-2); background: var(--paper-3); }
.entry[data-status="voorbij"].is-reached::before { border-color: var(--ink-3); background: var(--paper-3); }

/* datum als displaytype */
.entry__date {
  font-family: var(--ff-display); font-weight: 700;
  line-height: .92; letter-spacing: -.04em;
  color: var(--ink);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem;
}
.entry__d {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.5rem);
  font-stretch: 105%;
}
.entry__to { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-3); font-weight: 500; }
.entry__my {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .entry__date { transition: transform var(--med) var(--ease); }
  .entry:hover .entry__date, .entry:focus-within .entry__date { transform: translateX(6px); }
  .entry:hover::before, .entry:focus-within::before { transform: scale(1.5); }
}
.entry__dur {
  display: inline-block; margin-top: .55rem;
  font-family: var(--ff-body); font-weight: 500; letter-spacing: .02em;
  font-size: .74rem; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: 999px; padding: .2rem .55rem;
}

.entry__body { min-width: 0; }
.entry__title {
  font-size: clamp(1.22rem, 1.05rem + .7vw, 1.65rem);
  font-weight: 600; letter-spacing: -.018em;
}
.entry__title a { text-decoration: none; }
.entry__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.entry__title a::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: right; z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .entry__title a::before { transition: transform var(--med) var(--ease); }
}
.entry:hover .entry__title a::before,
.entry__title a:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.entry__title a:focus-visible { outline-offset: 4px; }

.entry__place {
  font-family: var(--ff-place); font-style: italic;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
  color: var(--ink-2); margin: .3rem 0 0;
}
.entry__who { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-2); }
.entry__cat {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .35rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cat-ink, var(--ink-2));
}
.entry__cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--rule-2)); }
.entry[data-status="voorbij"] .entry__cat { color: var(--ink-3); }
.entry[data-status="voorbij"] .entry__cat::before { background: var(--rule-2); }
.entry__price { margin: .35rem 0 0; font-size: .95rem; font-weight: 600; }
.entry__price .alt { font-weight: 400; color: var(--ink-2); }
.entry__note { margin: .3rem 0 0; font-size: .84rem; color: var(--ink-3); }

.entry__status { display: flex; justify-content: flex-start; padding-top: .2rem; }
@media (min-width: 720px) { .entry__status { justify-content: flex-end; } }

/* status: woord + vorm, nooit kleur alleen */
.status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.status svg { flex: none; }
.status--open { color: var(--ink); }
.status--binnenkort { color: var(--ink-2); }
.status--voorbij { color: var(--ink-3); font-weight: 500; }

/* uitklap via :target, puur CSS */
.entry__deep {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  color: var(--ink-2); font-size: .93rem;
}
@media (prefers-reduced-motion: no-preference) {
  .entry__deep { transition: grid-template-rows 420ms var(--ease); }
}
.entry__deep > div { min-height: 0; }
.entry:target .entry__deep { grid-template-rows: 1fr; }
.entry__deep p { margin: .9rem 0 0; max-width: 60ch; }
.entry__deep a { position: relative; z-index: 3; }
/* Het geopende item lag in een verloop dat halverwege ophield en aan de
   rand van de kolom hard afbrak. Nu is het één rustig vlak dat tot in de
   marge doorloopt, zodat je nergens een snijrand ziet. De knoop neemt de
   categoriekleur, niet het rood: rood betekent hier jongeren. */
.entry:target { background: transparent; }
.entry:target::after {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0;
  left: calc((var(--gut) + clamp(1.5rem, 4vw, 2.6rem)) * -1);
  right: calc(var(--gut) * -1);
  background: var(--paper-2);
}
@media (min-width: 900px) {
  .entry:target::after { left: calc(var(--gut) * -1); }
}
.entry:target::before { background: var(--cat, var(--ink)); border-color: var(--cat, var(--ink)); }

.entry[data-status="voorbij"] .entry__date,
.entry[data-status="voorbij"] .entry__title { color: var(--ink-2); }

.entry[hidden] { display: none; }
.month[hidden] { display: none; }

/* ---------- secties ----------
   Eén ritme voor alles. Geen vlakken meer om secties te scheiden: hetzelfde
   crèmepapier van boven tot onder, met een haarlijn en lucht ertussen. */
.section { padding-block: var(--section-gap); }
main > .section { border-top: 1px solid var(--rule); }
/* de sectiekop: overal dezelfde maten en dezelfde marges */
/* De maat van de kop stond op de wrapper in ch van de BODY-letter, dus in
   pixels. Hoe groter de h2 werd, hoe meer regels ze brak: precies andersom
   dan gewenst. De maat hoort op de h2 zelf, in ch van haar eigen letter, zo
   houdt de kop op elke schermbreedte hetzelfde aantal tekens per regel. */
.section__head { margin-bottom: var(--head-gap); }
.section__head .eyebrow { margin-bottom: var(--head-inner); }
.section__head h2 {
  font-size: var(--section-head);
  font-stretch: 106%;
  max-width: 24ch;
}
.section__head p { margin-top: var(--head-inner); color: var(--ink-2); max-width: 52ch; }
/* een blok inhoud dat op een kop volgt, of op een ander blok */
.section__body { margin-top: var(--block-gap); }
.section__body:first-child { margin-top: 0; }

/* vier sporen */
/* Vier sporen, 2 x 2 vanaf 700 px, nooit vier naast elkaar: ze staan nu in
   hetzelfde grid als de rest van de pagina en niet meer over de volle breedte,
   dus vier kolommen zouden veel te smal worden. */
.tracks {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
@media (min-width: 700px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track {
  position: relative; background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.8rem, 4vw, 2.4rem);
  display: flex; flex-direction: column; gap: .7rem;
}
@media (prefers-reduced-motion: no-preference) {
  .track { transition: background var(--med) var(--ease); }
}
.track:hover { background: var(--paper-2); }
.track__icon { color: var(--ink); }
.track h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.track h3 a { text-decoration: none; }
.track h3 a::after { content: ""; position: absolute; inset: 0; }
.track p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.track__go {
  margin-top: auto; padding-top: .8rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: .5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .track__go svg { transition: transform var(--med) var(--ease); }
  .track:hover .track__go svg { transform: translateX(5px); }
}
/* de streng bovenaan de kaart, in de kleur van het spoor */
.track__strand { position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--cat, var(--rule-2)); }
.track p.track__cat {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat-ink, var(--ink-2)); margin: 0;
}
.track__icon { color: var(--cat-ink, var(--ink)); }
/* een tweede link in een kaart moet boven de kaartklik liggen */
.track__more { position: relative; z-index: 2; font-size: .88rem; color: var(--ink-2); margin: 0; }
.track__more a { text-decoration: underline; text-underline-offset: .2em; }
.track__more a:hover { color: var(--ink); }

/* ---------- startpagina: wat we doen ----------
   Vier gelijke blokken, 2 x 2 op breed scherm, één kolom op de telefoon.
   Elk blok: een streng in de categoriekleur, het label in dezelfde kleur
   (donkere variant, want het zijn woorden), de titel, één regel, één regel. */
.offers {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
@media (min-width: 720px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer {
  position: relative;
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.15rem, 2.4vw, 1.8rem) clamp(1.6rem, 3.4vw, 2.3rem);
  display: flex; flex-direction: column; gap: .55rem;
}
.offer__strand { position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--cat, var(--rule-2)); }
.offer p.offer__cat {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cat-ink, var(--ink-2)); margin: 0;
}
.offer h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); font-weight: 600; letter-spacing: -.015em; }
.offer p { margin: 0; font-size: .95rem; color: var(--ink-2); max-width: 44ch; }
.offer p.offer__lead { color: var(--ink); }

/* ---------- startpagina: hoe we werken ---------- */
.method { list-style: none; margin: 0; padding: 0; }
.method li {
  border-top: 1px solid var(--rule);
  padding: 1rem 0 1rem 2.4rem; position: relative;
  max-width: 62ch;
}
/* geen sluitlijn: de lijst eindigt gewoon, de sectie zorgt voor de scheiding */
.method li::before {
  content: ""; position: absolute; left: .55rem; top: 1.55rem;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper);
}
.method b { font-weight: 600; }

details.method-more { margin-top: var(--block-gap); max-width: 62ch; }
details.method-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; font-weight: 600; font-size: .95rem;
}
details.method-more > summary::-webkit-details-marker { display: none; }
details.method-more > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
}
details.method-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.method-more p { margin: .2rem 0 1.2rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  details.method-more > summary::after { transition: transform var(--med) var(--ease); }
  /* zacht openvouwen waar de browser het aankan, elders gewoon open */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details.method-more::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete;
    }
    details.method-more[open]::details-content { block-size: auto; }
  }
}

/* ---------- startpagina: de vertrouwensregel ---------- */
.trustline {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
@media (min-width: 700px) { .trustline { grid-template-columns: repeat(3, 1fr); } }
.trustline li { background: var(--paper); padding: 1rem 1.1rem; }
.trustline b {
  display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: -.02em;
}
.trustline span { display: block; margin-top: .25rem; font-size: .88rem; color: var(--ink-2); }

/* ---------- startpagina: de afsluitende oproep ---------- */
.nextline {
  margin-top: var(--block-gap);
  font-size: .95rem; color: var(--ink-2);
}
.nextline a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }

/* ---------- sociale kanalen in de voet ---------- */
.socials { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.socials a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .85rem .5rem .7rem;
  border: 1px solid rgba(234,237,232,.28); border-radius: 999px;
  text-decoration: none; font-size: .84rem;
}
@media (prefers-reduced-motion: no-preference) {
  .socials a { transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
}
.socials a:hover { border-color: #EAEDE8; background: rgba(234,237,232,.08); }
.socials svg { flex: none; }

/* geld en vertrouwen */
.trust { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 900px) { .trust { grid-template-columns: 1.05fr .95fr; } }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  counter-increment: s; position: relative;
  padding: 1rem 0 1rem 3.2rem; border-top: 1px solid var(--rule);
}
/* idem: geen sluitlijn onder de laatste stap */
/* De stapnummers staan in inkt en krijgen een streng eronder. De vier
   strengen tellen hier gewoon mee als 1, 2, 3, 4; ze zijn hier GEEN
   categoriecode, want een stap hoort bij geen enkel spoor in het bijzonder.
   Daarom een eigen variabele, los van --cat. */
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1rem;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem;
  color: var(--ink); line-height: 1;
  padding-bottom: .22rem;
  border-bottom: 3px solid var(--num, var(--rule-2));
}
.steps li:nth-child(1) { --num: var(--brand-cyan); }
.steps li:nth-child(2) { --num: var(--brand-olive); }
.steps li:nth-child(3) { --num: var(--brand-red); }
.steps li:nth-child(4) { --num: var(--brand-magenta); }
.steps b { font-weight: 600; }
.factsheet { list-style: none; margin: 0; padding: 0; }
.factsheet li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .75rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem;
}
.factsheet li:last-child { border-bottom: 0; }
.factsheet span:first-child { color: var(--ink-2); }
.factsheet span:last-child { font-weight: 600; text-align: right; }

/* knoppen */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.5rem;
  background: var(--ink); color: var(--paper); text-decoration: none;
  border: 1px solid var(--ink); border-radius: 999px;
  font-weight: 600; font-size: .96rem; letter-spacing: .01em;
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--med) var(--ease), background var(--med) var(--ease); }
  .btn:hover { transform: translateY(-2px) scale(1.015); background: #000; }
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--paper-2); }
.btn svg { flex: none; }
.btn[aria-disabled="true"] {
  background: var(--paper-2); color: var(--ink-2); border-color: var(--rule-2);
  cursor: not-allowed; pointer-events: none;
}

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.linklist a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .4rem 0; text-decoration: none; color: var(--ink-2);
}
.linklist a:hover { color: var(--ink); }
.linklist a span { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- detailpagina ---------- */
.detail-hero { padding-block: var(--hero-top) var(--block-gap); }
.detail-hero .eyebrow a {
  display: inline-flex; align-items: center; min-height: 24px; padding: .15rem .1rem;
  color: inherit;
}
.detail-hero h1 {
  font-size: clamp(2.2rem, 1.4rem + 4.4vw, 4.6rem);
  font-stretch: 108%; max-width: 15ch;
}
/* "Avonturenmakers" is één lang woord: op de telefoon moet het binnen de
   tekstkolom blijven, niet tot tegen de schermrand lopen */
@media (max-width: 560px) {
  .detail-hero h1 {
    font-size: clamp(1.6rem, 8.6vw, 2.6rem);
    font-weight: 800; font-stretch: 100%;
    letter-spacing: -.025em; line-height: 1.06; max-width: none;
  }
}
.bigdate {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 6.2vw, 6.5rem);
  font-stretch: 112%; letter-spacing: -.045em; line-height: .9;
  margin: clamp(1rem, 3vw, 1.8rem) 0 0;
}
.bigdate .to { color: var(--ink); }
.bigdate .yr { display: block; font-size: .26em; letter-spacing: .2em; color: var(--ink-2); margin-top: .8rem; }

.detail-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 980px) { .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.booking {
  border: 1px solid var(--ink); border-radius: 6px; padding: clamp(1.2rem, 3vw, 1.7rem);
  background: var(--paper);
}
@media (min-width: 980px) { .booking { position: sticky; top: calc(var(--stack) + 24px); } }
.booking h2 { font-size: 1.25rem; }
.booking .price { font-family: var(--ff-display); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-top: .7rem; }
.booking .price small { display: block; font-size: .95rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-top: .3rem; }
.booking .btn { width: 100%; justify-content: center; margin-top: 1.1rem; }
.booking__pay { font-size: .88rem; color: var(--ink-2); margin-top: 1rem; }

.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-top: var(--section-gap); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: .9rem; max-width: 62ch; color: var(--ink-2); }
.prose p.lead { color: var(--ink); font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); }

details.pract {
  border-top: 1px solid var(--rule);
}
details.pract:last-of-type { border-bottom: 1px solid var(--rule); }
details.pract > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; min-height: 48px;
  font-weight: 600; font-size: 1.02rem;
}
details.pract > summary::-webkit-details-marker { display: none; }
details.pract > summary .plus { position: relative; width: 14px; height: 14px; flex: none; }
details.pract > summary .plus::before,
details.pract > summary .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ink);
}
details.pract > summary .plus::before { width: 14px; height: 1.5px; }
details.pract > summary .plus::after { width: 1.5px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  details.pract > summary .plus::after { transition: transform var(--med) var(--ease); }
}
details.pract[open] > summary .plus::after { transform: scaleY(0); }
details.pract > div { padding-bottom: 1.2rem; color: var(--ink-2); max-width: 62ch; }
details.pract ul { margin: 0; padding-left: 1.1rem; }
details.pract li { margin-bottom: .35rem; }

.facts {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  margin-top: var(--block-gap);
}
@media (min-width: 620px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { background: var(--paper); padding: 1rem 1.1rem; }
.facts dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: .35rem 0 0; font-size: 1.05rem; font-weight: 600; }
.facts dd small { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-2); margin-top: .2rem; }

/* mobiele vaste balk */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(245,244,239,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule-2);
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mobilebar .p { font-size: .88rem; font-weight: 600; }
.mobilebar .p small { display: block; font-weight: 400; color: var(--ink-2); font-size: .78rem; }
.mobilebar .btn { min-height: 44px; padding: .6rem 1.1rem; font-size: .9rem; }
@media (min-width: 980px) { .mobilebar { display: none; } }
body.has-mobilebar { padding-bottom: 84px; }
@media (min-width: 980px) { body.has-mobilebar { padding-bottom: 0; } }

/* ---------- footer ---------- */
.site-footer {
  background: var(--forest); color: #EAEDE8;
  padding-block: clamp(2.6rem, 7vw, 4.5rem) clamp(1.6rem, 4vw, 2.4rem);
  margin-top: clamp(2rem, 6vw, 4rem);
}
.site-footer a { color: #EAEDE8; }
.site-footer__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer h2 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #9FB3A6; font-weight: 600; margin-bottom: .9rem; }
.site-footer p { color: #C8D2CB; font-size: .95rem; }
.site-footer .linklist a { color: #EAEDE8; }
.site-footer .linklist a:hover { color: #fff; }
.site-footer address { font-style: normal; color: #C8D2CB; font-size: .95rem; line-height: 1.7; }
.site-footer .brandmark { width: 132px; height: auto; margin-bottom: 1.2rem; }
.footer-strands { display: flex; gap: 6px; margin-bottom: 1.4rem; }
.footer-strands span { display: block; width: 40px; height: 5px; border-radius: 2px; }
.legal {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.2rem;
  border-top: 1px solid rgba(234,237,232,.18);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: #9FB3A6;
}
.site-footer :where(a):focus-visible { outline-color: #EAEDE8; }

/* ---------- reveals ----------
   Regel: een sectie komt in haar geheel binnen, of helemaal niet. De sectie
   zelf is de waarnemer (.reveal); de kop en de inhoud staggeren daarbinnen.
   Onder prefers-reduced-motion beweegt er niets, en het vangnet in script.js
   zet .is-in op alles wat de viewport al voorbij is. */
@media (prefers-reduced-motion: no-preference) {
  html.js-on .reveal :is(.rv, .section__head > *) {
    opacity: 0; transform: translateY(14px);
  }
  html.js-on .reveal.is-in :is(.rv, .section__head > *) {
    opacity: 1; transform: none;
    transition: opacity 620ms var(--ease) var(--rd, 0ms), transform 620ms var(--ease) var(--rd, 0ms);
  }
  /* de kop in drie zachte stappen */
  html.js-on .reveal .section__head > *:nth-child(1) { --rd: 0ms; }
  html.js-on .reveal .section__head > *:nth-child(2) { --rd: 70ms; }
  html.js-on .reveal .section__head > *:nth-child(3) { --rd: 140ms; }
  /* de inhoud volgt op de kop, in de volgorde waarin ze staat */
  html.js-on .reveal .rv { --rd: 200ms; }
  html.js-on .reveal .rv + .rv { --rd: 270ms; }
  html.js-on .reveal .rv + .rv + .rv { --rd: 340ms; }

  /* de hero staat boven de vouw: die animeert op load, niet op scroll,
     zodat er niets onzichtbaar kan blijven staan */
  html.js-on :is(.hero, .detail-hero) :is(.eyebrow, .hero__lede, .clip, .herocta, .today, .bigdate, .detail-hero__status) {
    opacity: 0; transform: translateY(14px);
    animation: rise 700ms var(--ease) forwards;
  }
  html.js-on :is(.hero, .detail-hero) .eyebrow { animation-delay: 40ms; }
  html.js-on :is(.hero, .detail-hero) :is(.hero__lede, .bigdate) { animation-delay: 420ms; }
  html.js-on :is(.hero, .detail-hero) :is(.clip, .today, .detail-hero__status) { animation-delay: 540ms; }
  html.js-on :is(.hero, .detail-hero) .herocta { animation-delay: 640ms; }
  html.is-intro :is(.hero, .detail-hero) * { animation-play-state: paused; }

  html.js-on .entry:not(.is-in) .entry__body,
  html.js-on .entry:not(.is-in) .entry__date,
  html.js-on .entry:not(.is-in) .entry__status { opacity: 0; transform: translateY(10px); }
  .entry.is-in .entry__body, .entry.is-in .entry__date, .entry.is-in .entry__status {
    opacity: 1; transform: none;
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  }
  .entry.is-in .entry__body { transition-delay: 60ms; }
  .entry.is-in .entry__status { transition-delay: 110ms; }
}

/* ---------- view transitions ---------- */
@view-transition { navigation: auto; }

/* ---------- print ---------- */
@media print {
  .site-header, .seasons, .mobilebar, .clip, .clipband { display: none; }
  body { background: #fff; }
}

/* ---------- prototypenoot: eerlijk zeggen wat we nog niet weten ---------- */
.note-proto {
  font-size: .84rem; color: var(--ink-3);
  border-left: 2px solid var(--rule-2); padding-left: .85rem;
  margin-top: 1rem; max-width: 54ch;
}
.stub {
  border: 1px dashed var(--rule-2); border-radius: 6px;
  padding: clamp(1.2rem, 3vw, 1.8rem); background: transparent;
  margin-top: var(--block-gap);
}
.stub h2 { font-size: 1.3rem; }
.stub p { margin-top: .8rem; color: var(--ink-2); max-width: 58ch; }

.btn:disabled { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule-2); cursor: not-allowed; font-family: inherit; }

/* ==========================================================================
   VARIANT A, "kaarten". Bovenop de rivier-basis.
   Zelfde papier, zelfde letters, zelfde balken, zelfde ritme.
   Wat verandert: elk ding is een kaart, met een gekleurde grond of kop.
   Alle kleuren hieronder zijn doorgerekend op AA (4.5:1) tegen hun grond.
   ========================================================================== */

:root {
  /* een radius, een binnenafstand, een kaartafstand voor de hele site */
  --r: 16px;
  --r-sm: 12px;
  --card-pad: clamp(1.15rem, 3vw, 1.7rem);
  --card-gap: clamp(.75rem, 1.8vw, 1.1rem);

  /* de vier wassingen: 7% streng op het papier, doorgerekend */
  --tint-red:      #F2E4E1;
  --tint-olive:    #F0EFDE;
  --tint-cyan:     #E9F0ED;
  --tint-magenta:  #F1E4EB;

  /* magenta als woord op een magenta wassing haalde 4.2:1, dus donkerder:
     #A3079A geeft 6.2:1 op papier en 5.6:1 op de wassing */
  --type-vrijwilligers-ink: #A3079A;
}

/* elke tintklasse draagt nu ook haar wassing en haar tekstkleur op vol vlak */
.tint-vorming, .tint-internationaal { --tint-bg: var(--tint-olive);   --on-cat: var(--ink); }
.tint-kamp, .tint-jongeren          { --tint-bg: var(--tint-red);     --on-cat: #fff; }
.tint-school                        { --tint-bg: var(--tint-cyan);    --on-cat: var(--ink); }
.tint-vrijwilligers                 { --tint-bg: var(--tint-magenta); --on-cat: #fff; }

/* ---------- de kaart, het enige blokmodel van deze variant ---------- */
.card {
  position: relative;
  background: var(--tint-bg, var(--paper));
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--card-pad);
}
.cardgrid { display: grid; gap: var(--card-gap); }
@media (min-width: 700px) { .cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) { .cardgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cardgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* het labeltje bovenaan een kaart, in de donkere variant van de streng */
.card .card__cat {
  margin: 0 0 .55rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat-ink, var(--ink-2));
}
.card h3 {
  font-weight: 800; letter-spacing: -.022em;
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.5rem);
}
/* :where() houdt de basisregel op nul, zodat de deelcomponenten hieronder
   (prijs, labeltje, datum) hun eigen maat en kleur houden. */
.card :where(p) { color: var(--ink-2); font-size: .95rem; }
.card p.card__lead { color: var(--ink); font-size: 1rem; font-weight: 500; }

/* ---------- hero: echte knoppen, op elk scherm ---------- */
.herobtns {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: clamp(1.2rem, 3vw, 1.7rem);
}
.herobtns .btn { min-height: 54px; border-radius: 999px; font-size: 1rem; }
@media (max-width: 460px) { .herobtns .btn { width: 100%; justify-content: center; } }
/* de oude telefoonrijen zijn vervangen door de knoppen hierboven */
.herocta { display: none; }
/* Op breed scherm staan de knoppen onder het onderschrift, in dezelfde
   kolom. Zo blijft de kop twee regels hoog en blijft de film volledig
   boven de vouw op 1440 bij 900. */
@media (min-width: 820px) {
  .hero__head { grid-template-areas: "t l" "t b"; align-items: start; }
  .hero__head h1 { grid-area: t; align-self: end; }
  .hero__head .hero__lede { grid-area: l; }
  .hero__head .herobtns { grid-area: b; margin-top: 1rem; }
}
/* koppen mogen groter en zwaarder dan in v1 */
.hero h1, .detail-hero h1 { font-weight: 800; }
@media (min-width: 820px) {
  .hero--split .hero__head h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
}
.section__head h2 { font-weight: 800; }

/* ---------- binnenkort: de eerstvolgende data als kaarten ---------- */
.soon .card { display: flex; flex-direction: column; gap: .5rem; }
.soon__date {
  font-family: var(--ff-display); font-weight: 800; line-height: .95;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); letter-spacing: -.035em;
  color: var(--cat-ink, var(--ink));
}
.soon__date span {
  display: block; font-family: var(--ff-body); font-weight: 600;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); margin-top: .45rem;
}
.soon h3 { font-size: 1.15rem; }
.soon h3 a { text-decoration: none; }
.soon h3 a::after { content: ""; position: absolute; inset: 0; }
.soon__place { font-family: var(--ff-place); font-style: italic; color: var(--ink-2); margin: 0; }
.soon__price { margin: 0; font-weight: 700; font-size: .95rem; color: var(--ink); }
.soon__price .alt { font-weight: 400; color: var(--ink-2); }
.soon .status { margin-top: auto; padding-top: .6rem; }

/* ---------- methodiek: vier genummerde kaarten ---------- */
.mcard { display: flex; flex-direction: column; gap: .45rem; }
.mcard__n {
  font-family: var(--ff-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); letter-spacing: -.04em;
  color: var(--cat-ink, var(--ink)); margin: 0 0 .2rem;
}
.mcard h3 { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }
.mcard p { margin: 0; }

/* ---------- grote getallen: het vertrouwensblok ---------- */
.stats { margin-top: var(--block-gap); }
.stat b {
  display: block; font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  line-height: .95; letter-spacing: -.04em; color: var(--ink);
}
.stat span { display: block; margin-top: .5rem; font-size: .92rem; color: var(--ink-2); }

/* ---------- citaatkaart ---------- */
.quote {
  margin-top: var(--block-gap);
  background: var(--tint-olive); border-color: var(--rule-2);
}
.quote blockquote {
  margin: 0; font-family: var(--ff-place); font-style: italic;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); line-height: 1.3;
  color: var(--ink); max-width: 32ch;
}
.quote figcaption { margin-top: .9rem; font-size: .86rem; color: var(--ink-2); }

/* ---------- geld: de prijskaarten ---------- */
.price-card { display: flex; flex-direction: column; gap: .3rem; }
.price-card__k {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cat-ink, var(--ink-2));
  /* geen woord mag middenin breken, ook "vrijwilligers" niet */
  hyphens: none; overflow-wrap: normal; word-break: keep-all;
}
.price-card__v {
  margin: .2rem 0 0; font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1;
  letter-spacing: -.035em; color: var(--ink); white-space: nowrap;
}
.price-card__alt { margin: .1rem 0 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.price-card__note { margin: .35rem 0 0; font-size: .86rem; color: var(--ink-2); }
/* de vier stappen als een rij kaarten, altijd open */
.steprail { margin-top: var(--block-gap); }
.step {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: clamp(.95rem, 2.2vw, 1.25rem);
}
.step__n {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.6rem; line-height: 1;
  color: var(--ink); padding-bottom: .3rem; align-self: flex-start;
  border-bottom: 4px solid var(--num, var(--rule-2));
}
.step:nth-child(1) { --num: var(--brand-cyan); }
.step:nth-child(2) { --num: var(--brand-olive); }
.step:nth-child(3) { --num: var(--brand-red); }
.step:nth-child(4) { --num: var(--brand-magenta); }
.step span.step__t { font-size: .95rem; color: var(--ink-2); }
.step span.step__t b { color: var(--ink); font-weight: 700; }
.moneynote {
  margin-top: var(--block-gap); font-size: 1rem; font-weight: 600; color: var(--ink);
  background: var(--tint-cyan); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: clamp(.9rem, 2vw, 1.2rem); max-width: none;
}

/* ---------- Avonturenmakers: brede kaart op vol rood ---------- */
.feature {
  background: var(--brand-red); color: #fff;           /* wit op rood: 6.1:1 */
  border: 0; border-radius: var(--r);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  display: grid; gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-bottom: var(--block-gap);
}
@media (min-width: 860px) { .feature { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.feature p, .feature h2, .feature h3 { color: #fff; }
.feature__cat {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #FBE3E6;
}
.feature h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.03em;
}
.feature__lede { margin: .8rem 0 0; font-size: clamp(1rem, .96rem + .4vw, 1.15rem); color: #FDEFF0; }
.feature__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.feature__facts li {
  display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline;
  border-top: 1px solid rgba(255,255,255,.34); padding-top: .55rem; font-size: .95rem;
}
.feature__facts li b { font-weight: 700; min-width: 6.5rem; }
.feature .btn {
  background: #fff; color: #9D0F20; border-color: #fff; margin-top: 1.2rem;
}
.feature .btn:hover { background: #fff; color: #7C0C19; }
.feature :where(a):focus-visible { outline-color: #fff; }

/* ---------- de vier sporen als gekleurde kaarten ---------- */
.tracks {
  display: grid; gap: var(--card-gap);
  background: transparent; border: 0; border-radius: 0; overflow: visible;
}
@media (min-width: 700px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track {
  background: var(--tint-bg, var(--paper));
  border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.track:hover { background: var(--tint-bg, var(--paper-2)); }
.track__strand { display: none; }
.track__head {
  background: var(--cat); color: var(--on-cat, var(--ink));
  padding: clamp(.9rem, 2.2vw, 1.25rem) var(--card-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.track p.track__cat { color: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.track__icon { color: inherit; }
.track__body {
  padding: var(--card-pad); display: flex; flex-direction: column; gap: .6rem; flex: 1;
}
.track h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); font-weight: 800; letter-spacing: -.022em; }
.track__go { color: var(--ink); font-weight: 700; }

/* ---------- wat we doen: vier tinte kaarten ---------- */
.offers {
  display: grid; gap: var(--card-gap);
  background: transparent; border: 0; border-radius: 0; overflow: visible;
}
@media (min-width: 720px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer {
  background: var(--tint-bg, var(--paper));
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: var(--card-pad); gap: .5rem;
}
.offer__strand { display: none; }
.offer h3 { font-weight: 800; font-size: clamp(1.2rem, 1.08rem + .55vw, 1.5rem); letter-spacing: -.022em; }

/* ---------- niets verborgen ---------- */
/* De agenda-items gingen open op :target. Nu staat alles open, altijd. */
.entry__deep, .entry:target .entry__deep { grid-template-rows: 1fr; }
.entry__deep p:first-child { margin-top: .7rem; }

/* ---------- praktische info op de detailpagina, als kaarten ---------- */
.pract-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .5rem; }
.pract-card p { margin: 0 0 .6rem; }
.pract-card p:last-child { margin-bottom: 0; }
.pract-card .note-proto { margin-top: .8rem; }

/* ---------- feiten op de detailpagina ---------- */
.facts {
  display: grid; gap: var(--card-gap); background: transparent;
  border: 0; border-radius: 0; overflow: visible;
}
.facts > div {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 1rem 1.1rem;
}
.booking { border-radius: var(--r); border-width: 2px; }

/* ---------- voet ---------- */
.footer-top {
  display: grid; gap: clamp(1.4rem, 4vw, 2.4rem);
  align-items: center; margin-bottom: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.1fr 1fr; } }
.footer-logo { width: min(340px, 72vw); height: auto; }
.footer-claim {
  font-family: var(--ff-place); font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.9rem); line-height: 1.25;
  color: #EAEDE8; margin: 0;
}
.vlag {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--paper); border-radius: var(--r);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem;
}
.vlag img { height: 160px; width: auto; }
@media (max-width: 520px) { .vlag img { height: 120px; } }
.vlag p { color: var(--ink-2); font-size: .9rem; margin: 0; max-width: 34ch; }
.site-footer .footer-strands span { width: 54px; height: 6px; }

/* De lichtste inkt van v1 (#7C857F) haalde 3.5:1 op het papier: te licht voor
   woorden. Deze variant zet hem donkerder, zodat elk grijs bijschrift AA haalt
   (5.6:1 op papier, 5.2:1 op paper-2, 5.0:1 op elke wassing). */
:root { --ink-3: #5B635F; }

/* Het grote logo staat met zijn eigen kleuren op een crème tegel: het
   woordmerk is donker en zou op de bosgrond wegvallen. Dezelfde tegel als
   die van het Vlaanderen-merk, zodat de voet één familie blijft. */
.footer-top {
  background: var(--paper); border-radius: var(--r);
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
}
.site-footer p.footer-claim { color: var(--ink); }

/* =====================================================================
   QA-ronde v2-kaarten. Vijf correcties na het nameten van de pagina's.
   ===================================================================== */

/* 1. De streng op de kaart. De wassingen zijn met opzet licht, en daardoor
   zag je de kleurcode (rood = jongeren en kampen, olijf = vormingen en
   internationaal, cyaan = scholen, magenta = vrijwilligers) op een kaart
   nauwelijks. Een lijn van vijf pixel bovenaan zet de code terug. Geen
   versiering: ze zegt tot welk spoor de kaart hoort. */
.card[class*="tint-"] { padding-top: calc(var(--card-pad) + 5px); overflow: hidden; }
.card[class*="tint-"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--cat, var(--rule-2));
}

/* 2. Een kaart met alleen lopende tekst mag niet over de volle 1050 pixel
   lopen. Vanaf ongeveer 66 tekens per regel leest het als een blok. */
.prose-card :where(p) { max-width: 64ch; }

/* 3. Twee maten in plaats van drie zodra de kolom te smal wordt voor de
   langste prijslabels. Anders brak "Meerdaagse vorming" op tablet. */
@media (min-width: 760px) and (max-width: 999px) {
  .prices.cardgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 4. Ritme-hulpjes, zodat geen enkele sectie nog een inline waarde draagt. */
.mt-section { margin-top: var(--section-gap); }
.mt-card { margin-top: var(--card-gap); }
.mt-block { margin-top: var(--block-gap); }
.steprail { list-style: none; padding: 0; }
.steprail.mt-0 { margin-top: 0; }

/* 5. De voetnootlijst stond ruimer dan het adres ernaast. Eén ritme. */
.site-footer .linklist { gap: 0; }

/* 6. Klassen voor wat eerst inline stond. */
.muted-measure { color: var(--ink-2); max-width: 46ch; }
.detail-grid--pad { padding-bottom: clamp(3rem, 8vw, 5rem); }

/* 7. De vier strengen in de voet, uit de stylesheet in plaats van uit
   vier inline kleuren. */
.footer-strands span:nth-child(1) { background: var(--brand-cyan); }
.footer-strands span:nth-child(2) { background: var(--brand-olive); }
.footer-strands span:nth-child(3) { background: var(--brand-red); }
.footer-strands span:nth-child(4) { background: var(--brand-magenta); }

/* 8. De kleurcode zegt alleen voor wie iets is. Kaarten die bij geen enkel
   spoor horen (de methodiek, de betaalstappen, de praktische info) staan op
   het crèmepapier; hun cijfer draagt de streng, de kaart niet. */
.mcard--1 { --cat-ink: var(--type-school-ink); }
.mcard--2 { --cat-ink: var(--type-vorming-ink); }
.mcard--3 { --cat-ink: var(--type-kamp-ink); }
.mcard--4 { --cat-ink: var(--type-vrijwilligers-ink); }