/* ===========================================================================
   Chef Chaouan, Amsterdam Osdorp
   ---------------------------------------------------------------------------
   Richting: elke foto van de zaak is geschoten op dezelfde bijna-zwarte
   ondergrond, met kobaltblauw Marokkaans servies, gouden randen en terracotta
   aardewerk. De pagina neemt die ondergrond over, zodat de gerechten op het
   papier lijken te zweven in plaats van in kaders te zitten. Het blauw van
   Chefchaouen en de gouden bordrand zijn de enige accenten; de achtpuntige
   zelligester en de Moorse boog lopen als motief door de hele pagina.
   =========================================================================== */

:root {
  /* velden */
  --inkt: #121317;
  --inkt-op: #191B20;
  --inkt-diep: #0A0B0E;
  --blauw-diep: #0D2238;
  --plaaster: #EFE7DA;
  --plaaster-diep: #E4D9C7;

  /* inkt op donker */
  --room: #F4EFE6;
  --room-zacht: rgba(244, 239, 230, .70);
  --room-stil: rgba(244, 239, 230, .57);

  /* inkt op licht */
  --donker: #15171B;
  --donker-zacht: rgba(21, 23, 27, .74);

  /* accenten */
  --goud: #C9A24C;
  --goud-licht: #E3C47E;
  --goud-donker: #6B5217;
  --goud-lijn: rgba(201, 162, 76, .34);
  --goud-lijn-donker: rgba(107, 82, 23, .30);
  --blauw: #6FC4F2;
  --terra: #C2652C;

  /* maatvoering */
  --max: 76rem;
  --kant: clamp(1.25rem, 5vw, 4rem);
  --ruimte: clamp(4.25rem, 8.5vw, 7rem);
  --ruimte-klein: clamp(2.5rem, 5vw, 4rem);

  /* opening */
  --opening-achtergrond: #121317;
  --opening-demping: .55;

  /* Geen webfont van een CDN: dat stuurt het IP-adres van elke bezoeker naar
     een derde partij voordat die iets gevraagd heeft. Deze twee stapels staan
     op elk toestel al klaar, laden dus niets na, en geven toch een duidelijk
     onderscheid tussen een kalligrafische titelletter en een nuchtere
     tekstletter. */
  --letter-kop: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --letter-tekst: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--inkt);
  color: var(--room);
  font-family: var(--letter-tekst);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  /* `clip` en niet `hidden`: `hidden` maakt van de body een scrollbox en
     breekt position: sticky, waar de opening op draait. */
  overflow-x: clip;
}

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.omlijsting {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--kant);
}

/* De kopbalk staat vast, dus een anker mag er niet onder landen. */
section[id] { scroll-margin-top: 5.5rem; }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .85rem 1.25rem;
  background: var(--goud);
  color: var(--inkt);
  font-weight: 600;
  text-decoration: none;
}
.overslaan:focus { left: 1rem; top: 1rem; }

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

/* ---- typografie --------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.07;
  letter-spacing: -.004em;
  margin: 0;
}

.titel-groot {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  max-width: 17ch;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lood {
  font-size: clamp(1.1rem, 1.02rem + .38vw, 1.3rem);
  line-height: 1.6;
  color: var(--room);
}

.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.15rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--goud-licht);
}
.kicker--donker { color: var(--goud-donker); }

.ster-mini {
  flex: 0 0 auto;
  width: .78rem;
  height: .78rem;
  fill: currentColor;
}

.sectiekop { margin-bottom: var(--ruimte-klein); }
.sectiekop--midden { text-align: center; }
.sectiekop--midden .kicker { justify-content: center; }
.sectiekop--midden .titel-groot { margin-inline: auto; }

.bijschrift {
  margin: 1.1rem 0 0;
  font-size: .86rem;
  letter-spacing: .02em;
  color: var(--room-stil);
}

/* ---- knoppen ------------------------------------------------------------ */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .92rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--letter-tekst);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.knop:hover { transform: translateY(-2px); }

