/* Bon Timoun — "Chemen lekòl", de weg naar school.
   Kleuren komen uit het logo (haar, shirt, rugzak, vak, broek) en uit de Haïtiaanse klas:
   gekalkte muur, groen schoolbord, bruinrode plint. */
:root{
  --kalk:#f2ebdd; --kalk2:#e8dcc4; --grond:#d8c39c;
  --inkt:#21141a; --zacht:#5b4a4f; --haar:#2e0f1e;
  --rood:#ad2129; --rooddonker:#7c0a0c;
  --groen:#5aa025; --groendonker:#2b6f10; --geel:#f0cd50;
  --blauw:#417a98; --blauwdonker:#255f7c;
  --bord:#264f48; --roze:#e8a38e; --bordlicht:#e9efe6; --plint:#6e3b36;
  --weg:clamp(44px, 9vw, 132px);
  --breed:1180px;
  --serif:"Young Serif", Georgia, serif;
  --sans:"Source Sans 3", system-ui, sans-serif;
  --hand:"Amatic SC", "Comic Sans MS", cursive;
  --wegkleur:rgba(33,20,26,.28);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--kalk);color:var(--inkt);font:400 1.125rem/1.6 var(--sans);overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--rood)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em;overflow-wrap:break-word;hyphens:manual;text-wrap:balance}
h1{font-size:clamp(2.25rem, 5.2vw, 4.6rem)}
h2{font-size:clamp(2rem, 4.2vw, 3.4rem)}
h3{font-size:clamp(1.4rem, 2.2vw, 1.9rem)}
p{margin:0 0 1em;text-wrap:pretty;hyphens:auto}
.intro{font-size:clamp(1.2rem, 1.7vw, 1.4rem);line-height:1.5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:8px;top:-60px;z-index:100;background:var(--inkt);color:var(--kalk);padding:10px 14px}
.overslaan:focus{top:8px}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}

