/* ═══════════════════════════════════════════════════════════
   SEENN — stijl
   Gebouwd door Smeulders Digital.

   Zwart, goud en wit, zoals het brandbook van Seenn het voorschrijft
   (brandbook\Brandbook Seenn.pdf, ontvangen 11 sep 2026). De kleuren
   en de lettertypes hieronder komen daar letterlijk uit; wat er
   afgeleid is, staat erbij.

   Eén achtergrond over de hele pagina. Het verschil tussen de
   blokken zit in de lucht ertussen en in de gouden lijnen, nooit
   in de kleur van de achtergrond.

   Twee lettertypes, zelf gehost: Prata voor de titels, Montserrat
   voor al de rest. Geen framework, geen externe verbinding, dus ook
   geen cookiebanner nodig.

   De beweging zit in css. Javascript zet alleen een klasse bij
   als een blok in beeld komt. Zonder javascript staat alles er
   gewoon, meteen zichtbaar.
   ═══════════════════════════════════════════════════════════ */


/* ── De lettertypes ────────────────────────────────────── */
/* Uit het brandbook: Montserrat voor de lopende tekst (Regular, en
   Semi Bold waar iets nadruk krijgt) en Prata voor de titels. Prata
   bestaat maar in één gewicht, en dat is genoeg: het is een letter
   met veel contrast, dun en dik naast elkaar, en die vraagt om groot
   gezet te worden en met rust gelaten.

   Tot 11 sep 2026 stonden hier Spectral en Fraunces. Die bestanden
   staan nog in fonts\ maar worden niet meer geladen. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Prata";
  src: url("../fonts/prata-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* ── De kleuren en maten ───────────────────────────────── */
/* Het palet uit het brandbook, blz. 3 en 4:
     Seenn Black  #000000
     Seenn Gold   #C0A360
     Seenn White  #FFFFFF
     Seenn Grey   #F0F0F0  (het secundaire palet)
   Wat hieronder niet letterlijk in het boek staat, is ervan afgeleid:
   het grijs op een deel doorzichtig voor stillere tekst, een tint
   goud met wit erin voor de aanraakstand van een knop, en een zwart
   dat een haartje lichter is voor een blok dat naar voren komt.

   Voor 11 sep 2026 was alles hier warm en bruinig. Het brandbook is
   strikt neutraal, en dat is nu ook de site. De namen van de
   variabelen zijn gebleven zodat de rest van het bestand niet
   hoefde te veranderen. */

:root {
  --nacht:      #000000;   /* Seenn Black */
  --nacht-rgb:  0, 0, 0;   /* hetzelfde, voor rgba(): een waas over een foto */
  --nacht-op:   #111111;   /* een blok dat iets naar voren komt */
  --nacht-diep: #000000;   /* de voet; er is niets dieper dan zwart */
  --room:       #F0F0F0;   /* Seenn Grey: de lopende tekst */
  --wit:        #FFFFFF;   /* Seenn White: de titels */
  --room-zacht: rgba(240, 240, 240, .62);
  --room-stil:  rgba(240, 240, 240, .38);
  --goud:       #C0A360;   /* Seenn Gold */
  --goud-licht: #D9C48F;   /* goud met wit erin, alleen voor een knop onder de muis */
  --lijn:       rgba(240, 240, 240, .13);

  --letter: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --titel:  "Prata", Georgia, "Times New Roman", serif;

  --breed: 78rem;
  --smal:  44rem;
  --kant:  clamp(1.25rem, 5vw, 4rem);
  --lucht: clamp(3.25rem, 6vw, 6rem);

  --veer: cubic-bezier(.2, .7, .25, 1);
}


/* ── Basis ─────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; background: var(--nacht); }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--room);
  font-family: var(--letter);
  font-weight: 400;
  /* Montserrat is breder dan de schreefletter die hier stond; een
     tik kleiner leest even groot. */
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3 { font-weight: 400; line-height: 1.1; margin: 0; color: var(--wit); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--goud); color: var(--nacht); }

:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--goud); color: var(--nacht);
  padding: .75rem 1.25rem; text-decoration: none;
}
.overslaan:focus { left: 0; }


/* ── De oogjes ─────────────────────────────────────────────
   Hun handtekening: S, twee oogjes, NN. De pupillen kijken naar
   je muis. Doe je niets, dan kijken ze vanzelf rond.

   --ox en --oy lopen van -1 tot 1 en worden door javascript gezet.
   Zonder javascript staan ze op de ruststand uit het brandbook:
   de pupil rechtsboven, zoals in het logomerk op blz. 17 tot 22.
   Daar is de pupil ook drie tiende van het oog groot; dat is hier
   overgenomen. */

/* De ruststand staat op het paar en niet op het oog zelf: javascript
   zet --ox en --oy op het paar, en een waarde op het oog zou daar
   altijd boven gaan. */
.ogen {
  --ox: .62;   /* rechtsboven, zoals in het logomerk */
  --oy: -.7;
  display: inline-flex;
  gap: .16em;
  vertical-align: baseline;
}
.oog {
  --maat: 1em;
  position: relative;
  display: inline-block;
  width: var(--maat);
  height: var(--maat);
  border-radius: 50%;
  background: var(--goud);
  flex: 0 0 auto;
}
.oog b {
  position: absolute;
  left: 50%; top: 50%;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: var(--nacht);
  transform: translate(
    calc(-50% + var(--ox, 0) * .26 * var(--maat)),
    calc(-50% + var(--oy, 0) * .26 * var(--maat))
  );
  transition: transform .35s var(--veer);
}

/* Kijkt er niemand mee, dan dwalen ze zelf wat rond. */
@media (hover: none) {
  .oog b { animation: rondkijken 7s ease-in-out infinite; }
}
@keyframes rondkijken {
  0%, 100% { transform: translate(calc(-50% + .16em), calc(-50% - .18em)); }
  15% { transform: translate(calc(-50% + .22em), calc(-50% - .12em)); }
  35% { transform: translate(calc(-50% - .22em), calc(-50% + .06em)); }
  55% { transform: translate(calc(-50% + .1em), calc(-50% + .2em)); }
  75% { transform: translate(calc(-50% - .06em), calc(-50% - .2em)); }
}


/* ── Het startscherm ───────────────────────────────────────
   Eén beeld over het hele scherm: een fles en een glas op een bronzen
   muur (fotos\intro.jpg). Rechts van het midden het logo, rechtsboven
   de druiven, rechtsonder Kom binnen. Sinds 17 sep 2026; daarvoor de
   twee oogjes op zwart met het logo dat eromheen groeide. */

/* Het startscherm is standaard niet zichtbaar, en het wordt alléén
   zichtbaar door intro-toont, een klasse die het stukje javascript in
   delen\kop.php erop zet op hetzelfde moment dat het de knoppen
   aansluit.

   Dat is met opzet zo streng. Eerst hing dit aan de klasse js, en dan
   verscheen het scherm ook wanneer dat script besloot over te slaan
   (bijvoorbeeld omdat je de intro al gezien had) of ergens struikelde.
   Er hing dan niets aan de knoppen en de bezoeker zat vast. Nu kan dat
   niet meer: geen javascript, geen intro.

   intro-aan zorgt voor het vastzetten van de pagina en het wachten van
   het eerste scherm. Die klasse gaat er meteen af bij een klik, terwijl
   intro-toont pas verdwijnt als het wegvagen gedaan is. */

.intro { display: none; }
html.intro-aan { overflow: hidden; }

html.intro-toont .intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  overflow: hidden;
  /* Zonder foto: de bronzen muur, iets warmer dan de rest van de site. */
  background:
    radial-gradient(70% 60% at 30% 40%, rgba(150, 98, 52, .45), rgba(150, 98, 52, 0) 70%),
    radial-gradient(50% 50% at 85% 85%, rgba(110, 70, 36, .35), rgba(110, 70, 36, 0) 70%),
    var(--nacht);
  transition: opacity .8s var(--veer), transform .8s var(--veer);
}
html.intro-toont .intro.is-weg {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

/* Het beeld vult het scherm (cover). Elk scherm heeft een andere
   verhouding, dus er valt altijd een reep boven en onder of links en
   rechts weg; daarom moet in het beeld zelf alles wat telt (kurk, voet
   van het glas, druiven, logo) minstens een tiende van de rand blijven.
   Een poging met contain en een wazige rand (17 sep 2026) vond Brian
   niets: "twee strepen links en rechts". */
.intro__foto { position: absolute; inset: 0; overflow: hidden; }
.intro__foto picture { position: absolute; inset: 0; display: block; }
.intro__foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* Met het beeld erin zit het logo in het beeld zelf: dan geen vector-logo
   erover, behalve op een gsm zonder staande versie (zie onderaan). */
.intro--foto .intro__midden { display: none; }

/* De luiken doen hier niets; effecten.css maakt er de deur van. */
.intro__luik { display: none; }

/* Het logo, rechts van het midden, zoals op het beeld van Brian. */
.intro__midden {
  position: absolute;
  left: 56%; top: 50%;
  transform: translateY(-50%);
  width: min(24rem, 38vw);
}
.intro__logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(1rem) scale(.96);
  animation: introLogo 1.4s var(--veer) .5s forwards;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, .35));
}
@keyframes introLogo { to { opacity: 1; transform: none; } }

