/* ═══════════════════════════════════════════════════════════════════════
   Bar Zilt — Stylesheet
   Affichebar aan een marktplein: creme papier, navy posterblokken,
   een gouden lijn als enige verbinding.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  interpolate-size: allow-keywords;

  /* Merk — gemeten uit het logo, niet verzonnen */
  --primary: #1D2043;          /* navy: het logo-vlak */
  --navy-deep: #141733;        /* diepere navy voor de footer */
  --accent: #8F7448;           /* goud: de gegraveerde vissen */
  --gold-ink: #7A5F35;         /* goud dat AA haalt als kleine tekst op creme */
  --gold-lt: #C6A87A;          /* goud op navy */

  /* Oppervlakken en tekst */
  --bg: #FCF0E4;               /* creme: de kleur van het wordmark */
  --surface: #F7E7D6;
  --text: #1D2043;
  --text-muted: #5B5E7A;
  --border: rgba(29, 32, 67, 0.16);

  /* Donkere secties */
  --dark-bg: #1D2043;
  --dark-text: #FCF0E4;
  --dark-text-muted: #CFC7C0;
  --dark-border: rgba(252, 240, 228, 0.18);

  /* Vorm en maat — posterkantig, geen afgeronde hoeken */
  --radius: 0px;
  --radius-lg: 0px;
  --max-width: 1180px;
  /* Op een telefoon houdt een vaste 112px-balk permanent 13% van het scherm
     bezet; de balk krimpt mee tot de logohoogte hem tegenhoudt. Desktop blijft
     ongewijzigd (12vw passeert 112px al rond 933px breed). */
  --nav-height: clamp(84px, 12vw, 112px);
  --section-padding: clamp(5.5rem, 11vw, 9rem);   /* ritme-preset: Royaal (horeca) */
  --transition: 0.3s ease;

  /* Typografie */
  --font: 'Commissioner', system-ui, sans-serif;
  --font-heading: 'Passion One', Impact, sans-serif;
  --font-label: 'Newsreader', Georgia, serif;

  /* Typeschaal — ratio 1.333 (perfect fourth), hoort bij het Royale ritme */
  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.88rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.95vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.6vw, 2.7rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.7vw, 3.7rem);
  --step-5:  clamp(2.7rem, 1.9rem + 3.9vw, 5rem);
}

/* ── Base reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* open-props normalize trap-fixes — elk van deze heeft ooit een echte build
   gebroken; :where() houdt de specificiteit op 0 zodat componentklassen winnen. */
:where(h1, h2, h3, h4, h5, h6) { max-inline-size: none; }
:where(ul[class], ol[class]) { padding-inline-start: 0; margin-block: 0; list-style: none; }
:where(dl[class]) { margin-block: 0; }   /* OP normalize geeft dl een blokmarge: gaf een gat van ~130px onder de foto's op de kaart */
li { padding-inline-start: 0; text-indent: 0; max-inline-size: none; }
figure { margin: 0; display: block; align-items: initial; }
figcaption { max-inline-size: none; }
details { background: transparent; border-radius: 0; padding: 0; }
summary { background: transparent; border-radius: 0; margin: 0; padding: 0; }
[hidden] { display: none !important; }
svg { display: block; }
img { max-width: 100%; height: auto; }

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

/* GEEN @view-transition. Cross-document view transitions laten de pagina blanco
   in de in-app browsers van Instagram en Facebook, en dat is precies waar het
   publiek van deze zaak vandaan komt: hun hele communicatie loopt via die twee.
   De speculation rules hierboven houden de paginawissel toch snel. */

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  /* Gewicht 400, niet 900: op 900 lopen de binnenruimtes van deze deco-letter
     dicht en wordt een kop een inktvlek. Zelfde familie, een trap lager. */
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0;
}
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

/* Zonder deze regel plakken koppen tegen hun eigen tekst: de margin:0 hierboven
   haalt de browser-default weg. */
:is(h1, h2, h3, h4):not(:last-child) { margin-bottom: 0.5em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  z-index: 2000;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Tekst die alleen een schermlezer hoort: waar een link buiten de site opent,
   hoort dat hoorbaar te zijn zonder het in de layout te zetten. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Layout ────────────────────────────────────────────────────────── */
.container {
  width: min(var(--max-width), 100% - 3rem);
  margin-inline: auto;
}
.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-padding); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* ── Typografie-hulpklassen ────────────────────────────────────────── */

/* Het tweede register uit hun eigen posters: schreefkapitalen, wijd gespatieerd.
   Als vraag-label binnen een blok, nooit als eyebrow boven elke kop. */
.label {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
}
.label--on-dark { color: var(--gold-lt); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 46ch;
}

/* ── Knoppen ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  min-height: 48px;
  /* Kapitalen zitten in een gewone regelbox optisch te hoog: de box reserveert
     ruimte voor staartletters die er niet zijn. Met text-box-trim hugt de box
     de kapitaalhoogte, zodat symmetrische padding ECHT centreert. Dat is
     lettertype-onafhankelijk; met de hand bijgestelde padding klopt alleen bij
     het font waarop je hem afregelde. De text-indent compenseert de naloop die
     letter-spacing achter de laatste letter zet. */
  padding: 0.95rem 1.7rem;
  line-height: 1;
  text-indent: 0.09em;
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.btn-primary { background: var(--primary); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--primary); }
.btn-on-dark { border-color: var(--gold-lt); color: var(--dark-text); background: transparent; }

@media (hover: hover) {
  .btn-primary:hover { background: var(--navy-deep); }
  .btn-secondary:hover { background: var(--primary); color: var(--bg); }
  .btn-on-dark:hover { background: var(--gold-lt); color: var(--primary); }
}


/* ── Kapitaal-centrering, lettertype-onafhankelijk ─────────────────────
   text-box-trim snijdt de over- en onderlengte van de regelbox weg, zodat
   symmetrische padding de kapitalen exact centreert. Browsers zonder steun
   krijgen de gemeten benadering eronder. */
@supports (text-box: trim-both cap alphabetic) {
  .btn, .nav-mail, .mobile-close, .back-to-top, .opener-jump a {
  /* 44px: dit zijn zeven links naast elkaar op de pagina die het vaakst op een
     telefoon opengaat. */
    text-box: trim-both cap alphabetic;
  }
}
@supports not (text-box: trim-both cap alphabetic) {
  .btn { padding-block: 0.86rem 0.99rem; }
  .nav-mail { padding-block: 0.71rem 0.84rem; }
}

/* ── De getijlijn: het merkmotief ──────────────────────────────────────
   Bar Zilt tekent op elke vacaturepost een doorlopende gouden lijn die over
   het navy vlak golft. Die lijn is hier de verbinding tussen de secties: hij
   tekent zich mee met de scroll en is het enige decoratieve element. */
.tide {
  width: 100%;
  height: clamp(46px, 7vw, 92px);
  overflow: hidden;
  pointer-events: none;
}
.tide svg { width: 100%; height: 100%; }
.tide path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.tide--on-dark path { stroke: var(--gold-lt); }

/* ── A. De gouden lijn tekent zich terwijl JIJ scrolt ──────────────────
   Dit was een animatie die één keer afliep zodra de lijn in beeld kwam. Nu
   hangt hij aan de scrollpositie: de lijn groeit onder je duim mee en stopt
   als jij stopt. Dat is het verschil tussen een decoratie die afspeelt en een
   element dat op je reageert, en het is hún motief (de doorlopende gouden lijn
   uit hun vacatureposters), niet een effect van de plank.
   `animation-timeline: view()` is declaratief: geen scroll-listener, geen
   ScrollTrigger, dus dit is ook op mobiel veilig — precies het onderscheid dat
   in de motion-architectuur bovenaan main.js staat. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* De tijdlijn hangt aan de DIV, niet aan het pad. Een <path> heeft geen
       normale layoutbox, dus `view()` daarop levert een tijdlijn die bevroren
       blijft staan (gemeten: currentTime 54,55% op elke scrollpositie). Een
       benoemde view-timeline op de wrapper werkt wel, en het pad haakt eraan. */
    .tide:not(.tide--on-dark) { view-timeline: --tide block; }
    .tide:not(.tide--on-dark) path {
      stroke-dasharray: var(--tide-len, 1400);
      stroke-dashoffset: var(--tide-len, 1400);
      animation: tide-draw linear both;
      animation-timeline: --tide;
      animation-range: entry 15% cover 65%;
    }
    /* Beide keyframes expliciet. Met alleen een `to` valt de startwaarde terug
       op de onderliggende waarde, en bij een scroll-tijdlijn levert dat een
       lijn die al vol staat vóór je hem bereikt — gemeten: dashoffset 0 op elke
       scrollpositie. */
    @keyframes tide-draw {
      from { stroke-dashoffset: var(--tide-len, 1400); }
      to { stroke-dashoffset: 0; }
    }
  }
}


