@charset "utf-8";

/* ==========================================================================
   Domburg Home — voorstel v7 (dbhome/v7)
   Vier hero's die voortbouwen op de huidige site: het huisthema is hier het
   uitgangspunt en niet iets om te ontwijken. Zeven van de acht kleurtokens
   van domburghome.eu komen letterlijk terug; wat NIET meekomt zijn de pillen
   van 999px, de kaartradius van 20px en de schaduw van 60px blur onder elk
   blok. Dat drietal is wat de huidige site vooral gedateerd laat ogen.

   Namespacing: elke versiespecifieke regel draagt `.vN-` of `#version-vN`.
   De poort leidt daaruit af welke regel bij welke versie hoort en telt radii,
   schaduwen en letterfamilies PER VERSIE. Een gedeelde regel telt bij alle
   vier tegelijk mee, dus in het gedeelde deel staat bewust geen font-family,
   radius of schaduw behalve de focusring.
   ========================================================================== */

/* ------------------------------------------------------------- letters -- */

@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/gloock-400.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/sora-400.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/sora-800.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-garamond-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorant-garamond-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/cormorant-garamond-700.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jost-500.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/jost-700.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/quicksand-400.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/quicksand-500.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/quicksand-700.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/geist-mono-400.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/geist-mono-500.woff2') format('woff2')}

/* -------------------------------------------------------------- tokens -- */

:root{
  --u: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u6: 48px;
  --u8: 64px;
  --u12: 96px;

  /* Drie radii, drie schaduwen. Meer blokkeert, en de focusring telt mee als
     schaduw — daarom staat hij hier als token en verwijst elke regel met
     var(), zodat de poort één string ziet in plaats van tien. */
  --r-a: 4px;
  --r-b: 16px;
  --r-c: 999px;
  --sh-a: 0 4px 12px rgb(12 20 32 / .22);
  --sh-b: 0 30px 60px -28px rgb(12 20 32 / .5);
  --sh-ring: 0 0 0 6px var(--ring2);

  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 19px;
  --fs-xl: 23px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;

  /* Eén bewegingstaal: twee curven, vier duren. Nooit ease-in op UI — die
     begint traag en eindigt snel, dus het traagste stuk valt precies waar je
     kijkt. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --d-1: 140ms;
  --d-2: 240ms;
  --d-3: 640ms;
  --d-4: 1100ms;

  --maat: 1240px;
}

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

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

html{ -webkit-text-size-adjust: 100% }

/* Geen overflow-x: hidden op html of body — dat schakelt de overflowpoort
   stil uit in plaats van de oorzaak op te lossen. */
body{
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: var(--fs-m);
  line-height: 1.55;
  background: var(--body-veld, #0E1B2C);
}

/* `figure` krijgt van de UA-stylesheet margin: 1em 40px; met 16px
   sectiepadding op 320 begint een beeld dan op 56px en schuift de pagina
   opzij. `dl`, `dd` en `blockquote` hebben dezelfde val. */
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol{ margin: 0; padding: 0 }
ul, ol{ list-style: none }

/* Een CSS aspect-ratio op een <img> doet niets zolang height niet auto is, en
   de width/height-attributen van de responsive ladder tellen als presentational
   hint precies op die height. */
img, video{ display: block; max-width: 100%; height: auto }

button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
a{ color: inherit }
summary{ cursor: pointer; list-style: none }
summary::-webkit-details-marker{ display: none }

/* Eén focusring zonder specificiteit, als dubbele ring: een enkele
   currentColor-ring verdwijnt juist op gevulde knoppen, want daar is de
   ringkleur de tekstkleur van de knop. */
:where(a, button, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--ring1);
  outline-offset: 3px;
  box-shadow: var(--sh-ring);
  border-radius: var(--r-a);
}

.skip{
  position: absolute;
  left: var(--u2);
  top: var(--u2);
  z-index: 60;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-a);
  /* Verplaatsen met transform, niet met `top`: die laatste herberekent de
     lay-out per frame in plaats van op de compositor te draaien. */
  transform: translateY(-320%);
  transition: transform var(--d-2) var(--ease);
}
.skip:focus{ transform: translateY(0) }

/* ------------------------------------------------------- versieromp ----- */

/* --kop-h staat op de ROMP en niet op .kop: stond hij op .kop, dan kan .hero
   hem niet zien, valt de calc() weg als ongeldig en heeft de hero geen
   min-height meer, waarna de voettekst het eerste scherm in kruipt. */
.ver{ --kop-h: 76px; min-height: 100svh; display: flex; flex-direction: column }
.ver > main{ flex: 1; display: flex; flex-direction: column }
.ver[hidden]{ display: none }