/* Terugval zolang er geen logobestand is. */
.intro__merk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  margin: 0;
  font-size: clamp(3.25rem, 15vw, 7rem);
  line-height: 1;
  color: var(--wit);
  letter-spacing: -.02em;
}
.intro__deel { opacity: 0; animation: introDeel 1.1s var(--veer) .5s forwards; }
.intro__deel--links  { transform: translateX(-1.2em); }
.intro__deel--rechts { transform: translateX(1.2em); }
@keyframes introDeel { to { opacity: 1; transform: none; } }

/* Rechtsboven de druiven, dun en licht, als de lijntekening van de handen. */
.intro__druiven {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4.5rem);
  top: clamp(1.5rem, 5vh, 3.5rem);
  width: clamp(6rem, 11vw, 10rem);
  height: auto;
  color: var(--room);
  opacity: 0;
  animation: introDruiven 1.2s var(--veer) 1.1s forwards;
}
.intro__druiven svg { display: block; width: 100%; height: auto; }
@keyframes introDruiven { to { opacity: .85; } }

/* Rechtsonder: Kom binnen. */
.intro__binnen {
  position: absolute;
  right: var(--kant);
  bottom: clamp(2rem, 7vh, 4rem);
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  background: none;
  border: 0;
  padding: .5rem;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--wit);
  cursor: pointer;
  opacity: 0;
  animation: opkomen .9s var(--veer) 1.6s forwards;
}
.intro__binnen svg { width: 2.125rem; height: .5rem; transition: transform .4s var(--veer); }
.intro__binnen:hover { color: var(--goud-licht); }
.intro__binnen:hover svg { transform: translateX(.35rem); }

/* Op een gsm: is er geen staande versie van het beeld, dan toont het
   liggende beeld de fles (die staat links) en staat het logo als vector
   bovenaan in het midden; de druiven kleiner. */
@media (max-width: 47.999rem) {
  .intro--geen-staand .intro__foto img { object-position: 28% 50%; }
  .intro--geen-staand .intro__midden { display: block; }
  .intro__midden {
    left: 50%; top: 22%;
    transform: translateX(-50%);
    width: min(16rem, 64vw);
  }
  .intro__druiven { width: 4.5rem; right: 1.25rem; top: 1.25rem; }
  .intro__binnen { right: 1.25rem; bottom: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-toont .intro { display: none; }
}


/* ── De overgangen ─────────────────────────────────────────
   Elk blok komt op als het in beeld schuift: het stijgt een
   stukje, wordt scherp en klaart op. De onderdelen binnen een
   blok volgen elkaar met een tel verschil, zodat het leest van
   boven naar beneden in plaats van in één klap.

   Dit hangt aan de klasse js op <html>, die javascript er zelf
   bij zet. Staat javascript uit, dan is er geen beweging en
   staat gewoon alles er. */

.js .rijs > * {
  opacity: 0;
  transform: translateY(2.5rem);
  filter: blur(6px);
  transition: opacity .9s var(--veer), transform .9s var(--veer), filter .9s var(--veer);
}
.js .rijs.is-in > * { opacity: 1; transform: none; filter: none; }

.js .rijs > *:nth-child(1) { transition-delay: 0s; }
.js .rijs > *:nth-child(2) { transition-delay: .1s; }
.js .rijs > *:nth-child(3) { transition-delay: .2s; }
.js .rijs > *:nth-child(4) { transition-delay: .3s; }
.js .rijs > *:nth-child(5) { transition-delay: .4s; }
.js .rijs > *:nth-child(6) { transition-delay: .5s; }
.js .rijs > *:nth-child(n+7) { transition-delay: .55s; }

/* Foto's komen op door uit te zoomen. Het beeld staat een tikje
   te groot en zakt terug op zijn plaats. */
.js .zoem { overflow: hidden; }
.js .zoem img { transform: scale(1.18); transition: transform 1.6s var(--veer); }
.js .is-in .zoem img, .js .zoem.is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rijs > *, .js .zoem img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}


/* ── Terugkerende onderdelen ───────────────────────────── */

.binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: var(--kant);
}
.binnen.smal { max-width: calc(var(--smal) + var(--kant) * 2); }

section { padding-block: var(--lucht); position: relative; }

/* Eén achtergrond over de hele pagina. Er zaten eerst blokken in die
   iets lichter waren, met een verloop naar het zwart aan de randen, maar
   die randen bleven zichtbaar en dan lijkt het twee achtergronden. Het
   verschil tussen de blokken zit nu in de lucht ertussen en in de gouden
   lijnen, niet in de kleur. */

/* Het kleine woordje boven een titel: Montserrat Semi Bold, in
   kapitalen en gespatieerd, in goud. Precies zoals "WELCOME TO SEENN"
   op de sitepagina in het brandbook (blz. 32 en 33). */
.label {
  font-size: .6875rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--goud);
  margin: 0 0 1rem;
}

/* Prata mag niet strakker gezet worden dan hij is: de dunne
   haarlijnen hebben lucht nodig. Dus geen negatieve letterafstand. */
.titel {
  font-family: var(--titel);
  font-weight: 400;
  font-size: clamp(1.875rem, 1rem + 3.6vw, 3.375rem);
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0 0 1.5rem;
  max-width: 18ch;
  color: var(--wit);
}

.inleiding {
  max-width: 46ch;
  color: var(--room-zacht);
  margin-bottom: 3rem;
}

/* Een link die geen knop is. De gouden streep groeit onder het
   woord door van links naar rechts. */
.lijn {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}
.lijn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--lijn);
}
.lijn::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--goud);
  transition: width .5s var(--veer);
  z-index: 1;
}
.lijn:hover::before, .lijn:focus-visible::before { width: 100%; }

.lijn--groot {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  display: inline-block;
}
.lijn--groot::after, .lijn--groot::before { bottom: -2px; }

.verder { margin-top: 3.5rem; }

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

/* De knop uit het brandbook (blz. 33): een strak rechthoekje in goud
   met een kort woord in kapitalen. Daar staat dat woord in wit; hier
   in zwart, omdat wit op dit goud te weinig contrast heeft om op een
   telefoon in een donkere zaak nog leesbaar te zijn. Zwart op goud
   staat ook in het boek, op het visitekaartje. */
.knop {
  display: inline-block;
  padding: 1rem 1.75rem;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .3s var(--veer), color .3s var(--veer),
              border-color .3s var(--veer), box-shadow .3s var(--veer);
}
.knop--vol {
  background: var(--goud);
  color: var(--nacht);
  border-color: var(--goud);
}
.knop--vol:hover, .knop--vol:focus-visible {
  background: var(--goud-licht);
  border-color: var(--goud-licht);
  box-shadow: 0 0 2.5rem rgba(192, 163, 96, .3);
}
.knop--licht {
  background: var(--wit);
  color: var(--nacht);
  border-color: var(--wit);
}
.knop--licht:hover, .knop--licht:focus-visible { background: var(--room); border-color: var(--room); }

.knop--rand { background: transparent; color: var(--wit); border-color: rgba(240,240,240,.35); }
.knop--rand:hover, .knop--rand:focus-visible { border-color: var(--goud); color: var(--goud-licht); }


/* ── De mededeling ─────────────────────────────────────── */
/* Een balk in goud met zwarte tekst. Hij stond in het rood van de
   trap, maar dat rood zit niet in het brandbook. Een volle gouden
   balk is de enige plek waar het goud als vlak staat, dus het valt
   nog altijd op. */

.omroep {
  background: var(--goud);
  color: var(--nacht);
  text-align: center;
  position: relative;
  z-index: 45;
}
.omroep__tekst {
  margin: 0;
  padding: .75rem var(--kant);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
}


/* ── De kop ────────────────────────────────────────────── */
/* Zweeft doorzichtig over de film en krijgt pas een donkere balk zodra
   je scrolt (is-vast, uit main.js). Op 15 sep 2026 stond de balk even
   van het begin af; Brian vond het doorzichtige toch beter. */

