/* =============================================================================
   Domburg Home, herontwerp homepage
   V1 "Het register"

   Kleurtokens zijn vooraf doorgerekend tegen ELK vlak waar ze op kunnen landen
   (LESSONS regel 1). De uitkomsten, gemeten met de WCAG-formule:

     ink   #16273C  op linen 13.55  op sand 11.97  op paper 15.11
     ink2  #4B5A6E  op linen  6.31  op sand  5.57  op paper  7.03
     onNavy  #F4EEE2 op navy 13.08  op navy-diep 14.83
     onNavy2 #AEBCCE op navy  7.83  op navy-diep  8.88
     goud  #F2C313  op navy   9.06  op navy-diep 10.27, en inkt op goud 9.06

   Het merkgoud haalt op linen slechts 1.50:1. Daarom is goud hier NOOIT
   tekstkleur op een licht vlak: het is vulling, lijn of tekst op marine
   (LESSONS regel 2). Een derde grijstrap is bewust geschrapt, die haalde de
   drempel op zand niet.
============================================================================= */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-var.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ basis */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #F7F2E9;
  color: #16273C;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Eén focusring, zonder specificiteit, en met een tweede ring eromheen zodat
   hij ook zichtbaar blijft op een gevulde knop, waar de eerste ring de
   tekstkleur van die knop zou aannemen (LESSONS regel 19). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus {
  outline: 2px solid #16273C;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(247, 242, 233, .95);
  border-radius: 2px;
}
.v1-hero :where(a, button, summary):focus,
.v1-facts :where(a, button):focus,
.v1-book :where(a, button):focus,
.v1-foot :where(a, button):focus {
  outline-color: #F4EEE2;
  box-shadow: 0 0 0 5px rgba(11, 22, 36, .95);
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 90;
  background: #16273C; color: #F4EEE2;
  padding: 10px 16px; border-radius: 3px;
  font-size: .9rem; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- V1: de tokens */

.v1 {
  --linen: #F7F2E9;
  --sand:  #EDE4D3;
  --paper: #FFFFFF;
  --navy:  #16273C;
  --navy-deep: #0F1C2E;

  --ink:  #16273C;   /* koppen en lopende tekst op licht */
  --ink2: #4B5A6E;   /* labels, bijschriften, secundair, op licht */
  --on-navy:  #F4EEE2;
  --on-navy2: #AEBCCE;
  --gold: #F2C313;   /* vulling en lijn, tekst uitsluitend op marine */
  --link: #2A4A85;

  --rule: rgba(22, 39, 60, .16);
  --rule-strong: rgba(22, 39, 60, .34);

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 56px);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Karla', system-ui, sans-serif;
}

.v1-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------- V1: typografie */

.v1-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin: .3em 0 0;
  color: var(--ink);
  text-wrap: balance;
}

.v1-lead {
  font-size: clamp(1.02rem, 1.35vw, 1.19rem);
  line-height: 1.6;
  color: var(--ink2);
  max-width: 54ch;
  margin: 1.1rem 0 0;
}

.v1-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink2);
  margin: 0;
}
/* Op een foto is de gedempte trap niet genoeg: die haalde de drempel op de
   lichtste pixel van de lucht niet. Op beeld dus wit, en de rustige toon komt
   uit de maat en de spatiering, niet uit de kleur. */
.v1-label--light { color: #FFFFFF; }

/* ------------------------------------------------------------ V1: knoppen */

.v1-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.v1-btn--gold  { background: var(--gold); color: var(--navy); }
.v1-btn--gold:hover  { background: #FFD534; transform: translateY(-1px); }
.v1-btn--ink   { background: var(--navy); color: var(--on-navy); }
.v1-btn--ink:hover   { background: var(--navy-deep); transform: translateY(-1px); }
.v1-btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.v1-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #FFFFFF; }

/* -------------------------------------------------------------- V1: kop */

.v1-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--linen);
  border-bottom: 1px solid var(--rule);
}
.v1-head__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 12px var(--pad);
  display: flex; align-items: center; gap: clamp(12px, 3vw, 36px);
}
.v1-brand { display: block; flex: 0 0 auto; text-decoration: none; }
.v1-brand__img { width: clamp(132px, 15vw, 176px); height: auto; }

.v1-head__cta { margin-left: auto; min-height: 42px; padding: 8px 18px; font-size: .88rem; }