/* knoppen: geschilderd, niet pilvormig */
.knop{display:inline-block;font:700 1.05rem/1 var(--sans);padding:.9em 1.3em;border-radius:3px;text-decoration:none;border:0;cursor:pointer}
.knop-rood{background:var(--rood);color:#fff;box-shadow:0 3px 0 var(--rooddonker)}
.knop-rood:hover{background:var(--rooddonker);color:#fff}
.knop-rood:active{transform:translateY(2px);box-shadow:0 1px 0 var(--rooddonker)}
.knop-lijn{font-weight:700;text-decoration:none;border-bottom:3px solid var(--geel);padding-bottom:2px}
.knop-lijn:hover{border-color:var(--rood);color:inherit}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;padding:12px max(16px, calc((100vw - var(--breed))/2)) 12px calc(var(--weg) + 0px);
  background:rgba(242,235,221,.94);backdrop-filter:blur(6px);border-bottom:1px solid rgba(33,20,26,.1)}
.kop-merk img{height:30px;width:auto}
.kop-nav{margin-left:auto}
.kop-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.kop-nav a{text-decoration:none;font-weight:600;font-size:1.02rem}
.kop-nav a[aria-current]{border-bottom:3px solid var(--geel)}
.kop-doneer{padding:.7em 1.1em}
.kop-menu{display:none}

/* ---------- de weg ---------- */
.weg{position:relative;padding-left:var(--weg)}
.weg::before{content:"";position:absolute;left:calc(var(--weg)/2 - 2px);top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(to bottom, var(--wegkleur) 0 16px, transparent 16px 34px);pointer-events:none}
.kolom{max-width:var(--breed);margin:0 auto;padding:0 max(16px, 3vw) 0 max(12px, 2vw)}
.sectie{padding-top:clamp(64px, 9vw, 128px);padding-bottom:clamp(64px, 9vw, 128px)}
.sectie-kop{max-width:780px;margin-bottom:clamp(32px, 5vw, 64px)}
.sectie-kop-rij{display:flex;justify-content:space-between;align-items:baseline;gap:24px;max-width:none;flex-wrap:wrap}

/* haltes: een geschilderd bordje in de berm */
.halte{position:absolute;left:0;width:var(--weg);height:0;top:clamp(64px, 9vw, 128px);z-index:2;pointer-events:none}
.halte::before{content:"";position:absolute;left:calc(var(--weg)/2 - 9px);top:-9px;width:18px;height:18px;border-radius:50%;background:var(--kalk);border:4px solid var(--inkt)}
.halte .bordje{position:absolute;left:50%;top:-58px;transform:translateX(-50%) rotate(-3deg);font:700 1.45rem/1 var(--hand);letter-spacing:.02em;
  background:var(--geel);color:var(--inkt);padding:6px 10px 4px;white-space:nowrap;box-shadow:2px 2px 0 rgba(0,0,0,.18)}
.school .halte{top:0}
.tijdlijn .halte{top:.55em}
.tijdlijn .halte .bordje{display:none}
.jaar .halte{top:.7em}
.jaar .halte .bordje{display:none}

/* ---------- hero: de gekalkte muur ---------- */
.hero{padding-top:0;min-height:calc(100svh - 55px);display:flex;flex-direction:column;--wegkleur:rgba(33,20,26,.3)}
.hero::before{top:auto;height:12%}
.muur{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:clamp(24px, 4vw, 64px);
  max-width:var(--breed);margin:0 auto;width:100%;padding:clamp(32px, 6vh, 72px) max(16px, 3vw) 0 max(12px, 2vw);position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 calc(12vh - 1px) 0;height:clamp(70px, 13vh, 130px);z-index:-1;
  background:linear-gradient(var(--roze),var(--roze)) bottom/100% 100% no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C80,4 150,10 240,6 C330,2 420,9 520,5 C640,1 720,8 820,4 C930,0 1040,9 1200,5 L1200,100 L0,100Z'/%3E%3C/svg%3E") top/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C80,4 150,10 240,6 C330,2 420,9 520,5 C640,1 720,8 820,4 C930,0 1040,9 1200,5 L1200,100 L0,100Z'/%3E%3C/svg%3E") top/100% 100% no-repeat}
.hero{position:relative;isolation:isolate}
.hero-tekst{padding-bottom:clamp(120px, 17vh, 170px);align-self:center}
.hero-plek{font:700 1.7rem/1 var(--hand);color:var(--rood);margin-bottom:.6em}
.hero h1{max-width:15ch;font-size:clamp(2.2rem, 4.6vw, 4.2rem)}
.hero-lead{font-size:clamp(1.1rem, 1.5vw, 1.3rem);max-width:36em}
.hero-acties{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:1.6em}
.hero-beeld{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0}
.hero-woordmerk{width:min(100%, 340px);margin:0 auto auto;opacity:.92}
.hero-jongen{width:clamp(130px, 13vw, 200px);aspect-ratio:236/522;margin-top:-2%;margin-bottom:-6px;position:relative;z-index:1}
.grond{height:12vh;min-height:64px;background:var(--grond);position:relative;margin-left:calc(-1 * var(--weg))}
.grond::before{content:"";position:absolute;left:calc(var(--weg)/2 - 2px);top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(to bottom, rgba(33,20,26,.35) 0 16px, transparent 16px 34px)}
.hero-kreyol{position:absolute;right:max(16px, calc((100vw - var(--breed))/2 + 16px));bottom:calc(12vh - 2.6em);margin:0;font-size:.95rem;color:var(--zacht)}
.hero-kreyol span{font:700 1.35rem/1 var(--hand);color:var(--inkt)}

/* ---------- nu ---------- */
.nu-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.foto{margin:0}
.foto img{width:100%;background:var(--kalk2)}
.foto figcaption{font-size:.95rem;color:var(--zacht);margin-top:.55em;line-height:1.4}
.nu-beeld .foto img{aspect-ratio:4/3;object-fit:cover}
.onderweg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px, 5vw, 80px);margin-top:clamp(48px, 7vw, 96px);
  padding-top:clamp(32px, 4vw, 48px);border-top:2px solid var(--inkt);align-items:start}
.citaat{margin:0;font-family:var(--serif);font-size:clamp(1.5rem, 2.4vw, 2.1rem);line-height:1.22}
.citaat p{margin-bottom:.6em}
.citaat footer{font:400 1rem/1.4 var(--sans);color:var(--zacht)}

