/* CIMA Rooftop Bar — redesign
   Palette straight from the current site: #F7B55D marigold, #E99749 orange,
   #FFF5E6 cream, #1B1B1E ink. Here they carry the page instead of accenting it:
   the header is a marigold band with the black wordmark, and the page moves in
   blocks of cream, ink and marigold. Sun first, night as punctuation.

   Every section declares a tone (.t-cream / .t-ink / .t-amber / .t-sand) which
   sets --bg, --fg and friends. Components only ever read those variables, so a
   card, a button or a price is legible on whichever ground it lands. */

/* Oswald zelf gehost in plaats van via Google Fonts, om één reden: daardoor
   kan hij twee keer gedeclareerd worden. Eén keer gewoon, voor de koppen. En
   één keer als "CIMA Cijfers", die alleen 0-9 en de dubbele punt claimt.

   Waarom: IM Fell heeft alleen oudestijlcijfers. Een 0 reikt tot 46 van de 71
   eenheden van een hoofdletter en een 3 hangt 21 eenheden onder de regel. In
   lopende tekst is dat mooi; in "NU OPEN TOT 23:00", een prijs of een datum in
   een formulierveld leest het als een fout. Zet "CIMA Cijfers" vóór IM Fell in
   een stapel en de browser haalt de cijfers uit Oswald en al het andere uit IM
   Fell. size-adjust is gemeten: 86,4% legt de Oswald-cijfers precies op de
   kapitaalhoogte van IM Fell.

   Hetzelfde bestand, dus één download van 12 kB. */
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/media/oswald-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "CIMA Cijfers"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/media/oswald-latin.woff2) format("woff2");
  unicode-range: U+0030-003A;
  size-adjust: 86.4%;
}

:root {
  /* brand */
  --marigold: #f7b55d;
  --orange: #e99749;
  --cream: #fff5e6;
  --ink: #14131a;
  --ink-2: #1b1b1e;
  --ink-3: #26242c;
  --ink-4: #35323d;

  /* derived, each checked for contrast against its own ground */
  --cream-2: #d9cfc0;
  --cream-3: #a09788;
  --amber-deep: #7d5106;   /* marigold's readable twin on cream */
  --sand: #f6ead6;
  --sand-line: #e6d5b8;
  --clay: #a83f22;
  --agave: #2f6b4f;
  --agave-dim: #7fa87f;

  /* Twee letters, verdeeld op formaat. Oswald doet alles wat groot is: smal en
     rechtop, dus een kop van vier woorden past nog op één regel op een telefoon.
     IM Fell French Canon doet alles wat klein is. Dat is een 17e-eeuwse
     boekletter met de onregelmatigheid van echte drukletters erin, wat de
     tegenhanger vormt van een strakke condensed sans.

     IM Fell bestaat alleen in Regular. Nadruk moet hier dus uit formaat en
     kleur komen, niet uit gewicht: een browser die zelf vet maakt van een letter
     die geen vet heeft, smeert de vorm uit. Vandaar dat er in dit bestand geen
     font-weight boven 400 meer staat. */
  --display: "Oswald", "Archivo Narrow", "Arial Narrow", sans-serif;
  --label: "CIMA Cijfers", "IM Fell French Canon", Georgia, "Times New Roman", serif;
  /* Voor velden waar iemand een datum, aantal of telefoonnummer typt. Lopende
     tekst houdt de oudestijlcijfers van IM Fell; daar horen ze. */
  --body-num: "CIMA Cijfers", "IM Fell French Canon", Georgia, "Times New Roman", serif;
  --body: "IM Fell French Canon", Georgia, "Times New Roman", serif;

  --page: min(100%, 78rem);
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --r: 2px;

  --step-0: 1.0625rem;
  --step-1: clamp(1.2rem, 1.6vw, 1.4rem);
  --step-2: clamp(1.35rem, 2.1vw, 1.75rem);
  --step-3: clamp(1.7rem, 3.4vw, 2.6rem);
  --step-4: clamp(2rem, 5.6vw, 4.4rem);
}

/* ---------- tones ---------- */