.hero{
  position: relative;
  flex: 1;
  min-height: calc(100svh - var(--kop-h));
  overflow: clip;
}

.kop{
  position: relative;
  z-index: 20;
  height: var(--kop-h);
  display: flex;
  align-items: center;
  gap: var(--u3);
  padding: 0 var(--u3);
  /* nowrap: merk, menu en knop passen op 390 niet samen op één regel; de knop
     zakt dan naar een tweede rij en de kop wordt stil twee lagen hoog. */
  flex-wrap: nowrap;
}
.merk{ display: flex; align-items: center; flex: 0 0 auto; text-decoration: none }
.merk img{ width: 168px; height: 71px; object-fit: contain; object-position: left center }

/* Het woordmerk is donkerblauw met een gele zon. Op de twee donkere velden
   verdwijnt "Domburg" letterlijk in de achtergrond: geen enkele check ziet dat,
   want contrast wordt op tekst gemeten en dit is een PNG. Een omgekeerde,
   eenkleurige toepassing is de standaardoplossing voor een mark op een donker
   vlak; het merk wordt hier niet hertekend, alleen omgekeerd. */
.v1-kop .merk img,
.v2-kop .merk img{ filter: brightness(0) invert(1) }

.menu{ margin-left: auto; position: relative }
.menu > summary{
  display: none;
  align-items: center;
  gap: var(--u);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--u2);
  font-size: var(--fs-s);
  font-weight: 600;
  border-radius: var(--r-a);
}
.menu-lijst{ display: flex; align-items: center; gap: var(--u3) }
.menu-lijst a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-s);
  text-decoration: none;
}

.knop{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--u3);
  font-size: var(--fs-m);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-a);
  transition: transform var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}
.knop:active{ transform: scale(.97) }
.knop-klein{ min-height: 44px; padding: 0 var(--u2); font-size: var(--fs-s) }

.stil{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-m);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* De plaat staat op de KNOP en het label in een span erbinnen. De contrastmeter
   verbergt het element dat hij meet voordat hij het vak fotografeert; draagt de
   tekst zijn eigen plaat, dan verdwijnt die plaat mee en meet hij de kale video
   eronder. */
.pauze{
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--u2);
  border-radius: var(--r-a);
  filter: drop-shadow(0 4px 14px rgb(8 14 24 / .5));
}
.pauze span{
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.voet{
  position: relative;
  z-index: 20;
  padding: var(--u4) var(--u3) var(--u12);
  font-size: var(--fs-s);
}
.voet a{ text-decoration: underline; text-underline-offset: 3px }

/* --------------------------------------------------- versiewisselaar ---- */

.vswitch-balk{
  position: fixed;
  left: 50%;
  bottom: var(--u2);
  z-index: 90;
  display: flex;
  gap: 2px;
  padding: 4px;
  transform: translateX(-50%);
  background: #0B1524;
  border-radius: var(--r-c);
  box-shadow: var(--sh-b);
}
.vswitch{
  min-height: 40px;
  min-width: 52px;
  padding: 0 var(--u2);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-s);
  color: #B9C6D6;
  border-radius: var(--r-c);
  transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.vswitch[aria-pressed="true"]{ background: #F4F7FC; color: #0B1524 }

/* ==========================================================================
   v1 — BLAUW UUR · school motion
   Veld het diepe marineblauw van de huidige site, verdiept; accent het
   huisgoud. De zee op het blauwe uur IS dat donkerblauw, alleen dan als
   fotografie in plaats van als hex, en de warme horizonband in de clip pikt
   het goud letterlijk op.
   ========================================================================== */

#version-v1{
  --v1-veld: #0E1B2C;
  --v1-accent: #F2C313;
  --v1-tekst: #EAF0F7;
  --v1-opp: #17293F;
  --v1-rand: #5E7285;
  --v1-stil: #A9B8C9;
  --v1-opAccent: #0E1B2C;
  --ring1: #F2C313;
  --ring2: rgb(234 240 247 / .35);
  --body-veld: #0E1B2C;
  --v1-fs-display: clamp(38px, 5.2vw, 70px);

  color: var(--v1-tekst);
  /* De background-COLOR staat apart naast het verloop: een gradient laat
     background-color op transparant staan, en dan loopt de vingerafdruk door
     naar <body> en meet hij het veld van een andere versie. */
  background-color: var(--v1-veld);
  background-image: radial-gradient(128% 86% at 22% 8%, #1B2E45 0%, #0E1B2C 56%, #08111C 100%);
  font-family: 'Quicksand', system-ui, sans-serif;
}

.v1-skip{ background: var(--v1-accent); color: var(--v1-opAccent) }
.v1-kop{ color: var(--v1-tekst) }
.v1-kop .menu-lijst a{ color: var(--v1-stil) }
.v1-kop .menu > summary{ color: var(--v1-tekst); border: 1px solid var(--v1-rand) }
.v1-knop{ background: var(--v1-accent); color: var(--v1-opAccent) }

.v1-hero{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--u8) 0 0;
}

/* De clip is een BAND op de horizon, niet een vlak achter alles. Hij breekt
   uit de container met PADDING in plaats van met 100vw of een negatieve marge:
   padding kan per definitie geen horizontale overflow maken. */
.v1-band{
  position: relative;
  order: 2;
  margin-top: calc(var(--u8) * -1);
  padding: 0 max(var(--u3), calc((100vw - var(--maat)) / 2));
}
.v1-band-beeld{
  position: relative;
  height: clamp(220px, 40vh, 400px);
  overflow: clip;
  border-radius: var(--r-b) var(--r-b) 0 0;
  box-shadow: var(--sh-b);
}
.v1-band-beeld video,
.v1-band-beeld img{ width: 100%; height: 100%; object-fit: cover }
/* De sluier zit op een eigen laag en niet als dekkingsanimatie op de video:
   een keyframe op opacity zou de dekking wissen die de vormgeving draagt. */
.v1-sluier{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(14 27 44 / .82) 0%, rgb(14 27 44 / .34) 44%, rgb(14 27 44 / .06) 100%);
}
.v1-band .pauze{
  right: max(var(--u3), calc((100vw - var(--maat)) / 2 + var(--u3)));
  bottom: var(--u3);
  background: var(--v1-opp);
  color: var(--v1-tekst);
  border: 1px solid var(--v1-rand);
}