.kop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--veer), border-color .5s var(--veer),
              backdrop-filter .5s var(--veer);
}
.kop.is-vast {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--lijn);
}
.kop__binnen {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 1.25rem var(--kant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.merk { text-decoration: none; display: inline-flex; align-items: center; }

/* Het logo staat als vector in fotos\logo-licht.svg: het woordmerk
   in wit met de baseline in goud, zoals op blz. 10 van het brandbook.
   Het is rechtstreeks uit de pdf gehaald, dus het is exact hun
   tekening en blijft scherp op elke maat.

   Dit blok hieronder is de terugval voor als er ooit alleen een
   donker logobestand zou staan: dan wordt de vorm ervan als masker
   gebruikt en in onze kleur gezet. */
.merk__logo {
  display: inline-block;
  height: clamp(2.1rem, 4.5vw, 2.9rem);
  background: var(--room);
  -webkit-mask: var(--logo) no-repeat center / contain;
          mask: var(--logo) no-repeat center / contain;
  transition: background-color .35s var(--veer);
}
/* De foto binnenin staat er alleen om de breedte te bepalen. */
.merk__logo > img { height: 100%; width: auto; opacity: 0; }
.merk:hover .merk__logo { background: var(--goud); }

.merk__logo--echt {
  background: none;
  -webkit-mask: none; mask: none;
  width: auto;
  /* Het woordmerk is breed en laag; op deze hoogte is het net zo
     aanwezig als het logo met baseline daarvoor was. */
  height: clamp(1.9rem, 3.4vw, 2.5rem);
}

.merk__naam {
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: var(--wit);
}

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .5rem 0;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wit);
  cursor: pointer;
}
.menuknop__streep {
  width: 1.5rem; height: 1px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  transition: box-shadow .3s var(--veer), transform .3s var(--veer);
}
.menuknop[aria-expanded="true"] .menuknop__streep { box-shadow: none; transform: rotate(45deg); }

.menu__lijst { list-style: none; margin: 0; padding: 0; }
/* De navigatie zoals op blz. 33: klein, in kapitalen, gespatieerd. */
.menu__lijn {
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wit);
  position: relative;
  padding-bottom: 3px;
}
.menu__lijn::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--goud);
  transition: width .4s var(--veer);
}
.menu__lijn:hover::after, .menu__lijn:focus-visible::after, .menu__lijn.is-hier::after { width: 100%; }
.menu__lijn.is-hier { color: var(--goud-licht); }

@media (max-width: 59.999rem) {
  .menu {
    display: none;
    width: 100%;
    order: 3;
    padding-top: 1.25rem;
    margin-top: .75rem;
    border-top: 1px solid var(--lijn);
  }
  .menu.is-open { display: block; }
  .kop__binnen { flex-wrap: wrap; }
  .kop:has(.menu.is-open) { background: rgba(0,0,0,.96); backdrop-filter: blur(14px); }
  .menu__lijst li { border-bottom: 1px solid var(--lijn); }
  .menu__lijst li:last-child { border-bottom: 0; }
  .menu__lijn { display: block; padding: 1rem 0; font-size: .875rem; }
  .menu__lijn::after { display: none; }
  .menu__bellen { margin-top: 1.25rem; width: 100%; text-align: center; }
}

@media (min-width: 60rem) {
  .menuknop { display: none; }
  .menu { display: flex; align-items: center; gap: 2.5rem; }
  .menu__lijst { display: flex; gap: 2rem; }
}


/* ── De verlofmelding ──────────────────────────────────── */

.verlof {
  position: relative;
  z-index: 35;
  background: linear-gradient(180deg, rgba(192,163,96,.16), rgba(192,163,96,.05));
  border-bottom: 1px solid var(--lijn);
  margin-top: -1px;
}
.verlof p {
  max-width: var(--breed);
  margin: 0 auto;
  padding: .85rem var(--kant);
  font-size: .9375rem;
  color: var(--room-zacht);
}
.verlof strong { font-weight: 500; color: var(--goud-licht); }
.verlof span { margin-left: .3rem; }


/* ── Het eerste scherm ─────────────────────────────────── */
/* De kopbalk zweeft erover, dus het eerste scherm begint helemaal
   bovenaan de pagina. */

/* Sinds 15 sep 2026 staat de titel in het midden van het scherm, met een
   regel in kleine kapitalen eronder, zoals op het voorbeeld dat Brian
   stuurde. Daarvoor stond hij linksonder met een zin en twee knoppen. */
.held {
  position: relative;
  display: flex;
  align-items: flex-end;        /* de titel linksonder op de film, sinds 17 sep 2026 */
  justify-content: flex-start;
  text-align: left;
  min-height: 100svh;
  margin-top: calc(-1 * var(--overlap, 5rem));
  padding-top: calc(var(--overlap, 5rem) + 3rem);
  padding-bottom: clamp(3.5rem, 11vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.held__achter { position: absolute; inset: 0; z-index: -3; }
.held__achter img,
.held__achter video {
  width: 100%; height: 100%;
  /* Sinds 15 sep 2026 staat hier het terras overdag, zonnig en zoals de
     foto is; die heeft geen opheldering nodig. Staand beeld: op een breed
     scherm zie je de band met de tafels en het gordijn, op een gsm het
     hele terras. */
  object-fit: cover; object-position: 50% 58%;
}
/* De film (de glazen tegen de avondlucht) is liggend; de glazen staan in
   het midden, dus die mag gewoon gecentreerd. */
.held__achter video {
  object-position: 50% 50%;
  /* Het beeld schuift traag mee omhoog terwijl je scrolt. */
  transform: translateY(calc(var(--rol, 0) * 14vh)) scale(1.08);
  will-change: transform;
}
/* Het waas over het eerste scherm.

   Eerst lag hier een deken over het hele beeld, en dat maakte alles
   even donker: ook de kant waar geen tekst staat. Nu loopt het van
   links naar rechts: donker genoeg om de titel te kunnen lezen, en
   naar rechts toe bijna weg, zodat je de wijn ziet. Dat is het
   verschil tussen een donker scherm en een sfeervol scherm. */
.held::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Een lichte foto vraagt om een ander waas dan de donkere glazen van
       daarvoor: van onderaf donker waar de titel staat, en de rest, de
       bomen en het gordijn, blijft zoals ze is. */
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.2) 100%);
}

.held__binnen { width: 100%; }

.held__label {
  font-size: .6875rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--goud);
  margin: 0 0 1.25rem;
  font-weight: 600;
}
.held__titel {
  font-family: var(--titel);
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 5.2vw, 5rem);
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 14ch;
  margin: 0;
  color: var(--wit);
  text-wrap: balance;
}
.held__onder {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--goud);   /* goud, het "beige" van Brian (15 sep 2026); eerst wit */
}
/* Onder de titel: open of gesloten, met het stipje dat klopt als ze open
   zijn (zie .status verderop). Sinds 17 sep 2026. */
.held__status { margin: 1.25rem 0 0; }
.held__status .status__kort { color: var(--goud); }
.held__status .status__lang { color: var(--room); }
.held__tekst {
  max-width: 44ch;
  color: rgba(240, 240, 240, .82);
  margin-bottom: 2rem;
}
.held__adres { margin: 1.75rem 0 0; font-size: .9375rem; color: var(--room-zacht); }

/* ── Hoe het eerste scherm opkomt ──────────────────────────
   Het kleine woordje trekt zich samen van wijd naar normaal, de
   titel wordt van onderaf opengeveegd, en de rest volgt met een
   tel verschil. */

.js .held__label {
  opacity: 0;
  letter-spacing: .6em;
  animation: labelOp 1.3s var(--veer) .2s forwards;
}
@keyframes labelOp { to { opacity: 1; letter-spacing: .24em; } }

.js .held__titel {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(1.5rem);
  animation: titelOp 1.3s var(--veer) .45s forwards;
}
@keyframes titelOp { to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; } }

.js .held__onder, .js .held__tekst, .js .held .status, .js .held .knoppen, .js .held__adres {
  opacity: 0;
  transform: translateY(1.75rem);
  animation: opkomen 1s var(--veer) forwards;
}
.js .held__onder  { animation-delay: .95s; }
.js .held__tekst  { animation-delay: .95s; }
.js .held .status { animation-delay: 1.1s; }
.js .held .knoppen { animation-delay: 1.22s; }
.js .held__adres  { animation-delay: 1.34s; }

@keyframes opkomen { to { opacity: 1; transform: none; } }

/* Terwijl het startscherm nog voor de site staat, wacht alles hier.
   Anders is de hele opkomst al voorbij tegen dat de bezoeker
   binnenkomt en ziet hij er niets van. */
html.intro-aan .held__label,
html.intro-aan .held__titel,
html.intro-aan .held__onder,
html.intro-aan .held__tekst,
html.intro-aan .held .status,
html.intro-aan .held .knoppen,
html.intro-aan .held__adres,
html.intro-aan .held__achter img,
html.intro-aan .held__achter video { animation-play-state: paused; }