/* De navigatie is een <details> die in de HTML OPEN staat. Zonder script blijft
   hij open en rendert hij als een gewone gestapelde lijst onder de kopregel:
   een mobiele bezoeker houdt dus altijd een werkende navigatie. Het script
   klapt hem dicht op smal scherm en zet hem dan pas als zwevende lade neer.
   Die ladeopmaak hangt aan .has-js, niet aan .anim: .anim ontbreekt bij motion
   uit terwijl het script dan wel degelijk draait. (LESSONS, hamburgerval.) */
.v1-nav { flex: 1 1 auto; min-width: 0; }
.v1-nav__toggle { display: none; }
.v1-nav__panel { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px); }
.v1-nav__panel a {
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.v1-nav__panel a:hover { border-bottom-color: var(--gold); }

/* Een dichtgeklapte <details> verbergt zijn inhoud wel voor het oog, maar laat
   hem als losgeslagen doos van 40px in de kop staan: hij duwde de pagina opzij
   en zijn links meldden zich als focusbaar zonder ooit focus te kunnen krijgen.
   Expliciet wegzetten dus, zodat dicht ook echt dicht is. */
.v1-nav:not([open]) .v1-nav__panel { display: none; }

@media (max-width: 899px) {
  .v1-nav { flex: 0 0 auto; order: 3; }
  /* Zonder script blijft de details openstaan. Geef hem dan een eigen volle rij
     onder de kopregel, anders wordt het een smalle kolom naast het logo en ziet
     een werkende terugval eruit als een kapotte kop. Draait er wel script, dan
     is de open staat een zwevende lade en mag hij geen ruimte innemen. */
  .v1-nav[open] { flex: 1 1 100%; }
  .has-js .v1-nav[open] { flex: 0 0 auto; }
  .v1-head__cta { margin-left: auto; order: 2; }

  .v1-nav__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 6px 10px;
    cursor: pointer; list-style: none;
    font-size: .8rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink);
  }
  .v1-nav__toggle::-webkit-details-marker { display: none; }
  .v1-nav__bars { display: grid; gap: 4px; width: 20px; }
  .v1-nav__bars i { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

  /* zonder script: gewone lijst onder de kop, niet zwevend, dus nooit iets
     dat de kop bedekt zonder dat je het weg kunt klikken */
  .v1-nav__panel {
    flex-direction: column; gap: 0; width: 100%;
    padding: 6px 0 4px;
    border-top: 1px solid var(--rule);
    margin-top: 8px;
  }
  .v1-nav__panel a { padding: 11px 0; border-bottom: 1px solid var(--rule); }
  .v1-nav__panel a:last-child { border-bottom: 0; }

  .has-js .v1-nav[open] .v1-nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--linen);
    border-bottom: 1px solid var(--rule);
    padding: 6px var(--pad) 18px;
    box-shadow: 0 24px 40px -28px rgba(11, 22, 36, .5);
  }
  .has-js .v1-nav__panel a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .has-js .v1-nav__panel a:last-child { border-bottom: 0; }
  .v1-head__in { position: relative; flex-wrap: wrap; }
}
/* Op 320px passen logo, knop en hamburger net niet op één regel, en dan valt de
   hamburger als losse rij eronder. Alle drie een maatje kleiner lost dat op:
   110 + 8 + 96 + 8 + 40 = 262 binnen de 280 die er is. */
@media (max-width: 419px) {
  .v1-nav__word { display: none; }
  .v1-head__in { gap: 8px; }
  .v1-brand__img { width: 110px; }
  .v1-head__cta { padding: 8px 12px; font-size: .8rem; white-space: nowrap; }
  .v1-nav__toggle { padding: 6px 4px; }
}

/* ------------------------------------------------------------- V1: hero */

.v1-hero { position: relative; isolation: isolate; }

.v1-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  z-index: 0;
}

/* De plaat staat als background-image op een VOOROUDER van de tekst, niet als
   losse broer-laag: alleen dan telt de tekst als "op beeld" en wordt hij met
   pixelmeting gecontroleerd (LESSONS regel 5). */
.v1-hero__in {
  position: relative; z-index: 1;
  min-height: clamp(500px, 70vh, 656px);
  display: flex; align-items: center;
  padding: clamp(36px, 6vh, 64px) 0 clamp(44px, 8vh, 84px);
  background-image: linear-gradient(102deg,
      rgba(9, 19, 33, .95) 0%,
      rgba(9, 19, 33, .90) 34%,
      rgba(9, 19, 33, .56) 54%,
      rgba(9, 19, 33, .18) 76%,
      rgba(9, 19, 33, .10) 100%);
}
.v1-hero__grid { display: block; }
/* De tekstkolom houdt afstand van de registerkolom rechts, en is verder zo
   breed dat de kop op drie regels valt in plaats van op zes. */