.v1-top{
  position: relative;
  z-index: 4;
  order: 1;
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
  padding: 0 var(--u3) var(--u12);
}

.v1-oog{
  display: inline-flex;
  align-items: center;
  gap: var(--u2);
  margin-bottom: var(--u3);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v1-stil);
}
.v1-oog::before{ content: ""; width: 44px; height: 1px; background: var(--v1-accent) }

#version-v1 h1{
  max-width: 1000px;
  font-family: 'Gloock', Georgia, serif;
  font-weight: 400;
  font-size: var(--v1-fs-display);
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--v1-tekst);
}
#version-v1 h1 em{ font-style: normal; color: var(--v1-accent) }

#version-v1 .v1-lead{
  max-width: 34em;
  margin-top: var(--u3);
  font-size: var(--fs-l);
  line-height: 1.6;
  color: var(--v1-stil);
}

.v1-acties{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u3);
  margin-top: var(--u4);
}
.v1-acties .stil{ color: var(--v1-tekst) }

/* De satelliet: één gepind kaartje met een echt, controleerbaar feit, over de
   bovenrand van de band heen zodat de twee lagen elkaar echt snijden. */
/* De satelliet straddelt de BOVENrand van de band in plaats van eronder te
   hangen. Onder de band viel hij op 1440 net onder de vouw, en dan telt de
   hero nul elementen met elevatie en draagt het eerste scherm zijn enige
   controleerbare feit niet meer. */
.v1-chip{
  position: absolute;
  right: max(var(--u3), calc((100vw - var(--maat)) / 2));
  top: calc(var(--u4) * -1);
  z-index: 6;
  max-width: 250px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  line-height: 1.45;
  color: var(--v1-opAccent);
  background: var(--v1-accent);
  border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 10px 20px rgb(8 14 24 / .4));
}
.v1-chip b{ display: block; font-weight: 700 }

@media (max-width: 860px){
  /* Op smal scherm schuift de band NIET meer onder de tekst. De negatieve
     marge van 64px viel daar precies samen met de knoppenrij, waardoor het
     telefoonnummer op het lichte water van de clip belandde. De lagen snijden
     elkaar hier via de chip, die de bovenrand van de band blijft straddelen. */
  .v1-band{ margin-top: 0 }
  .v1-top{ padding-bottom: var(--u6) }
  .v1-chip{ right: var(--u3); top: calc(var(--u3) * -1); max-width: 66% }
  /* De lead een stap kleiner op smal scherm: op 19px liep hij over vier regels
     en dan komt er van de clip nog maar een randje in beeld. */
  #version-v1 .v1-lead{ font-size: var(--fs-m) }
  .v1-oog{ margin-bottom: var(--u2) }
}