/* ── Navbar ────────────────────────────────────────────────────────── */
#site-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Exact de navy uit het logovlak, zodat het logo naadloos in de balk valt
     in plaats van als een lichter vierkant te blijven staan. */
  background: var(--primary);
  color: var(--dark-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
#site-navbar:has(.nav.scrolled) { border-bottom-color: var(--dark-border); }

.nav { position: static; }
.nav-container {
  width: min(var(--max-width), 100% - 3rem);
  margin-inline: auto;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo { display: block; flex-shrink: 0; line-height: 0; }
/* Bijgesneden logobestand van de klant (560x522, vult 95% x 90%). Op hoogte
   zetten met vrije breedte: het bestand is niet vierkant, dus een vaste
   vierkante doos zou het uitrekken. */
.nav-logo img { height: clamp(66px, 6.6vw, 86px); width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  margin-left: auto;
}
.nav-link {
  /* Alle nav-links dezelfde display-waarde: een inline-flex-item naast een
     inline-item geeft een hogere box en dus een scheve onderlijn. */
  display: inline-flex;
  align-items: center;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.4rem;
  color: var(--dark-text);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}
.nav-link.active { border-bottom-color: var(--gold-lt); }
@media (hover: hover) {
  .nav-link:hover { border-bottom-color: var(--gold-lt); }
}

.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1.3rem;
  line-height: 1;
  text-indent: 0.09em;
  background: var(--bg);
  color: var(--primary);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--transition);
}
@media (hover: hover) {
  .nav-mail:hover { background: var(--gold-lt); }
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--dark-text);
}

/* ── Mobiel menu ───────────────────────────────────────────────────────
   Volledig herbouwd. De animatie draait nu uitsluitend op CSS-transities van
   `transform` en `opacity`. Dat is geen stijlkeuze maar de kern van de fix:
   een CSS-transitie wordt eenmalig aan de compositor overgedragen en loopt
   daarna buiten de hoofdthread, terwijl een JS-tween elk frame vanaf de
   hoofdthread nieuwe inline stijlen schrijft. Zodra die thread ook maar even
   bezig is (een reveal, een decoderende foto, de garbage collector) mist een
   JS-animatie frames; deze kan dat per definitie niet.

   Drie dingen die eerder aan het slepen bijdroegen en nu weg zijn:
   1. `will-change: transform` stond PERMANENT op het paneel. Dat houdt een
      schermvullende compositorlaag van ~1,3 MB het hele bezoek in leven, ook
      als het menu nooit opengaat. `translate3d` promoveert de laag alleen
      tijdens de beweging en laat hem daarna weer los.
   2. De openingsanimatie stagger'de `y` + `autoAlpha` over alle links met
      `clearProps` achteraf; dat forceert een stijl-herberekening bovenop de
      beweging. De stagger zit nu in `transition-delay` en kost niets.
   3. `height: 100dvh` samen met `min-height: 100svh` liet het paneel van maat
      veranderen op het moment dat de Android-adresbalk inklapt: precies
      tijdens de opening. `inset: 0` op een fixed element geeft dezelfde
      schermvulling zonder die herberekening. */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--primary);
  color: var(--dark-text);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.75rem 2rem;
  /* Het paneel vangt zijn eigen scroll op; `contain` houdt de pagina eronder
     stil zonder scroll-lock op body (die breekt position:sticky op de header). */
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;

  /* Dichte staat. `translate3d` (met Z) promoveert naar een eigen laag zonder
     permanente will-change. `visibility` schakelt pas NA de sluitbeweging, dus
     het paneel vangt tijdens het sluiten geen tikken meer maar blijft zichtbaar
     tot hij buiten beeld is. */
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.3s;
}
.mobile-menu.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition:
    transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
/* Exact dezelfde maat als .nav-logo img: anders krimpt het logo zichtbaar
   op het moment dat het menu opengaat. */
.mobile-menu-head img { height: clamp(66px, 6.6vw, 86px); width: auto; }
.mobile-close {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
@media (hover: hover) {
  .mobile-close:hover { background: rgba(252, 240, 228, 0.1); border-color: var(--gold-lt); }
}

/* De links beginnen hoger. `margin-block: auto` centreerde ze verticaal en
   liet daardoor ruim 200px leeg tussen de logobalk en de eerste link: het menu
   begon pas op een derde van het scherm. */
.mobile-nav-links { display: block; margin-block: clamp(1.25rem, 4vw, 2rem) auto; }
.mobile-nav-links li { border-bottom: 1px solid var(--dark-border); }
.mobile-nav-links li:first-child { border-top: 1px solid var(--dark-border); }
/* Descriptor ONDER het label in plaats van ernaast. Naast elkaar zweefde
   "START" een halve schermbreedte van "Home" (geen verband meer), en brak
   "Wanna join us?" als enige over twee regels omdat de descriptor de ruimte
   opat. Onder elkaar krijgt het label de volle breedte en staat het paar als
   een eenheid. */
.mobile-nav-link {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 9.2vw, 2.7rem);
  font-weight: 400;
  line-height: 1.05;
  text-decoration: none;
  color: var(--dark-text);
}
.mobile-nav-link .desc {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* De regels komen na het paneel binnen. De vertraging staat in CSS, niet in een
   tijdlijn: zes transition-delays kosten de hoofdthread niets, een gestaggerde
   JS-tween over dezelfde zes elementen wel. */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav-links li,
  .mobile-menu > .lang-pills,
  .mobile-menu-foot {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.26s ease-out, transform 0.26s ease-out;
  }
  .mobile-menu.is-open .mobile-nav-links li,
  .mobile-menu.is-open > .lang-pills,
  .mobile-menu.is-open .mobile-menu-foot {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .mobile-menu.is-open > .lang-pills { transition-delay: 0.08s; }
  .mobile-menu.is-open .mobile-nav-links li:nth-child(1) { transition-delay: 0.10s; }
  .mobile-menu.is-open .mobile-nav-links li:nth-child(2) { transition-delay: 0.14s; }
  .mobile-menu.is-open .mobile-nav-links li:nth-child(3) { transition-delay: 0.18s; }
  .mobile-menu.is-open .mobile-nav-links li:nth-child(4) { transition-delay: 0.22s; }
  .mobile-menu.is-open .mobile-nav-links li:nth-child(5) { transition-delay: 0.26s; }
  .mobile-menu.is-open .mobile-menu-foot { transition-delay: 0.28s; }
  /* Bij het SLUITEN vertrekken de regels meteen mee met het paneel: een
     omgekeerde stagger laat het paneel wachten op zijn eigen inhoud en dat
     leest als haperen. */
  .mobile-menu:not(.is-open) .mobile-nav-links li,
  .mobile-menu:not(.is-open) > .lang-pills,
  .mobile-menu:not(.is-open) .mobile-menu-foot { transition-delay: 0s; transition-duration: 0.12s; }
}

/* Uitgedund: label, uren, telefoon, mail. Adres en de losse dagregel stonden
   hier dubbel met de footer en met contact, en in een menu dat op een gewone
   telefoon niet paste is herhaling het eerste wat weg mag. */
.mobile-menu-foot { flex-shrink: 0; padding-top: 1rem; }
.mobile-menu-foot .label { margin-bottom: 0.6rem; }
.mobile-menu-foot p { font-size: 0.9rem; color: var(--dark-text-muted); margin-bottom: 0.25rem; }
.mobile-menu-foot .m-uren { color: var(--dark-text); margin-bottom: 0.35rem; }
/* Twee links naast elkaar, allebei met een tikvlak van 44px: dat is een
   AANRAAK-eis, dus de hoogte zit op de links en niet op de regel. */
.mobile-menu-foot .m-contact { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0; }
.mobile-menu-foot .m-contact a { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-menu-foot a { color: var(--gold-lt); }

/* De hamburger wordt het kruis. Twee balken die kantelen, de derde vervaagt:
   alleen transform en opacity, dus ook dit blijft van de hoofdthread af. */
.hamburger span {
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links, .nav-right { display: none; }
  .hamburger { display: flex; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}

/* ── Hero: volledige achtergrondfoto met de kop erover ────────────────
   Het beeld is een tafel in vol zonlicht: licht hout, witte borden, harde
   schaduwen. Een zonnige foto draagt creme tekst veel slechter dan een donker
   interieur, dus de scrim is hier zwaarder EN het beeld gaat een stap donkerder.
   De hoogte is 100svh min de nav; alles binnen de hero staat in een flexkolom
   zodat kop, lead en beide knoppen altijd binnen dat ene scherm vallen. */
.cover {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--nav-height));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}
.cover-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cover-media picture { display: block; width: 100%; height: 100%; }
.cover-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.94);
}