.v1-hero__text { max-width: min(660px, calc(100% - 300px)); }

.v1-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.5vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: #FFFFFF;
  margin: .2em 0 0;
  text-wrap: balance;
}
.v1-hero__title em { font-style: italic; color: var(--gold); }

.v1-hero__lead {
  color: #EFEAE0;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.58;
  max-width: 44ch;
  margin: 1.15rem 0 0;
}
.v1-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.9rem 0 0; }

/* Het register in de hero. Marineblauwe kolom, met opzet afgesneden aan de
   onderrand: hij loopt door voorbij het beeld en wordt in sectie 3 compleet
   gemaakt. Dat is wat de kop en de foto aan elkaar bindt. */
/* Eerste versie liet deze kolom met een maskerverloop uitdoven, en dat las als
   een vieze grijze veeg over het linnen eronder, niet als een snede. Nu een
   harde onderrand die zichtbaar VOORBIJ de foto steekt, met een gouden lijn:
   onmiskenbaar met opzet. */
.v1-rail {
  position: absolute; z-index: 2;
  right: var(--pad); top: clamp(36px, 7vh, 84px); bottom: -58px;
  width: clamp(190px, 17vw, 240px);
  background: var(--navy-deep);
  padding: 22px 20px 0;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 30px 60px -34px rgba(9, 19, 33, .8);
}
.v1-rail__head {
  margin: 0 0 14px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.v1-rail__list { list-style: none; margin: 0; padding: 0; }
.v1-rail__list li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid rgba(174, 188, 206, .22);
  font-size: .82rem;
  color: var(--on-navy);
}
.v1-rail__list b {
  flex: 0 0 auto;
  font-weight: 600; font-size: .68rem;
  letter-spacing: .1em;
  color: var(--on-navy2);
}
.v1-rail__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(174, 188, 206, .22);
  font-size: .72rem;
  font-style: italic;
  font-family: var(--serif);
  color: var(--on-navy2);
}

/* Smal scherm is een ANDERE compositie, geen verkleinde desktop. De eerste poging
   legde de tekst als donkere plaat over de foto, en toen was de foto weg: een
   donker blok op een onzichtbaar beeld, precies de vlakke hero waar regel 20 voor
   waarschuwt. Nu staat het beeld er eerst, onbedekt en over de volle breedte, en
   daaronder één doorlopend marineblauw blok met kop, tekst, knoppen en register.
   Twee vormen dus, waarvan de bovenste de blikvanger is. Contrast is meteen
   opgelost: er staat geen letter meer op de foto. */
@media (max-width: 899px) {
  .v1-hero { display: block; }
  .v1-hero > picture { display: block; }
  .v1-hero__img {
    position: static;
    width: 100%; height: auto;
    aspect-ratio: 3 / 2;
    max-height: min(58vh, 360px);
    object-position: 50% 52%;
  }

  .v1-hero__in {
    display: block;
    min-height: 0;
    padding: clamp(26px, 4.5vh, 38px) 0 0;
    background-image: none;
    background-color: var(--navy-deep);
  }
  .v1-hero__text {
    max-width: none;
    padding: 0; border-top: 0; background-image: none;
  }
  .v1-hero__title { font-size: clamp(2.1rem, 8.2vw, 3.05rem); }
  .v1-hero__cta { gap: 10px; margin-top: 1.55rem; }

  .v1-rail {
    position: static;
    width: auto; height: auto;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: clamp(24px, 4vh, 34px) var(--pad) clamp(28px, 4.5vh, 40px);
    background: var(--navy-deep);
    border-top: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .v1-rail__head {
    padding-top: 15px;
    border-top: 2px solid var(--gold);
  }
  .v1-rail__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .v1-rail__list li { font-size: .76rem; }
}
@media (max-width: 479px) {
  .v1-rail__list { grid-template-columns: minmax(0, 1fr); }
  .v1-rail__list li:nth-child(n + 7) { display: none; }
}

/* --------------------------------------------------------- V1: statement */

.v1-say { background: var(--linen); padding: clamp(84px, 13vh, 150px) 0 clamp(60px, 9vh, 104px); }
.v1-say__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.v1-say__fig { margin: 0; }
.v1-say__fig img { width: 100%; height: auto; border-radius: 2px; }
.v1-say__fig figcaption {
  margin-top: 11px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink2);
}
.v1-say__quote { margin: 0; }
.v1-say__quote p {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}
.v1-say__body { margin-top: clamp(24px, 3.5vh, 38px); padding-top: 22px; border-top: 3px solid var(--gold); }
.v1-say__body p {
  margin: 0 0 1rem;
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  color: var(--ink2);
  max-width: 46ch;
}
.v1-say__body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .v1-say__in { grid-template-columns: minmax(0, 1fr); }
  .v1-say { padding-top: clamp(56px, 9vh, 96px); }
  .v1-say__fig { max-width: 340px; }
}