.t-cream,
:root {
  --bg: var(--cream); --fg: var(--ink); --fg-2: #4a443c; --fg-3: #6b6459;
  --line: var(--sand-line); --pop: var(--amber-deep);
  --card: var(--sand); --card-line: var(--sand-line); --field: #fffdf8;
  --btn-bg: var(--ink); --btn-fg: var(--cream); --ok: var(--agave); --bad: var(--clay);
}
.t-sand {
  --bg: var(--sand); --fg: var(--ink); --fg-2: #4a443c; --fg-3: #6b6459;
  --line: var(--sand-line); --pop: var(--amber-deep);
  --card: var(--cream); --card-line: var(--sand-line); --field: #fffdf8;
  --btn-bg: var(--ink); --btn-fg: var(--cream); --ok: var(--agave); --bad: var(--clay);
}
.t-ink {
  --bg: var(--ink); --fg: var(--cream); --fg-2: var(--cream-2); --fg-3: var(--cream-3);
  --line: var(--ink-3); --pop: var(--marigold);
  --card: var(--ink-2); --card-line: var(--ink-3); --field: var(--ink-2);
  --btn-bg: var(--marigold); --btn-fg: var(--ink); --ok: var(--agave-dim); --bad: var(--orange);
}
.t-ink-2 {
  --bg: var(--ink-2); --fg: var(--cream); --fg-2: var(--cream-2); --fg-3: var(--cream-3);
  --line: var(--ink-3); --pop: var(--marigold);
  --card: var(--ink-3); --card-line: var(--ink-4); --field: var(--ink);
  --btn-bg: var(--marigold); --btn-fg: var(--ink); --ok: var(--agave-dim); --bad: var(--orange);
}
.t-amber {
  --bg: var(--marigold); --fg: var(--ink); --fg-2: #3f3110; --fg-3: #574413;
  --line: rgba(20, 19, 26, 0.24); --pop: var(--ink);
  --card: rgba(255, 250, 240, 0.62); --card-line: rgba(20, 19, 26, 0.16); --field: #fffdf8;
  --btn-bg: var(--ink); --btn-fg: var(--cream); --ok: var(--agave); --bad: #7e2d16;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--pop); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fg); }

:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; border-radius: var(--r); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 0.75rem 1.25rem; font-family: var(--label);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem;
}
.skip:focus { left: 0; }