/* ── Hero-drift ────────────────────────────────────────────────────────
   De achtergrondfoto schuift trager weg dan de pagina terwijl je de hero uit
   scrollt. Bewuste uitzondering op de regel "geen parallax"; die regel raakt
   de klassieke uitvoering: een scroll-listener of
   ScrollTrigger op een foto MIDDEN in de pagina. Twee bezwaren, allebei terecht
   — hij herberekent bij elke viewport-wijziging (en dat is precies wat de
   inklappende Android-adresbalk doet), en hij laat een gat onderaan de
   container.

   Deze uitvoering heeft geen van beide:
   · `animation-timeline: scroll()` is declaratief. Er is geen scroll-listener,
     geen JS, geen herberekening; de browser draait hem buiten de hoofdthread.
   · Het beeld is 128% hoog en schuift 18%, dus de onderrand staat aan het
     einde nog altijd op 106% en blijft dus voorbij de containerrand. Geen gat,
     ooit. Op 108/6 was het effect te subtiel om op te vallen.
   · Alleen de HERO, alleen het eerste scherm, en zes procent: een bezoeker
     merkt diepte, geen effect.
   · Browsers zonder scroll-timelines krijgen exact de huidige, stilstaande
     hero. Er is niets om terug te draaien.
   Te toetsen op een echt Android-toestel: als de navbalk hier alsnog meepant,
   dan gaat dit blok eruit en niet iets anders. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* De tekstkolom vertrekt iets sneller dan de foto en vervaagt terwijl de
       hero het beeld uit gaat. Twee lagen op verschillende snelheid is wat
       diepte maakt; de foto alleen leest als een foto die schuift. Ook dit is
       één declaratieve tijdlijn, geen listener. */
    .cover-body {
      animation: cover-tekst cubic-bezier(0.32, 0, 0.67, 0) both;
      animation-timeline: scroll(root block);
      animation-range: 0 90svh;
    }
    @keyframes cover-tekst {
      to { transform: translateY(-64px); opacity: 0.35; }
    }
    .cover-media img {
      height: 128%;
      object-position: center top;
      /* Vooraan zwaar, achteraan licht. Lineair liep hij wél vanaf de eerste
         pixel (gemeten: 50px scroll = 10px beeld), maar tegenover een pagina
         die 50px opschuift leest 10px als stilstand — en op een telefoon gaan
         de eerste ~80px vingerbeweging sowieso naar het inklappen van de
         adresbalk, dus je merkt pas iets na een halve duimhaal. Met deze curve
         heeft de foto na 50px al ~48px afgelegd en zie je hem meteen mee gaan;
         de rest van de weg dempt uit terwijl de hero het beeld uit schuift. */
      animation: cover-drift cubic-bezier(0.25, 1, 0.5, 1) both;
      animation-timeline: scroll(root block);
      animation-range: 0 90svh;
    }
    @keyframes cover-drift {
      to { transform: translateY(-18%); }
    }
  }
}

/* Scrim: draagt de tekstkolom links, laat de rechterhelft van de foto vrij.
   De vorige versie legde een egale waas over het hele beeld en maakte van een
   zonnige middagtafel een schemerbeeld. De fix zit in de GEOMETRIE, niet in de
   dekking: links even donker houden voor AA-contrast, maar veel steiler
   uitdoven, zodat de borden en glazen rechts onbewerkt in de zon staan. */
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* De knikpunten liggen op de ECHTE tekstbreedte: de lead is ~720px op een
       viewport van 1440, dus tot 52% blijft de scrim vol en pas daarna valt hij
       weg. Eerst stond het verval op 46% en haalde de rechterhelft van de lead
       nog maar 2,5:1 — gemeten op de render, niet geschat. */
    linear-gradient(to right,
      rgba(17, 20, 44, 0.84) 0%,
      rgba(17, 20, 44, 0.78) 36%,
      rgba(17, 20, 44, 0.62) 52%,
      rgba(17, 20, 44, 0.24) 68%,
      rgba(17, 20, 44, 0.03) 86%,
      rgba(17, 20, 44, 0) 100%),
    linear-gradient(to top,
      rgba(17, 20, 44, 0.62) 0%,
      rgba(17, 20, 44, 0.24) 34%,
      rgba(17, 20, 44, 0) 64%);
}
@media (max-width: 700px) {
  /* Op smalle schermen loopt de tekst over de volle breedte, dus daar moet de
     scrim ook over de volle breedte dragen. */
  .cover::after {
    background: linear-gradient(to top,
      rgba(17, 20, 44, 0.9) 0%,
      rgba(17, 20, 44, 0.8) 38%,
      rgba(17, 20, 44, 0.5) 66%,
      rgba(17, 20, 44, 0.18) 100%);
  }
}

.cover-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.cover-body .hero-title { font-size: clamp(2.1rem, 1.5rem + 2.7vw, 3.9rem); color: var(--dark-text); }
.cover-body .hero-title .accent { color: var(--gold-lt); }
/* Smaller dan de standaard 46ch: de lead liep tot 59% van het scherm en dus tot
   in het deel waar de scrim al wegvalt (gemeten: 4,48:1 op de rechterrand). Een
   kortere regel houdt hem in de donkere kolom EN leest beter. */
.cover-body .lead { color: var(--dark-text-muted); max-width: 40ch; }

/* Hun affichetegel, links onderaan tegen de tekst */
.cover-plate {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}
.cover-plate .num {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-lt);
}
.cover-plate .street {
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cover .btn-secondary { border-color: var(--gold-lt); color: var(--dark-text); }
@media (hover: hover) {
  .cover .btn-secondary:hover { background: var(--gold-lt); color: var(--primary); }
}
.cover .btn-primary { background: var(--bg); color: var(--primary); border-color: var(--bg); }
@media (hover: hover) {
  .cover .btn-primary:hover { background: var(--gold-lt); border-color: var(--gold-lt); }
}

/* Krimp-beveiliging voor ECHT lage vensters. Stond op `max-height: 880px` en
   vuurde daardoor op elk laptopscherm: op 1440x780 rendeerde de merkzin op
   43px in plaats van 62px terwijl er 347px hero-hoogte ongebruikt bleef. De
   beveiliging was de standaardstand geworden. Gemeten opnieuw na de wijziging
   op 1440x780, 1536x864 en 1366x768. */
@media (min-width: 861px) and (max-height: 700px) {
  .cover-body { padding-block: 2rem; }
  .cover-body .hero-title { font-size: clamp(2rem, 3vw, 2.9rem); }
  .cover-body .lead { font-size: 1.05rem; max-width: 52ch; }
}

@media (max-width: 560px) {
  .cover { min-height: calc(100svh - var(--nav-height)); }
  .cover-body { padding-block: 2rem 2.25rem; }
  .cover-body .hero-title { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  .cover-body .lead { font-size: 1rem; }
  .cover-body .hero-meta { margin-top: 1rem; gap: 1rem; }
}

@media (max-width: 400px) and (max-height: 700px) {
  .cover-body .hero-title { font-size: 1.9rem; }
  .cover-body .lead { font-size: 0.95rem; line-height: 1.45; }
  .cover-plate { margin-bottom: 0.75rem; padding: 0.5rem 0.9rem; }
}

/* ── Hero-typografie: basislaag onder de cover ─────────────────────── */
.hero-title {
  font-size: var(--step-5);
  line-height: 0.96;
  letter-spacing: -0.01em;
  max-inline-size: 17ch;
  /* Regels zijn handmatig verdeeld via spans; balance splitst een passende
     regel alsnog in tweeën. */
  text-wrap: initial;
  hyphens: auto;             /* NL-samenstellingen breken de mobiele kop anders */
}
.hero-title span { display: block; }
.hero-title .accent { color: var(--accent); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Zodra ze niet meer naast elkaar passen, stapelen ze op volle breedte met
   echte lucht ertussen. Twee knoppen van ongelijke breedte met 12px ertussen
   lezen als één blok dat toevallig gebroken is. */
@media (max-width: 620px) {
  .hero-actions { gap: 1rem; width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ── In de kijker: de eerstvolgende data ───────────────────────────────
   Datum groot in de decoletter, de rest ernaast. Geen kaartenrij: een
   agenda leest van boven naar beneden, niet van links naar rechts. */
.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: stretch;
}
/* De kop-kolom is korter dan de datumlijst ernaast. Met align-items:start liet
   dat een gat van ~200px onder de knop staan; nu vult de kolom de rij en zakt
   de knop naar de onderlijn van de laatste datum. */
.spotlight-head { display: flex; flex-direction: column; }
.spotlight-head h2 { font-size: var(--step-3); margin-top: 0.5rem; }
.spotlight-head p { color: var(--text-muted); max-width: 34ch; }
/* De knop staat onder zijn eigen tekst, niet op de onderlijn van de datumlijst.
   Uitlijnen op die onderlijn klonk editorial, maar de kopkolom is korter dan de
   lijst en dat legde een leeg vlak tussen de zin en de knop. Ruimte ONDER een
   kolom leest als ritme, ruimte BINNEN een kolom leest als een fout. */
.spotlight-more { margin-top: 1.75rem; }

.spotlight-list { display: grid; gap: 0; }
.spotlight-item { border-top: 1px solid var(--border); }
.spotlight-item:last-child { border-bottom: 1px solid var(--border); }
.spotlight-item a {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition);
}
@media (hover: hover) {
  .spotlight-item a:hover { background: var(--surface); }
  .spotlight-item a:hover .spotlight-kicker { color: var(--gold-ink); }
}
.spotlight-date {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 0.82;
  color: var(--primary);
  display: block;
}
.spotlight-date .d { font-size: clamp(2.6rem, 6vw, 4rem); display: block; }
.spotlight-date .m {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
  margin-top: 0.35rem;
}
.spotlight-date--accent .d { color: var(--accent); }
.spotlight-body { display: block; }
.spotlight-kicker {
  display: block;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  transition: color var(--transition);
}
.spotlight-text { display: block; margin-top: 0.45rem; color: var(--text-muted); max-width: 52ch; }

/* ── In het kort: who / what / where / when ────────────────────────────
   Bewust GEEN drie gelijke kaders. Twee navy tekstpanelen en twee
   fotoblokken in een asymmetrisch raster, met de vraag in schreefkapitalen
   zoals op hun eigen posts. */
.intro-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.85rem, 2vw, 1.5rem);
  align-items: stretch;
}
/* De asymmetrie zit in de KOLOMBREEDTES (7/5 en dan 5/7), niet in verticale
   offsets. Zo'n offset maakte het raster hoger dan zijn inhoud en liet onder de
   korte kolom een gat van ~240px vallen. De panelen vullen nu hun rij en zetten
   hun inhoud uit elkaar, zoals een affiche. */
.intro-panel {
  background: var(--primary);
  color: var(--dark-text);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
/* EEN breekpunt, geen drie. justify-content:space-between verdeelt alle vier de
   kinderen even ver uit elkaar en liet de gouden regel middenin het niets
   zweven. Met margin-top:auto op het eerste element van de onderste groep staat
   label+regel bovenaan en zakt het antwoord naar de onderlijn, zoals op hun
   eigen affiches. */
.intro-panel--who { grid-column: 1 / 8; }
.intro-photo--what { grid-column: 8 / 13; }
.intro-panel--when { grid-column: 1 / 13; }
/* Over de volle breedte splitst het When-paneel in antwoord links, tabel
   rechts; als enkele kolom zou een breed paneel met een smalle tabel scheef
   staan. */
@media (min-width: 901px) {
  .intro-panel--when {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-content: start;
  }
  .intro-panel--when > .label,
  .intro-panel--when > .intro-rule,
  .intro-panel--when > .intro-when-answer { grid-column: 1; }
  .intro-panel--when > .intro-when-answer { margin-top: auto; }
  .intro-panel--when > .intro-hours { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .intro-panel--when > .intro-text { grid-column: 2; margin-top: 1rem; }
}
.intro-rule { width: 100%; height: 1px; background: var(--dark-border); }
.intro-names {
  font-family: var(--font-heading);
  font-size: var(--step-4);
  line-height: 0.95;
  /* Geen `auto`-marge meer. Die duwde het antwoord naar de onderlijn, wat klopte
     toen het paneel even hoog was als de fototegel ernaast. Nu dat blok een foto
     PLUS bijschrift draagt, groeit het paneel mee en liet die marge er een gat
     van bijna 400px boven de naam vallen. */
  margin: 1.4rem 0 0;
}
.intro-panel .intro-text { color: var(--dark-text-muted); margin: 0; max-width: 46ch; }
.intro-panel .intro-text a { color: var(--gold-lt); }

.intro-hours { margin-top: auto; }
.intro-hours > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dark-border);
}
.intro-hours dt { font-family: var(--font-label); font-size: 0.95rem; }
.intro-hours dd { margin: 0; color: var(--gold-lt); font-variant-numeric: tabular-nums; }

/* Het paneel beantwoordt zijn eigen vraag in de decoletter, net als WHO ernaast;
   de tabel eronder is het detail. Zonder die regel stond er ~170px leeg navy
   tussen de gouden lijn en de uren: het luidste blok van de pagina was leeg.
   De `auto`-marge zit hier, niet meer op de tabel — twee auto-marges in een
   flexkolom verdelen de ruimte en zetten het gat gewoon ergens anders. */
.intro-when-answer {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  line-height: 0.92;
  color: var(--dark-text);
  margin: auto 0 0.4rem;
  max-inline-size: 12ch;
}
.intro-when-answer .gold { color: var(--gold-lt); display: block; }
.intro-panel--when .intro-hours { margin-top: 0; }

/* Het fotoblok is EEN navy object met een foto erop, geen foto met een
   bijschrift eronder. Twee van de vier "posters" lazen anders als iets anders
   dan de twee navy panelen ernaast, terwijl het juist een reeks moet zijn. */
.intro-photo { display: flex; flex-direction: column; background: var(--primary); }
.intro-photo-media { overflow: hidden; }
.intro-photo-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.intro-photo figcaption {
  flex: 1 1 auto;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.intro-photo .label { color: var(--gold-lt); }
.intro-answer {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--dark-text);
}
.intro-photo .intro-text { color: var(--dark-text-muted); font-size: 0.95rem; max-width: 44ch; margin: 0; }

@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-panel--who, .intro-photo--what, .intro-photo--where, .intro-panel--when { grid-column: auto; }
}
@media (max-width: 760px) {
  .spotlight { grid-template-columns: 1fr; }
}