/* ---------- scholen ---------- */
.scholen{background:var(--kalk2)}
.school{position:relative;padding-top:8px}
.school + .school{margin-top:clamp(72px, 10vw, 140px)}
.school-bord{display:inline-flex;flex-direction:column;align-items:center;background:#fbf8f1;border:5px solid var(--blauwdonker);padding:10px 22px 8px;
  margin-bottom:clamp(20px, 3vw, 36px);transform:rotate(-1.2deg);box-shadow:3px 4px 0 rgba(33,20,26,.15);text-align:center;max-width:100%}
.school-bord span{display:block;font-family:var(--hand);font-weight:700;line-height:.95}
.school-bord .b1{font-size:1.35rem;color:var(--blauwdonker)}
.school-bord .b2{font-size:clamp(2rem, 4vw, 2.9rem);color:var(--rood);letter-spacing:.01em}
.school-bord .b3{font-size:1.2rem;color:var(--inkt);border-top:3px solid var(--blauwdonker);margin-top:4px;padding-top:4px;width:100%}
.bord-blauw{border-color:var(--rood);transform:rotate(.8deg)}
.bord-blauw .b1{color:var(--rood)}.bord-blauw .b2{color:var(--blauwdonker)}.bord-blauw .b3{border-color:var(--rood)}
.bord-geel{background:var(--geel);border-color:var(--groendonker);transform:rotate(-.6deg)}
.bord-geel .b1{color:var(--groendonker)}.bord-geel .b2{color:var(--inkt)}.bord-geel .b3{border-color:var(--groendonker)}
.school-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px, 5vw, 72px);align-items:start}
.school-raster.omgekeerd{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.school-raster.omgekeerd .school-tekst{order:2}
.school-feit{font:700 1.5rem/1.1 var(--hand);color:var(--rood);margin:-.2em 0 .9em}
.school-raster .foto img{aspect-ratio:4/3;object-fit:cover}
.school-raster .foto.staand img{aspect-ratio:4/3.4}
.strook{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(10px, 1.4vw, 20px);margin-top:clamp(24px, 3vw, 40px)}
.strook .foto img{aspect-ratio:1;object-fit:cover}
.strook .foto figcaption{font-size:.9rem}

/* ---------- lessen: het schoolbord ---------- */
.bord{background:var(--bord);color:var(--bordlicht);--wegkleur:rgba(233,239,230,.4);
  background-image:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(0,0,0,.18), transparent 55%);
  border-bottom:clamp(28px, 4vw, 48px) solid var(--plint)}