/* De tekst schuift sneller weg dan de foto terwijl je scrolt. Dat
   verschil in snelheid is wat diepte geeft. */
.held__binnen {
  transform: translateY(calc(var(--rol, 0) * 7vh));
  opacity: calc(1 - var(--rol, 0) * 1.15);
  will-change: transform, opacity;
}

/* De foto komt binnen door traag uit te zoomen. */
.js .held__achter img,
.js .held__achter video { animation: heldZoem 2.6s var(--veer) backwards; }
@keyframes heldZoem { from { transform: scale(1.22); } }

@media (prefers-reduced-motion: reduce) {
  .js .held__label, .js .held__titel, .js .held__onder, .js .held__tekst,
  .js .held .status, .js .held .knoppen, .js .held__adres {
    opacity: 1; transform: none; clip-path: none; letter-spacing: .24em; animation: none;
  }
  .held__achter img, .held__achter video, .held__binnen { transform: none; opacity: 1; animation: none; }
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 2rem;
  font-size: .9375rem;
}
.status__stip { width: .45rem; height: .45rem; border-radius: 50%; background: var(--room-stil); }
.status__stip.is-open {
  background: var(--goud);
  box-shadow: 0 0 0 0 rgba(192, 163, 96, .55);
  animation: kloppen 2.6s ease-out infinite;
}
@keyframes kloppen {
  70%  { box-shadow: 0 0 0 .75rem rgba(192, 163, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 163, 96, 0); }
}
.status__kort { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; color: var(--goud-licht); }
.status__lang { color: var(--room-zacht); }

@media (max-width: 47.999rem) {
  .held { min-height: 92svh; }
  .held__titel { font-size: 2.5rem; }
  .held__onder { font-size: .6875rem; letter-spacing: .24em; }
  .held__tekst { font-size: .9375rem; max-width: 36ch; margin-bottom: 1.5rem; }
  .held .knoppen { display: none; }  /* die staan in de duimbalk */
  .status { margin-bottom: 1rem; }
  .held__adres { margin-top: .5rem; }
}


/* ── Wie we zijn ───────────────────────────────────────── */

.over__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 60rem) {
  .over__raster { grid-template-columns: 5fr 6fr; align-items: center; }
}
.over__beeld { margin: 0; position: relative; }
.over__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.over__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55));
  pointer-events: none;
}
.over__tekst p { max-width: 52ch; color: var(--room-zacht); }

.troeven {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--lijn);
}
.troeven li { display: grid; gap: .25rem; }
.troeven strong {
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goud);
}
.troeven span { color: var(--room-zacht); font-size: .9375rem; }


/* ── De kaart in het kort ──────────────────────────────── */

.proeflijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border-block: 1px solid var(--lijn);
}
@media (min-width: 40rem) { .proeflijst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .proeflijst { grid-template-columns: repeat(4, 1fr); } }

.proef {
  background: var(--nacht);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  transition: background-color .4s var(--veer);
}
.proef::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--goud), transparent);
  opacity: 0;
  transition: opacity .4s var(--veer);
}
.proef:hover { background: #0C0C0C; }
.proef:hover::before { opacity: 1; }

.proef__soort {
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goud);
  margin: 0;
}
.proef__naam { font-family: var(--titel); font-size: 1.25rem; margin: 0; line-height: 1.25; }
.proef__bij { font-size: .875rem; color: var(--room-zacht); font-style: italic; margin: 0; flex: 1; }

.prijs { margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: 1.25rem; font-variant-numeric: tabular-nums; }
.prijs__deel { white-space: nowrap; }
.prijs__wat {
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--room-zacht);
  margin-right: .25rem;
}


/* ── Stukken uit de winkel ─────────────────────────────── */

.stukken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 40rem) { .stukken { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  .stukken--drie { grid-template-columns: repeat(3, 1fr); }
  .stukken--vier { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 80rem) { .stukken--vier { grid-template-columns: repeat(4, 1fr); } }

.stuk__beeld { overflow: hidden; background: var(--nacht-op); position: relative; }
.stuk__beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .8s var(--veer), filter .8s var(--veer);
}
.stuk__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.5));
  opacity: 0;
  transition: opacity .5s var(--veer);
}
.stuk:hover .stuk__beeld img { transform: scale(1.06); }
.stuk:hover .stuk__beeld::after { opacity: 1; }

.stuk__naam { font-family: var(--titel); font-size: 1.1875rem; margin: 1.25rem 0 .25rem; }
.stuk__prijs { margin: 0; font-variant-numeric: tabular-nums; color: var(--goud-licht); }
.stuk__bij { margin: .5rem 0 0; font-size: .9375rem; font-style: italic; color: var(--room-zacht); }



/* ── Wat klanten zeggen ────────────────────────────────── */

.reacties__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 48rem) { .reacties__lijst { grid-template-columns: repeat(2, 1fr); } }

.reactie { padding-top: 1.5rem; position: relative; }
.reactie::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--goud), transparent 70%);
}
.reactie blockquote { margin: 0; }
.reactie blockquote p { font-family: var(--titel); color: var(--wit); margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.55; }
.reactie__van {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--room-zacht);
}


/* ── De fotomuur ───────────────────────────────────────────
   Zijn eigen foto's, groot, van rand tot rand. Een staande foto is
   een hoog smal vak, een liggende een breed vak; door de afwisseling
   krijgt de rij een ritme. De kier ertussen is klein, zodat het één
   muur is en geen rij kaartjes.

   Dit is het ene ding dat zijn vorige site had en deze niet: de zaak
   groot in beeld. Daar was het de hele startpagina, hier één blok.
   Sinds 15 sep 2026. */

/* Geen titel meer boven de muur (sinds 15 sep 2026), alleen het regeltje
   met het pijltje. Boven de muur wat extra lucht bovenop die van de kaart
   erboven (Brian wilde er speling tussen), onder de muur een klein beetje
   voor de lijn van de voet. */
.sfeer { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.sfeer__band {
  list-style: none;
  margin: 0;
  /* De eerste foto staat gelijk met de tekst erboven, ook op een breed
     scherm waar de tekst in het midden staat. */
  --muur-kant: max(var(--kant), calc((100% - var(--breed)) / 2 + var(--kant)));
  padding: 0 0 0 var(--muur-kant);
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--muur-kant);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sfeer__band::-webkit-scrollbar { display: none; }
.sfeer__band li {
  flex: 0 0 auto;
  height: clamp(26rem, 78vh, 46rem);   /* groot: bijna een scherm hoog */
  scroll-snap-align: start;
  background: var(--nacht-op);
}
/* Rechts een lege rand ter breedte van de kant, zodat de laatste foto
   niet tegen de schermrand plakt als je helemaal doorgeschoven bent. */
.sfeer__band li:last-child { margin-right: var(--muur-kant); }
.sfeer__band img { height: 100%; width: auto; object-fit: cover; display: block; }
.sfeer__band .is-staand img { aspect-ratio: 3 / 4; }
.sfeer__band .is-liggend img { aspect-ratio: 4 / 3; }

/* Boven de muur: links "Sfeerfoto's" met een gouden pijltje naar rechts,
   rechts de twee pijlen. De pijlen zijn dun, goud, en er alleen met
   javascript, want zonder doen ze niets. Op een gsm schuif je met je
   vinger: dan zijn de pijlen weg en blijft het pijltje bij het woord. */
.sfeer__kop { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; min-height: 3rem; }
.sfeer__hint {
  margin: 0;
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  color: var(--room);
}
.sfeer__hint svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--goud); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sfeer__pijlen { display: none; gap: .5rem; }
.js .sfeer__pijlen { display: flex; }
.sfeer__pijl {
  width: 3rem; height: 3rem;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  background: none;
  color: var(--goud);
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .3s var(--veer), color .3s var(--veer), opacity .3s var(--veer);
}
.sfeer__pijl svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sfeer__pijl:hover, .sfeer__pijl:focus-visible { border-color: var(--goud); color: var(--goud-licht); }
.sfeer__pijl[disabled] { opacity: .3; cursor: default; }
@media (max-width: 47.999rem) {
  .sfeer__band li { height: clamp(20rem, 62vh, 32rem); }
  .sfeer__pijlen { display: none !important; }
}


/* ── Praktisch ─────────────────────────────────────────── */

.praktisch__raster { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 52rem) { .praktisch__raster { grid-template-columns: repeat(3, 1fr); } }

.praktisch__kop {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--goud);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--lijn);
}
.praktisch__bij { font-size: .9375rem; color: var(--room-zacht); margin-top: 1rem; }
.praktisch__bij--let { color: var(--goud-licht); }
.praktisch__adres { font-size: 1.125rem; }
.praktisch .knoppen { margin-top: 1.25rem; }