/* ── Het plein: Where? op affichegrootte ───────────────────────────────
   De prentkaart is publiek domein en het halve bewijsmodel van deze zaak: ze
   hebben geen historiek en geen reviews, ze hebben een plein en een tafel. Als
   tegeltje naast een bord eten deed dat niets. Hier draagt hij een volle band,
   en het huisnummer staat er op de schaal van een affiche.
   Bewust NIET navy: de prentkaart is sepia, en een derde donker vlak op rij
   zou de pagina dichtdrukken. Het beeld levert zelf het kleurregister. */
.plein {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #E9DCC6;
}
.plein-media { position: absolute; inset: 0; z-index: 0; }
.plein-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim vanaf links in de kleur van het papier zelf: de prentkaart blijft
   rechts leesbaar, de tekstkolom links krijgt genoeg rust. */
.plein::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg,
    rgba(233, 220, 198, 0.96) 0%,
    rgba(233, 220, 198, 0.92) 34%,
    rgba(233, 220, 198, 0.55) 62%,
    rgba(233, 220, 198, 0.18) 100%);
}
.plein-body {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.plein-nr {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 14vw, 10rem);
  line-height: 0.78;
  color: var(--primary);
  margin: 0.6rem 0 0;
}
.plein h2 {
  font-size: var(--step-3);
  color: var(--primary);
  margin-top: 0.5rem;
}
.plein-text { color: var(--text-muted); max-width: 46ch; margin-top: 0.9rem; }

/* De scrim hierboven loopt van links naar rechts: op een breed scherm staat de
   tekst in het dichte deel en blijft de prentkaart rechts zichtbaar. Op een
   telefoon loopt diezelfde tekstkolom over de VOLLE breedte, dus het einde van
   elke regel landt op het doorschijnende deel — bovenop de kaart zelf. Gemeten
   op 390px: 4,58:1, technisch AA en toch moeilijk leesbaar, want de
   achtergrond wisselt onder de regel.
   Hier krijgt het beeld daarom een eigen band en staat de tekst eronder op vol
   papier. De prentkaart wordt er zelfs beter van: die was op een telefoon tot
   een smalle strook gecropt. */
@media (max-width: 700px) {
  .plein { display: flex; flex-direction: column; }
  .plein::after { content: none; }
  .plein-media { position: relative; inset: auto; }
  .plein-media img { aspect-ratio: 4 / 3; height: auto; }
  .plein-body { padding-block: clamp(1.75rem, 6vw, 2.5rem) clamp(2.5rem, 8vw, 3.5rem); }
  .plein-text { color: var(--text); }
}

/* ── In de pers ────────────────────────────────────────────────────────
   Twee artikels, elk met de persfoto die de krant er zelf bij maakte. Dat is
   meteen de enige plek op de site waar de zaakvoerders zelf in beeld staan, dus
   het beeld draagt hier het blok en niet de typografie. De kop staat in hun
   eigen deco-letter: een krantenkop hoort luid te zijn. Van het artikel zelf
   staat er niets (betaalmuur + auteursrecht), alleen de link. */
.pers { padding-block: clamp(3rem, 6vw, 4.5rem); }
.pers-intro { margin-top: 0.9rem; color: var(--text-muted); max-width: 48ch; }
.pers-lijst {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.pers-link { text-decoration: none; color: inherit; display: block; }
.pers-link:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 5px; }
/* De wipe knipt van onder naar boven open; zonder overflow loopt het
   tegenzoomende beeld tijdens die veeg buiten zijn kader. */
.pers-media { display: block; overflow: hidden; background: var(--surface); }
.pers-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pers-bron {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.pers-kop {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.06;
  color: var(--text);
  transition: color var(--transition);
}
.pers-lees {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.pers-lees svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}
@media (hover: hover) {
  .pers-link:hover .pers-media img { transform: scale(1.04); }
  .pers-link:hover .pers-kop,
  .pers-link:hover .pers-lees { color: var(--gold-ink); }
  .pers-link:hover .pers-lees svg { transform: translateX(4px); }
}
@media (max-width: 700px) { .pers-lijst { grid-template-columns: 1fr; } }

/* ── Join-strip: een regel, geen sectie ────────────────────────────── */
/* Geen randen. Deze strip staat tussen twee getijlijnen, en die lijn ís de
   sectiewissel op deze site: een kaarsrechte haarlijn een paar pixels boven een
   golvende gouden lijn leest als twee scheidingen die het oneens zijn. Het
   kleurvlak en de witruimte dragen het blok, precies zoals bij de andere
   secties. */
.join-strip { border-block: 0; }
.join-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.join-strip p { margin: 0; color: var(--text-muted); }
.join-strip strong { color: var(--text); font-family: var(--font-heading); font-weight: 400; font-size: var(--step-2); }

/* ── Volle band met hun eigen gerecht ──────────────────────────────── */
.plate-band {
  position: relative;
  isolation: isolate;
  background: var(--navy-deep);
  color: var(--dark-text);
  overflow: hidden;
}
.plate-band figure { position: absolute; inset: 0; z-index: 0; }
.plate-band img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
/* Scrim vanaf links: de tekst staat op de foto, dus die kant moet donker genoeg
   blijven zonder het bord aan de rechterkant plat te leggen. */
.plate-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(20, 23, 51, 0.94) 0%, rgba(20, 23, 51, 0.82) 38%, rgba(20, 23, 51, 0.28) 78%, rgba(20, 23, 51, 0.15) 100%);
}
/* De zwerm zit boven het scrim maar onder de tekst. */
.shoal {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  fill: var(--gold-lt);
  pointer-events: none;
}
.plate-band .container { position: relative; z-index: 2; padding-block: clamp(4.5rem, 10vw, 8rem); }
.plate-band-line {
  font-family: var(--font-heading);
  font-size: var(--step-4);
  line-height: 0.95;
  color: var(--dark-text);
  max-inline-size: 15ch;
}
.plate-band-line span { display: block; }
.plate-band-line .gold { color: var(--gold-lt); }