.bord .halte::before{background:var(--bord);border-color:var(--bordlicht)}
.bord a{color:#fff}
.bord .foto figcaption{color:rgba(233,239,230,.75)}
.bord-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.bord h2{font-family:var(--hand);font-weight:700;font-size:clamp(2.6rem, 5vw, 4rem);letter-spacing:.02em;margin-bottom:.3em}
.krijt{list-style:none;counter-reset:w;margin:0 0 1.2em;padding:0;font:700 clamp(2.3rem, 5.4vw, 4.4rem)/1.04 var(--hand);color:#fff}
.krijt li{counter-increment:w;display:flex;gap:.35em;align-items:baseline;text-shadow:0 0 1px rgba(255,255,255,.6);
  clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.5,0,.3,1)}
.krijt li::before{content:counter(w) ".";font-size:.55em;color:var(--geel);min-width:1.3em}
.js .krijt:not(.geschreven) li{clip-path:inset(0 100% 0 0)}
.krijt.geschreven li:nth-child(2){transition-delay:.35s}.krijt.geschreven li:nth-child(3){transition-delay:.7s}
.krijt.geschreven li:nth-child(4){transition-delay:1.05s}.krijt.geschreven li:nth-child(5){transition-delay:1.4s}
.bord-video{margin:0}
.bord-video video{width:100%;aspect-ratio:9/16;max-height:68vh;object-fit:cover;background:#123;border:10px solid #8a6a4a;border-radius:2px}
.bord-video figcaption{font-size:.95rem;color:rgba(233,239,230,.75);margin-top:.6em}
.strook-bord{grid-template-columns:repeat(3, minmax(0,1fr))}
.strook-bord .foto img{aspect-ratio:4/3}

/* ---------- verhaal / tijdlijn ---------- */
.tijdlijn{list-style:none;margin:0;padding:0;max-width:880px}
.tijdlijn li{position:relative;display:grid;grid-template-columns:7.2rem minmax(0,1fr);column-gap:clamp(16px, 3vw, 40px);padding:0 0 clamp(28px, 4vw, 44px)}
.tijdlijn h3{white-space:nowrap;font-size:clamp(1.8rem, 3vw, 2.4rem);color:var(--rood);margin:0;grid-row:span 3}
.tijdlijn p{margin:0 0 .6em}
.tijdlijn .met-foto .foto{margin-top:.6em;max-width:520px}
.audio{margin:.5em 0 0}
.audio figcaption{font-size:.95rem;color:var(--zacht);margin-bottom:.3em}
.audio audio{width:min(100%, 420px)}

/* ---------- nieuws ---------- */
.nieuws{background:var(--kalk2)}
.nieuws-lijst{list-style:none;margin:0;padding:0;border-top:2px solid var(--inkt)}
.nieuws-lijst li{border-bottom:1px solid rgba(33,20,26,.25)}
.nieuws-lijst a{display:grid;grid-template-columns:clamp(96px, 16vw, 200px) minmax(0,1fr);gap:clamp(16px, 3vw, 36px);padding:clamp(16px, 2.2vw, 24px) 0;text-decoration:none;align-items:start}
.nieuws-lijst a:hover strong{color:var(--rood)}
.n-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;background:#fff}
.n-tekst{display:flex;flex-direction:column;gap:.25em}
.n-tekst time{font-size:.95rem;color:var(--zacht)}
.n-tekst strong{font:400 clamp(1.3rem, 2vw, 1.7rem)/1.15 var(--serif)}
.n-soort{font-size:.9rem;font-weight:700;color:var(--groendonker)}

/* ---------- steun ---------- */
.steun{padding-bottom:0}
.steun-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px, 6vw, 96px);align-items:start}
.steun-rugzak{display:grid;grid-template-columns:minmax(0,1fr) clamp(130px, 14vw, 190px);column-gap:clamp(16px, 3vw, 32px)}
.steun-rugzak h2,.steun-rugzak .intro{grid-column:1 / -1}
.rugzak-lijst{margin:0;border-top:2px solid var(--inkt)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"naam teller" "prijs teller";column-gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(33,20,26,.25)}
.item .naam{grid-area:naam;font-weight:600;line-height:1.25}
.item .prijs{grid-area:prijs;color:var(--zacht)}
.teller{grid-area:teller;display:flex;align-items:center;gap:4px}
.teller button{width:44px;height:44px;border:2px solid var(--inkt);background:transparent;border-radius:3px;font:700 1.4rem/1 var(--sans);cursor:pointer;color:var(--inkt)}
.teller button:hover{background:var(--geel)}
.teller output{min-width:2.2ch;text-align:center;font:400 1.5rem/1 var(--serif)}
.item.gekozen .naam{color:var(--rood)}
.totaal{margin:16px 0 0;font-size:1.2rem;display:flex;justify-content:space-between;align-items:baseline}
.totaal strong{font:400 2.4rem/1 var(--serif)}
.rugzak-beeld{grid-row:3;grid-column:2;align-self:end}
.rugzak-svg{width:100%;overflow:visible}
.rugzak-svg .in{opacity:0;transform:translateY(-60px);transition:opacity .25s, transform .45s cubic-bezier(.3,1.6,.5,1)}
.rugzak-svg .in.aan{opacity:1;transform:none}
.rugzak-svg.bol{animation:bol .45s}
.rugzak-tel{font:400 44px var(--serif);fill:var(--inkt)}
@keyframes bol{40%{transform:scale(1.06,.95)}}
.rugzak-svg{transform-origin:50% 100%}
.steun-geven h3{margin-top:0}
.geefwijze{padding:18px 0;border-top:2px solid var(--inkt)}
.geefwijze .label{font:700 1.5rem/1 var(--hand);color:var(--rood);margin-bottom:.4em}
.iban{font:400 clamp(1.4rem, 2.4vw, 1.9rem)/1.2 var(--serif);display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:.4em}
.kopieer{font:700 .95rem/1 var(--sans);padding:.55em .8em;border:2px solid var(--inkt);background:transparent;border-radius:3px;cursor:pointer;color:var(--inkt)}
.kopieer:hover{background:var(--geel)}
.omschrijving{font-style:normal;font-weight:700}
.tikkie{display:grid;grid-template-columns:minmax(0,1fr) 132px;column-gap:20px;align-items:center}
.tikkie .label{grid-column:1 / -1}
.tikkie img{grid-row:2 / 4;grid-column:2;width:132px}
.anbi{font-size:1rem;color:var(--zacht);border-top:1px solid rgba(33,20,26,.25);padding-top:14px}
.steun-geven h3 + p{margin-top:.2em}
.steun-geven > h3:not(:first-child){margin-top:1.6em}
/* de school waar het jongetje aankomt; de deur staat precies op het wegje */
.steun-school{--sh:clamp(190px, 22vw, 290px);position:relative;height:calc(var(--sh) + 26px);margin-top:clamp(56px, 8vw, 110px);margin-left:calc(-1 * var(--weg));overflow:clip}
.steun-school::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:var(--grond)}
.school-svg{position:absolute;bottom:26px;left:calc(var(--weg)/2 - var(--sh) * .4);height:var(--sh);width:auto;max-width:none;overflow:visible}
.school-tekst1{font:700 24px var(--hand);fill:#255f7c}
.school-tekst2{font:700 34px var(--hand);fill:#ad2129}
.school-deur{position:absolute;left:calc(var(--weg)/2);bottom:calc(26px + var(--sh) * .02);width:clamp(30px, 4.4vw, 62px);aspect-ratio:236/522;transform:translateX(-50%)}
/* ---------- subpagina's ---------- */
.subkop{padding-bottom:clamp(24px, 4vw, 48px)}
.subkop h1{max-width:18ch}
.subkop .intro{max-width:42em}
.nieuws-archief{padding-top:0}
.jaar{position:relative}
.jaar + .jaar{margin-top:clamp(40px, 6vw, 72px)}
.jaar h2{font-size:clamp(1.8rem, 3vw, 2.4rem);color:var(--rood);margin-bottom:.4em}
.smal{max-width:760px}
.artikel time{color:var(--zacht)}
.artikel h1{font-size:clamp(2rem, 4vw, 3.2rem);margin:.2em 0 .8em}
.artikel h2{font-size:clamp(1.4rem, 2.2vw, 1.8rem);margin-top:1.4em}
.artikel .foto{margin:1.6em 0}
.artikel .foto img{max-height:80vh;width:auto;margin:0 auto}
.artikel ul{padding-left:1.2em}.artikel li{margin-bottom:.5em}
.terug a{font-weight:700;text-decoration:none;border-bottom:3px solid var(--geel)}
.bijlage a{font-weight:700;color:var(--groendonker)}
.artikel-steun{margin-top:2.5em}
.stichting-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, 5vw, 80px)}
.citaat-groot{font:400 clamp(1.4rem, 2.2vw, 1.9rem)/1.3 var(--serif)}
.bestuur{border-collapse:collapse;width:100%;max-width:820px;border-top:2px solid var(--inkt)}
.bestuur th,.bestuur td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid rgba(33,20,26,.25);vertical-align:top}
.bestuur th{font:400 1.3rem/1.2 var(--serif)}
.bestuur th span{display:block;font:400 .95rem/1.4 var(--sans);color:var(--zacht);margin-top:.2em}
.bestuur td{white-space:nowrap}
.klein{font-size:1rem;color:var(--zacht);margin-top:1em}
.gegevens{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 32px;margin:0;border-top:2px solid var(--inkt);padding-top:16px;max-width:820px}
.gegevens dt{font-weight:700}.gegevens dd{margin:0;overflow-wrap:anywhere}
.docs{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(24px, 4vw, 56px)}
.doc-groep h3{font-size:1.5rem;border-bottom:2px solid var(--inkt);padding-bottom:.4em;margin-bottom:0}
.doc-groep ul{list-style:none;margin:0;padding:0}
.doc-groep a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(33,20,26,.25);text-decoration:none;font-weight:600}
.doc-meta{font-weight:400;color:var(--zacht);font-size:.95rem;white-space:nowrap}