@media (hover: hover) and (pointer: fine){
  .v1-knop:hover{ background: #FFD640 }
}

/* ==========================================================================
   v2 — DUINPAD · school humanistisch
   Het merkblauw zelf als volledig veld in plaats van als knopkleur, met het
   vlonderpad van boven gefilmd: de looproute van de voordeur naar het water,
   wat de bron als zijn belangrijkste eigenschap opschrijft.
   ========================================================================== */

#version-v2{
  --v2-veld: #2F5496;
  --v2-accent: #FAE6A8;
  --v2-tekst: #F4F7FC;
  --v2-opp: #3F68B0;
  --v2-rand: #8FAAD8;
  --v2-opAccent: #2F5496;
  --ring1: #FAE6A8;
  --ring2: rgb(244 247 252 / .38);
  --body-veld: #2F5496;
  --v2-fs-display: clamp(36px, 5.6vw, 74px);

  color: var(--v2-tekst);
  background-color: var(--v2-veld);
  background-image: linear-gradient(168deg, #355EA6 0%, #2F5496 52%, #27467E 100%);
  font-family: 'Sora', system-ui, sans-serif;
}

.v2-skip{ background: var(--v2-accent); color: var(--v2-opAccent) }
.v2-kop{ color: var(--v2-tekst) }
.v2-kop .menu-lijst a{ color: var(--v2-tekst) }
.v2-kop .menu > summary{ color: var(--v2-tekst); border: 1px solid var(--v2-rand) }
.v2-knop{ background: var(--v2-accent); color: var(--v2-opAccent) }

.v2-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-content: center;
  align-items: center;
  gap: var(--u8);
  padding: var(--u6) 0 var(--u8) max(var(--u3), calc((100vw - var(--maat)) / 2));
}

.v2-tekst{ position: relative; z-index: 4; min-width: 0 }

#version-v2 h1{
  max-width: 15ch;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--v2-fs-display);
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
  color: var(--v2-tekst);
}
#version-v2 h1 em{ font-style: normal; color: var(--v2-accent) }

#version-v2 .v2-lead{
  max-width: 34em;
  margin-top: var(--u3);
  font-size: var(--fs-l);
  line-height: 1.6;
  color: var(--v2-tekst);
}

.v2-acties{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u3);
  margin-top: var(--u4);
}
.v2-acties .stil{ color: var(--v2-accent) }

/* De stapel: vier stations van de looproute, elk met zijn echte afstand. Dit
   is het handmerk van deze richting en het komt uit een gegeven dat de bron
   zelf opschrijft, niet uit een decoratief nummertje. */
.v2-route{
  display: grid;
  gap: 0;
  margin-top: var(--u6);
  border-top: 1px solid var(--v2-rand);
}
.v2-route li{
  display: flex;
  align-items: baseline;
  gap: var(--u3);
  padding: var(--u2) 0;
  border-bottom: 1px solid var(--v2-rand);
}
.v2-route b{
  flex: 0 0 auto;
  min-width: 88px;
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--v2-accent);
}
.v2-route span{ font-size: var(--fs-m); color: var(--v2-tekst) }

/* GEEN overflow op de figure zelf: de gepinde chip steekt met opzet links
   buiten het beeld uit, en een clip op dit niveau sneed hem stil doormidden —
   "9,6 gemiddeld" kwam als "6 gemiddeld" op het scherm. Het klippen hoort bij
   het beeld, dus een verdieping lager. */
.v2-beeld{
  position: relative;
  z-index: 2;
  margin: 0;
}
.v2-beeld-in{
  height: clamp(280px, 54vh, 520px);
  overflow: clip;
  /* Buitenradius = binnenradius + padding, en de padding is hier nul. */
  border-radius: var(--r-b) 0 0 var(--r-b);
  box-shadow: var(--sh-b);
}
.v2-beeld-in video,
.v2-beeld-in img{ width: 100%; height: 100%; object-fit: cover }
/* Gedempt, niet wit. Een bijna-witte pauzeknop weegt in het eerste scherm net
   zo zwaar als de primaire knop, en twee gelijkwaardige knoppen zijn een
   beslissing; de plaat blijft wel ondoorzichtig, want de contrastmeter
   verbergt anders de plaat en meet de video eronder. */
.v2-beeld .pauze{
  right: var(--u3);
  top: var(--u3);
  background: var(--v2-opp);
  color: var(--v2-tekst);
  border: 1px solid var(--v2-rand);
}

.v2-chip{
  position: absolute;
  left: calc(var(--u6) * -1);
  bottom: var(--u8);
  z-index: 6;
  max-width: 236px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--v2-opAccent);
  background: var(--v2-accent);
  border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 10px 22px rgb(12 20 32 / .34));
}
.v2-chip b{ font-weight: 700; font-size: var(--fs-xl) }