.wrap { width: var(--page); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { width: min(100%, 54rem); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--label);
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.72rem; color: var(--pop); line-height: 1.4;
}
.display {
  font-family: var(--display);
  font-weight: var(--display-weight, 400);
  /* Ruimer dan de -0.022em die hier stond: dat was afgestemd op Archivo Black,
     een brede letter die je mag aantrekken. Oswald is al smal. */
  line-height: 1.06;
  letter-spacing: var(--display-tracking, -0.005em);
  color: var(--fg);
}
h1.display { font-size: calc(var(--step-4) * var(--display-scale, 1)); }
h2.display { font-size: calc(var(--step-3) * var(--display-scale, 1)); }
h3.display { font-size: calc(var(--step-2) * var(--display-scale, 1)); }
.lead { font-size: var(--step-1); color: var(--fg-2); line-height: 1.5; }
.muted { color: var(--fg-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  background: transparent; -webkit-appearance: none; appearance: none;
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.86rem; line-height: 1;
  padding: 1rem 1.6rem; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; color: var(--fg);
  text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { border-color: color-mix(in srgb, var(--fg) 40%, transparent); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- notice bar ---------- */

.notice {
  background: var(--ink); color: var(--cream-2);
  font-family: var(--label);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.notice-in {
  width: var(--page); margin-inline: auto; padding: 0.5rem var(--gut);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: center; justify-content: center;
  text-align: center;
}
.notice .dot { color: var(--ink-4); }

.status { display: inline-flex; align-items: center; gap: 0.42rem; }
.status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.status.is-open { color: var(--ok); }
.status.is-closed { color: var(--fg-3); }
.notice .status.is-open { color: var(--marigold); }
.notice .status.is-closed { color: var(--cream-3); }

/* ---------- header: the marigold band ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--marigold);
  border-bottom: 1px solid rgba(20, 19, 26, 0.2);
}
.header-in {
  width: var(--page); margin-inline: auto; padding: 0.7rem var(--gut);
  display: flex; align-items: center; gap: 1.25rem;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 86px; height: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; align-items: center; }
.site-nav a {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.78rem; color: var(--ink); text-decoration: none; padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.header-side { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.lang {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.74rem; color: var(--ink); text-decoration: none;
  border: 1px solid rgba(20, 19, 26, 0.4); padding: 0.5rem 0.6rem; border-radius: var(--r);
}
.lang:hover { background: var(--ink); color: var(--marigold); border-color: var(--ink); }
.header-cta {
  padding: 0.72rem 1.05rem; font-size: 0.75rem;
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.header-cta:hover { background: var(--cream); color: var(--ink); border-color: var(--ink); }

.burger {
  display: none; background: none; border: 1px solid rgba(20, 19, 26, 0.4); color: var(--ink);
  width: 42px; height: 42px; border-radius: var(--r); cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
}
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

@media (max-width: 62rem) {
  .burger { display: inline-flex; }
  /* The nav goes position:fixed here, so it can no longer push anything.
     The language switch and burger take over the job of holding the right. */
  .header-side { margin-left: auto; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(20rem, 84vw);
    background: var(--marigold); border-left: 1px solid rgba(20, 19, 26, 0.22);
    padding: 5.5rem var(--gut) 2rem; transform: translateX(100%);
    transition: transform 0.24s ease; overflow-y: auto;
  }
  .site-nav[data-open="true"] { transform: translateX(0); }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid rgba(20, 19, 26, 0.2); }
  .site-nav a { display: block; padding: 1rem 0; font-size: 0.95rem; border-bottom: none; }
  .header-cta { display: none; }
}

/* ---------- TIJDELIJK: lettertypebalk ----------
   Verdwijnt zodra de keuze gemaakt is. Alles hieronder hoort bij die balk. */

.fontbar {
  position: sticky; top: 0; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .5rem var(--gut);
  background: #101018; border-bottom: 1px solid #2c2c3a;
  font-family: var(--label); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.fontbar-lbl { color: #7c7688; margin-right: .35rem; }
.fontbar-btn {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: transparent; color: #d9cfc0; cursor: pointer;
  border: 1px solid #35323d; border-radius: 999px; padding: .35rem .7rem;
}
.fontbar-btn:hover { border-color: var(--marigold); color: var(--marigold); }
.fontbar-btn.is-on { background: var(--marigold); border-color: var(--marigold); color: #14131a; }
.fontbar-note { color: #7c7688; margin-left: auto; text-transform: none; letter-spacing: .03em; }
@media (max-width: 40rem) {
  .fontbar { font-size: .62rem; gap: .3rem; padding: .45rem .7rem; }
  .fontbar-btn { padding: .3rem .55rem; }
  .fontbar-note { display: none; }
}
/* the site header sits under the bar rather than on top of it */
.fontbar ~ .site-header { top: 0; }

/* ---------- sky: the hero follows the real Amsterdam sun ---------- */

/* Only the hero atmosphere moves. The section tones stay put, because their
   contrast is measured and a palette that drifts by the hour is one nobody
   checked. Every phase keeps the bottom of the scrim dark enough for the
   headline to hold. */
:root {
  --sky-top: rgba(20, 19, 26, .46);
  --sky-mid: rgba(20, 19, 26, .18);
  --sky-low: rgba(20, 19, 26, .78);
  --sky-warm: transparent;
}
[data-sky="dawn"] {
  --sky-top: rgba(38, 26, 40, .5); --sky-mid: rgba(60, 34, 44, .2);
  --sky-low: rgba(22, 18, 28, .8); --sky-warm: rgba(233, 151, 73, .12);
}
[data-sky="golden"] {
  --sky-top: rgba(52, 30, 16, .42); --sky-mid: rgba(247, 181, 93, .1);
  --sky-low: rgba(28, 17, 12, .82); --sky-warm: rgba(247, 181, 93, .2);
}
[data-sky="dusk"] {
  --sky-top: rgba(26, 20, 42, .55); --sky-mid: rgba(60, 36, 60, .26);
  --sky-low: rgba(16, 14, 24, .86); --sky-warm: rgba(233, 151, 73, .1);
}
[data-sky="night"] {
  --sky-top: rgba(12, 12, 18, .62); --sky-mid: rgba(14, 13, 20, .38);
  --sky-low: rgba(10, 10, 15, .9); --sky-warm: transparent;
}

.hero-media > video.hero-video { position: absolute; inset: 0; }
.hero-media > img.hero-night {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-media > img.hero-night.is-in { opacity: 1; }

/* ---------- hero status pills ---------- */

.hero-facts { gap: .65rem; }
.pill-fact {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(14, 13, 20, .52);
  border: 1px solid rgba(255, 245, 230, .18);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-radius: 999px; padding: .42rem .8rem;
  font-family: var(--label); text-transform: uppercase;
  letter-spacing: .11em; font-size: .72rem; color: var(--cream);
  white-space: nowrap;
}
.pill-fact .dim { color: var(--cream-3); }
.pill-fact .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cream-3); flex: none;
}
.pill-fact.is-open .dot { background: var(--agave-dim); box-shadow: 0 0 0 3px rgba(127, 168, 127, .2); }
.pill-fact.is-closed .dot { background: var(--clay); }
.pill-fact .sun { color: var(--marigold); }
/* De zonsondergang-pill draagt sinds het weer erbij kwam twee mededelingen en
   mag daartussen naar een tweede regel. De radius is daarom een vaste maat in
   plaats van 999px: op één regel ziet dat er hetzelfde uit, op twee regels
   wordt het geen ovaal. */
.pill-fact[data-sunset] { white-space: normal; flex-wrap: wrap; row-gap: .15rem; border-radius: 1.1rem; }
.pill-fact[data-sunset] .txt, .pill-fact[data-sunset] .wx { white-space: nowrap; }
.pill-fact[data-wx="rain"] .sun { color: var(--cream-2); }

.pill-fact[hidden] { display: none; }

/* ---------- mobile hero video ---------- */

.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .9s ease;
}
.hero-video.is-in { opacity: 1; }
.hero-media[data-video="1"] ~ * { position: relative; }
.hero:has(.hero-video.is-in)::after {
  background:
    radial-gradient(120% 60% at 50% 82%, var(--sky-warm) 0%, transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--sky-top) 100%, black 12%) 0%,
      rgba(20, 19, 26, .34) 28%,
      rgba(16, 15, 22, .74) 62%,
      rgba(14, 13, 20, .92) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ---------- scroll reveals ---------- */

/* Scoped to a class JavaScript adds before it starts observing. If the script
   is blocked or throws, nothing was ever hidden, and the booking path does not
   depend on an animation succeeding. */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Not a degraded site, the same site standing still. */
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-media > video.hero-video { position: absolute; inset: 0; }
.hero-media > img.hero-night { transition: none; }
}

/* ---------- dish photography on hover ---------- */

.dish-peek {
  position: fixed; z-index: 70; width: 260px; aspect-ratio: 4 / 3;
  border-radius: 2px; overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.96);
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.dish-peek.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dish-peek img { width: 100%; height: 100%; object-fit: cover; }
.dish[data-photo] .dish-name { cursor: help; text-decoration: underline;
  text-decoration-style: dotted; text-decoration-color: var(--pop);
  text-underline-offset: 4px; }
@media (hover: none) { .dish-peek { display: none; } .dish[data-photo] .dish-name { text-decoration: none; } }

/* ---------- page transitions ---------- */

@view-transition { navigation: auto; }

/* ---------- hero ---------- */

.hero { position: relative; isolation: isolate; background: var(--ink-2); color: var(--cream); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media > img { position: relative; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 60% at 50% 82%, var(--sky-warm) 0%, transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 32%, var(--sky-low) 88%, var(--sky-low) 100%);
  transition: background 1.5s ease;
}
.hero-in {
  width: var(--page); margin-inline: auto;
  padding: clamp(4rem, 14vh, 8.5rem) var(--gut) clamp(2.5rem, 7vh, 4.5rem);
  min-height: min(84vh, 44rem); display: flex; flex-direction: column; justify-content: flex-end; gap: 1.4rem;
}
/* De zonneboog. Hangt in de lucht van de foto, boven de tekst, en tekent de
   baan van de zon van vandaag: van zonsopkomst links tot zonsondergang rechts,
   met het stuk dat al voorbij is in goud. Geen decoratie, maar de dag zelf;
   sky.js rekent hem uit met dezelfde zonnestand die de luchtkleur bepaalt. */
/* .hero > voor de specificiteit: zodra de mobiele video speelt maakt
   `.hero-media[data-video="1"] ~ *` alles erna relative, en dan neemt de boog
   ruimte in en duwt hij de tekst omlaag. */
.hero > .sun-arc {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 0;
  z-index: 0; pointer-events: none; overflow: visible;
}
.sun-arc[hidden] { display: none; }
.sun-arc .track { fill: none; stroke: rgba(255, 245, 230, .32); stroke-width: 1; stroke-dasharray: 2 6; }
.sun-arc .done { fill: none; stroke: var(--marigold); stroke-width: 1.5; stroke-linecap: round; opacity: .75; }
.sun-arc .halo { fill: var(--marigold); opacity: .18; }
.sun-arc .disc { fill: var(--marigold); }
.sun-arc text {
  font-family: var(--display); font-size: 11px; letter-spacing: .08em;
  fill: rgba(255, 245, 230, .62);
}
.hero-in { position: relative; z-index: 1; }

/* ---------- Día de Muertos ----------
   Papel picado: de uitgeknipte vlaggetjes die in Mexico boven de straat hangen.
   Ze hangen hier in de lucht van de hero, aan een draad die licht doorzakt, en
   nemen tijdens het seizoen de plek van de zonneboog over. De kleuren zijn die
   van de site zelf; cempasúchil is marigold, en dat was de merkkleur al. */
.hero > .papel { position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; }
.papel svg { display: block; width: 100%; overflow: visible; }
.papel .string { fill: none; stroke: rgba(255, 245, 230, .5); stroke-width: 1; }
.papel .flag {
  transform-box: fill-box; transform-origin: 50% 0;
  animation: papel-sway 4.2s ease-in-out infinite alternate;
}
@keyframes papel-sway {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) { .papel .flag { animation: none; } }

.season-in { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; max-width: 46rem; }
.season-drink { font-size: 1.05rem; color: var(--fg-2); }
.season-drink .price { font-family: var(--display); color: var(--fg); margin-left: .35rem; }
.hero h1 { max-width: 16ch; color: var(--cream); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.42); }
.hero .eyebrow { color: var(--marigold); }
.hero .lead { max-width: 44ch; color: var(--cream); text-shadow: 0 1px 20px rgba(0, 0, 0, 0.55); }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center;
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.76rem;
  color: var(--cream); padding-top: 0.4rem;
}
.hero-facts .status.is-open { color: var(--marigold); }
.hero-facts .status.is-closed { color: var(--cream-2); }
.hero .btn-row { padding-top: 0.5rem; }
.hero .btn-primary { background: var(--marigold); color: var(--ink); }
.hero .btn-primary:hover { background: var(--cream); color: var(--ink); }
.hero .btn-ghost { border-color: rgba(255, 245, 230, 0.6); color: var(--cream); }
.hero .btn-ghost:hover { border-color: var(--cream); background: rgba(255, 245, 230, 0.14); }

/* ---------- rating badge, above the headline ---------- */

.rating-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  align-self: flex-start; text-decoration: none;
  padding: .5rem .9rem .5rem .7rem; border-radius: 999px;
  background: rgba(255, 250, 240, .94);
  border: 1px solid rgba(20, 19, 26, .1);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  color: var(--ink); white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rating-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); color: var(--ink); }