.knop--goud { background: var(--goud); color: #16130B; }
.knop--goud:hover { background: var(--goud-licht); }

.knop--rand { border-color: rgba(244, 239, 230, .38); color: var(--room); }
.knop--rand:hover { border-color: var(--goud-licht); color: var(--goud-licht); }

.knop--inkt { background: var(--donker); color: var(--plaaster); }
.knop--inkt:hover { background: var(--blauw-diep); }

.knop--rand-donker { border-color: rgba(21, 23, 27, .35); color: var(--donker); }
.knop--rand-donker:hover { border-color: var(--goud-donker); color: var(--goud-donker); }

.knop--breed { width: 100%; }
.knop--klein { padding: .7rem 1.15rem; font-size: .78rem; }

/* ---- onthullen ---------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .3, 1);
}
.js [data-reveal].is-zichtbaar { opacity: 1; transform: none; }

[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: .09s; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: .18s; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: .27s; }

/* =========================================================================
   NAVIGATIE
   ========================================================================= */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}

/* De balk zweeft over de opening, en die foto is juist op de hoogte van de
   balk het lichtst: terracotta rand, eigeel, amandelen. De merknaam las daar
   niet tegen (2,09:1). Een vaste sluier die naar beneden uitdooft houdt naam
   en menu op elke scrollpositie leesbaar zonder dat de balk meteen een dichte
   band wordt. Zodra de balk zelf dichtloopt, verdwijnt de sluier. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -5.5rem 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(8, 9, 11, .90) 0%,
    rgba(8, 9, 11, .78) 34%,
    rgba(8, 9, 11, .40) 66%,
    rgba(8, 9, 11, 0) 100%);
  pointer-events: none;
  transition: opacity .4s ease;
}
.nav--solid::before { opacity: 0; }

.nav__binnen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: .9rem var(--kant);
}

.nav--solid {
  background: rgba(13, 14, 17, .92);
  box-shadow: 0 1px 0 var(--goud-lijn);
  backdrop-filter: blur(10px);
}

.merk {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--room);
}

/* Het merkteken is lichtblauwe kalligrafie op transparant: dat staat op de
   bijna-zwarte ondergrond van deze site juist sterk. Geen wit tegeltje
   eromheen, en geen vaste hoogte die het zou kunnen afsnijden. */
.merk__tegel {
  display: block;
  flex: 0 0 auto;
  width: 2.9rem;
}
.merk__tegel img { width: 100%; height: auto; }

.merk__tegel--groot { width: 5.25rem; }

.merk__naam {
  font-family: var(--letter-kop);
  font-size: 1.22rem;
  letter-spacing: .01em;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
}

.nav__menu a {
  color: var(--room-zacht);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s ease;
}
.nav__menu a:hover { color: var(--goud-licht); }

/* `.nav__menu a` is even specifiek als `.nav__cta` en staat eerder, dus zonder
   deze samengestelde selector wint de lichte menukleur van de donkere
   knoptekst en leest "Reserveren" niet tegen het goud. */