@media (max-width: 980px){
  .v2-hero{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u4);
    padding: var(--u6) var(--u3) var(--u12);
  }
  /* De routelijst verhuist op smal scherm ACHTER het beeld. In de
     desktopvolgorde stond hij tussen de lead en de knop, en dan duwde hij het
     onderwerp op 390 volledig onder de vouw: een hero zonder zichtbaar
     onderwerp. Omkeren mag hier omdat de primaire knop erboven blijft staan —
     het beeld vooropzetten zou juist de knop wegduwen. */
  /* Met display:contents worden de kinderen zelf gridkinderen, dus de rijgap
     van het grid komt BOVENOP hun eigen margin-top en staat alles twee keer zo
     ver uit elkaar. De marges gaan hier dus op nul en de gap doet het ritme. */
  .v2-tekst{ display: contents }
  #version-v2 h1{ order: 1; max-width: none }
  #version-v2 .v2-lead{ order: 2; margin-top: 0; font-size: var(--fs-m) }
  .v2-acties{ order: 3; margin-top: 0 }
  .v2-beeld{ order: 4 }
  .v2-route{ order: 5; margin-top: 0 }
  .v2-beeld-in{ height: clamp(200px, 30vh, 280px); border-radius: var(--r-b) }
  .v2-chip{ left: auto; right: var(--u3); bottom: calc(var(--u3) * -1); max-width: 62% }
}

@media (hover: hover) and (pointer: fine){
  .v2-knop:hover{ background: #FFF1C4 }
}

/* ==========================================================================
   v3 — DOMBURGS LICHT · school redactioneel
   De crème, de inkt en de Cormorant Garamond van de huidige site, ongewijzigd.
   Wat er verandert is de compositie: veel lucht boven de horizon, het
   onderwerp laag in het kader, en één actiekleur.
   ========================================================================== */

#version-v3{
  --v3-veld: #FAF7F0;
  --v3-accent: #3D6AB8;
  --v3-tekst: #23303F;
  --v3-opp: #F1EAD9;
  --v3-rand: #8A8782;
  /* Het merkblauw zelf, een stap donkerder dan het accent, voor tekst: #3D6AB8
     haalt op dit veld 4,47:1 en dat is onder de 4,5 die lopende tekst vraagt.
     Als knopvulling onder een halfvet label mag de lichtere stap blijven. */
  --v3-accent-d: #2F5496;
  --v3-opAccent: #FAF7F0;
  --ring1: #23303F;
  --ring2: rgb(61 106 184 / .45);
  --body-veld: #FAF7F0;
  --v3-fs-display: clamp(42px, 6.2vw, 86px);

  color: var(--v3-tekst);
  background-color: var(--v3-veld);
  background-image: linear-gradient(184deg, #FFFDF8 0%, #FAF7F0 48%, #F1EAD9 100%);
  font-family: 'Quicksand', system-ui, sans-serif;
}

.v3-skip{ background: var(--v3-accent); color: var(--v3-opAccent) }
.v3-kop{ color: var(--v3-tekst) }
.v3-kop .menu-lijst a{ color: var(--v3-tekst) }
.v3-kop .menu > summary{ color: var(--v3-tekst); border: 1px solid var(--v3-rand) }
.v3-knop{ background: var(--v3-accent); color: var(--v3-opAccent) }

.v3-hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--u8) var(--u3) var(--u6);
}

.v3-binnen{
  position: relative;
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
}

#version-v3 h1{
  position: relative;
  z-index: 3;
  max-width: 15ch;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: var(--v3-fs-display);
  line-height: 1.02;
  letter-spacing: -.014em;
  text-wrap: balance;
  color: var(--v3-tekst);
}
#version-v3 h1 em{ font-style: italic; color: var(--v3-accent) }

#version-v3 .v3-lead{
  position: relative;
  z-index: 3;
  max-width: 32em;
  margin-top: var(--u3);
  font-size: var(--fs-l);
  line-height: 1.6;
  color: var(--v3-tekst);
}

.v3-acties{
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u3);
  margin-top: var(--u4);
}
.v3-acties .stil{ color: var(--v3-accent-d) }

/* Het onderwerp: de enige echte huizenfoto uit de eigen beeldbank, laag in het
   kader en over de rechterkolom van de kop heen. */
.v3-beeld{
  position: absolute;
  right: 0;
  bottom: calc(var(--u8) * -1);
  z-index: 2;
  width: min(48%, 560px);
  margin: 0;
  overflow: clip;
  border-radius: var(--r-b);
  box-shadow: var(--sh-b);
}
.v3-beeld img{ width: 100%; filter: saturate(.88) contrast(1.04) }

