/* Zelf gehost, zodat de pagina geen enkel verzoek naar een andere partij doet.
   Archivo en Bodoni Moda staan onder de SIL Open Font License 1.1.
   Het zijn variabele fonts: één bestand dekt het hele gewichtsbereik. */

@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/bodoni-moda-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/bodoni-moda-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/bodoni-moda-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/bodoni-moda-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   Feminine Recharge Retreat
   Vormtaal komt uit de eigen social-set: 4:5-panelen, verticaal gezette
   titel, cirkelstempel over beeld heen, kleurblokken, beeld dat van de
   rand afloopt, en een extreem verschil tussen haarfijne Didone en
   zware grotesk. Geen gecentreerde kolom, geen sticky balk, geen kaartjes.
   ========================================================================= */

:root{
  --cream:#FAF8E2;
  --bone:#F2EED2;
  --forest:#202614;      /* uit de hibiscus-post, nu alleen nog reserve */
  --sage:#E4EBE3;        /* zacht mintgroen: de rustige vlakken */
  --rust:linear-gradient(158deg,#E7EEE5 0%,#DFE9E8 54%,#D9E4EA 100%);
  --rust-zacht:#55655B;  /* gedempte tekst op die vlakken */
  --rust-lijn:rgba(28,23,16,.15);
  --ink:#1C1710;
  --brown:#443521;
  --coral:#FF3131;       /* alleen groot */
  --coral-solid:#C42A1C; /* dragend voor witte tekst */
  --line:rgba(28,23,16,.18);
  --line-light:rgba(250,248,226,.22);

  --serif:"Bodoni Moda","Didot",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --spine:92px;          /* ruimte voor de verticale titel links */
  --edge:clamp(20px,4.5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}

/* ---------- het raster --------------------------------------------------
   Twaalf kolommen over de volle breedte. Blokken staan bewust niet
   gecentreerd; ze pakken kolommen. Beeld mag de rand uit lopen.        */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(12px,2vw,28px);
  padding-left:calc(var(--spine) + var(--edge));
  padding-right:var(--edge);
}
.bleed-r{margin-right:calc(var(--edge) * -1)}
.bleed-l{margin-left:calc(var(--spine) * -1 - var(--edge))}

/* kolomposities */
.c1-6{grid-column:1/7}   .c1-7{grid-column:1/8}   .c1-5{grid-column:1/6}
.c2-7{grid-column:2/8}   .c3-9{grid-column:3/10}  .c4-11{grid-column:4/12}
.c7-13{grid-column:7/13} .c8-13{grid-column:8/13} .c6-13{grid-column:6/13}
.c1-13{grid-column:1/13} .c2-9{grid-column:2/10}  .c5-13{grid-column:5/13}

/* ---------- de verticale titel: vervangt de menubalk ------------------- */
.spine{
  position:fixed;left:0;top:0;bottom:0;width:var(--spine);z-index:40;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:var(--edge);pointer-events:none;
  mix-blend-mode:normal;
}
.spine a{
  pointer-events:auto;text-decoration:none;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--serif);font-size:15px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--brown);white-space:nowrap;
}
.spine a b{font-family:var(--sans);font-weight:600;letter-spacing:.22em;color:var(--ink)}
.spine.on-dark a{color:rgba(250,248,226,.8)}
.spine.on-dark a b{color:var(--cream)}