.nav__menu a.nav__cta,
.nav__menu a.nav__cta:hover { color: #16130B; }

.nav__schakel {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  background: none;
  border: 1px solid rgba(244, 239, 230, .3);
  border-radius: 2px;
  color: var(--room);
  font-family: inherit;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav__streep { display: block; width: 1.1rem; height: 1px; background: currentColor; }
.nav__streep + .nav__streep { margin-left: -1.65rem; transform: translateY(5px); }

/* =========================================================================
   OPENING (opmaak van kop, knoppen, slotregel en wenk)
   ========================================================================= */

.opening__kop,
.opening__slot {
  padding: 0 var(--kant) clamp(3.25rem, 9svh, 6rem);
}

.opening__kop-binnen {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.opening__titel {
  margin: 0 0 1rem;
  font-size: clamp(2.8rem, 1.6rem + 5.9vw, 6.9rem);
  line-height: .96;
  letter-spacing: -.012em;
  color: var(--room);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.opening__zin-vast {
  max-width: 34ch;
  margin: 0 0 2rem;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.25rem);
  color: var(--room-zacht);
}

.opening__knoppen { display: flex; flex-wrap: wrap; gap: .85rem; }

.opening__slotregel {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  line-height: 1.12;
  max-width: 22ch;
  color: var(--room);
}

/* De wenk staat midden onderin, en daar staat bij deuren juist de kier waar
   de foto doorheen schijnt. Een klein, rond uitdovend waasje eronder houdt het
   woord leesbaar zonder dat er een kader omheen komt te staan. */
.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.opening__wenk::before {
  content: "";
  position: absolute;
  inset: -1.75rem -3.5rem -1.25rem;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(8, 9, 11, .75) 0%, rgba(8, 9, 11, .45) 48%, rgba(8, 9, 11, 0) 78%);
  pointer-events: none;
}
.wenk__woord {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--room-zacht);
}
.wenk__lijn {
  display: block;
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(180deg, var(--goud), transparent);
}

/* =========================================================================
   WELKOM
   ========================================================================= */

.welkom { padding: var(--ruimte) 0 var(--ruimte-klein); }

.welkom__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.welkom__tekst p { color: var(--room-zacht); }
.welkom__tekst .lood { color: var(--room); }
.welkom__tekst .titel-groot { margin-bottom: 1.6rem; }

.feitjes {
  display: grid;
  gap: 0;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--goud-lijn);
}
.feitjes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(244, 239, 230, .1);
}
.feitjes__sleutel {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goud-licht);
}
.feitjes__waarde {
  font-family: var(--letter-kop);
  font-size: 1.15rem;
  color: var(--room);
}

.welkom__beeld {
  position: relative;
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--goud-lijn);
}

.boog {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4.2;
  clip-path: url(#boog);
  background: var(--inkt-op);
  overflow: hidden;
}
.boog img { width: 100%; height: 100%; object-fit: cover; }
.boog--klein { aspect-ratio: 3 / 3.6; }

/* =========================================================================
   GERECHTEN
   ========================================================================= */

.gerechten { padding: var(--ruimte-klein) 0 0; }

.kaart-rij {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  row-gap: clamp(2.75rem, 5vw, 4.5rem);
}

.gerecht { margin: 0; }
.gerecht:nth-child(1) { grid-column: 1 / 7; }
.gerecht:nth-child(2) { grid-column: 8 / 13; margin-top: clamp(2.5rem, 6vw, 6.5rem); }
.gerecht:nth-child(3) { grid-column: 2 / 7; }
.gerecht:nth-child(4) { grid-column: 7 / 12; margin-top: clamp(1.5rem, 3.5vw, 3.5rem); }

.gerecht__beeld {
  position: relative;
  overflow: hidden;
  background: var(--inkt-op);
  box-shadow: 0 0 0 1px rgba(244, 239, 230, .07);
}
.gerecht__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .8, .3, 1);
}
.gerecht:hover .gerecht__beeld img { transform: scale(1.045); }

.gerecht:nth-child(1) .gerecht__beeld { aspect-ratio: 4 / 3; }
.gerecht:nth-child(2) .gerecht__beeld { aspect-ratio: 3 / 2; }
.gerecht:nth-child(3) .gerecht__beeld { aspect-ratio: 1 / 1; }
.gerecht:nth-child(4) .gerecht__beeld { aspect-ratio: 3 / 2; }

.gerecht__nr {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.35rem 0 .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}
.gerecht__nr::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--goud-lijn), transparent);
}

.gerecht__naam {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.85rem);
}

.gerecht__tekst {
  margin: 0;
  max-width: 42ch;
  color: var(--room-zacht);
}

/* Vier losse zinnetjes in vier even grote kaartjes lezen als opvulling. Ze
   staan hier als één strook over de volle breedte: een smalle, iets lichtere
   band die de gerechtenrij afsluit en meteen de aanloop is naar de fotoband
   eronder. Geen kaders, alleen haarlijnen tussen de kolommen. */
.verwenband {
  /* De gerechtenrij loopt getrapt af, dus de onderste kaart staat al laag; een
     volle sectiemarge erbovenop maakte er een leeg gat van. */
  margin-top: clamp(3.25rem, 6vw, 5rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  background: var(--inkt-op);
  border-top: 1px solid var(--goud-lijn);
}

.verwen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto;
  list-style: none;
}
.verwen li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid rgba(244, 239, 230, .1);
}
.verwen li:first-child { padding-left: 0; border-left: 0; }
.verwen li:last-child { padding-right: 0; }