/* Regel per regel van achter een masker omhoog. De buitenste span staat stil
   en knipt af, de binnenste schuift: dat is het verschil tussen tekst die
   binnenglijdt en tekst die opkomt van onder de rand. Alleen transform, dus
   dit draait op de compositor.
   overflow:hidden knipt bij een decoletter ook de staarten weg, vandaar de
   ademruimte onder de regel en de negatieve marge die ze weer weghaalt. */
.plate-band-line .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.plate-band-line.lines-ready .line > span { transform: translateY(105%); }
.plate-band-line .line > span { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.plate-band-line.lines-in .line > span { transform: none; }
.plate-band-line.lines-in .line:nth-child(2) > span { transition-delay: 0.12s; }

/* De bandfoto komt binnen op 1.06 en legt zich neer op 1. Geen parallax: die
   staat op de verbodslijst en kost bij elke scroll een herberekening. Dit is
   één transform die één keer afloopt. */
@media (prefers-reduced-motion: no-preference) {
  .js-ready .plate-band figure { overflow: hidden; }
  .js-ready .plate-band img { transform: scale(1.06); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .plate-band-line.lines-in ~ * img,
  .plate-band:has(.lines-in) img { transform: none; }
}
/* :not() is essentieel. `.plate-band p` (0,1,1) wint van `.plate-band-line`
   (0,1,0), en die regel IS een <p>. Zonder deze uitsluiting rendert de
   signature-zin op bodygrootte in muisgrijs in plaats van als displaykop. */
.plate-band p:not(.plate-band-line) {
  margin-top: 1.75rem;
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--dark-text-muted);
}

/* ── Fotoband: volle breedte, breekt bewust uit het containerritme ─── */
.photo-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
}
.photo-band a, .photo-band figure { display: block; overflow: hidden; }
.photo-band img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
@media (hover: hover) {
  .photo-band a:hover img { transform: scale(1.04); }
}
.photo-band--three { grid-template-columns: repeat(3, 1fr); }
.photo-band--three img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .photo-band { grid-template-columns: repeat(2, 1fr); }
  .photo-band--three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .photo-band--three { grid-template-columns: 1fr; }
}

/* ── Quote-band: hun eigen zin, groot op het creme papier ──────────────
   Geen navy vlak hier: die vorm draagt al de posterblokken en de plate-band.
   Een quote die alleen uit typografie bestaat is het derde register. */
.quote-band {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.quote-line {
  font-family: var(--font-heading);
  font-size: var(--step-4);
  line-height: 0.98;
  color: var(--primary);
  margin: 0;
  max-inline-size: 20ch;
}
.quote-line span { display: block; }
.quote-line .gold { color: var(--accent); }

/* ── Praktisch ─────────────────────────────────────────────────────── */
.practical {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
.practical h2 { font-size: var(--step-3); }
/* Zelfde reden als bij de menukaart: adres, telefoon en mailadres zijn geen
   tabelrijen. Het gouden kapitaal-label boven de waarde scheidt ze al; een
   streep erbij maakt er een formulier van. De urentabel hieronder HOUDT zijn
   lijnen wel: daar loopt het oog van dag naar uur over een lege ruimte, en dan
   is de lijn functioneel in plaats van decoratief. */
.practical-list { margin-top: 1.75rem; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.practical-list dt {
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.3rem;
}
.practical-list dd { margin: 0; font-size: var(--step-1); line-height: 1.35; }
.practical-list dd a,
.intro-panel .intro-text a {
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  /* 44px, niet 36px: dit zijn de bel- en mailkoppelingen waarmee iemand op zijn
     telefoon een tafel reserveert. */
  min-height: 44px;
}
.intro-panel .intro-text a { border-bottom-color: var(--dark-border); }

/* ── Uithangbord: navy blok met de uren op contact ─────────────────────
   Contact was de enige van de vijf pagina's zonder een enkel posterblok en las
   daardoor als een formulierpagina van een andere site. De uren zijn hier het
   merkobject: dat is wat naast de deur van een bar hangt. */
.uithangbord {
  background: var(--primary);
  color: var(--dark-text);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.uithangbord h2 {
  font-size: var(--step-3);
  line-height: 0.92;
  color: var(--dark-text);
  margin-top: 0.9rem;
}
.uithangbord h2 .gold { color: var(--gold-lt); display: block; }
.uithangbord .uren-lijst { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.uithangbord .uren-lijst > div { border-bottom-color: var(--dark-border); }
.uithangbord .uren-lijst > div:first-child { border-top-color: var(--dark-border); }
.uithangbord .uren-lijst dt { color: var(--dark-text); }
.uithangbord .uren-lijst dd { color: var(--gold-lt); }
.uithangbord .uren-dicht dt, .uithangbord .uren-dicht dd { color: var(--dark-text-muted); }

/* Openingsuren als uithangbord: dag links, uur rechts. */
.uren-lijst { margin-top: 1.25rem; }
.uren-lijst > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.uren-lijst > div:first-child { border-top: 1px solid var(--border); }
.uren-lijst dt { font-family: var(--font-label); font-size: 1.02rem; }
.uren-lijst dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.uren-dicht dt, .uren-dicht dd { color: var(--text-muted); font-weight: 400; }

/* De kaart vult de hoogte van de tekstkolom ernaast: als klein kaartje in een
   grote lege kolom leest de sectie als een half ingevuld raster. `position`
   houdt de iframe buiten de hoogteberekening van de rij, zodat de TEKST de
   hoogte bepaalt en de kaart hem volgt. */
.map-frame { border: 1px solid var(--border); line-height: 0; position: relative; min-height: 320px; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ── Sub-pagina-openers ────────────────────────────────────────────── */

/* index-list — de kaart */
.opener-index {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}
.opener-index h1 { font-size: var(--step-4); max-inline-size: 16ch; }
.opener-index .lead { margin-top: 1rem; }
.opener-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; }
.opener-jump a {
  /* 44px: dit zijn zeven links naast elkaar op de pagina die het vaakst op een
     telefoon opengaat. */
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-decoration: none;
  /* GEEN vaste onderlijn. Zeven ankers naast elkaar gaven zeven haarlijnen
     bovenaan de drukste pagina van de site; de rij las als een balk streepjes
     in plaats van als een inhoudsopgave. De ruimte tussen de labels scheidt ze
     al, en de onderlijn verschijnt waar je hem nodig hebt: onder de cursor. */
  border-bottom: 1px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .opener-jump a:hover { border-bottom-color: var(--gold-ink); color: var(--primary); }
}

/* direct-content — contact, privacy */
.opener-direct { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); }
.opener-direct h1 { font-size: var(--step-4); max-inline-size: 15ch; }

/* agenda-lead — events. Het eerstvolgende event staat IN de opener, want dat
   is de vraag waarmee iemand hier binnenkomt. */
.opener-agenda { padding-block: clamp(2.5rem, 5vw, 4rem); }
.opener-agenda .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.opener-agenda .agenda-head h1 { font-size: var(--step-4); max-inline-size: 12ch; margin-top: 0.5rem; }
.opener-agenda .lead { margin-top: 1rem; }

/* De index toont de VOLLEDIGE agenda in het klein; het uitgeschreven event
   staat eronder. Een opener die het eerste event integraal herhaalde las als
   vulling op een pagina met maar twee data. */
.agenda-index {
  background: var(--primary);
  color: var(--dark-text);
  padding: clamp(0.5rem, 1.5vw, 0.9rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.agenda-index a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.15rem clamp(1rem, 3vw, 1.75rem);
  align-items: center;
  padding: clamp(0.85rem, 2vw, 1.15rem) 0;
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}
.agenda-index a + a { border-top: 1px solid var(--dark-border); }
@media (hover: hover) {
  .agenda-index a:hover .agenda-index-title { color: var(--gold-lt); }
}
.agenda-index-date {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 0.85;
}
.agenda-index-date .d {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  color: var(--gold-lt);
}
.agenda-index-date .m {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.agenda-index-title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  line-height: 1.05;
  transition: color var(--transition);
}
.agenda-index-note {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .agenda-index a { grid-template-columns: auto minmax(0, 1fr); }
  .agenda-index-note { grid-column: 2; }
}

@media (max-width: 860px) {
  .opener-agenda .container { grid-template-columns: 1fr; align-items: start; }
}

/* ── Events ────────────────────────────────────────────────────────────
   Twee events, bewust in twee verschillende registers: het festival als
   editorial split met beeld, de opening als navy affiche over de volle
   breedte. Twee keer dezelfde datum met tekst ernaast las als een agenda-uitdraai.
   Nergens een haarlijn per opsommingsregel: dat maakte er een tabel van. */
.event-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.event-photo { overflow: hidden; }
.event-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.event-when { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.6rem; }
.event-when .d {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 0.8;
  color: var(--accent);
}
.event-when .m {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.event-body h2 { font-size: var(--step-3); }
.event-lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 50ch; }
.event-points { margin: 1.25rem 0; display: grid; gap: 0.5rem; max-width: 46ch; }
.event-points li { font-family: var(--font-label); font-size: 1.05rem; line-height: 1.35; }
.event-body a { color: var(--gold-ink); }

/* De opening is het pronkstuk: navy vlak, gouden datum op affichegrootte. */
.opening-poster {
  background: var(--primary);
  color: var(--dark-text);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.opening-flag {
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.opening-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}
.opening-date { display: flex; flex-direction: column; margin: 0; }
.opening-date .d {
  font-family: var(--font-heading);
  font-size: clamp(5.5rem, 15vw, 11rem);
  line-height: 0.76;
  color: var(--gold-lt);
}
.opening-date .m {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
  margin-top: 0.9rem;
}
.opening-intro h2 { font-size: var(--step-4); color: var(--dark-text); }
.opening-lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--dark-text-muted);
  max-width: 42ch;
  margin-top: 0.75rem;
}
.opening-points {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
}
.opening-points li {
  font-family: var(--font-label);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--dark-text);
}
.opening-note { margin-top: clamp(1.75rem, 4vw, 2.5rem); color: var(--dark-text-muted); max-width: 58ch; }
.opening-note a { color: var(--gold-lt); }

@media (max-width: 860px) {
  .event-split { grid-template-columns: 1fr; }
  .opening-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .opening-points { grid-template-columns: 1fr; gap: 0.6rem; }
}

.event-empty {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--surface);
  max-width: 56ch;
}
.event-empty-line {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.event-empty p:last-child { color: var(--text-muted); }
.event-empty a { color: var(--gold-ink); }

/* banner — exact een keer per site (jobs) */
.page-banner { background: var(--primary); color: var(--dark-text); padding-block: clamp(3rem, 6vw, 5rem); }
/* Tweekoloms: kop links, de harde feiten rechts. De banner had een lege
   rechterhelft van ongeveer 700x300px terwijl diezelfde feiten los onderaan de
   pagina stonden en daar een gat van 300px veroorzaakten. Een void vullen met
   inhoud die elders in de weg stond, lost twee problemen met een verplaatsing. */
.page-banner .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: end;
}
.page-banner h1 { font-size: var(--step-4); color: var(--dark-text); max-inline-size: 15ch; }
.page-banner p { color: var(--dark-text-muted); max-width: 46ch; margin-top: 1rem; }

.banner-facts { display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); }
.banner-facts dt {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 0.15rem;
}
.banner-facts dd { margin: 0; color: var(--dark-text); font-size: 1.02rem; line-height: 1.35; }
.banner-facts dd a {
  color: var(--dark-text);
  text-decoration: none;
  border-bottom: 1px solid var(--dark-border);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 860px) {
  .page-banner .container { grid-template-columns: 1fr; align-items: start; }
}

/* ── De kaart-pagina: menulijst ────────────────────────────────────── */
.menu-block { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.menu-block h2 { font-size: var(--step-3); }
.menu-block > p { color: var(--text-muted); max-width: 52ch; }
/* GEEN haarlijn per gerecht. Een kaart met een streep onder elke regel wordt een
   spreadsheet: op deze pagina stonden 61 horizontale lijnen, waarvan 31 alleen
   uit deze lijst. Wat een gerecht van het volgende scheidt is WITRUIMTE, plus
   het registerverschil tussen de naam (schreef) en de omschrijving (body).
   Twee kolommen halveren bovendien de paginahoogte. */
.menu-list {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 5rem);
}
.menu-block-media { margin-top: 1.5rem; overflow: hidden; }
.menu-block-media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 62%; display: block; }
@media (max-width: 560px) {
  .menu-block-media img { aspect-ratio: 3 / 2; }
}
.menu-list dt { font-family: var(--font-label); font-size: 1.15rem; font-weight: 500; line-height: 1.3; }
.menu-list dd { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.95rem; max-width: 40ch; }