/* ---------- het stempel: vervangt de knop rechtsboven ------------------ */
.stampcta{
  position:fixed;right:var(--edge);bottom:var(--edge);z-index:45;
  width:128px;height:128px;border-radius:50%;
  background:var(--coral-solid);color:#fff;text-decoration:none;
  display:grid;place-content:center;text-align:center;
  font-family:var(--serif);font-size:17px;line-height:1.25;
  box-shadow:0 6px 30px rgba(28,23,16,.22);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s;
}
.stampcta span{display:block;font-family:var(--sans);font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;margin-top:5px;opacity:.85}
.stampcta:hover{transform:scale(1.06) rotate(-4deg);background:#a92316}

/* ---------- typografie: alleen heel groot of heel klein ---------------- */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.7rem,6.4vw,6.2rem);line-height:.88;letter-spacing:-.01em;
  margin:0;text-wrap:balance;
}
.display .thin{display:block;color:var(--brown)}
.display .fat{
  display:block;font-family:var(--sans);font-weight:500;
  letter-spacing:-.01em;color:var(--ink);
  font-size:clamp(2.9rem,7.4vw,7.2rem);
}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.012em;
  margin:0 0 .35em;color:var(--brown);text-wrap:balance;
}
h2 em{font-style:italic;color:var(--ink)}
.label{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--coral-solid);
  margin:0 0 22px;
}
.label.pale{color:var(--coral-solid)}   /* de rustige vlakken zijn licht geworden */
.lede{font-size:1.12rem;line-height:1.62;max-width:46ch;color:#4A3D30}
.italic{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.32;color:var(--brown)}

/* ---------- hero: naam bovenaan, beeld loopt rechts en boven de rand uit -- */
.hero{padding-top:clamp(30px,5vh,64px);padding-bottom:clamp(50px,8vh,110px);
  align-items:start;row-gap:0}
.hero-type{grid-column:1/7;grid-row:1;position:relative;z-index:2}
.hero-sub{grid-column:1/7;grid-row:2;margin-top:30px}
.hero-shot{
  grid-column:7/13;grid-row:1/3;position:relative;align-self:start;
  margin-right:calc(var(--edge) * -1);
  margin-top:calc(clamp(30px,5vh,64px) * -1);
}
.hero-shot img{width:100%;height:clamp(420px,78vh,760px);object-fit:cover;object-position:54% 24%}
.hero-stamp{
  position:absolute;left:-64px;top:36%;width:148px;height:148px;border-radius:50%;
  background:var(--cream);display:grid;place-content:center;text-align:center;
  font-family:var(--serif);font-size:16px;line-height:1.3;color:var(--brown);
}
.jump{display:flex;flex-wrap:wrap;gap:4px 22px;margin:32px 0 0;padding:0;list-style:none}
.jump a{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:#6B5A48;padding:6px 0;border-bottom:1px solid transparent;
}
.jump a:hover{color:var(--ink);border-bottom-color:var(--coral)}

/* ---------- feitenregel: dun, breed, zonder doos ------------------------ */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:18px;padding-bottom:18px;margin-top:0}
.facts ul{grid-column:1/13;display:flex;flex-wrap:wrap;gap:8px 44px;
  margin:0;padding:0;list-style:none;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6B5A48}
.facts b{color:var(--ink);font-weight:600}

/* ---------- herkenning: grote lijst, beeld loopt links de rand uit ----- */
.herken{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(60px,9vh,120px);
  row-gap:44px;align-items:center}
.herken-shot{grid-column:1/5;margin-left:calc(var(--spine) * -1 - var(--edge))}
.herken-shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.herken-body{grid-column:6/13}
.feels{list-style:none;margin:0 0 44px;padding:0}
.feels li{
  font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1.35;
  padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);
}
.feels li:first-child{border-top:1px solid var(--line)}
.turn{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.22;color:var(--coral-solid);
  margin:0;max-width:20ch}

/* ---------- uitspraak: tekst op cream, beeld als smalle strook rechts -- */
.claim{padding-top:clamp(60px,9vh,120px);padding-bottom:clamp(60px,9vh,120px);
  background:var(--bone);align-items:center;row-gap:32px}
.claim-text{grid-column:1/8}
.claim-text p{font-family:var(--serif);font-size:clamp(1.7rem,4vw,3.2rem);
  line-height:1.14;color:var(--brown);margin:0 0 .5em;text-wrap:balance}
.claim-text .kicker{font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--coral-solid);margin:24px 0 0}
.claim-shot{grid-column:9/13;margin-right:calc(var(--edge) * -1);align-self:stretch}
.claim-shot img{width:100%;height:100%;min-height:340px;object-fit:cover;filter:grayscale(.15)}