/* Het handmerk: de horizonlijn waar de kop op staat, zoals op een
   badplaatsaffiche. Hij stond eerst absoluut onderin de compositie en liep dan
   dwars door de knoppenrij, waar hij als een verdwaalde onderstreping van het
   telefoonnummer las. In de stroom, direct onder de kop, doet hij wat hij
   moest doen. */
.v3-horizon{
  display: block;
  width: min(100%, 620px);
  height: 1px;
  margin-top: var(--u4);
  background: var(--v3-rand);
  transform-origin: 0 50%;
}

/* Over de linkeronderhoek van het beeld heen, niet eronder: onder het beeld
   viel de chip buiten het eerste scherm en had deze hero wel lagen maar geen
   satelliet met micro-inhoud. */
.v3-chip{
  position: absolute;
  right: min(44%, 520px);
  bottom: calc(var(--u6) * -1);
  z-index: 6;
  max-width: 280px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--v3-tekst);
  background: var(--v3-opp);
  border: 1px solid var(--v3-rand);
  border-radius: var(--r-a);
  filter: drop-shadow(0 12px 24px rgb(35 48 63 / .16));
}
.v3-chip b{ display: block; font-weight: 700 }

@media (max-width: 980px){
  .v3-beeld{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 520px;
    margin-top: var(--u6);
  }
  #version-v3 h1{ max-width: none }
  .v3-chip{ position: relative; right: auto; bottom: auto; max-width: none; margin-top: var(--u3) }
  /* De horizonlijn blijft nu ook op smal scherm staan. Hij stond hier eerst op
     display:none omdat de absolute versie dwars door de knoppen liep; in de
     stroom onder de kop is er niets meer mis mee, en het handmerk hoort op een
     telefoon net zo goed overeind te blijven. */
  .v3-horizon{ width: 100%; margin-top: var(--u3) }
}

@media (hover: hover) and (pointer: fine){
  .v3-knop:hover{ background: #355EA6 }
}

/* ==========================================================================
   v4 — CABINE · school informatie
   Warm zand als veld, de eigen herofoto met strandcabines als onderwerp, en de
   nummering van een strandcabinerij als ordening voor de zestien verblijven.
   Het cijfer betekent hier iets: het is de rij waarin je je plek kiest.
   ========================================================================== */

#version-v4{
  --v4-veld: #D6BF8E;
  --v4-accent: #16283F;
  --v4-tekst: #23303F;
  --v4-opp: #EDE2CB;
  --v4-rand: #6E5F41;
  --v4-opAccent: #EDE2CB;
  --ring1: #16283F;
  --ring2: rgb(35 48 63 / .3);
  --body-veld: #D6BF8E;
  --v4-fs-display: clamp(34px, 5vw, 66px);

  color: var(--v4-tekst);
  background-color: var(--v4-veld);
  background-image: linear-gradient(172deg, #E2CEA1 0%, #D6BF8E 50%, #C9AF79 100%);
  font-family: 'Jost', system-ui, sans-serif;
}

.v4-skip{ background: var(--v4-accent); color: var(--v4-opAccent) }
.v4-kop{ color: var(--v4-tekst) }
.v4-kop .menu-lijst a{ color: var(--v4-tekst) }
.v4-kop .menu > summary{ color: var(--v4-tekst); border: 1px solid var(--v4-rand) }
.v4-knop{ background: var(--v4-accent); color: var(--v4-opAccent) }

.v4-hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--u6) var(--u3) var(--u8);
}

.v4-binnen{
  position: relative;
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
}

.v4-top{ position: relative; z-index: 4; max-width: 660px }

#version-v4 h1{
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--v4-fs-display);
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--v4-tekst);
}
#version-v4 h1 em{ font-style: normal; color: var(--v4-accent) }

#version-v4 .v4-lead{
  max-width: 36em;
  margin-top: var(--u3);
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--v4-tekst);
}

.v4-acties{ display: flex; flex-wrap: wrap; gap: var(--u3); margin-top: var(--u4) }
.v4-acties .stil{ color: var(--v4-accent) }

/* De cabinerij: zestien vakjes op één strandlijn, één per verblijf. Ze zijn
   allemaal even hoog en even breed, want de bron zegt nergens welk huis dichter
   bij zee ligt dan welk ander; hoogteverschil zou een bewering zijn die niemand
   kan nakijken. De rij ís het cijfer, en de lijn eronder is het strand.
   Alles in de stroom, zodat de vakjes niet elk apart als satelliet tellen. */