.verwen__ster {
  width: .7rem;
  height: .7rem;
  margin-bottom: .35rem;
  fill: var(--terra);
}
.verwen__kop {
  font-family: var(--letter-kop);
  font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem);
  line-height: 1.24;
  color: var(--room);
}
.verwen__tekst {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--room-stil);
}

/* =========================================================================
   BAND
   ========================================================================= */

.band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(23rem, 60svh, 36rem);
  padding: var(--ruimte) 0 var(--ruimte-klein);
  overflow: hidden;
}
/* De foto zelf wordt donker en iets warmer gezet in plaats van onder een
   dekkend waas gestopt: zo blijft het gerecht over de volle breedte zichtbaar
   en leest de kop er toch ruim overheen. De randen lopen boven in de strook
   erboven en onder in het diepe blauw van "over ons" over. */
.band__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  filter: brightness(.46) saturate(1.2) contrast(1.04);
}
.band__waas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--inkt-op) 0%, rgba(25, 27, 32, 0) 22%, rgba(13, 34, 56, .22) 62%, rgba(13, 34, 56, .62) 88%, var(--blauw-diep) 100%),
    linear-gradient(90deg, rgba(8, 9, 11, .6) 0%, rgba(8, 9, 11, .14) 52%, rgba(8, 9, 11, 0) 76%);
}
.band__binnen { position: relative; }

.band__kop {
  margin: 0 0 .9rem;
  max-width: 17ch;
  font-family: var(--letter-kop);
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--room);
}
.band__zin {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  color: var(--room-zacht);
}

/* Tussen de opening en de eventsectie zat een lange aanloop zonder enige
   actie; op een telefoon staat "Reserveren" daar bovendien weggeklapt in het
   menu. Deze band is het logische halverwege-moment: hij staat al op de volle
   breedte en heeft de donkerste ondergrond van de pagina, dus het goud valt er
   op zonder dat er een kadertje omheen hoeft. */
.band__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.75rem, 3vw, 2.4rem);
}

/* =========================================================================
   OVER ONS
   ========================================================================= */

/* De fotoband erboven loopt al in ditzelfde blauw af, dus hier hoeft geen
   tweede volle sectiemarge overheen: dat gaf een leeg blauw vlak van bijna een
   scherm hoog tussen de band en de kop. */
.over {
  position: relative;
  padding: var(--ruimte-klein) 0 var(--ruimte);
  /* Het blauw houdt bijna de hele sectie vast en dooft pas in de laatste
     strook naar de paginakleur. Eerder omslaan maakte van het citaat en de
     twee kolommen eronder twee losse velden in plaats van één sectie. */
  background: linear-gradient(180deg, var(--blauw-diep) 0%, var(--blauw-diep) 84%, var(--inkt) 100%);
  overflow: hidden;
}

/* Als vlak liep de zellige-ster met een harde schuine rand het beeld uit en
   las hij als een vreemde wig. Als lijntekening is hij herkenbaar het motief
   dat ook in de opmaatregels en de voet terugkomt. */
.over__watermerk {
  position: absolute;
  top: -9%;
  right: -13%;
  width: min(44rem, 70vw);
  height: auto;
  fill: none;
  stroke: rgba(111, 196, 242, .17);
  stroke-width: .3;
  pointer-events: none;
}

.over > .omlijsting { position: relative; }

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

.over__kolom p { color: rgba(244, 239, 230, .80); }
.over__kolom .lood { color: var(--room); }

/* Dezelfde opname als de opening, maar bewust niet hetzelfde beeld: hier staat
   alleen de terracotta rand op de houten plank in beeld, een warme textuurband
   die het blauw breekt zonder het gerecht van de hero te herhalen. */
.over__beeld {
  margin: 0;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(244, 239, 230, .1);
}
.over__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 88%;
}

.over__chef {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(111, 196, 242, .28);
}

/* Het citaat sluit het blauwe hoofdstuk af: eerst de twee kolommen, dan de
   twee kleine panelen, en pas daarna deze ene grote regel, precies waar het
   blauw naar de paginakleur wegzakt. Andersom (citaat in het midden) eindigde
   de sectie op twee blokjes kleine tekst, en dat liep dood. */