/* ---------------------------------------------------------- V1: register */

.v1-reg { background: var(--sand); padding: clamp(70px, 11vh, 124px) 0 clamp(76px, 12vh, 132px); }
.v1-reg__head { max-width: 62ch; }
.v1-reg__list {
  list-style: none;
  margin: clamp(36px, 5vh, 60px) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  columns: 2;
  column-gap: clamp(28px, 5vw, 72px);
}
.v1-reg__row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.v1-reg__n {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.v1-reg__a {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.7vw, 1.5rem);
  line-height: 1.18;
  color: var(--ink);
  min-width: 0;
}
.v1-reg__t {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink2);
  white-space: nowrap;
}
.v1-reg__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  margin: clamp(30px, 4vh, 46px) 0 0;
}
.v1-reg__note { font-size: .95rem; color: var(--ink2); max-width: 44ch; }

@media (max-width: 860px) { .v1-reg__list { columns: 1; } }
@media (max-width: 419px) {
  .v1-reg__row { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .v1-reg__t { grid-column: 2; white-space: normal; }
}

/* ------------------------------------------------------------ V1: verblijf */

.v1-house { background: var(--linen); padding: clamp(60px, 9vh, 104px) 0; }
.v1-house__in {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.v1-house__fig { margin: 0; }
.v1-house__fig img { width: 100%; height: auto; border-radius: 2px; }
.v1-house__fig figcaption {
  margin-top: 12px;
  font-size: .84rem;
  color: var(--ink2);
  padding-left: 14px;
  border-left: 3px solid var(--gold);
}
.v1-spec { margin: clamp(22px, 3vh, 34px) 0 0; }
.v1-spec__row { padding: 15px 0; border-top: 1px solid var(--rule); }
.v1-spec__row dt {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--ink);
}
.v1-spec__row dd { margin: 4px 0 0; font-size: .95rem; color: var(--ink2); max-width: 46ch; }

@media (max-width: 999px) {
  .v1-house__in { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- V1: cijfers */

.v1-facts { background: var(--navy); color: var(--on-navy); padding: clamp(44px, 7vh, 70px) 0; }
.v1-facts__in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.v1-fact { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--gold); padding-left: 16px; }
.v1-fact b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1;
  color: var(--on-navy);
}
.v1-fact span {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-navy2);
}
/* Het langste ondeelbare label is "gastbeoordelingen": 17 tekens uppercase met
   ruime letterspatiering. Op 320px is een halve kolom daar smaller dan dat ene
   woord, en dan schuift de hele pagina opzij zonder dat de poort een veroorzaker
   kan aanwijzen (LESSONS regel 11). Dus: kleinere spatiering op smal, en onder
   560px een kolom. */
@media (max-width: 900px) {
  .v1-facts__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v1-fact span { font-size: .7rem; letter-spacing: .1em; }
}
@media (max-width: 560px) {
  .v1-facts__in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ------------------------------------------------------------ V1: Domburg */

.v1-place { background: var(--linen); padding: clamp(76px, 12vh, 136px) 0; }
.v1-place__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.v1-place__body p { margin: 0 0 1rem; color: var(--ink2); font-size: 1.02rem; max-width: 48ch; }
.v1-place__body p:last-child { margin-bottom: 0; }

.v1-place__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(34px, 5vh, 60px);
}
.v1-shot { margin: 0; }
.v1-shot img { width: 100%; height: auto; border-radius: 2px; }
.v1-shot figcaption {
  margin-top: 9px;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink2);
}
/* Alle drie op één gedeelde onderlijn. De vooraf gesneden verhoudingen (2:3,
   7:5, 2:3) tegen kolombreedtes 3, 6 en 3 komen op vrijwel dezelfde hoogte uit;
   align-items:end vangt het restje op, zodat de rij nooit ragged oogt. */
.v1-place__grid { align-items: end; }
.v1-place__grid .v1-shot { grid-column: span 3; }
.v1-place__grid .v1-shot--wide { grid-column: span 6; }