.v4-rij{
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: var(--u);
  margin-top: var(--u6);
  padding-bottom: var(--u2);
  /* Twee lijndiktes op deze pagina, met reden: de haarlijn scheidt, deze
     dikkere lijn IS de waterlijn waar de rij op staat. */
  border-bottom: 2px solid var(--v4-accent);
}
.v4-cabine{
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--v4-rand);
  border-radius: var(--r-a) var(--r-a) 0 0;
  background: var(--v4-opp);
}
.v4-schaal{
  display: flex;
  justify-content: space-between;
  margin-top: var(--u);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--v4-tekst);
}

/* Zelfde reden als bij v2: de clip hoort op het binnenkader, niet op de figure,
   anders snijdt hij de gepinde chip doormidden. */
.v4-beeld{
  position: absolute;
  right: calc(var(--u6) * -1);
  top: 50%;
  z-index: 2;
  width: min(42%, 470px);
  margin: 0;
  transform: translateY(-50%);
}
.v4-beeld-in{
  overflow: clip;
  border-radius: var(--r-b);
  box-shadow: var(--sh-b);
}
.v4-beeld-in img{ width: 100%; filter: saturate(.86) contrast(1.05) }

.v4-chip{
  position: absolute;
  left: calc(var(--u4) * -1);
  bottom: var(--u6);
  z-index: 6;
  max-width: 232px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xs);
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--v4-opAccent);
  background: var(--v4-accent);
  border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 10px 22px rgb(35 48 63 / .3));
}

@media (max-width: 1040px){
  .v4-beeld{
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 460px;
    margin-top: var(--u6);
    transform: none;
  }
  .v4-top{ max-width: none }
  .v4-chip{ left: auto; right: var(--u3); bottom: calc(var(--u3) * -1); max-width: 62% }
}

@media (max-width: 620px){
  /* Zestien vakjes van 8px met een gat ertussen zijn op 320 geen rij meer maar
     ruis. Acht vakjes houden de vorm en de betekenis heel. */
  .v4-cabine:nth-child(n + 9){ display: none }
}