/* ---------- voet ---------- */
.voet{background:#15303b;color:var(--kalk);padding:clamp(56px, 7vw, 96px) 0 32px calc(var(--weg))}
.voet-binnen{max-width:var(--breed);margin:0 auto;padding:0 max(16px, 3vw) 0 max(12px, 2vw)}
.voet a{color:var(--kalk)}.voet a:hover{color:var(--geel)}
.voet-doel{font:400 clamp(1.3rem, 2.2vw, 1.8rem)/1.3 var(--serif);max-width:34em;margin-bottom:clamp(36px, 5vw, 64px)}
.voet-kolommen{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:28px}
.voet h2{font:700 1.6rem/1 var(--hand);color:var(--geel);margin-bottom:.5em;letter-spacing:.03em}
.voet p{font-size:1rem}
.voet-klein{display:flex;align-items:center;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid rgba(242,235,221,.2);font-size:.9rem;color:rgba(242,235,221,.7)}
.voet-merk{width:78px;filter:invert(1) sepia(.2)}
.loper{filter:drop-shadow(0 0 .8px rgba(242,235,221,.9))}

/* ---------- het jongetje dat meeloopt ---------- */
.loper-doel{position:fixed;left:calc(var(--weg)/2);bottom:clamp(14px, 5vh, 56px);width:clamp(30px, 4.4vw, 62px);aspect-ratio:236/522;transform:translateX(-50%);pointer-events:none;visibility:hidden}
.loper{position:fixed;left:0;top:0;z-index:30;width:clamp(30px, 4.4vw, 62px);aspect-ratio:236/522;padding:0;margin:0;border:0;background:none;cursor:pointer;
  transform-origin:0 0;will-change:transform;-webkit-tap-highlight-color:transparent}
.loper:focus-visible{outline-offset:6px}
.no-js .loper{display:none}
.jongen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jongen.voor{visibility:hidden}
.loper.naar-voren .jongen.achter{visibility:hidden}
.loper.naar-voren .jongen.voor{visibility:visible}
.jongen *{transform-box:view-box}
.jongen .been-l,.jongen .been-r{transform-origin:0 0}
.jongen .lijf,.jongen .hoofd{transform-origin:115px 500px}
.jongen .arm-r{transform-origin:200px 246px}
.loper.loopt .been-l{animation:stap .46s infinite linear}
.loper.loopt .been-r{animation:stap .46s infinite linear -.23s}
.loper.loopt .lijf,.loper.loopt .hoofd{animation:wieg .46s infinite ease-in-out}
.loper.loopt .hoofd{animation-name:wieg-hoofd}
.loper:not(.loopt) .hoofd{animation:adem 3.2s infinite ease-in-out}
.loper.zwaait .jongen.voor .arm-r{animation:zwaai .38s 6 ease-in-out alternate}
.loper.hup{animation:hup .5s cubic-bezier(.3,.8,.4,1)}
.loper.draait .jongen{animation:draai .26s ease-in-out}
.loper .ogen{transform-origin:112px 136px;animation:knipper 5s infinite}
@keyframes stap{0%,100%{transform:translateY(0)}25%{transform:translateY(-16px)}50%{transform:translateY(0)}}
@keyframes wieg{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-6px)}}
@keyframes wieg-hoofd{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}
@keyframes adem{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes zwaai{0%{transform:rotate(-112deg)}100%{transform:rotate(-150deg)}}
@keyframes hup{40%{translate:0 -22%}70%{translate:0 0}85%{translate:0 -4%}}
@keyframes draai{50%{transform:scaleX(.08)}}
@keyframes knipper{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.loper-zegt{position:absolute;left:105%;top:-12%;font:700 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--hand);color:var(--rood);white-space:nowrap;opacity:0;transform:translateY(8px) rotate(-6deg);
  transition:opacity .2s, transform .3s;pointer-events:none;text-shadow:0 0 6px var(--kalk), 0 0 2px var(--kalk)}
.loper.zegt .loper-zegt{opacity:1;transform:translateY(0) rotate(-6deg)}
.loper.groot .loper-zegt{font-size:.5em}

/* ---------- tablet ---------- */
@media (max-width: 1080px){
  .kop-nav ul{gap:18px}
  .voet-kolommen{grid-template-columns:repeat(2, minmax(0,1fr))}
  .strook{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 900px){
  .kop{padding-left:calc(var(--weg) - 4px)}
  .kop-nav{position:fixed;inset:55px 0 auto 0;background:var(--kalk);border-bottom:2px solid var(--inkt);padding:8px calc(var(--weg)) 20px;display:none}
  .kop-nav.open{display:block}
  .kop-nav ul{flex-direction:column;gap:0}
  .kop-nav a{display:block;padding:14px 0;font:400 1.6rem/1 var(--serif);border-bottom:1px solid rgba(33,20,26,.15)}
  .kop-nav a[aria-current]{border-bottom:1px solid rgba(33,20,26,.15);color:var(--rood)}
  .kop-doneer{margin-left:auto}
  .kop-menu{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--inkt);background:transparent;border-radius:3px;cursor:pointer;padding:0}
  .kop-menu span:first-child{width:20px;height:2px;background:var(--inkt);box-shadow:0 -6px 0 var(--inkt), 0 6px 0 var(--inkt)}
  .kop-menu[aria-expanded="true"] span:first-child{box-shadow:none;transform:rotate(45deg)}
  .kop-menu[aria-expanded="true"] span:first-child::after{content:"";display:block;width:20px;height:2px;background:var(--inkt);transform:rotate(-90deg)}
  .muur{grid-template-columns:1fr;align-items:start}
  .muur{padding-top:20px}
  .hero-tekst{padding-bottom:28px;order:2}
  .hero-beeld{order:1;flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:clamp(12px, 5vw, 40px);min-height:0}
  .hero-woordmerk{width:clamp(130px, 38vw, 260px);margin:0 0 auto}
  .hero-jongen{width:clamp(64px, 17vw, 120px);margin:0 0 -4px}
  .hero::after{bottom:auto;top:calc(20px + clamp(64px,17vw,120px)*2.21 - clamp(40px,11vw,70px));height:clamp(40px,11vw,70px)}
  .hero-plek{font-size:1.4rem}
  .hero-kreyol{display:none}
  .nu-raster,.onderweg,.school-raster,.school-raster.omgekeerd,.bord-raster,.steun-raster,.stichting-raster{grid-template-columns:minmax(0,1fr)}
  .school-raster.omgekeerd .school-tekst{order:0}
  .bord-video{max-width:360px}
  .docs{grid-template-columns:minmax(0,1fr)}
}
/* ---------- telefoon ---------- */
@media (max-width: 600px){
  body{font-size:1.06rem}
  .kop{gap:10px}
  .kop-merk img{height:22px}
  .halte .bordje{display:none}
  .halte::before{width:14px;height:14px;left:calc(var(--weg)/2 - 7px);top:-7px;border-width:3px}
  .hero-acties{gap:18px}
  .strook-bord{grid-template-columns:repeat(2, minmax(0,1fr))}
  .strook-bord .foto:last-child{display:none}
  .tijdlijn li{grid-template-columns:minmax(0,1fr)}
  .tijdlijn h3{grid-row:auto;margin-bottom:.2em}
  .steun-rugzak{grid-template-columns:minmax(0,1fr) 96px}
  .rugzak-beeld{grid-row:auto;grid-column:2;grid-row:3;align-self:start;margin-top:12px}
  .rugzak-lijst{grid-column:1 / -1}
  .rugzak-beeld{grid-column:1 / -1;width:120px;justify-self:end}
  .tikkie{grid-template-columns:minmax(0,1fr)}
  .tikkie img{display:none}
  .voet-kolommen{grid-template-columns:minmax(0,1fr)}
  .bestuur td{white-space:normal}
  .gegevens{grid-template-columns:minmax(0,1fr);gap:2px}
  .gegevens dd{margin-bottom:10px}
  .doc-groep a{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion: reduce){
  .loper .jongen *,.loper,.loper .jongen{animation:none !important}
  .krijt li{transition:none}
  .rugzak-svg .in{transition:opacity .2s}
}
@media (max-width: 420px){
  .nieuws-lijst a{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .n-tekst strong{font-size:1.2rem;hyphens:auto}
  .bestuur,.bestuur tbody,.bestuur tr,.bestuur th,.bestuur td{display:block}
  .bestuur th{border-bottom:0;padding-bottom:2px}
  .bestuur td{padding-top:0;color:var(--rood)}
}