.uren { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem; }
.uren__dag { font-size: .9375rem; color: var(--room-zacht); }
.uren__tijd {
  margin: 0;
  text-align: right;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--room-zacht);
}
.uren__dag.is-vandaag, .uren__tijd.is-vandaag { color: var(--goud-licht); font-weight: 500; }
.uren__dag.is-gesloten, .uren__tijd.is-gesloten { color: var(--room-stil); }
.uren__dag.is-vandaag.is-gesloten, .uren__tijd.is-vandaag.is-gesloten { color: rgba(240,240,240,.5); }


/* ── De voet ───────────────────────────────────────────── */

.voet {
  border-top: 1px solid var(--lijn);
  padding-top: var(--lucht);
  position: relative;
  overflow: hidden;
}
.voet::before {
  content: "";
  position: absolute; left: 50%; bottom: -14rem;
  width: min(60rem, 130vw); height: 28rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(192,163,96,.14), transparent 65%);
  pointer-events: none;
}
/* De lijntekening uit het brandbook: twee handen die klinken. Ze
   staat rechtsonder in de voet, in een dun grijs, zoals ze in het
   boek zelf in de hoek van elke pagina staat. Eén keer op de site,
   niet meer: het is een handtekening, geen behang. */
.voet__tekening {
  position: absolute;
  right: calc(-1 * clamp(2rem, 6vw, 6rem));
  bottom: 2.5rem;
  width: clamp(16rem, 30vw, 26rem);
  height: auto;
  color: var(--room);
  opacity: .11;
  pointer-events: none;
}
@media (max-width: 51.999rem) { .voet__tekening { display: none; } }
.voet__binnen { display: grid; gap: 3rem; padding-bottom: 3.5rem; position: relative; }
@media (min-width: 52rem) { .voet__binnen { grid-template-columns: 2fr 1fr 1fr; } }

.voet__groet {
  font-family: var(--titel);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  color: var(--wit);
  margin: 0 0 .75rem;
  letter-spacing: 0;
}
/* De oogjes in S..NN you: iets kleiner dan de letters en een haartje
   onder de basislijn, zodat ze in het woord staan en er niet op. */
.voet .ogen { vertical-align: -.02em; margin: 0 .04em; gap: .1em; }
.voet .ogen .oog { --maat: .8em; }
.voet__adres { margin: 0; font-size: .9375rem; color: var(--room-zacht); }

.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.voet ul a { text-decoration: none; color: var(--room-zacht); transition: color .3s var(--veer); }
.voet ul a:hover, .voet ul a:focus-visible { color: var(--goud-licht); }

.voet__klein {
  border-top: 1px solid var(--lijn);
  margin: 0;
  padding: 1.5rem var(--kant);
  text-align: center;
  font-size: .8125rem;
  color: var(--room-stil);
  position: relative;
}
.voet__klein a { color: inherit; }
.voet__klein a:hover { color: var(--goud); }


/* ── De duimbalk op een gsm ────────────────────────────── */

.duimbalk { display: none; }
@media (max-width: 47.999rem) {
  .duimbalk {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    gap: .6rem;
    padding: .5rem var(--kant);
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--lijn);
  }
  /* Sinds 24 sep 2026 kleiner en minder luid, op vraag van Brian: hij nam
     een vijfde van het scherm in. De kleur staat in warm.css, dezelfde als
     de rubriekenbalk op de kaart. */
  .duimbalk__knop {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: .6rem .5rem;
    border: 1px solid rgba(240,240,240,.22);
    border-radius: 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wit);
  }
  .duimbalk__knop--vol {
    background: var(--goud);
    border-color: var(--goud);
    color: var(--nacht);
  }
  body { padding-bottom: 3.6rem; }
}


/* ── De kaartpagina ────────────────────────────────────── */

.kaartkop { padding-bottom: 2rem; }

.kaartnav {
  position: sticky;
  top: var(--kophoogte, 5rem);
  z-index: 30;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--lijn);
}
.kaartnav ul {
  list-style: none;
  margin: 0 auto;
  max-width: var(--breed);
  padding: .9rem var(--kant);
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.kaartnav ul::-webkit-scrollbar { display: none; }
.kaartnav a {
  text-decoration: none;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--room-zacht);
  padding-bottom: 3px;
  position: relative;
  transition: color .3s var(--veer);
}
.kaartnav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--goud);
  transition: width .4s var(--veer);
}
.kaartnav a:hover, .kaartnav a:focus-visible, .kaartnav a.is-hier { color: var(--goud-licht); }
.kaartnav a:hover::after, .kaartnav a.is-hier::after { width: 100%; }

/* Sinds 24 sep 2026 ruimer, zodat de kaart en de winkel dezelfde
   maatvoering krijgen als de startpagina. */
.groep { padding-block: clamp(4rem, 8vw, 6.5rem); scroll-margin-top: 9rem; }
.groep + .groep { border-top: 1px solid var(--lijn); }
.groep__kop {
  font-family: var(--titel);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wit);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  margin: 0 0 2.5rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
/* De gouden lijn naast de kop trekt zichzelf open als het kopje
   in beeld komt. */
.groep__kop::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--goud), transparent);
  transform-origin: left;
}
.js .groep__kop::after { transform: scaleX(0); transition: transform 1.1s var(--veer); }
.js .groep.is-in .groep__kop::after { transform: scaleX(1); }

/* Ook de regels zelf mogen ademen (24 sep 2026): een kaart met lucht
   leest rustiger dan een lijst die volgepropt staat. */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
@media (min-width: 58rem) { .items { grid-template-columns: 1fr 1fr; column-gap: 4.5rem; } }

.item { display: grid; gap: .3rem; }
.item__regel { display: flex; align-items: baseline; gap: 1rem; }
.item__naam { font-size: 1.0625rem; margin: 0; font-weight: 500; color: var(--wit); }
.item__punten {
  flex: 1;
  border-bottom: 1px dotted rgba(240,240,240,.2);
  transform: translateY(-.28em);
  min-width: 1.5rem;
}
.item__prijzen { margin: 0; display: flex; gap: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__prijs { display: inline-flex; align-items: baseline; gap: .35rem; }
.item__wat { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); }
.item__bij { margin: 0; font-size: .9375rem; font-style: italic; color: var(--room-zacht); max-width: 48ch; }

.groep__noot {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn);
  font-size: .9375rem;
  color: var(--room-zacht);
}

.secrets {
  margin-top: var(--lucht);
  padding: clamp(2rem, 5vw, 3.5rem);
  background:
    linear-gradient(135deg, rgba(192,163,96,.14), rgba(192,163,96,.02) 60%),
    var(--nacht-op);
  border: 1px solid rgba(192,163,96,.28);
}
.secrets p { max-width: 46ch; margin: 0; font-family: var(--titel); font-size: 1.375rem; line-height: 1.4; color: var(--wit); }
.secrets p + p { margin-top: .75rem; font-family: var(--letter); color: var(--room-zacht); font-size: 1rem; }

.voetnoot { margin-top: 2.5rem; font-size: .875rem; color: var(--room-zacht); }


/* ── Het verhaal, de hele pagina ───────────────────────── */

.verhaal { max-width: var(--smal); }
.verhaal p { margin: 0 0 1.5em; font-size: 1rem; line-height: 1.85; color: rgba(240,240,240,.86); }
.verhaal__deel + .verhaal__deel {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--lijn);
}
.verhaal__kop {
  font-family: var(--titel);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wit);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  margin: 0 0 1.75rem;
}

.verhaal__slot {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2.5rem;
  border-top: 1px solid rgba(192,163,96,.4);
}
.verhaal__slot p { font-family: var(--titel); color: var(--goud); font-size: 1.25rem; line-height: 1.5; }
.verhaal__slot p:last-child {
  font-family: var(--letter);
  font-style: normal;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--room-zacht);
}