@media (hover: hover) and (pointer: fine){
  .v4-knop:hover{ background: #23415F }
}

/* ==========================================================================
   Breekpunten die alle vier de versies delen
   ========================================================================== */

@media (max-width: 860px){
  .ver{ --kop-h: 68px }
  .kop{ padding: 0 var(--u2); gap: var(--u2) }
  .merk img{ width: 128px; height: 54px }
  .menu > summary{ display: inline-flex }
  /* Zonder script staat de <details> open, dan geldt deze regel niet en valt
     het menu terug op een gewone gestapelde lijst onder de kopregel. De
     zwevende lade hangt daarom aan .has-js en niet aan de klasse die over
     beweging gaat. */
  .has-js .menu:not([open]) .menu-lijst{ display: none }
  .has-js .menu[open] .menu-lijst{
    position: absolute;
    right: 0;
    top: calc(100% + var(--u));
    z-index: 40;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 200px;
    padding: var(--u) var(--u3);
    background: var(--body-veld);
    border: 1px solid currentColor;
    border-radius: var(--r-a);
    box-shadow: var(--sh-b);
  }
  .menu-lijst{ flex-wrap: wrap; gap: var(--u2) }
  .kop .knop{ display: none }
}

@media (max-width: 420px){
  .v1-top, .v3-hero, .v4-hero{ padding-left: var(--u2); padding-right: var(--u2) }
  .v2-hero{ padding-left: var(--u2); padding-right: var(--u2) }
}

/* ==========================================================================
   Beweging
   Alleen transform en opacity, dus op de compositor. De verborgen beginstaat
   staat ÍN de keyframes met `both`: gaat een onthulling om welke reden dan ook
   niet af, dan staat het element er gewoon in plaats van permanent weg te zijn.
   ========================================================================== */

@keyframes v1-rijs{
  from{ opacity: 0; transform: translateY(20px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v1-band-in{
  from{ opacity: 0; transform: translateY(28px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v1-adem{
  from{ transform: scale(1.02) }
  to{ transform: scale(1.08) }
}
@keyframes v1-chip-in{
  from{ opacity: 0; transform: translateY(16px) }
  to{ opacity: 1; transform: translateY(0) }
}

@keyframes v2-rijs{
  from{ opacity: 0; transform: translateY(16px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v2-beeld-in{
  from{ opacity: 0; transform: translateX(26px) }
  to{ opacity: 1; transform: translateX(0) }
}
@keyframes v2-station{
  from{ opacity: 0; transform: translateX(-14px) }
  to{ opacity: 1; transform: translateX(0) }
}

@keyframes v3-rijs{
  from{ opacity: 0; transform: translateY(18px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v3-horizon{
  from{ transform: scaleX(0) }
  to{ transform: scaleX(1) }
}
@keyframes v3-beeld-in{
  from{ opacity: 0; transform: translateY(26px) }
  to{ opacity: 1; transform: translateY(0) }
}

@keyframes v4-rijs{
  from{ opacity: 0; transform: translateY(14px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v4-cabine-in{
  from{ opacity: 0; transform: translateY(22px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v4-beeld-in{
  from{ opacity: 0; transform: translateY(-50%) translateX(22px) }
  to{ opacity: 1; transform: translateY(-50%) translateX(0) }
}
@keyframes v4-beeld-mob{
  from{ opacity: 0; transform: translateY(22px) }
  to{ opacity: 1; transform: translateY(0) }
}

/* De animaties hangen aan .bm-anim, en die klasse zet het script ALLEEN bij
   prefers-reduced-motion: no-preference. Zonder script en met beweging uit
   bestaat de klasse niet, gelden de regels niet, en staat er dus niets op nul
   dekking. */
.bm-anim .v1-oog,
.bm-anim #version-v1 h1,
.bm-anim #version-v1 .v1-lead,
.bm-anim .v1-acties{
  animation: v1-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v1-band{ animation: v1-band-in var(--d-4) var(--ease) 180ms both }
.bm-anim .v1-band-beeld video,
.bm-anim .v1-band-beeld img{ animation: v1-adem 26s var(--ease-move) infinite alternate }
.bm-anim .v1-chip{ animation: v1-chip-in var(--d-3) var(--ease) 520ms both }

.bm-anim .v2-tekst > *{
  animation: v2-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v2-beeld{ animation: v2-beeld-in var(--d-4) var(--ease) 200ms both }
.bm-anim .v2-route li{
  animation: v2-station var(--d-2) var(--ease) both;
  animation-delay: calc(360ms + var(--i, 0) * 80ms);
}

.bm-anim #version-v3 h1,
.bm-anim #version-v3 .v3-lead,
.bm-anim .v3-acties{
  animation: v3-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v3-horizon{ animation: v3-horizon var(--d-4) var(--ease-move) 320ms both }
.bm-anim .v3-beeld{ animation: v3-beeld-in var(--d-4) var(--ease) 240ms both }

.bm-anim #version-v4 h1,
.bm-anim #version-v4 .v4-lead,
.bm-anim .v4-acties{
  animation: v4-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v4-cabine{
  animation: v4-cabine-in var(--d-2) var(--ease) both;
  animation-delay: calc(300ms + var(--i, 0) * 40ms);
}
.bm-anim .v4-beeld{ animation: v4-beeld-in var(--d-4) var(--ease) 220ms both }

/* Breekpuntvarianten van de animaties, en ze staan hier ONDERAAN met opzet.
   Een keyframe verslaat elke gewone declaratie, dus een breekpunt overschrijft
   de ANIMATIE en niet de transform. Maar dan geldt ook bronvolgorde: stonden
   deze regels bij hun eigen sectie, dan won de basisregel verderop in het
   bestand alsnog en trok de eindstand `translateY(-50%)` het beeld op smal
   scherm over de tekst heen. */
@media (max-width: 1040px){
  .bm-anim .v4-beeld{ animation: v4-beeld-mob var(--d-4) var(--ease) 220ms both }
}

@media (prefers-reduced-motion: reduce){
  .bm-anim .v1-oog,
  .bm-anim #version-v1 h1,
  .bm-anim #version-v1 .v1-lead,
  .bm-anim .v1-acties,
  .bm-anim .v1-band,
  .bm-anim .v1-band-beeld video,
  .bm-anim .v1-band-beeld img,
  .bm-anim .v1-chip,
  .bm-anim .v2-tekst > *,
  .bm-anim .v2-beeld,
  .bm-anim .v2-route li,
  .bm-anim #version-v3 h1,
  .bm-anim #version-v3 .v3-lead,
  .bm-anim .v3-acties,
  .bm-anim .v3-horizon,
  .bm-anim .v3-beeld,
  .bm-anim #version-v4 h1,
  .bm-anim #version-v4 .v4-lead,
  .bm-anim .v4-acties,
  .bm-anim .v4-cabine,
  .bm-anim .v4-beeld{
    animation: none;
  }
  .knop, .skip, .vswitch{ transition: none }
}

@media print{
  .vswitch-balk, .pauze{ display: none }
}