/* ---------- programma: filmstrip van 4:5-panelen ----------------------- */
.programma{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(50px,8vh,100px)}
.programma-head{grid-column:1/9}
.strip-wrap{margin-top:48px}
.strip{
  display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
/* Snappen negeert padding op een scrollcontainer, dus de marges links en
   rechts zijn echte flex-items. */
.strip::before,.strip::after{content:"";flex:0 0 var(--edge)}
.strip::before{flex-basis:calc(var(--spine) + var(--edge))}
.strip:focus-visible{outline:2px solid var(--coral-solid);outline-offset:4px}
.panel{
  flex:0 0 clamp(258px,25vw,340px);aspect-ratio:4/5;scroll-snap-align:start;
  padding:30px 28px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--bone);
}
.panel.alt{background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.panel.dark{background:var(--sage);color:var(--ink)}
.panel.hot{background:var(--coral-solid);color:#fff}
.panel.shot{padding:0}
.panel.shot img{width:100%;height:100%;object-fit:cover}
.panel h3{font-family:var(--sans);font-weight:700;font-size:1.15rem;
  letter-spacing:-.015em;margin:0 0 10px;line-height:1.15}
.panel p{font-size:.92rem;line-height:1.5;margin:0;color:inherit;opacity:.86}
.strip-hint{
  grid-column:1/13;margin-top:18px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#8A7A66;display:flex;align-items:center;gap:10px
}
.strip-hint::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- ritme: drie blokken die trapsgewijs zakken ----------------- */
.ritme{padding-top:clamp(60px,9vh,120px);padding-bottom:clamp(70px,11vh,140px);row-gap:0}
.ritme-head{grid-column:1/8;margin-bottom:44px}
.day{padding:30px 30px 34px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.day.d1{grid-column:1/6}
.day.d2{grid-column:5/10;margin-top:64px}
.day.d3{grid-column:8/13;margin-top:128px;background:var(--sage);color:var(--ink);box-shadow:none}
.day .clock{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--coral-solid);margin:0 0 12px}
.day.d3 .clock{color:var(--coral-solid)}
.day .when{font-family:var(--serif);font-size:1.9rem;line-height:1;margin:0 0 12px}
.day p:last-child{font-size:.95rem;margin:0;opacity:.85}
.footnote{grid-column:1/9;margin-top:56px;font-size:12px;letter-spacing:.1em;color:#8A7A66}

/* ---------- afspraken: dun gezette regels, geen kaarten ---------------- */
.veilig{background:var(--rust);color:var(--ink);
  padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(70px,12vh,150px);row-gap:40px}
.veilig h2{color:var(--brown)}
.veilig h2 em{color:var(--coral-solid)}
.veilig-head{grid-column:1/8}
.veilig-head .lede{color:var(--rust-zacht)}
.pledges{grid-column:1/8;list-style:none;margin:0;padding:0}
.pledges li{padding:22px 0;border-top:1px solid var(--rust-lijn)}
.pledges li:last-child{border-bottom:1px solid var(--rust-lijn)}
.pledges b{display:block;font-family:var(--serif);font-weight:400;
  font-size:1.5rem;line-height:1.15;margin-bottom:7px}
.pledges span{font-size:.95rem;color:var(--rust-zacht)}
.veilig-shot{grid-column:9/13;margin-right:calc(var(--edge) * -1);align-self:stretch;
  display:flex;flex-direction:column}
/* height:auto haalt de maat uit het height-attribuut in de HTML weg; anders
   werd de foto tot een smalle strook uitgerekt */
.veilig-shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.veilig-shot figcaption{margin-top:14px;font-size:.85rem;font-style:italic;
  color:var(--rust-zacht);padding-right:var(--edge)}

/* ---------- docenten: collage met ongelijke maten en hoogtes ----------- */
.docenten{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(70px,12vh,150px);row-gap:0}
.docenten-head{grid-column:1/8;margin-bottom:52px}
.teacher img{width:100%;object-fit:cover;margin-bottom:20px}
.teacher.t1{grid-column:1/5}
.teacher.t1 img{aspect-ratio:3/4}
.teacher.t2{grid-column:6/10;margin-top:74px}
.teacher.t2 img{aspect-ratio:4/5}
.teacher.t3{grid-column:10/13;margin-top:26px}
.teacher.t3 img{aspect-ratio:3/4}
.teacher .who{font-family:var(--serif);font-size:1.55rem;line-height:1.05;margin:0 0 4px}
.teacher .role{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral-solid);margin:0 0 16px}
.teacher p{font-size:.93rem;line-height:1.55;color:#4A3D30;margin:0 0 .8em}

/* ---------- praktisch: prijs enorm, rest klein ------------------------- */
.praktisch{background:var(--bone);
  padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(70px,12vh,150px);row-gap:48px}
.prijs{grid-column:1/6}
.prijs .amount{font-family:var(--serif);font-size:clamp(5rem,14vw,12rem);
  line-height:.8;margin:0;color:var(--brown);letter-spacing:-.03em}
.prijs .per{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:#8A7A66;margin:18px 0 30px}
.prijs ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.prijs li{padding:9px 0;border-top:1px solid var(--line)}
.dl{grid-column:7/13;margin:0;display:grid;grid-template-columns:auto 1fr}
.dl dt{padding:15px 26px 15px 0;border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8A7A66;white-space:nowrap}
.dl dd{padding:15px 0;border-top:1px solid var(--line);margin:0;font-size:1rem}
.dl dd a{color:var(--coral-solid);text-underline-offset:3px}

/* ---------- losse melding (formulier kwam er niet doorheen) ------------ */
.melding{max-width:34em;margin:14vh auto;padding:0 var(--edge);font-family:var(--sans)}
.melding h1{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1.1;
  margin:0 0 .5em;color:var(--brown)}
.melding p{line-height:1.62;color:#4A3D30}
.melding a{color:var(--coral-solid);text-underline-offset:3px}

/* ---------- vragen: vraag in de kantlijn, antwoord open ---------------- */
.vragen{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(50px,8vh,100px);row-gap:0}
.vragen-head{grid-column:1/9;margin-bottom:56px}
.qa{grid-column:1/13;display:grid;grid-template-columns:minmax(180px,3.2fr) 7fr;
  column-gap:clamp(20px,4vw,64px);padding-top:26px;padding-bottom:26px;
  border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa dt{font-family:var(--serif);font-size:1.28rem;line-height:1.16;
  color:var(--coral-solid);margin:0}
.qa dd{margin:0;font-size:1rem;line-height:1.62;color:#4A3D30;max-width:62ch}
.qa dd p:last-child{margin-bottom:0}

/* ---------- contact ---------------------------------------------------- */
.contact{background:var(--rust);color:var(--ink);
  padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(70px,12vh,150px);row-gap:52px}
.contact h2{color:var(--brown)}
.contact h2 em{color:var(--coral-solid)}
.contact-head{grid-column:1/8}
.contact-head .lede{color:var(--rust-zacht)}
form{grid-column:1/7;display:grid;gap:16px}
.choices{display:grid;gap:8px;margin-bottom:8px}
.choice{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:14px 16px;border:1px solid var(--rust-lijn);font-size:.95rem}
.choice:has(input:checked){border-color:var(--coral-solid);background:rgba(196,42,28,.07)}
.choice input{margin:3px 0 0;accent-color:var(--coral-solid);flex:none}
.choice small{display:block;color:var(--rust-zacht);font-size:.85rem;margin-top:2px}
.field label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust-zacht);margin-bottom:8px}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rust-lijn);padding:10px 0;border-radius:0}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--coral-solid)}
.field input::placeholder,.field textarea::placeholder{color:rgba(28,23,16,.34)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.85rem;
  color:var(--rust-zacht);margin-top:6px}
.consent input{margin:3px 0 0;accent-color:var(--coral-solid);flex:none}
.privacynote{font-size:.84rem;line-height:1.5;color:var(--rust-zacht);
  margin:2px 0 6px;max-width:52ch;font-style:italic}
.send{
  justify-self:start;background:var(--coral-solid);color:#fff;border:0;
  font:inherit;font-weight:600;font-size:.92rem;letter-spacing:.04em;
  padding:15px 34px;cursor:pointer;transition:background .2s}
.send:hover{background:#a92316}
.formstatus{display:none;font-size:.94rem;padding:14px 0;border-top:1px solid var(--rust-lijn)}
.formstatus.ok{display:block}
.aside{grid-column:8/13}
.aside img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:28px}
.direct{list-style:none;margin:0 0 28px;padding:0}
.direct li{padding:14px 0;border-top:1px solid var(--rust-lijn)}
.direct .k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust-zacht);margin-bottom:3px}
.direct .v{font-size:1.05rem;text-decoration:none}
.direct a:hover .v{color:var(--coral-solid)}
.aside .note{font-size:.9rem;color:var(--rust-zacht)}