/* ── Veggie-markering ──────────────────────────────────────────────────
   De klant markeert in zijn eigen menudocument twee gerechten met een
   veggie-icoon. Groen is hier bewust de uitzondering op het palet: dit is geen
   decoratie maar een dieetsymbool, en dat moet je kunnen scannen zonder de
   legenda te lezen. Wel een botanisch groen in plaats van het felle groen van het icoon,
   zodat het naast navy en goud niet staat te schreeuwen. */
.veggie {
  display: inline-flex;
  vertical-align: -0.16em;
  width: 1.15em;
  height: 1.15em;
  color: #3E7A2C;
  margin-left: 0.15em;
}
.veggie svg { width: 100%; height: 100%; display: block; }

/* ── Oesters: het enige bord dat elke dag klaarligt, dus het enige blok dat
      als affiche op de pagina staat. Dit is de ene keer dat de kaart haar
      eigen ritme breekt; de rest blijft leesbare rijen. ───────────────── */
.oyster-board {
  /* Volle breedte: dit is het enige blok dat het ritme van de kaart mag breken,
     en dat doet het pas als de VORM breekt. Binnen de container bleef het een
     navy rechthoek tussen tekstblokken van dezelfde breedte.
     Het VLAK loopt tot de schermrand, de INHOUD niet: die zit in een gewone
     .container en staat dus op exact dezelfde kolom als elke andere kop op de
     pagina. Een eerdere poging deed dat met padding-inline op het vlak zelf;
     die berekening viel terug op de kleinste waarde en zette de kop op x=48
     terwijl de rest van de pagina op x=130 begint. */
  margin-inline: calc(50% - 50vw);
  background: var(--primary);
  color: var(--dark-text);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.oyster-board-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.oyster-board-head h2 {
  font-size: var(--step-3);
  line-height: 0.92;
  margin-top: 1rem;
  color: var(--dark-text);
}
.oyster-board-head h2 .gold { color: var(--gold-lt); display: block; }
.oyster-board-head p {
  color: var(--dark-text-muted);
  max-width: 34ch;
  margin-top: 0.9rem;
}
.oyster-board-list { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.oyster-board-list dt { font-family: var(--font-label); font-size: 1.15rem; font-weight: 500; }
.oyster-board-list dd { margin: 0.25rem 0 0; color: var(--dark-text-muted); font-size: 0.95rem; }

/* ── Plateaus: twee affiches naast elkaar ──────────────────────────── */
.plateaus {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.plateau {
  border: 1px solid var(--border);
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--surface);
}
.plateau--grand { background: var(--primary); color: var(--dark-text); border-color: var(--primary); }
.plateau h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--step-3); line-height: 0.95; }
.plateau--grand h3 { color: var(--dark-text); }
.plateau-count {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 0.6rem;
}
.plateau--grand .plateau-count { color: var(--gold-lt); }
/* Haarlijnen in plaats van opsommingsbolletjes: op een affiche is een lijst een
   reeks regels, geen opsommingstekens. De bolletjes kwamen van de browser-default,
   want een `ul` zonder klasse valt buiten de `:where(ul[class])`-reset. */
/* Geen bolletjes en geen haarlijnen: allebei maken van een affiche een tabel.
   Alleen regelafstand houdt de opsomming leesbaar. (De bolletjes kwamen van de
   browser-default: een `ul` zonder klasse valt buiten de
   `:where(ul[class])`-reset uit het trap-fixes-blok.) */
.plateau ul { margin-top: 1.1rem; list-style: none; padding-inline-start: 0; display: grid; gap: 0.5rem; }
.plateau li { color: var(--text-muted); font-size: 0.98rem; line-height: 1.4; }
.plateau--grand li { color: var(--dark-text-muted); }

/* Inline tekstlinks in lopende tekst: iets meer tikruimte zonder de regel
   uit elkaar te trekken. */
/* LET OP: `:not(.btn)` is essentieel. Zonder die uitsluiting pakt deze regel
   ook elke knop die in een alinea staat, en dan verliest die zijn eigen
   padding en flex-centrering: precies waardoor de tekst scheef in de knop
   kwam te staan op jobs, de kaart en contact. */
.prose a:not(.btn),
.intro-text a:not(.btn),
.event-body p a:not(.btn),
.menu-block p a:not(.btn),
.container--narrow p a:not(.btn) {
  display: inline-block;
  padding-block: 0.35rem;
}