.verhaal__beeld { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.verhaal__beeld img { width: 100%; }
.verhaal__beeld figcaption { margin-top: 1rem; font-size: .8125rem; color: var(--room-zacht); }


/* ── Kopblok van een binnenpagina ──────────────────────── */

.paginakop {
  padding-top: calc(var(--overlap, 5rem) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-top: calc(-1 * var(--overlap, 5rem));
}
.paginakop .titel { margin-bottom: 1rem; }
.paginakop__tekst { max-width: 52ch; color: var(--room-zacht); }
.paginakop--midden { text-align: center; }
.paginakop--midden .paginakop__tekst { margin-inline: auto; }
.paginakop--midden .titel { margin-inline: auto; }


/* ── Contactpagina ─────────────────────────────────────── */

/* Sinds 21 sep 2026 kleiner (op vraag van Brian): niet meer over de volle
   breedte, maar een blok van hoogstens 58rem in het midden, en lager. */
.kaartbeeld { margin: 0 auto; overflow: hidden; max-width: 58rem; }
.kaartbeeld img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

.contactlijst { margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contactlijst dt {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--room-zacht);
}
.contactlijst dd { margin: .35rem 0 0; font-size: 1.125rem; color: var(--wit); }


/* ── De rustband ────────────────────────────────────────
   Eén beeld over de volle breedte met één zin erop. Een pauze
   tussen twee blokken die allebei om aandacht vragen. */

.rust {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 62vh, 40rem);
  overflow: hidden;
  isolation: isolate;
}
.rust__beeld {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 72%;
  z-index: -2;
}
.rust::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--nacht) 0%, rgba(0,0,0,.28) 24%, rgba(0,0,0,.30) 74%, var(--nacht) 100%),
    radial-gradient(ellipse at 50% 55%, rgba(0,0,0,.15) 20%, rgba(0,0,0,.5) 100%);
}
.rust__zin {
  margin: 0;
  padding: 0 var(--kant);
  text-align: center;
  font-family: var(--titel);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--wit);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .8);
}


/* ── Onze favorieten ───────────────────────────────────────
   Eén beeld over het hele scherm (fles en glas links op de bronzen
   muur), en op de lege muur rechts vier wijnen als rijen met een dun
   lijntje ertussen. Sinds 17 sep 2026, in de plaats van "De kaart in
   het kort"; delen/favorieten.php. */

.favorieten {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 0;
  overflow: hidden;
  isolation: isolate;
}
.favorieten__foto { position: absolute; inset: 0; margin: 0; z-index: -1; }
.favorieten__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 50%;   /* de fles links in beeld houden */
  display: block;
}
/* Rechts een tik donkerder, zodat de namen op de muur leesbaar blijven. */
.favorieten__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--nacht-rgb), 0) 45%, rgba(var(--nacht-rgb), .38) 70%, rgba(var(--nacht-rgb), .55) 100%);
}
/* Alles moet op één scherm passen, ook op een laptop van 1280 x 660
   (Brian, 17 sep 2026): bovenaan ruimte voor de kop die erover hangt,
   verder compact. */
.favorieten__binnen {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  padding-block: calc(var(--overlap, 5rem) + 1.5rem) clamp(2.5rem, 6vh, 4rem);
}
.favorieten__tekst { grid-column: 2; }
.favorieten__tekst .titel { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); margin-bottom: 1.25rem; }

.favorieten__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(241, 233, 222, .22); }
.favoriet { padding: .8rem 0; border-bottom: 1px solid rgba(241, 233, 222, .22); display: grid; gap: .15rem; }
.favoriet__soort { font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-licht); margin: 0; }
.favoriet__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.favoriet__naam { font-family: var(--titel); font-weight: 400; font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); margin: 0; line-height: 1.25; color: var(--wit); }
.favoriet .prijs { margin: 0; flex-shrink: 0; color: var(--room); font-size: .9375rem; }
.favoriet .prijs__wat { color: var(--room-zacht); }
.favoriet__bij { font-size: .8125rem; line-height: 1.5; color: var(--room-zacht); font-style: italic; margin: 0; }

/* Op een gsm: de foto bovenaan (de fles en het glas), de lijst eronder
   op het bruin. */
@media (max-width: 55.999rem) {
  .favorieten { display: block; min-height: 0; }
  .favorieten__foto { position: relative; height: 58vh; height: 58svh; }
  .favorieten__foto img { object-position: 22% 50%; }   /* de fles en het glas, links op het beeld */
  .favorieten__foto::after { background: linear-gradient(to top, rgba(var(--nacht-rgb), .7) 0%, rgba(var(--nacht-rgb), 0) 45%); }
  .favorieten__binnen { grid-template-columns: 1fr; padding-block: clamp(2.5rem, 6vw, 4rem) var(--lucht); }
  .favoriet { padding: 1rem 0; }
  .favorieten__tekst { grid-column: 1; }
}


/* ── Het gezicht achter Seenn ──────────────────────────────
   Drie polaroids in een zigzag, naar de schets van Brian (17 sep 2026):
   per rij de naam groot aan de ene kant en de polaroid aan de andere,
   en de volgende rij gespiegeld. De rijen schuiven een stuk in elkaar,
   zodat de naam van de ene rij naast de foto van de vorige staat. Het
   witte kader zit in de foto zelf. Geen effecten: de polaroids staan
   stil. delen/wij.php. */

.wij { padding-block: 0 clamp(5rem, 9vw, 8rem); }
.wij__kop { text-align: center; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); }
.wij__titel { max-width: none; margin: 0 auto .75rem; font-size: clamp(1.75rem, 1rem + 2.8vw, 2.9rem); }
.wij__zin {
  font-family: var(--titel);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  line-height: 1.5;
  color: var(--goud);
  margin: 0;
  text-wrap: balance;
}

.wij__rijen { max-width: 56rem; margin: 0 auto; }
.wij__rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
/* Elke volgende rij schuift omhoog, tot naast de foto van de vorige. */
.wij__rij + .wij__rij { margin-top: clamp(-4rem, -6vw, -1.5rem); }
/* De even rij is gespiegeld: foto links, naam rechts. */
.wij__rij--2 .wij__tekst { order: 2; }
.wij__rij--2 .wij__figuur { order: 1; }

.wij__tekst { text-align: center; }
.wij__naam {
  margin: 0 0 .5rem;
  font-family: var(--titel);
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 4.5vw, 4.5rem);
  line-height: 1;
  color: var(--goud);
}
.wij__bij {
  margin: 0 auto;
  max-width: 22ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--room-zacht);
}

.wij__figuur { margin: 0; }
.wij__polaroid {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}
/* Een tikje gedraaid, zoals polaroids op een tafel liggen. */
.wij__rij--1 .wij__polaroid { transform: rotate(2.5deg); }
.wij__rij--2 .wij__polaroid { transform: rotate(-2deg); }
.wij__rij--3 .wij__polaroid { transform: rotate(1.5deg); }

/* Zonder kader (SEENN_WIJ = gewoon): dezelfde vierkante uitsnede en
   dezelfde zigzag, maar recht, zonder wit kader, met een zachte schaduw
   en een dun randje zodat de foto niet in het bruin verzinkt. */
.wij--gewoon .wij__polaroid {
  transform: none;
  filter: none;
  width: min(100%, 20rem);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
  outline: 1px solid rgba(241, 233, 222, .12);
  outline-offset: -1px;
}

/* Het blok komt op zoals elk blok (rijs); de polaroids zelf doen niets. */
.js .rijs > .wij__rijen { transition-delay: .1s; }

@media (max-width: 47.999rem) {
  .wij__rij { grid-template-columns: 1fr; gap: 1rem; }
  .wij__rij + .wij__rij { margin-top: 2.5rem; }
  .wij__rij--2 .wij__tekst { order: 1; }
  .wij__rij--2 .wij__figuur { order: 2; }
  .wij__polaroid { width: min(100%, 17rem); }
  .wij__naam { font-size: 2.5rem; }
}


/* ── Het gezicht achter Seenn: de kringen ──────────────────
   Drie ronde foto's in dunne gouden kringen, zoals de kringen die
   glazen op een tafel laten. Ze overlappen elkaar als glazen die
   klinken: Frank in het midden, het grootst en bovenop; Marie links en
   lager, Kate rechts en hoger. Rond elke foto een gouden kring op een
   halve centimeter, en een tweede vagere kring iets verder, alsof het
   glas even verschoven is. delen/wij-kringen.php, 17 sep 2026. */

.kringen {
  --kring: 18rem;                  /* de doorsnee van de middelste */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
  padding-top: 1rem;
}
.kring { margin: 0; position: relative; text-align: center; flex: 0 0 auto; }
.kring__glas {
  position: relative;
  width: var(--kring);
  height: var(--kring);
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  /* De gouden kring op afstand, en de vage tweede kring verder. Het gat
     tussen foto en kring is doorzichtig, zodat een kring die over een
     andere hangt die andere laat zien: glazen op elkaar. */
  outline: 1px solid rgba(192, 163, 96, .8);
  outline-offset: .55rem;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.kring__glas img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block;
  /* Iets minder kleur, zodat de drie in het hout zakken. */
  filter: sepia(.28) saturate(.78) contrast(1.04) brightness(.96);
}
/* De tweede kring: een dunne vage ring iets verder en iets verschoven,
   het spoor van een glas dat even werd opgetild. */