/* ---------- voet -------------------------------------------------------- */
footer{background:var(--rust);color:var(--rust-zacht);
  padding-bottom:clamp(40px,6vh,80px);font-size:.86rem}
.foot{grid-column:1/13;border-top:1px solid var(--rust-lijn);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between}
footer a{color:var(--brown)}

/* ---------- focus & toegankelijkheid ------------------------------------ */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--coral);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--coral-solid);color:#fff;
  padding:10px 18px;z-index:100}

/* ---------- rustig binnenkomen (mag falen zonder schade) ---------------- */
html.js .rise{opacity:0;transform:translateY(16px)}
html.js .rise.in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rise,html.js .rise.in{opacity:1;transform:none;transition:none}
  .stampcta{transition:none}
}

/* ---------- smaller: raster valt terug, spine verdwijnt ----------------- */
@media(min-width:861px){
  .veilig-shot img{flex:1;min-height:0;aspect-ratio:auto}
}
@media(max-width:1080px){
  :root{--spine:0px}
  .spine{display:none}
  .grid{padding-left:var(--edge)}
  .bleed-l{margin-left:calc(var(--edge) * -1)}
  .strip{padding-left:var(--edge)}
  .hero-type,.hero-sub{grid-column:1/8}
  .hero-shot{grid-column:8/13}
  .herken-shot{grid-column:1/6}
  .herken-body{grid-column:7/13}
  .teacher.t1{grid-column:1/5}
  .teacher.t2{grid-column:5/9;margin-top:56px}
  .teacher.t3{grid-column:9/13;margin-top:20px}
}
@media(max-width:860px){
  body{font-size:17px}
  .grid{grid-template-columns:repeat(6,1fr)}
  .hero{padding-top:34px;row-gap:30px}
  .hero-type,.hero-sub,.hero-shot,.facts ul,.claim-text,.claim-shot,
  .herken-shot,.herken-body,.programma-head,.ritme-head,.veilig-head,
  .pledges,.veilig-shot,.docenten-head,.prijs,.dl,.vragen-head,
  .contact-head,form,.aside,.foot,.footnote,.strip-hint{grid-column:1/7}
  .hero-shot{grid-row:auto;margin-top:0}
  .hero-shot img{aspect-ratio:4/5}
  .hero-stamp{left:16px;right:auto;top:16px;width:108px;height:108px;font-size:13px}
  .claim-shot{margin-right:calc(var(--edge) * -1);margin-left:calc(var(--edge) * -1)}
  .claim-shot img{min-height:220px;aspect-ratio:16/9;height:auto}
  .herken-shot{margin-right:calc(var(--edge) * -1)}
  .day.d1,.day.d2,.day.d3{grid-column:1/7;margin-top:0}
  .day.d2,.day.d3{margin-top:2px}
  .teacher.t1,.teacher.t2,.teacher.t3{grid-column:1/7;margin-top:48px}
  .veilig-shot{margin-top:44px}
  .qa{grid-column:1/7;grid-template-columns:1fr;row-gap:12px}
  .aside{margin-top:20px}
  .panel{flex-basis:min(78vw,320px)}
  .stampcta{width:96px;height:96px;font-size:14px;right:16px;bottom:16px}
  .stampcta span{font-size:8.5px;letter-spacing:.18em}
}