.citaat {
  margin: clamp(2.75rem, 5.5vw, 4.5rem) auto 0;
  max-width: 48rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid rgba(111, 196, 242, .28);
  text-align: center;
}
.citaat p {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--room);
}

/* Twee omlijnde bakjes met kleine letters maakten hier eerder een formuliertje
   van. Het zijn nu twee kolommen onder dezelfde haarlijn als het citaat:
   dezelfde familie, geen nieuwe kaders. */
.paneeltjes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: var(--ruimte-klein);
}
.paneel {
  padding-top: 1.35rem;
  border-top: 1px solid rgba(111, 196, 242, .28);
}
.paneel p {
  margin: 0;
  max-width: 44ch;
  color: var(--room-zacht);
  font-size: 1.02rem;
  line-height: 1.62;
}
.paneel__ster {
  width: .85rem;
  height: .85rem;
  margin-bottom: 1.1rem;
  fill: var(--terra);
}

/* =========================================================================
   IMPRESSIES
   ========================================================================= */

/* Het blauwe hoofdstuk dooft zelf al naar de paginakleur en heeft onderin zijn
   eigen marge; nog een volle sectiemarge erbovenop gaf een donker gat van bijna
   een scherm hoog tussen het citaat en de galerij. Onderaan blijft de extra
   ruimte wel staan: daarin schuift de boog van de eventsectie omhoog. */
.impressies { padding: var(--ruimte-klein) 0 calc(var(--ruimte) + 5rem); }

/* Geen masonry: die liet de drie kolommen op verschillende hoogtes aflopen,
   waardoor de galerij als een onafgemaakte stapel las. Dit is een vaste
   mozaïek van drie banden van gelijke hoogte, met per band wisselende
   breedtes, zodat het blok als één gecomponeerd vlak leest. */
.galerij {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(4.5rem, 6.4vw, 7.25rem);
  gap: clamp(.65rem, 1.2vw, 1.1rem);
}

.galerij__item {
  display: block;
  grid-row: span 3;
  grid-column: span 4;
  /* Een knop heeft van zichzelf min-width: auto; zonder dit duwt een brede
     foto zijn eigen vak uit het raster. */
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--inkt-op);
  cursor: zoom-in;
  overflow: hidden;
}

.galerij__item:nth-child(1) { grid-column: span 5; }
.galerij__item:nth-child(2) { grid-column: span 3; }
.galerij__item:nth-child(4) { grid-column: span 4; }
.galerij__item:nth-child(5) { grid-column: span 5; }
.galerij__item:nth-child(6) { grid-column: span 3; }
.galerij__item:nth-child(7) { grid-column: span 7; }
.galerij__item:nth-child(8) { grid-column: span 5; }

.galerij__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, .8, .3, 1), opacity .4s ease;
}
.galerij__item:hover img { transform: scale(1.05); opacity: .85; }

/* =========================================================================
   EVENTS + RESERVEREN (het lichte veld)
   ========================================================================= */

.events,
.reserveren {
  background: var(--plaaster);
  color: var(--donker);
}

.events { padding: 0 0 var(--ruimte); }

.events__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}

.events__beeld { margin-top: -5rem; }

.events__tekst { padding-top: var(--ruimte); }
.events__tekst p { color: var(--donker-zacht); }
.events__tekst .lood { color: var(--donker); }
.events__tekst .titel-groot { margin-bottom: 1.5rem; }

.events__subkop {
  margin: 2rem 0 .6rem;
  font-size: 1.25rem;
  color: var(--donker);
}

.events__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.reserveren {
  padding: 0 0 var(--ruimte);
  background: linear-gradient(180deg, var(--plaaster) 0%, var(--plaaster-diep) 100%);
}

.reserveren__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: var(--ruimte-klein);
  border-top: 1px solid var(--goud-lijn-donker);
}

.reserveren .kicker { color: var(--goud-donker); }
.reserveren__intro p { color: var(--donker-zacht); }
.reserveren__intro .lood { color: var(--donker); }
.reserveren__intro .titel-groot { margin-bottom: 1.4rem; }