@media (max-width: 999px) {
  .v1-place__top { grid-template-columns: minmax(0, 1fr); }
  .v1-place__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .v1-place__grid .v1-shot,
  .v1-place__grid .v1-shot--wide { grid-column: span 1; }
  .v1-place__grid .v1-shot--wide { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 619px) {
  .v1-place__grid { grid-template-columns: minmax(0, 1fr); }
  .v1-place__grid .v1-shot,
  .v1-place__grid .v1-shot--wide { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- V1: praktisch */

.v1-prak { background: var(--paper); padding: clamp(52px, 8vh, 88px) 0; }
.v1-prak__in {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.v1-prak__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.05rem);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  position: sticky; top: 96px;
}
.v1-prak__list {
  margin: 0;
  columns: 2;
  column-gap: clamp(24px, 4vw, 52px);
}
.v1-prak__row { padding: 0 0 20px; break-inside: avoid; }
.v1-prak__row dt {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
.v1-prak__row dd { margin: 0; font-size: .95rem; color: var(--ink2); }

@media (max-width: 999px) {
  .v1-prak__in { grid-template-columns: minmax(0, 1fr); }
  .v1-prak__title { position: static; }
  .v1-prak__list { columns: 2; }
}
@media (max-width: 680px) { .v1-prak__list { columns: 1; } }

/* -------------------------------------------------------------- V1: boeken */

.v1-book { position: relative; isolation: isolate; }
.v1-book__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.v1-book__in {
  position: relative; z-index: 1;
  padding: clamp(80px, 13vh, 150px) 0;
  background-image: linear-gradient(96deg,
      rgba(9, 19, 33, .93) 0%,
      rgba(9, 19, 33, .88) 42%,
      rgba(9, 19, 33, .74) 68%,
      rgba(9, 19, 33, .60) 100%);
}
.v1-book__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: end;
}
.v1-book__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #FFFFFF;
  margin: .24em 0 0;
  max-width: 16ch;
}
.v1-book__lead { color: #E7E1D6; font-size: 1.05rem; max-width: 46ch; margin: 1.1rem 0 0; }
.v1-book__cta { margin: 1.8rem 0 0; }

.v1-book__contact { list-style: none; margin: 0; padding: 0; }
.v1-book__contact li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 0;
  border-top: 1px solid rgba(244, 238, 226, .26);
}
.v1-book__contact span {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--on-navy2);
}
.v1-book__contact a { color: #FFFFFF; text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid rgba(242, 195, 19, .6); align-self: flex-start; }
.v1-book__contact a:hover { border-bottom-color: var(--gold); }

@media (max-width: 860px) { .v1-book__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* -------------------------------------------------------------- V1: footer */

.v1-foot { background: var(--navy-deep); color: var(--on-navy); padding: clamp(56px, 8vh, 88px) 0 26px; }
.v1-foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 54px);
}
.v1-foot__mark { font-family: var(--serif); font-size: 1.9rem; line-height: 1; margin: 0; color: var(--on-navy); }
.v1-foot__mark span { font-style: italic; color: var(--gold); }
.v1-foot__tag {
  margin: 8px 0 0;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-navy2);
}
.v1-foot__note { margin: 16px 0 0; font-size: .92rem; color: var(--on-navy2); max-width: 40ch; }

.v1-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.v1-foot__h {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
}
.v1-foot__col a { color: var(--on-navy); text-decoration: none; font-size: .95rem; border-bottom: 1px solid transparent; }
.v1-foot__col a:hover { border-bottom-color: var(--gold); }
.v1-foot__addr { margin: 0; font-size: .95rem; color: var(--on-navy2); }

.v1-foot__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; align-items: center;
  margin-top: clamp(38px, 6vh, 64px);
  padding-top: 20px;
  border-top: 1px solid rgba(244, 238, 226, .2);
}
.v1-foot__bottom p { margin: 0; font-size: .84rem; color: var(--on-navy2); }
.v1-credit a { color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px; }
.v1-credit a:hover { color: var(--gold); }

@media (max-width: 860px) { .v1-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .v1-foot__in { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- beweging */

/* De verborgen begintoestand hangt aan .anim, en .anim wordt alleen gezet bij
   prefers-reduced-motion: no-preference. Bij motion uit of zonder script staat
   er dus nooit een opacity 0 die niets meer kan onthullen (LESSONS regel 7 en 8).
   Alleen opacity en transform, nooit clip-path. */
.anim .v1-rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1);
}
.anim .v1-rv.is-in { opacity: 1; transform: none; }