.rating-badge .g-mark { flex: none; }
.rating-badge .score {
  font-family: var(--display); font-size: 1.15rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.rating-badge .stars { color: #f5a623; letter-spacing: .06em; font-size: .82rem; }
.rating-badge .count {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
  font-size: .66rem; color: #5c574f;
}
@media (max-width: 26rem) {
  .rating-badge .stars { display: none; }
  .rating-badge .count { letter-spacing: .07em; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(4.25rem, 10.5vw, 8rem); background: var(--bg); color: var(--fg); }
.section-head { display: flex; flex-direction: column; gap: 1.05rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head .lead { max-width: 52ch; }

.split { display: grid; gap: clamp(2.25rem, 4.75vw, 4.25rem); align-items: center; }
@media (min-width: 54rem) { .split { grid-template-columns: 1fr 1fr; } }
.split-media img { width: 100%; border-radius: var(--r); max-height: 38rem; object-fit: cover; }
.stack { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }

/* ---------- gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 46rem) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--r); background: var(--card); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 0.5s ease; }
.gallery figure:hover img { transform: scale(1.04); }

/* ---------- cards ---------- */

.cards { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .cards-2 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r);
  padding: clamp(1.6rem, 3.4vw, 2.35rem); display: flex; flex-direction: column; gap: 1rem;
  align-items: flex-start; color: var(--fg);
}
.card h3 { color: var(--fg); }
.card p { color: var(--fg-2); }
.card-media { padding: 0; overflow: hidden; }
.card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-media .card-body { padding: clamp(1.6rem, 3.4vw, 2.35rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

/* ---------- menu ---------- */

.menu-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.menu-nav a {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.74rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.95rem;
  color: var(--fg-2); text-decoration: none;
}
.menu-nav a:hover { border-color: var(--fg); color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }

.course { border-top: 2px solid var(--fg); padding-top: 1.75rem; margin-top: 2.75rem; }
.course:first-of-type { margin-top: 0; }
.course > h2 { margin-bottom: 0.4rem; }
.course-note { color: var(--fg-3); font-size: 0.92rem; margin-bottom: 1.5rem; }
.dishes { list-style: none; display: flex; flex-direction: column; gap: 1.35rem; margin-top: 1.5rem; }
.dish { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem; align-items: baseline; }
.dish-name { font-family: var(--body); font-size: 1.25rem; line-height: 1.25; color: var(--fg); }
.dish-price { font-family: var(--label); font-size: 1rem; color: var(--pop); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish-desc { grid-column: 1 / -1; color: var(--fg-2); font-size: 0.95rem; max-width: 52ch; }
.dish-prices { display: flex; gap: 1.1rem; font-family: var(--label); font-size: 0.85rem; color: var(--pop); white-space: nowrap; }
.dish-prices span { display: inline-flex; gap: 0.35rem; }
.dish-prices .k { color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }

.tag {
  display: inline-block; font-family: var(--label); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.62rem; padding: 0.16rem 0.45rem;
  border: 1px solid currentColor; border-radius: 999px; vertical-align: 0.18em; margin-left: 0.5rem;
}
.tag-vegetarian, .tag-vegan { color: var(--ok); }
.tag-zeroproof { color: var(--pop); }

/* ---------- ticks ---------- */

.ticks { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--fg-2); }
.ticks li::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.55rem;
  border-radius: 50%; background: var(--pop);
}

/* ---------- hours ---------- */

.hours { list-style: none; display: flex; flex-direction: column; width: 100%; }
.hours li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; color: var(--fg-2);
}
.hours li:last-child { border-bottom: none; }
.hours .d { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
.hours li[data-today="true"] { color: var(--fg); }
.hours li[data-today="true"] .d, .hours li[data-today="true"] .t { color: var(--pop); }

/* ---------- reviews ---------- */

.rating-row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-end; }
.rating { display: flex; flex-direction: column; gap: 0.2rem; }
.rating .v { font-family: var(--display); font-size: clamp(3.2rem, 7vw, 5rem); line-height: .95; color: var(--pop); font-variant-numeric: tabular-nums; }
.rating .k { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--fg-3); }

.quotes { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.quote blockquote { margin: 0; color: var(--fg-2); font-size: 0.98rem; }
.quote figcaption { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--fg-3); margin-top: auto; }
.stars { color: var(--pop); letter-spacing: 0.15em; font-size: 0.85rem; }

/* ---------- press ---------- */

.press-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40rem) { .press-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .press-grid { grid-template-columns: repeat(7, 1fr); } }
.press-grid a {
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1rem; min-height: 6.5rem; transition: background-color 0.2s ease;
}
.press-grid a:hover { background: var(--card); }
.press-grid img { width: 100%; max-width: 120px; height: auto; opacity: 0.75; transition: opacity 0.2s ease; filter: brightness(0); }
.press-grid a:hover img { opacity: 1; }
.t-ink .press-grid img, .t-ink-2 .press-grid img { filter: brightness(0) invert(1); }

/* ---------- faq ---------- */

.faq-list { display: flex; flex-direction: column; max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0; position: relative;
  font-family: var(--body); font-size: 1.2rem; line-height: 1.35; color: var(--fg);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 1.75rem;
  width: 10px; height: 10px; border-right: 1.5px solid var(--pop); border-bottom: 1.5px solid var(--pop);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 1.95rem; }
.faq-item summary:hover { color: var(--pop); }
.faq-answer { padding-bottom: 1.5rem; color: var(--fg-2); max-width: 60ch; }

/* ---------- video facade ---------- */

.video { position: relative; border-radius: var(--r); overflow: hidden; background: var(--card); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 0.7rem; background: linear-gradient(180deg, rgba(20, 19, 26, 0.12), rgba(20, 19, 26, 0.5));
  border: 0; cursor: pointer; color: var(--cream); font-family: var(--label);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem;
}
.video-play .disc {
  width: 62px; height: 62px; border-radius: 50%; background: var(--marigold); color: var(--ink);
  display: grid; place-items: center; transition: transform 0.2s ease;
}
.video-play .disc::after { content: ""; border-left: 16px solid currentColor; border-block: 10px solid transparent; margin-left: 4px; }
.video-play:hover .disc { transform: scale(1.08); }
.video-note { font-size: 0.82rem; color: var(--fg-3); margin-top: 0.6rem; }

/* ---------- forms ---------- */

.form { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.11em;
  font-size: 0.72rem; color: var(--fg-2);
}
.field .req { color: var(--pop); }
.field input, .field select, .field textarea {
  font-family: var(--body-num); font-size: 1rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.8rem 0.9rem; width: 100%;
}
.t-ink .field input, .t-ink .field select, .t-ink .field textarea,
.t-ink-2 .field input, .t-ink-2 .field select, .t-ink-2 .field textarea { color: var(--cream); }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); outline: none; }
.field .err { font-size: 0.82rem; color: var(--bad); min-height: 0; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select { border-color: var(--bad); }
.form-note { font-size: 0.88rem; color: var(--fg-3); }
/* Honeypot: buiten beeld, niet weg. Een bot slaat display:none-velden over;
   een veld dat links van het scherm staat vult hij gewoon in. */
.form-extra { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile is onzichtbaar (appearance: interaction-only) tot Cloudflare een
   mens echt iets laat aanklikken. Het lege vak staat dan toch in de flexkolom
   en zou de ruimte boven de knoppen verdubbelen; die gap trekken we terug tot
   app.js data-open zet. Niet display:none: dan draait de controle niet. */
.form-steps > .turnstile:not([data-open]) { margin-bottom: -2.1rem; }
.form-status { border-radius: var(--r); padding: 1rem 1.15rem; font-size: 0.95rem; color: var(--fg); }
.form-status[data-kind="ok"] { background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1px solid var(--ok); }
.form-status[data-kind="info"] { background: color-mix(in srgb, var(--pop) 12%, transparent); border: 1px solid var(--pop); }
.form-status[data-kind="err"] { background: color-mix(in srgb, var(--bad) 14%, transparent); border: 1px solid var(--bad); }

/* ---------- multistep enquiry form ---------- */

.form-steps { display: flex; flex-direction: column; gap: 2.1rem; }
.form-steps .step {
  border: 0; margin: 0; padding: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.form-steps .step[hidden] { display: none; }
.form-steps legend {
  padding: 0; font-size: var(--step-2); line-height: 1.15; color: var(--fg);
}
.form-steps legend:focus-visible { outline: 2px solid var(--pop); outline-offset: 4px; }
/* Positieve marge, geen negatieve. Een <legend> doet niet mee aan de flex-gap
   van de fieldset eromheen: browsers halen hem uit de flow. De afstand tussen
   kop en ondertitel was dus altijd al nul, en de -.5rem die hier stond trok de
   ondertitel er 15px doorheen — de staarten van de kop liepen door de regel
   eronder. Deze marge is het enige wat die ruimte maakt. */
.step-sub { color: var(--fg-3); font-size: .95rem; margin-top: .65rem; }
.grid-2 { display: grid; gap: 1.4rem 1.5rem; }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.stepper {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
}
.stepper[hidden] { display: none; }
.stepper li {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--fg-3); padding: .3rem .7rem .3rem .35rem;
  border: 1px solid var(--line); border-radius: 999px;
}
.stepper li::before {
  content: attr(data-dot);
  width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .7rem;
  background: var(--line); color: var(--fg-2);
}
.stepper li[data-state="now"] { color: var(--fg); border-color: var(--fg); }
.stepper li[data-state="now"]::before { background: var(--btn-bg); color: var(--btn-fg); }
.stepper li[data-state="done"] { color: var(--fg-2); }
.stepper li[data-state="done"]::before { content: "\2713"; background: var(--ok); color: #fff; }

/* Occasion is a single tap, so real buttons rather than a dropdown. On a phone
   a select opens a modal; these do not. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; }
.choice { position: relative; }
.choice input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%;
}
.choice span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .09em;
  font-size: .74rem; color: var(--fg-2); background: var(--field);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.choice input:hover + span { border-color: var(--fg); color: var(--fg); }
.choice input:focus-visible + span { outline: 2px solid var(--pop); outline-offset: 2px; }
.choice input:checked + span {
  background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
}

.step-nav { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.step-nav [hidden] { display: none; }
.field .hint { font-size: .82rem; color: var(--fg-3); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink); color: var(--cream);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h3 { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--marigold); margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col li { color: var(--cream-2); font-size: 0.95rem; }
.footer-col a { color: var(--cream-2); text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: var(--marigold); }
.footer-brand img { width: 124px; margin-bottom: 1.1rem; }
.footer-brand p { color: var(--cream-3); font-size: 0.92rem; max-width: 32ch; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.8rem; color: var(--cream-3);
}

/* ---------- cookie bar ---------- */

.cookie {
  position: fixed; left: var(--gut); right: var(--gut); bottom: var(--gut); z-index: 60;
  background: var(--ink); color: var(--cream); border: 1px solid var(--ink-4); border-radius: var(--r);
  padding: 0.9rem 1.1rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  align-items: center; justify-content: space-between;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); font-size: 0.88rem;
  max-width: 44rem; margin-inline: auto;
}
.cookie[hidden] { display: none; }
.cookie p { color: var(--cream-2); }
.cookie .btn { padding: 0.6rem 1rem; font-size: 0.72rem; }
@media (max-width: 34rem) {
  /* The hero is bottom-aligned and grows with its content, so extra bottom
     padding alone just makes it taller. Trimming the top is what actually
     lifts the buttons clear of the cookie bar. */
  .hero-in { padding-top: 2.5rem; padding-bottom: 6.5rem; gap: 1.1rem; }
  .hero .lead { font-size: 1.05rem; }
  /* Compact enough that it never sits on top of the hero's buttons. */
  .cookie {
    left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
    padding: 0.7rem 0.8rem; font-size: 0.8rem; gap: 0.55rem 0.8rem;
    flex-wrap: nowrap; align-items: center;
  }
  .cookie p { flex: 1 1 auto; line-height: 1.35; }
  .cookie .btn-row { flex: none; flex-wrap: nowrap; gap: 0.4rem; }
  .cookie .btn { padding: 0.5rem 0.7rem; font-size: 0.66rem; letter-spacing: 0.08em; }
}
.cookie .btn-primary { background: var(--marigold); color: var(--ink); }
.cookie .btn-primary:hover { background: var(--cream); color: var(--ink); }
.cookie .btn-ghost { border-color: rgba(255, 245, 230, 0.45); color: var(--cream); }
.cookie .btn-ghost:hover { border-color: var(--cream); background: rgba(255, 245, 230, 0.1); }

/* ---------- misc ---------- */

.pill-note {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--fg); color: var(--fg); border-radius: 999px;
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.11em;
  font-size: 0.72rem; padding: 0.45rem 0.9rem;
}