.snelcontact {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--goud-lijn-donker);
}
.snelcontact li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(21, 23, 27, .12);
}
.snelcontact__sleutel {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goud-donker);
}
.snelcontact__waarde {
  font-family: var(--letter-kop);
  font-size: 1.1rem;
  color: var(--donker);
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 23, 27, .3);
  word-break: break-word;
}
.snelcontact__waarde:hover { color: var(--goud-donker); border-color: var(--goud-donker); }

/* ---- formulier ---------------------------------------------------------- */

.formulier {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--goud-lijn-donker);
}

.veld { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }

.veld-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.veld label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goud-donker);
}

.veld input,
.veld textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: #FFFDF9;
  border: 1px solid rgba(21, 23, 27, .22);
  border-radius: 2px;
  color: var(--donker);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.veld textarea { resize: vertical; min-height: 6rem; }
.veld input:focus,
.veld textarea:focus {
  border-color: var(--goud-donker);
  box-shadow: 0 0 0 3px rgba(107, 82, 23, .14);
  outline: none;
}

.formulier__noot {
  margin: 1rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--donker-zacht);
}

/* =========================================================================
   CONTACT
   ========================================================================= */

.contact {
  padding: var(--ruimte) 0;
  background: var(--inkt);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.contact__blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--goud-lijn);
}

.contact__kop {
  margin: 0 0 .5rem;
  font-family: var(--letter-tekst);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--goud-licht);
}

.contact__groot {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.15;
  color: var(--room);
  text-decoration: none;
}
.contact__groot--link:hover { color: var(--goud-licht); }

.contact__regel {
  margin: 0;
  color: var(--room-zacht);
  word-break: break-word;
}
.contact__regel--link {
  color: var(--room-zacht);
  text-decoration: none;
  border-bottom: 1px solid var(--goud-lijn);
}
.contact__regel--link:hover { color: var(--goud-licht); border-color: var(--goud-licht); }

.contact__blok .knop { margin-top: .9rem; }

/* =========================================================================
   VOET
   ========================================================================= */

.voet {
  padding: var(--ruimte-klein) 0 1.75rem;
  background: var(--inkt-diep);
  border-top: 1px solid var(--goud-lijn);
}

.voet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.voet__merk { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.voet__merk .merk__tegel { margin-bottom: .5rem; }
.voet__naam {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--room);
}
.voet__zin {
  margin: 0;
  max-width: 26ch;
  color: var(--room-stil);
  font-size: .95rem;
}

.voet__nav { display: flex; flex-direction: column; gap: .5rem; }
.voet__nav a {
  color: var(--room-zacht);
  font-size: .88rem;
  letter-spacing: .06em;
  text-decoration: none;
}
.voet__nav a:hover { color: var(--goud-licht); }

.voet__adres {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-style: normal;
  font-size: .88rem;
  color: var(--room-stil);
}
.voet__adres a { color: var(--room-zacht); text-decoration: none; }
.voet__adres a:hover { color: var(--goud-licht); }

.voet__onder {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: var(--ruimte-klein);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(244, 239, 230, .1);
}
.voet__onder p { margin: 0; font-size: .8rem; letter-spacing: .08em; color: var(--room-stil); }
.voet__ster { width: .85rem; height: .85rem; fill: var(--goud); flex: 0 0 auto; }

/* =========================================================================
   404
   ========================================================================= */

.zoek {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: var(--ruimte) 0;
  overflow: hidden;
}
.zoek__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  filter: brightness(.34) saturate(1.15);
}
.zoek__waas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .82) 0%, rgba(10, 11, 14, .4) 48%, rgba(13, 34, 56, .72) 100%),
    linear-gradient(90deg, rgba(8, 9, 11, .78) 0%, rgba(8, 9, 11, .22) 62%, rgba(8, 9, 11, .05) 100%);
}
.zoek__binnen { position: relative; max-width: 48rem; }
.zoek__binnen .merk__tegel { margin-bottom: 1.75rem; }

.zoek__titel {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.9rem);
  color: var(--room);
}
.zoek .lood { max-width: 42ch; color: var(--room-zacht); }