.kring::before {
  content: "";
  position: absolute;
  left: 50%; top: calc(var(--kring) / 2);
  width: calc(var(--kring) + 2.6rem);
  height: calc(var(--kring) + 2.6rem);
  transform: translate(calc(-50% + .35rem), calc(-50% - .3rem));
  border-radius: 50%;
  border: 1px solid rgba(192, 163, 96, .28);
  pointer-events: none;
}
/* De plek van elk glas op de tafel. */
.kring--marie { --kring: 14rem; margin-top: 6.5rem; margin-right: -1rem; z-index: 1; }
.kring--frank { --kring: 18rem; margin-top: 0;      z-index: 2; }
.kring--kate  { --kring: 13rem; margin-top: 3rem;   margin-left: -1rem; z-index: 1; }
.kring--frank .kring__glas img { object-position: 50% 22%; }
.kring--kate  .kring__glas img { object-position: 50% 48%; }

.kring__tekst { display: block; margin-top: 1.4rem; }
.kring__naam {
  display: block;
  font-family: var(--titel);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.1;
  color: var(--goud);
}
.kring__bij {
  display: block;
  max-width: 20ch;
  margin: .5rem auto 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--room-zacht);
}
/* Bij Marie en Kate hangt de foto van Frank over de binnenrand; de tekst
   staat in het midden onder hun eigen kring, dat volstaat. */

/* De kringen staan stil; het blok komt op zoals elk blok. */
.js .rijs > .kringen > .kring { transition: none; }

@media (max-width: 55.999rem) {
  .kringen { --kring: 12rem; }
  .kring--marie { --kring: 10rem; margin-top: 5rem; margin-right: -1.25rem; }
  .kring--frank { --kring: 12.5rem; }
  .kring--kate  { --kring: 9.5rem; margin-top: 2.5rem; margin-left: -1.25rem; }
  .kring__bij { display: none; }
}
@media (max-width: 39.999rem) {
  /* Op een gsm onder elkaar, om en om links en rechts, elk een beetje over
     de vorige heen: nog altijd glazen op een tafel. */
  .kringen { display: block; padding-top: 0; }
  .kring { width: 72%; }
  .kring--marie { margin: 0 0 0 auto; --kring: 12rem; }
  .kring--frank { margin: 2.5rem auto 0 0; --kring: 14rem; }
  .kring--kate  { margin: 2.5rem 0 0 auto; --kring: 11rem; }
  .kring__glas { margin: 0 auto; }
  .kring__bij { display: block; }
}


/* ── Meet Frank Garritsen ──────────────────────────────────
   Naar het voorbeeld van Brian (17 sep 2026): links een groot staand
   portret met een kleinere foto over zijn onderhoek, achter de foto's
   een dun kader; rechts een tweede dun kader met de titel, de rol en
   de zin, en daaronder het verhaal in gewone tekst. De kaders zijn hier
   gouden haarlijnen op het bruin. delen/wij-meet.php. */

.meet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Links: het portret, de kleine foto over de hoek, en het kader erachter
   dat rechts en onder een stuk uitsteekt. */
.meet__beeld { position: relative; z-index: 2; padding: 1.5rem 0 3.5rem 1.5rem; }
.meet__tekst { position: relative; z-index: 1; }
.meet__lijst {
  position: absolute; inset: 0 2.5rem 0 0;
  border: 1px solid rgba(192, 163, 96, .45);
  pointer-events: none;
}
.meet__frank { position: relative; margin: 0; width: 82%; z-index: 1; }
.meet__frank img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.meet__kate {
  position: absolute; right: -3rem; bottom: -6.5rem;   /* lager en verder naar rechts, over de hoek van het kader, de tekst ernaast (Brian) */
  margin: 0; width: 52%; z-index: 2;
}
.meet__kate img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 48%; display: block; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
/* De foto van Kate is koel (witte kussens, grijs licht); een tik warmte
   zodat ze bij de bar van Frank past (Brian, 17 sep 2026). */
.meet__kate img { filter: sepia(.3) saturate(1.05) brightness(.97); }

/* Rechts: het kader met de titel. Het schuift een stuk naar links, achter
   het portret, zoals in het voorbeeld. */
.meet__kader {
  position: relative;
  /* Het kader begint achter het portret: de linkerrand zit onder de foto. */
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) calc(-1 * clamp(2rem, 5vw, 4.5rem) - 8rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) calc(clamp(2rem, 5vw, 4.5rem) + 8rem + clamp(1.5rem, 3vw, 2.5rem));
  border: 1px solid rgba(192, 163, 96, .45);
}
.meet__titel {
  margin: 0 0 .5rem;
  font-family: var(--titel);
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--goud);
}
.meet__rol {
  margin: 0 0 1.25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--room);
}
.meet__zin {
  margin: 0;
  font-family: var(--titel);
  font-size: clamp(1.1rem, 1rem + .7vw, 1.45rem);
  line-height: 1.4;
  color: var(--wit);
  text-wrap: balance;
}
/* Onder het citaat: gewone letters, stiller dan de zin erboven, zodat het
   citaat het zwaarste blijft. */
.meet__bij {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-size: clamp(.95rem, 1rem + .1vw, 1.0625rem);
  line-height: 1.65;
  color: var(--room-zacht);
  max-width: 46ch;
}

/* Naast Kate: haar naam in goud en één regel met een knipoog. Staat in de
   rechterkolom op de hoogte van haar foto. */
.meet__kate-tekst { margin: clamp(5rem, 11vw, 9rem) 0 0; max-width: 30ch; }
.meet__kate-naam {
  margin: 0 0 .5rem;
  font-family: var(--titel);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1.1;
  color: var(--goud);
}
.meet__kate-bij { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--room-zacht); }

@media (max-width: 55.999rem) {
  /* Op een gsm in deze volgorde: het kader met de titel, dan de foto's,
     dan het woordje over Kate (Brian, 17 sep 2026). De tekstkolom valt
     uit elkaar (display: contents) zodat het kader en de Kate-tekst elk
     hun eigen plek in het raster krijgen. */
  .meet { grid-template-columns: 1fr; gap: 2rem; }
  .meet__tekst { display: contents; }
  .meet__kader { order: 1; margin: 0; padding: 1.5rem; }
  .meet__beeld { order: 2; max-width: 26rem; margin: 0 auto 2rem; width: 100%; }
  .meet__kate { right: 0; bottom: -2rem; }
  .meet__kate-tekst { order: 3; margin-top: 0; }
}


/* ── De tekening die zichzelf trekt ─────────────────────────
   Eén foto over het hele scherm, het terras bij avond, met daarop de
   lijntekening uit het brandbook die lijn voor lijn tevoorschijn komt
   terwijl je scrolt (js/tekening.js), en linksonder één zin. Het blok
   plakt zolang de baan duurt: de baan is ruim twee schermen hoog, het
   vaste deel één. Zonder javascript is er geen baan en staat de
   tekening er gewoon.
   Sinds 15 sep 2026; sinds 17 sep in deze vorm (naar silla.be: foto
   over het hele scherm, een paar regels in een hoek). */

.teken { padding-block: 0; }
.teken__baan { position: relative; }
.teken__vast { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }

/* De foto over het hele vlak, met een waas: donker links waar de
   tekening staat, en onderaan waar de zin staat; rechts blijft de lamp
   en de tafels te zien. */
.teken__foto { position: absolute; inset: 0; margin: 0; z-index: 0; }
.teken__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.teken__foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--nacht-rgb), .84) 0%, rgba(var(--nacht-rgb), .62) 38%, rgba(var(--nacht-rgb), .22) 68%, rgba(var(--nacht-rgb), .30) 100%),
    linear-gradient(to top, rgba(var(--nacht-rgb), .55) 0%, rgba(var(--nacht-rgb), 0) 40%);
}

/* Erop: de tekening linksonder, op het grind waar de foto donker is, met
   de zin eronder in de hoek. */
.teken__binnen {
  position: relative; z-index: 1;
  max-width: var(--breed);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(5rem, 12vh, 8rem) var(--kant) clamp(9rem, 24vh, 13rem);
}
/* Nooit hoger dan de helft van het scherm: het is een tekening op een
   foto, geen behang. */
.teken__vlak {
  width: min(30rem, 100%, calc(50vh * 1.42));
  color: var(--room);            /* de kleur van de lijn; tekening.js leest ze uit */
}
.teken__vlak img, .teken__vlak canvas { width: 100%; height: auto; display: block; }
/* img en canvas staan hierboven op block, en dat wint van het hidden-attribuut;
   dus hier uitdrukkelijk: wat verborgen is, is verborgen. */
.teken__vlak [hidden] { display: none !important; }
.teken__vlak img { opacity: .92; }
.teken__zin {
  position: absolute;
  left: var(--kant);
  bottom: clamp(2.5rem, 8vh, 4.5rem);
  margin: 0;
  font-family: var(--titel);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1.3;
  color: var(--wit);
}
/* Met javascript: de baan wordt hoog, het vaste deel plakt, en de zin
   wacht tot de tekening af is. */