/* ── Prose (privacy) ───────────────────────────────────────────────── */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-inline-start: 1.25rem; margin-bottom: 1rem; }
.prose li { padding-inline-start: 0.25rem; margin-bottom: 0.35rem; }
.prose a { color: var(--gold-ink); }

/* ── FAQ — antwoorden staan altijd open, nooit een accordeon ───────── */
.faq-item { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
.faq-item:first-child { padding-top: 0; }
.faq-q { font-family: var(--font); font-size: var(--step-1); font-weight: 700; line-height: 1.3; color: var(--text); }
.faq-a p { margin-top: 0.6rem; color: var(--text-muted); max-width: 70ch; }

/* ── Formulier ─────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
/* `>` is essentieel: zonder die beperking pakt deze regel ook elk <label>
   binnen een .choice-row, en die kregen dan de gouden kapitalen van een
   veldlabel in plaats van gewone leesbare optietekst. */
.form-group > label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: var(--gold-ink);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.98rem;
  color: var(--text);
  min-height: 48px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea { min-height: 150px; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(143, 116, 72, 0.2);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); opacity: 0.55; }
.form-error input, .form-error textarea { border-color: #B3261E; }

/* ── Sollicitatieformulier ─────────────────────────────────────────────
   Meer velden dan een contactformulier, dus twee kolommen waar dat kan en
   keuzevelden als aantikbare vlakken in plaats van kale rondjes. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1rem, 2.5vw, 1.5rem);
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.job-form fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
.job-form legend {
  padding: 0;
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.55rem;
}
.optioneel {
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.veld-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.5rem 0 0; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.55rem 1rem;
  background: #fff;
  /* Zwaardere navy rand dan --border: als keuzevlak moet de chip zichtbaar
     aantikbaar zijn, en de haarlijn liet hem als los wit vakje zweven. */
  border: 1.5px solid rgba(29, 32, 67, 0.3);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.choice span {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.choice input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
/* Aangevinkt = een gevuld navy vlak, niet een iets ander wit. Op een affichesite
   is een keuze een stempel; een randkleurtje leest niet als "dit staat aan". */
.choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary);
}
.choice:has(input:checked) span { color: var(--dark-text); }
.choice:has(input:checked) input { accent-color: var(--gold-lt); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .choice:hover { border-color: var(--gold-ink); }
}

.job-form input[type="file"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1.5px dashed var(--border);
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--text);
  min-height: 48px;
}
.job-form input[type="file"]::file-selector-button {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  margin-right: 0.9rem;
  background: var(--primary);
  color: var(--bg);
  border: 0;
  cursor: pointer;
}
.job-form .form-error input, .job-form .form-error textarea { border-color: #B3261E; }
.job-form .form-error .choice { border-color: #B3261E; }
.job-form button[type="submit"] { margin-top: 0.5rem; }

.join-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.join-intro h2 { font-size: var(--step-3); }
.join-intro p:not(.lead) { color: var(--text-muted); }
.join-photo .wipe { overflow: hidden; }
.join-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .join-intro { grid-template-columns: 1fr; }
}

.form-status { margin-top: 1rem; padding: 0.8rem 1rem; font-size: 0.9rem; border: 1px solid var(--border); }
.form-status.success { border-color: #2E6B41; color: #23532F; }
.form-status.error { border-color: #B3261E; color: #8C1D18; }
.recaptcha-disclaimer { font-size: 0.72rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.5; }
.grecaptcha-badge { visibility: hidden; }

/* ── Sollicitatieblok ──────────────────────────────────────────────────
   Er stond hier een volledig sollicitatieformulier met een verplicht
   cv-uploadveld. Dat veld kon niet werken (het notify-endpoint neemt geen
   bijlagen) en het mechanisme is nog niet gekozen, dus het beloofde iets wat
   de site niet waarmaakt. Tot die keuze er is: mailen, met dezelfde velden als
   checklist zodat de sollicitant nog altijd alles meestuurt wat de klant vroeg. */
/* Het sollicitatiekader is het eindpunt van deze pagina en stond als lichte
   doos met een randje. Nu een navy affiche: hun eigen apparaat, en het enige
   donkere vlak op de pagina, dus het trekt de aandacht zonder een lijn nodig
   te hebben. De vinkjes zijn gouden hakken en géén opsommingstekens: dit is
   een checklist, niet een lijst. Geen haarlijn per regel. */
.soll-blok {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--primary);
  border: 0;
}
.soll-lijst { margin-top: 1.35rem; display: grid; gap: 0.85rem; }
.soll-lijst li {
  font-family: var(--font-label);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--dark-text);
  display: grid;
  grid-template-columns: 1.15em 1fr;
  gap: 0.85rem;
  align-items: start;
}
.soll-lijst li::before {
  content: '';
  height: 1.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6A87A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.4 5.4L20 6.8'/%3E%3C/svg%3E") no-repeat left center;
  background-size: 1.15em auto;
}
.soll-blok .btn { margin-top: 1.6rem; }
.soll-bel { margin-top: 1.5rem; color: var(--text-muted); }
.soll-bel a, .soll-blok .lead a { color: var(--gold-ink); }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { background: var(--primary); color: var(--dark-text-muted); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1.25fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.footer-logo img { height: clamp(104px, 11vw, 136px); width: auto; }
.footer-description { margin-top: 1rem; max-width: 32ch; font-size: 0.92rem; }
.footer-heading {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0 0 1rem;
}
.footer-links li { margin-bottom: 0.15rem; }
.footer-links a, .footer-contact a, .footer-cookie-btn {
  color: var(--dark-text);
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
}
/* Het tikvlak van 44px is een AANRAAK-eis, geen desktop-eis. Ongeconditioneerd
   toegepast maakte het van elke footerlink een blok van 50px hoog: de
   menukolom werd daardoor 280px lang naast buren van 160 tot 260px, met drie
   verschillende regelritmes naast elkaar. Op een muisscherm krijgen de links nu
   hun natuurlijke regelhoogte, op een touchscreen blijft het tikvlak. */
@media (pointer: coarse) {
  .footer-links a, .footer-contact a, .footer-legal a, .footer-cookie-btn { min-height: 44px; }
  .footer-links li { margin-bottom: 0.4rem; }
}
@media (hover: hover) {
  .footer-links a:hover, .footer-contact a:hover, .footer-cookie-btn:hover { color: var(--gold-lt); }
}
.footer-contact p { font-size: 0.95rem; margin-bottom: 0.4rem; }
.footer-contact strong { color: var(--dark-text); }
/* Officiële merktekens als inline SVG: twee iconen rechtvaardigen geen hele
   icoonfont, en een merklogo hoort het echte logo te zijn en niet de generieke
   variant uit een set. De negatieve marge trekt het eerste 44px-tikvlak terug
   zodat de glyph optisch uitlijnt met de tekst erboven. */
.footer-social {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.75rem;
  margin-left: -11px;
}
.footer-social a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  color: var(--dark-text);
  transition: color var(--transition);
}
.footer-social svg { width: 21px; height: 21px; fill: currentColor; display: block; }
@media (hover: hover) {
  .footer-social a:hover { color: var(--gold-lt); }
}

/* Openingsuren in de footer: dag links, uur rechts, zodat de kolom leest als
   een uithangbord en niet als een zin. */
.footer-hours > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--dark-border);
  font-size: 0.88rem;
}
.footer-hours > div:last-child { border-bottom: 0; }
.footer-hours dt { color: var(--dark-text); }
.footer-hours dd { margin: 0; color: var(--gold-lt); font-variant-numeric: tabular-nums; }

.footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-legal a {
  color: var(--dark-text-muted);
  text-decoration: none;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) {
  .footer-legal a:hover { color: var(--gold-lt); }
}

/* ── Taalschakelaar ────────────────────────────────────────────────────
   Een globe met de taalcode, en pas op klik de drie volledige taalnamen. Een
   segmented pill (NL|FR|EN) leest als een instelling, niet als een taalkeuze;
   de globe is het enige teken dat iedereen herkent zonder de taal te kunnen
   lezen. De actieve taal is geen link: er valt niets te kiezen wat je al hebt.
   Open of dicht is een binaire toestand, dus CSS-transitie, geen tijdlijn. */