.zoek__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

.zoek__feitjes {
  display: grid;
  gap: 0;
  margin: 2.75rem 0 0;
  padding: 0;
  max-width: 32rem;
  list-style: none;
  border-top: 1px solid var(--goud-lijn);
}
.zoek__feitjes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(244, 239, 230, .1);
}

/* =========================================================================
   LICHTBAK
   ========================================================================= */

.licht {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 9, 11, .94);
}
.licht[hidden] { display: none; }

.licht__beeld {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.licht__sluit {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(244, 239, 230, .3);
  border-radius: 50%;
  color: var(--room);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.licht__sluit:hover { border-color: var(--goud-licht); color: var(--goud-licht); }

/* =========================================================================
   RESPONSIEF
   ========================================================================= */

@media (max-width: 1080px) {
  /* Vier banden van twee, met per band een brede en een smalle. */
  .galerij { grid-auto-rows: clamp(4.25rem, 7.5vw, 6rem); }
  .galerij__item:nth-child(odd) { grid-column: span 7; }
  .galerij__item:nth-child(even) { grid-column: span 5; }
  .galerij__item:nth-child(4n+3) { grid-column: span 5; }
  .galerij__item:nth-child(4n) { grid-column: span 7; }

  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .verwen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  .verwen li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .verwen li:nth-child(even) { padding-right: 0; }
}

@media (max-width: 900px) {
  .nav__schakel { display: inline-flex; }

  .nav__menu {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--kant) 1.25rem;
    background: rgba(10, 11, 14, .97);
    border-top: 1px solid var(--goud-lijn);
    backdrop-filter: blur(10px);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a { padding: .85rem 0; border-bottom: 1px solid rgba(244, 239, 230, .08); }
  .nav__cta { margin-top: .9rem; justify-content: center; border-bottom: 0; }

  .welkom__grid,
  .over__grid,
  .events__grid,
  .reserveren__grid { grid-template-columns: minmax(0, 1fr); }

  .welkom__beeld {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--goud-lijn);
    padding-top: 2rem;
  }
  .boog { aspect-ratio: 4 / 4.4; }

  .events__grid { gap: 2rem; }
  .events__beeld { margin-top: -4rem; max-width: 26rem; }
  .events__tekst { padding-top: 1rem; }

  .kaart-rij { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.5rem, 7vw, 3.5rem); }
  .gerecht:nth-child(1),
  .gerecht:nth-child(2),
  .gerecht:nth-child(3),
  .gerecht:nth-child(4) { grid-column: 1 / -1; margin-top: 0; }
  .gerecht:nth-child(3) .gerecht__beeld { aspect-ratio: 4 / 3; }

  .paneeltjes { grid-template-columns: minmax(0, 1fr); }

  .voet__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .galerij { grid-auto-rows: 4.9rem; }
  .galerij__item,
  .galerij__item:nth-child(odd),
  .galerij__item:nth-child(even),
  .galerij__item:nth-child(4n+3),
  .galerij__item:nth-child(4n) { grid-column: span 12; }

  .verwen { grid-template-columns: minmax(0, 1fr); }
  .verwen li {
    padding: 1.1rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(244, 239, 230, .1);
  }
  .verwen li:first-child { padding-top: 0; border-top: 0; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .veld-rij { grid-template-columns: minmax(0, 1fr); }

  /* Op een telefoon staan de twee knoppen onder elkaar en lopen ze tot aan de
     rand. De scroll-wenk staat midden onderin en landde daardoor bovenop de
     onderste knop ("Scroll" dwars door "Onze gerechten"). Deze kop heeft hier
     dus een eigen, ruimere voet, zodat de wenk zijn plek houdt. */
  .opening__knoppen .knop { flex: 1 1 100%; }
  .opening__kop { padding-bottom: 7.25rem; }

  .events__beeld { max-width: none; }
}

/* =========================================================================
   MINDER BEWEGING
   ========================================================================= */

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

  .js [data-reveal],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .knop:hover { transform: none; }
  .gerecht:hover .gerecht__beeld img,
  .galerij__item:hover img { transform: none; }
}