html.js .teken--leeft .teken__baan { height: 260vh; }
html.js .teken--leeft .teken__vast { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
html.js .teken--leeft .teken__binnen { height: 100%; min-height: 0; }
html.js .teken--leeft .teken__zin { opacity: 0; transform: translateY(.6rem); transition: opacity .9s var(--veer), transform .9s var(--veer); }
html.js .teken--leeft .teken__zin.is-in { opacity: 1; transform: none; }
@media (max-width: 55.999rem) {
  /* Op een gsm is de foto staand en past ze helemaal; het waas loopt dan
     van onder naar boven in plaats van van links naar rechts. */
  .teken__foto img { object-position: 50% 50%; }
  .teken__foto::after {
    background: linear-gradient(to top, rgba(var(--nacht-rgb), .86) 0%, rgba(var(--nacht-rgb), .55) 45%, rgba(var(--nacht-rgb), .40) 100%);
  }
  .teken__binnen { padding: clamp(5rem, 14vh, 7rem) 1.5rem clamp(7rem, 20vh, 9rem); }
  .teken__vlak { width: min(22rem, 100%, calc(38vh * 1.42)); }
  .teken__zin { left: 1.5rem; }
  html.js .teken--leeft .teken__baan { height: 200vh; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .teken--leeft .teken__baan { height: auto; }
  html.js .teken--leeft .teken__vast { position: static; height: auto; min-height: 100svh; }
  html.js .teken--leeft .teken__zin { opacity: 1; transform: none; }
}


/* ── Het drieluik ──────────────────────────────────────────
   Drie foto's los naast elkaar, op verschillende hoogtes, de
   middelste een stukje over de andere twee. Zoals foto's op een
   tafel. Naar millesime-antwerp.be, met onze eigen foto's.
   Sinds 15 sep 2026, onder de tekening. */

.drieluik { padding-block: clamp(6rem, 16vh, 11rem) clamp(5rem, 9vw, 8rem); }   /* bovenaan ruim, na de film; onderaan ruim, voor de scheiding */
.drieluik__raster {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: start;
  gap: 0;
}
.drieluik__foto { margin: 0; position: relative; }
.drieluik__foto img { width: 100%; height: auto; display: block; object-fit: cover; }
/* De hoogtes: links laag, midden hoog en breed, rechts halverwege.
   De middelste ligt bovenop en steekt links en rechts over. */
.drieluik__foto--links  { margin-top: clamp(4rem, 14vw, 12rem); z-index: 1; }
.drieluik__foto--links img  { aspect-ratio: 4 / 5; }
.drieluik__midden { position: relative; z-index: 2; margin-inline: -8%; }
.drieluik__foto--midden { margin-top: 0; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.drieluik__foto--midden img { aspect-ratio: 4 / 3; }
.drieluik__foto--rechts { margin-top: clamp(2rem, 7vw, 6rem); z-index: 1; }
/* De tekst in het zwart onder de middelste foto. */
.drieluik__tekst {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) 0;
  text-align: center;
}
.drieluik__zin {
  font-family: var(--titel);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.45;
  color: var(--wit);
  margin: 0;
  text-wrap: balance;
}
.drieluik__tekst .label { margin-bottom: 1rem; }
.drieluik__foto--rechts img { aspect-ratio: 3 / 4; }

/* Terwijl je scrolt, komen de drie van ver naar hun plek: de linkse van
   links en van onder, de rechtse van rechts en van onder, de middelste
   van onder en iets kleiner. --kom loopt van 0 (het blok komt onderaan
   het scherm binnen) tot 1 (het staat een derde van boven), dat zet
   main.js. Daarna drijven ze nog een klein beetje mee (--drift, van -1
   tot 1 over de hoogte van het blok). Zonder javascript staat --kom niet
   en staan ze gewoon op hun plek. Brian, 17 sep 2026. */
/* Nadrukkelijk via het raster, want .rijs.is-in > * zet anders opacity en
   transform terug (zie De overgangen). */
.js .drieluik__raster .drieluik__foto, .js .drieluik__raster .drieluik__midden { opacity: var(--kom, 1); will-change: transform, opacity; backface-visibility: hidden; }
.js .drieluik__raster .drieluik__foto--links {
  transform: translate(calc((1 - var(--kom, 1)) * -14vw), calc((1 - var(--kom, 1)) * 12vh + var(--drift, 0) * -2.5rem));
}
.js .drieluik__raster .drieluik__midden {
  transform: translateY(calc((1 - var(--kom, 1)) * 16vh + var(--drift, 0) * 2rem)) scale(calc(.9 + .1 * var(--kom, 1)));
}
.js .drieluik__raster .drieluik__foto--rechts {
  transform: translate(calc((1 - var(--kom, 1)) * 14vw), calc((1 - var(--kom, 1)) * 9vh + var(--drift, 0) * -1.5rem));
}
/* Het raster is hier zelf de .binnen, dus de foto's zijn de kinderen die
   main.js laat opkomen (rijs: vervagen en scherpstellen). Dat hoeft niet
   meer: het aanschuiven is het effect. Alleen de opacity uit --kom blijft. */
.js .rijs > .drieluik__foto, .js .rijs > .drieluik__midden { filter: none; transition: none; }
.js .rijs.is-in > .drieluik__foto, .js .rijs.is-in > .drieluik__midden { filter: none; }

@media (max-width: 47.999rem) {
  .drieluik__raster { grid-template-columns: 1fr 1fr; }
  /* Op een gsm alleen van onder naar boven komen; opzij is er geen plaats. */
  .js .drieluik__raster .drieluik__foto, .js .drieluik__raster .drieluik__midden { transform: translateY(calc((1 - var(--kom, 1)) * 8vh)); }
  .drieluik__midden { grid-column: 1 / -1; order: -1; margin-inline: 0; margin-bottom: .75rem; display: contents; }
  .drieluik__foto--midden { grid-column: 1 / -1; order: -1; margin-bottom: .75rem; }
  .drieluik__tekst { grid-column: 1 / -1; order: 1; padding: 2.5rem 0 0; }
  /* De twee kleine naast elkaar op dezelfde hoogte en in dezelfde vorm;
     het verspringen is iets voor een breed scherm (Brian, 17 sep 2026). */
  .drieluik__foto--links  { margin-top: 0; margin-right: .375rem; }
  .drieluik__foto--rechts { margin-top: 0; margin-left: .375rem; }
  .drieluik__foto--links img, .drieluik__foto--rechts img { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .js .drieluik__raster .drieluik__foto, .js .drieluik__raster .drieluik__midden { transform: none; opacity: 1; }
}


/* ── De scheiding ──────────────────────────────────────────
   Een dunne gouden lijn met de twee oogjes in het midden. Staat
   tussen het drieluik en de kaart. Sinds 15 sep 2026. */

.scheiding {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--kant);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.scheiding__lijn {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,163,96,.55) 30%, rgba(192,163,96,.55) 70%, transparent);
}
.scheiding__lijn:first-child { background: linear-gradient(90deg, transparent, rgba(192,163,96,.55)); }
.scheiding__lijn:last-child  { background: linear-gradient(90deg, rgba(192,163,96,.55), transparent); }
.scheiding__ogen { font-size: 1.1rem; gap: .3em; }
/* Lucht boven en onder de lijn, meer dan de blokken zelf hebben: de lijn
   moet open staan, dat geeft rust (Brian, 15 sep 2026). */
/* De scheiding staat tussen het drieluik en het gezicht-blok (17 sep 2026),
   en sinds 24 sep 2026 een tweede keer tussen de fotomuur en de reacties.
   Na de fotomuur moet er lucht boven de lijn komen: die foto's lopen tot
   tegen de rand. */
.scheiding + .wij { padding-top: clamp(5rem, 9vw, 8rem); }
.sfeer + .scheiding { padding-top: clamp(5rem, 10vw, 8rem); }
.scheiding + .reacties { padding-top: clamp(4rem, 8vw, 6.5rem); }


/* ── Een tekstpagina (privacy.php) ─────────────────────────
   Gewone lopende tekst met tussenkoppen, niet breder dan een
   leesbare regel. Sinds 19 sep 2026. */

/* Niet op .tekst zelf, want dat is ook .binnen (marge auto) en dan schuift
   alles naar het midden terwijl de titel erboven links staat. */
.tekst > * { max-width: 40rem; }
.tekst h2 {
  font-family: var(--titel);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 2.25rem 0 .6rem;
  color: var(--wit);
}
.tekst h2:first-child { margin-top: 0; }
.tekst p { margin: 0 0 1rem; color: var(--room-zacht); }
.tekst strong { color: var(--room); font-weight: 600; }
.tekst .klein { margin-top: 2.5rem; font-size: .8125rem; color: var(--room-stil); }