.lang { position: relative; flex-shrink: 0; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  background: none;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.lang-globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lang-caret {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}
.lang.is-open .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 200px;
  padding: 0.3rem;
  background: var(--navy-deep);
  border: 1px solid var(--dark-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
/* In de footer staat de knop onderaan het scherm: daar klapt hij omhoog uit. */
.lang--footer .lang-menu { top: auto; bottom: calc(100% + 0.55rem); transform: translateY(6px); }
.lang--footer.is-open .lang-menu { transform: none; }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  color: var(--dark-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color var(--transition);
}
.lang-option .lang-code {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gold-lt);
}
.lang-option.is-active {
  background: rgba(252, 240, 228, 0.09);
  color: var(--dark-text-muted);
  cursor: default;
}
@media (hover: hover) {
  .lang-btn:hover { border-color: var(--gold-lt); }
  a.lang-option:hover { background: rgba(252, 240, 228, 0.14); }
}

/* Mobiel menu: drie pillen naast elkaar. Een uitklappaneel binnen een
   schermvullend menu is een laag over een laag. */
/* In het mobiele menu staan de pillen tussen de kop en de navigatie: dat is de
   enige plek waar ze zonder scrollen bereikbaar zijn. */
.lang-pills { display: flex; gap: 0.5rem; }
.mobile-menu > .lang-pills { margin-top: 0.9rem; }
.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 58px;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.lang-pill.is-active {
  background: var(--dark-text);
  border-color: var(--dark-text);
  color: var(--primary);
}

.footer-bottom-left { display: flex; align-items: center; gap: 1.25rem; }
.footer-divider { width: 1px; height: 18px; background: rgba(252, 240, 228, 0.14); }

/* De cookie-knop staat tussen twee links en moet er ook zo uitzien; alleen het
   element verschilt, want een dialoog openen is geen navigatie. Kleur, maat en
   tikvlak komen uit dezelfde regels als de links ernaast. */
.footer-cookie-btn {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.footer-bottom { border-top: 1px solid var(--dark-border); }
.footer-bottom-inner {
  width: min(var(--max-width), 100% - 3rem);
  margin-inline: auto;
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copy { font-size: 0.82rem; color: var(--dark-text-muted); }
.footer-agency { line-height: 0; }
.footer-agency img { width: 120px; height: 33px; opacity: 1; }

/* ── Back to top ───────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--bg);
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 900;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Reveals ───────────────────────────────────────────────────────────
   Draaien op alle breedtes. Wat op mobiel verboden blijft is SCROLL-GEKOPPELDE
   motion (ScrollTrigger): die herberekent bij elke viewport-resize, en dat is
   precies wat de inklappende Android-adresbalk veroorzaakt. Deze reveal is een
   eenmalige IntersectionObserver plus een CSS-transitie; hij leest de
   scrollpositie nooit. `.js-ready` komt alleen van JS, dus zonder JS staat
   alles gewoon zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
  /* Afstand en curve zijn de twee knoppen die bepalen of beweging REGISTREERT.
     Dit stond op 16px met een curve die traag start en traag eindigt: dat is
     ongeveer één procent van een scherm en je ziet het niet. Nu 44px met een
     curve die alleen afremt (expo-out), dus het element komt binnen met vaart
     en legt zich neer. Dat leest als geregisseerd; een fade die net zo traag
     vertrekt als aankomt leest als traagheid.
     Bewust NIET de Elementor-aanpak van de referentiesite (het element legt
     zijn eigen volledige hoogte af): dat is wat die sites hun stuiterende,
     goedkope gevoel geeft. */
  .js-ready .reveal {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    /* GEEN will-change. Op de kaart staan 43 reveals tegelijk te wachten; dat
       zou 43 compositorlagen het hele bezoek in leven houden voor een
       transitie die de browser toch al naar de compositor tilt zodra ze loopt.
       Zelfde les als bij het mobiele menu. */
  }
  .reveal.revealed { opacity: 1; transform: none; }

  /* ── B. Posters stempelen, ze faden niet ─────────────────────────────
     Hun hele identiteit is drukwerk: navy affiches met crème kapitalen. Een
     affiche komt niet zwevend aandrijven, die wordt neergezet. Kort, hard
     onderaan beginnen en met een lichte overmaat tot rust komen — hetzelfde
     gebaar als een stempel op papier. Dat geeft de navy blokken een eigen
     register naast de gewone reveals, zodat de pagina uit twee stemmen bestaat
     in plaats van uit één herhaalde. */
  .js-ready .reveal.stamp {
    opacity: 1;                 /* een affiche fade't niet, die landt */
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal.stamp.revealed { transform: none; }

  /* GEEN clip-path voor deze staat. Een element dat zichzelf tot nul knipt
     heeft geen zichtbaar oppervlak, en Chrome rekent dat mee: de observer
     vuurt dan nooit en het blok blijft voorgoed dicht. De stempel zit dus in
     de CURVE en in het ontbreken van een fade, niet in een masker. */

  /* ── C. Kaartrijen zetten zich van links ─────────────────────────────
     De blokken komen van onder, de rijen van links. Twee richtingen die elkaar
     niet imiteren lezen als opmaak; twaalf keer dezelfde fade-up leest als een
     sjabloon dat afdraait. */
  .js-ready [data-reveal-rows="zij"] > .reveal { transform: translateX(-26px); }
  /* De eindstaat moet MINSTENS even specifiek zijn. `.reveal.revealed` is
     (0,2,0) en de regel hierboven (0,3,0), dus zonder deze regel bleven de
     rijen voorgoed 26px naar links staan — zichtbaar tegen de containerrand.
     Vierde keer dit patroon in deze build. */
  .js-ready [data-reveal-rows="zij"] > .reveal.revealed { transform: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* Korter en kleiner: op een telefoon scrollt men sneller door dan de
     desktop-duur van 0,8s aankan, en dan mist de bezoeker de helft. */
  /* Mobiel dezelfde beweging, kortere weg en kortere duur: op een klein scherm
     is 44px verhoudingsgewijs veel meer, en een trage entree kost daar meer
     geduld dan ze oplevert. */
  .js-ready .reveal {
    transform: translateY(28px);
    transition-duration: 0.62s;
  }
}

/* ── De getijlijn is een OVERGANG, geen sectie ─────────────────────────
   Zonder deze correctie stapelen de padding-bottom van de vorige sectie, de
   lijn zelf en de padding-top van de volgende tot 300 a 450px leeg creme rond
   een haarlijn van goud. Gemeten op vier pagina's; op contact was het 351px.
   Het Royale ritme blijft gelden TUSSEN secties, maar niet rond de lijn: die
   IS de ademruimte. */
.section:has(+ .tide),
.section--tight:has(+ .tide) { padding-bottom: clamp(2rem, 4vw, 3rem); }
.tide + .section,
.tide + .section--tight { padding-top: clamp(2rem, 4vw, 3rem); }

/* Een groep met een enkel gerecht mag geen lege tweede kolom achterlaten. */
.menu-list:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ── Ritme-uitzonderingen als KLASSE, niet als inline-stijl ────────────
   De Royale preset gold nog maar op een handvol secties omdat twintig plekken
   hem inline overschreven. Zo is het ritme half beleid en half toeval, en is
   niet na te gaan welke waarde ergens geldt. Deze klassen zijn de enige
   toegestane afwijkingen; wie een nieuwe nodig heeft, zet hem hier. */
.section--top-tight    { padding-top: clamp(2rem, 4vw, 3rem); }
.section--top-snug     { padding-top: clamp(2.5rem, 5vw, 4rem); }
.section--top-flush    { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.section--bottom-tight { padding-bottom: clamp(2rem, 4vw, 3rem); }
.section--bottom-snug  { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.section--compact      { padding-block: clamp(3rem, 6vw, 4.5rem); }

.stack-sm { margin-top: 1.75rem; }
.stack-md { margin-top: 2rem; }
.flush-top { margin-top: 0; }
.gap-under { margin-bottom: 2rem; }
.no-gap-under { margin-bottom: 0; }
.label--spaced { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* ── Foutpagina ────────────────────────────────────────────────────── */
.opener-h1-sm { font-size: var(--step-3); }
.error-pane { min-height: 60svh; display: flex; align-items: center; }
.error-pane .container { text-align: center; }
.error-code {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(4rem, 14vw, 8rem);
  color: var(--accent);
  line-height: 0.85;
  margin-bottom: 1rem;
}
.error-note { color: var(--text-muted); margin-top: 0.9rem; max-width: 44ch; margin-inline: auto; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }

/* ── Responsive ────────────────────────────────────────────────────── */
/* LET OP de plaats: een media-query voegt geen specificiteit toe, dus hij moet
   NA de basisregel staan. Deze regels stonden eerst in het media-blok bij
   .photo-band, dat hoger in het bestand valt dan `.practical`, en werkten
   daardoor niet: het praktisch-blok bleef tweekoloms op een telefoon met een
   Google-kaart van 157px breed. */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .practical, .join-intro { grid-template-columns: 1fr; }
  .menu-list { grid-template-columns: 1fr; }
  .oyster-board-inner { grid-template-columns: 1fr; align-items: start; }
  .map-frame { min-height: 300px; }
}

@media (max-width: 620px) {
  .plateaus { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 2.25rem); }
  .footer-grid { grid-template-columns: 1fr; }
  /* Mobiel wordt de onderbalk een gecentreerde stapel: taalkeuze, dan de
     copyright met het btw-nummer, dan het Cloudpage-logo op zijn eigen regel.
     Links uitlijnen gaf drie blokken van verschillende breedte onder elkaar en
     dat leest als een opsomming die halverwege afbreekt. */
  .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
  .footer-bottom-left { flex-direction: column; align-items: center; gap: 0.9rem; }
  .footer-divider { display: none; }
  /* Het paneel klapt uit vanaf het midden van de knop; de verschuiving zit in
     dezelfde transform als de openingsanimatie, anders vechten ze om de as. */
  .lang--footer .lang-menu { left: 50%; right: auto; transform: translate(-50%, 6px); }
  .lang--footer.is-open .lang-menu { transform: translate(-50%, 0); }
  .hero-meta { flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-ready .reveal { opacity: 1; transform: none; }
  .tide path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ── High contrast ─────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :focus-visible { outline-width: 4px; }
}