/* Hallmark · shape: menukaart met hoofdstukken · genre: editorial · theme: custom · job: book · idea: "Het huis aan de markt opent zijn venster; elke dienst staat op de kaart met zijn prijs" · vibe: "avond in de zaal, licht serif, oker stempel"
 * paper: oklch(93% 0.02 85) · accent: oklch(73% 0.12 88) · display: Fraunces 300 · body: Hanken Grotesk · hero: donkere zaal met een ovaal venster op de echte feestzaal dat groeit tot schermvullend, met een draaiende 54-ring als belknop · nav: logo links, ankers midden, telefoon rechts · footer: zwart, adres groot, scheef logo · imagery: photographs (tijdelijke klantfoto's) · signature: de vanaf-prijs in een ovaal label op elke dienstfoto
 * axes: night-linen/light-serif/oker · posture: stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R1 V2 · weakest: R, gsm-foto's uit 2018; fotoshoot gepland, tot dan één donkere avondbehandeling */
/* waive 77 · .ribbons is een lint-device uit de referentie (Pizza Amici) · twee schuine linten zijn het merkelement, massa komt van de kleurvlakken */
/* waive 59 · .hero-run gaat via de linten over in de diensten · de linten liggen bewust tegen de hero aan */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- basis ---------- */
html { scroll-behavior: smooth; }
body { font-size: 1.0625rem; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); }
.skip:focus-visible { top: var(--space-md); }
.serif { font-family: var(--font-display); font-weight: 300; }

/* ---------- knoppen: één gevulde stijl (oker), de rest omlijnd ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; transition: none; }
.hero :focus-visible, .nav :focus-visible, .reviews :focus-visible, .contact :focus-visible { outline-color: var(--color-oker); }
:focus-visible { outline-color: var(--color-ink); }
.btn--oker { background: var(--color-oker); color: var(--color-ink); }
.btn--oker:hover { background: var(--color-oker-soft); }
.btn--ghost { border-color: color-mix(in oklab, var(--color-night-ink) 55%, transparent); color: var(--color-night-ink); }
.btn--ghost:hover { border-color: var(--color-night-ink); background: var(--color-night-ink); color: var(--color-ink); }
.btn--ghost-ink { border-color: var(--color-ink); color: var(--color-ink); }
.btn--ghost-ink:hover { background: var(--color-ink); color: var(--color-paper); }
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.tel-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; padding: var(--space-xs) 0; }
.tel-link:hover { color: var(--color-oker); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); color: var(--color-night-ink); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav.is-light { background: color-mix(in oklab, var(--color-paper) 94%, transparent); color: var(--color-ink); backdrop-filter: blur(10px); }
.nav.is-light .btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
.nav.is-light .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }
.nav.is-light .nav__logo img { filter: brightness(0.35) sepia(1) saturate(2.4) hue-rotate(5deg); }
.nav__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 76px; }
.nav__logo img { width: 104px; height: auto; transition: filter var(--dur-short) var(--ease-out); }
.nav__logo:focus-visible { outline-offset: 6px; }
.nav nav { margin-inline: auto; }
.nav__links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav__links a { text-decoration: none; font-weight: 400; padding: var(--space-xs) 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size var(--dur-short) var(--ease-out); }
.nav__links a:hover { background-size: 100% 1.5px; }
.nav__call { min-height: 44px; }

/* ---------- hero: donkere zaal, ovaal venster dat groeit ---------- */
.hero-run { position: relative; height: 175svh; background: var(--color-night); color: var(--color-night-ink); }
.hero { position: sticky; top: 0; height: 100svh; overflow: hidden; color: var(--color-night-ink); display: grid; align-items: end; }
.hero__win { position: absolute; inset: 0; margin: 0; clip-path: inset(var(--wy, 13%) var(--wx, 31%) var(--wb, 30%) var(--wx, 31%) round var(--wr, 999px)); }
.hero__win img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: translateY(var(--ty, 0%)) scale(var(--ws, 1.12)); transform-origin: 50% 55%; filter: brightness(0.9); }
.hero__win::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--color-night) 82%, transparent)); }
.hero__text, .badge { opacity: var(--fade, 1); transform: translateY(var(--lift, 0)); }
.hero__text { position: relative; z-index: var(--z-raised); padding-bottom: var(--space-xl); }
.hero__title { font-weight: 300; font-size: clamp(3rem, 7.6vw, 7.75rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; text-align: center; }
.line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.line > span { display: block; }
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-wide); margin-top: var(--space-xl); }
.hero__lead { font-size: var(--text-lead); max-width: 34ch; color: var(--color-night-ink); }
.hero__actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.badge { position: absolute; z-index: var(--z-raised); top: 15svh; right: calc(31% - 84px); width: 168px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--color-oker); text-decoration: none; transition: scale var(--dur-short) var(--ease-out); }
.badge:hover { scale: 1.06; }
.badge:focus-visible { outline: 3px solid var(--color-oker); outline-offset: 4px; }
.badge__spin { position: absolute; inset: 0; }
.badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge__ring text { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: currentColor; }
.badge__mark { width: 52%; height: auto; }

/* regel-reveal (alleen met JS; zonder JS staat alles er) */
.js [data-lines] .line > span { transform: translateY(105%); }
.js [data-lines].is-in .line > span { transform: none; transition: transform 0.9s var(--ease-mq); }
.js [data-lines].is-in .line:nth-child(2) > span { transition-delay: 0.08s; }
.js [data-lines].is-in .line:nth-child(3) > span { transition-delay: 0.16s; }

/* ---------- gedeeld ---------- */
section, footer { position: relative; z-index: 1; }
section[id] { scroll-margin-top: 76px; }
.big { font-weight: 300; font-size: clamp(3rem, 7vw, 7rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.big--m { font-size: clamp(2.75rem, 5vw, 5rem); }
.big--light { color: var(--color-night-ink); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-wide); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-ink); }
.head__lead { max-width: 30ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.note { font-family: var(--font-outlier); font-style: italic; font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; color: var(--color-accent); transform: rotate(-4deg); }
.dl { white-space: nowrap; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; padding: var(--space-xs) 0; }
.dl:hover { color: var(--color-accent); }
.todo dd, .todo-inline { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--color-oker) 28%, transparent) 6px 8px); border-radius: 4px; padding: 0 var(--space-2xs); }
.pos-low { object-position: 50% 70%; }

/* ---------- linten ---------- */
.ribbons { position: relative; z-index: 2; background: var(--color-paper); padding-block: var(--space-3xl) var(--space-xl); overflow: clip; }
.ribbon { width: 120%; margin-left: -10%; padding-block: var(--space-sm); white-space: nowrap; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.5rem); text-transform: uppercase; line-height: 1.1; }
.ribbon--oker { background: var(--color-oker); color: var(--color-ink); transform: rotate(-3deg); }
.ribbon--ink { background: var(--color-ink); color: var(--color-night-ink); transform: rotate(2deg); margin-top: var(--space-xl); }
.ribbon__track { display: flex; width: max-content; }
.ribbon__track span { padding-right: 0.5em; }

.diensten { background: var(--color-paper); padding-block: var(--space-3xl) var(--section-gap); }
.chap__cat { font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl); }
.chap__act { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-sm); }

/* ---------- diensten: menu zoals Marquet ---------- */
.menu-item { position: relative; height: 185svh; }
.menu-item + .menu-item { margin-top: -10svh; }
.menu-item__sticky { position: sticky; top: 76px; height: calc(100svh - 76px); display: flex; align-items: center; z-index: 1; pointer-events: none; }
.menu-item__sticky a, .menu-item__sticky .btn { pointer-events: auto; }
.menu-item__grid { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.menu-item__price { display: grid; gap: var(--space-2xs); padding-top: 0.9em; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.3; }
.menu-item__price b { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; color: var(--color-accent); line-height: 1; }
.menu-item__copy { display: grid; gap: var(--space-lg); justify-items: start; max-width: min(100%, 52vw); }
.menu-item__title { font-weight: 300; font-size: clamp(3.25rem, 9vw, 8.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.menu-item__lead { max-width: 34ch; color: var(--color-ink-2); }
.menu-item__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.menu-item__pic { position: absolute; z-index: 0; right: var(--gutter); top: 62svh; width: min(36vw, 560px); aspect-ratio: 2 / 3; margin: 0; overflow: hidden; border-radius: var(--radius-card); }
.menu-item__pic img { width: 100%; height: calc(100% + 96px); max-width: none; margin-top: -48px; object-fit: cover; }
.menu-item--stil .menu-item__pic img { filter: saturate(0.55); }
.menu-item--stil .menu-item__price b { color: var(--color-ink-2); }
@media (max-width: 1100px) and (min-width: 60.01rem) { .menu-item__title { font-size: clamp(3rem, 7.5vw, 6rem); } }

/* ---------- voor wie: tickets ---------- */
.voorwie { background: var(--color-linen-deep); padding-block: var(--section-gap); }
.tickets { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.ticket { --tilt: -2deg; display: grid; gap: var(--space-xs); padding: var(--space-xl) var(--space-xl) var(--space-lg); background: var(--color-paper); color: var(--color-ink); text-decoration: none; border-top: 2px dashed var(--color-rule);
  -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, var(--mask-ink)) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, var(--mask-ink)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 14px at 0 50%, transparent 98%, var(--mask-ink)) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, var(--mask-ink)) right / 51% 100% no-repeat;
  transform: rotate(var(--tilt)); transition: transform 0.5s var(--ease-mq), background-color var(--dur-short) var(--ease-out); }
.tickets li:nth-child(2n) .ticket { --tilt: 2.5deg; }
.tickets li:nth-child(3n) .ticket { --tilt: -1deg; }
.ticket:hover { transform: rotate(0) translateY(-4px); background: var(--color-oker); }
.tickets li .ticket.ticket--stil { --tilt: 0deg; }
.tickets li .ticket.ticket--stil:hover { background: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.ticket:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }
.ticket__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1; text-transform: uppercase; }
.ticket__note { color: var(--color-ink-2); }
.js .tickets .ticket { transform: translateY(40px) rotate(calc(var(--tilt) * 4)); opacity: 0; }
.js .tickets.is-in .ticket { transform: rotate(var(--tilt)); opacity: 1; transition: transform 0.7s var(--ease-mq), opacity 0.5s var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.js .tickets.is-in li:nth-child(2) .ticket { transition-delay: 0.06s; }
.js .tickets.is-in li:nth-child(3) .ticket { transition-delay: 0.12s; }
.js .tickets.is-in li:nth-child(4) .ticket { transition-delay: 0.18s; }
.js .tickets.is-in li:nth-child(5) .ticket { transition-delay: 0.24s; }
.js .tickets.is-in li:nth-child(6) .ticket { transition-delay: 0.3s; }
.js .tickets.is-in .ticket:hover { transform: rotate(0) translateY(-4px); transition-delay: 0s; }

/* ---------- dagmenu: bord met draaiende ring ---------- */
.dagmenu { background: var(--color-oker-soft); padding-block: var(--section-gap); overflow: clip; }
.dagmenu__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns) var(--gap-wide); align-items: center; }
.plate { position: relative; aspect-ratio: 1; width: min(100%, 600px); display: grid; place-items: center; border-radius: 50%; background: var(--color-paper); box-shadow: inset 0 0 0 18px var(--color-paper), inset 0 0 0 19px var(--color-rule); }
.plate__spin { position: absolute; inset: 0; }
.plate__ring { width: 100%; height: 100%; }
.plate__ring text { font-family: var(--font-body); font-weight: 600; font-size: 19px; fill: var(--color-accent); }
.plate__price { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-xs); }
.plate__from, .plate__unit { color: var(--color-ink-2); }
.plate__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(4rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.02em; }
.dagmenu__text { display: grid; gap: var(--space-xl); }
.how { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.how > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 25%, transparent); }
.how dt { font-weight: 600; }
.how dd { margin: 0; color: var(--color-ink-2); text-wrap: pretty; }
.dagmenu .chap__act { grid-column: auto; margin: 0; }

/* ---------- feestzaal: foto's tussen de letters ---------- */
.zaal { background: var(--color-paper); padding-block: var(--section-gap) var(--section-gap); overflow: clip; }
.gather { position: relative; padding-block: var(--space-2xl); }
.gather__title { position: relative; z-index: 2; font-weight: 300; font-size: clamp(4rem, 13.5vw, 13.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; mix-blend-mode: multiply; }
.gather__title .line:nth-child(2) { padding-left: 18%; }
.gather__title .line:nth-child(3) { padding-left: 42%; }
.polaroid { margin: 0; position: absolute; padding: var(--space-xs) var(--space-xs) var(--space-xl); background: var(--color-night-ink); box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.gather .polaroid { z-index: 1; }
.p1 { width: clamp(140px, 17vw, 260px); aspect-ratio: 4 / 5; left: 34%; top: 2%; rotate: -4deg; }
.p2 { width: clamp(160px, 22vw, 340px); aspect-ratio: 4 / 3; right: 2%; top: 22%; rotate: 3deg; z-index: 3; }
.p3 { width: clamp(120px, 14vw, 210px); aspect-ratio: 1; left: 4%; bottom: 6%; rotate: 5deg; z-index: 3; }
.p4 { width: clamp(110px, 12vw, 180px); aspect-ratio: 1; left: 62%; bottom: -4%; rotate: -6deg; }
.zaal__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-columns) var(--gap-wide); margin-top: var(--space-3xl); align-items: start; }
.zaal__intro { display: grid; gap: var(--space-lg); }
.zaal__lead { font-size: var(--text-lead); max-width: 32ch; }
.zaal .chap__act { grid-column: auto; margin: 0; }
.carte { border-top: var(--rule-hair) solid var(--color-ink); }
.carte__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-md); font-weight: 600; }
.carte__tag { font-size: var(--text-sm); }
.carte__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.carte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }

/* ---------- reviews: gastenboek ---------- */
.reviews { background: var(--color-night); color: var(--color-night-ink); padding-block: var(--section-gap); overflow: clip; }
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-3xl); }
.reviews__score { display: grid; gap: var(--space-md); justify-items: start; }
.reviews__score p { font-size: var(--text-lead); color: var(--color-night-muted); }
.reviews__score b { font-family: var(--font-display); font-weight: 300; font-size: 3.5rem; line-height: 1; color: var(--color-oker); margin-right: var(--space-xs); }
.book { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.note-card { --r: -2deg; display: grid; gap: var(--space-md); align-content: space-between; padding: var(--space-lg) var(--space-lg) var(--space-md); background: var(--color-paper); color: var(--color-ink); border-radius: 2px; rotate: var(--r); box-shadow: 0 18px 32px -18px var(--mask-ink); background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in oklab, var(--color-ink) 9%, transparent) 31px 32px); transition: rotate 0.4s var(--ease-mq), transform 0.4s var(--ease-mq); }
.note-card:nth-child(2) { --r: 1.5deg; margin-top: var(--space-xl); }
.note-card:nth-child(3) { --r: -1deg; }
.note-card:nth-child(4) { --r: 2deg; }
.note-card:nth-child(5) { --r: -2.5deg; margin-top: calc(var(--space-md) * -1); }
.note-card:nth-child(6) { --r: 1deg; }
.note-card:hover { rotate: 0deg; transform: translateY(-4px); }
.note-card blockquote { margin: 0; }
.note-card blockquote p { font-family: var(--font-outlier); font-style: italic; font-weight: 300; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.3; text-wrap: pretty; }
.note-card__who { font-size: var(--text-sm); color: var(--color-ink-2); }
.js .book .note-card { opacity: 0; transform: translateY(48px); }
.js .book.is-in .note-card { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-out), transform 0.8s var(--ease-mq), rotate 0.4s var(--ease-mq); }
.js .book.is-in .note-card:nth-child(2) { transition-delay: 0.06s; }
.js .book.is-in .note-card:nth-child(3) { transition-delay: 0.12s; }
.js .book.is-in .note-card:nth-child(4) { transition-delay: 0.18s; }
.js .book.is-in .note-card:nth-child(5) { transition-delay: 0.24s; }
.js .book.is-in .note-card:nth-child(6) { transition-delay: 0.3s; }
.js .book.is-in .note-card:hover { transform: translateY(-4px); transition-delay: 0s; }

/* ---------- chef ---------- */
.chef { background: var(--color-paper); padding-block: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.chef__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns) var(--gap-wide); align-items: center; }
.chef__text { display: grid; gap: var(--space-lg); justify-items: start; }
.chef__name { font-weight: 300; font-size: clamp(4rem, 10vw, 10rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.02em; }
.chef__text p { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.chef__pics { position: relative; padding: 0 0 22% 14%; }
.chef__main { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); }
.chef__main img { width: 100%; height: calc(100% + 144px); max-width: none; object-fit: cover; object-position: 30% 40%; margin-top: -72px; }
.chef__small { left: 0; bottom: 4%; width: 34%; aspect-ratio: 3 / 4; rotate: -5deg; z-index: 2; }
.note--chef { position: absolute; right: 2%; bottom: 6%; }

/* ---------- aanvraag ---------- */
.aanvraag { background: var(--color-paper); padding-block: var(--space-2xl) var(--section-gap); }
.aanvraag__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap-columns) var(--gap-wide); align-items: start; }
.aanvraag__intro { display: grid; gap: var(--space-lg); position: sticky; top: 110px; }
.aanvraag__intro p { font-size: var(--text-lead); color: var(--color-ink-2); }
.aanvraag__tel .tel-link { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); padding: var(--space-2xl) var(--space-xl); background: var(--color-oker-soft); border-radius: var(--radius-card); }
.form__callback { grid-column: 1 / -1; padding: var(--space-md) var(--space-lg); background: var(--color-paper); border-radius: var(--radius-card); font-size: var(--text-lead); }
.field { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.field--wide, .field--radio, .form__foot { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; }
.req { font-weight: 400; color: var(--color-ink-2); font-size: var(--text-sm); margin-left: var(--space-2xs); }
.field input:not([type="radio"]), .field select, .field textarea { width: 100%; min-height: 54px; padding: var(--space-sm) var(--space-md); border: 1.5px solid var(--color-ink-2); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: 1.0625rem; transition: border-color var(--dur-short) var(--ease-out); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 1px; transition: none; }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field--radio { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center; }
.field--radio legend { margin-bottom: var(--space-xs); width: 100%; }
.field--radio label { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 400; min-height: 44px; }
.field--radio input { width: 22px; height: 22px; accent-color: var(--color-ink); }
.field__gemeente { flex: 1 1 14rem; }
.field__note { color: var(--color-ink); font-size: var(--text-sm); }
.field__err { color: var(--color-error); font-size: var(--text-sm); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form__foot { display: grid; gap: var(--space-md); justify-items: start; }
.form__ok { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); }
.form.is-rouw [data-hide-rouw] { display: none; }
.aanvraag.is-rouw .big { font-size: clamp(2.5rem, 4.6vw, 4.75rem); }
.form__pick { grid-column: 1 / -1; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper); font-weight: 600; }
.btn[disabled] { background: var(--color-paper-3); color: var(--color-ink-2); border-color: transparent; cursor: not-allowed; }
.field input:focus-visible, .field select:focus-visible { scroll-margin-top: 120px; }
.field input, .field select, .field textarea { scroll-margin-top: 120px; }

/* ---------- contact ---------- */
.contact { background: var(--color-night); color: var(--color-night-ink); padding-block: var(--section-gap) var(--space-xl); overflow: clip; }
.contact__ring { position: absolute; right: -140px; top: -40px; width: 420px; aspect-ratio: 1; display: grid; place-items: center; color: var(--color-oker); }
.contact__ring > span { position: absolute; inset: 0; }
.contact__ring .plate__ring text { fill: var(--color-oker); }
.contact__ring img { width: 46%; height: auto; }
.contact .big { max-width: 10ch; }
.contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns) var(--gap-wide); align-items: start; margin-top: var(--space-2xl); }
.contact__grid > div { display: grid; gap: var(--space-md); justify-items: start; }
.contact__big { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.3; }
.contact__big a { text-decoration: none; }
.contact__big a:hover, .contact .dl:hover, .contact__meta a:hover { color: var(--color-oker); }
.contact__meta { margin: 0; display: grid; gap: var(--space-md); }
.contact__meta dt { font-weight: 600; }
.contact__meta dd { margin: 0; color: var(--color-night-muted); }
.contact .todo dd { color: var(--color-night-ink); }
.contact__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-night-ink) 22%, transparent); color: var(--color-night-muted); font-size: var(--text-sm); }
.contact__logo { width: 200px; rotate: -6deg; }
.contact :focus-visible { outline-color: var(--color-oker); }

/* ---------- belbalk gsm ---------- */
.callbar { display: none; }

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__in { justify-content: space-between; min-height: 64px; }
  .nav__logo img { width: 88px; }
  .hero__win { clip-path: inset(var(--wy, 12%) var(--wx, 8%) var(--wb, 44%) var(--wx, 8%) round var(--wr, 999px)); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .hero__title { text-align: left; }
  .badge { width: 112px; top: calc(12svh - 30px); right: 4%; }
  .callbar { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-xs); position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); }
  body { padding-bottom: 76px; }
  .hero__actions .tel-link { display: none; }
}
@media (max-width: 40rem) {
  .nav__call { display: none; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 60rem) {
  .menu-item { height: auto; padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .menu-item + .menu-item { margin-top: 0; }
  .menu-item__sticky { position: static; height: auto; display: block; pointer-events: auto; }
  .menu-item__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .menu-item__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); padding: 0; }
  .menu-item__copy { max-width: none; }
  .menu-item__pic { position: relative; right: auto; top: auto; width: calc(100% - 2 * var(--gutter)); margin: var(--space-xl) auto 0; aspect-ratio: 4 / 5; }
  .dagmenu__grid, .zaal__body, .chef__grid, .aanvraag__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .plate { width: min(100%, 320px); }
  .head { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .chap__act { grid-column: auto; }
  .book { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .plate { justify-self: center; }
  .gather__title .line:nth-child(2) { padding-left: 8%; }
  .gather__title .line:nth-child(3) { padding-left: 20%; }
  .aanvraag__intro { position: static; }
  .contact__ring { width: 260px; right: -100px; top: -30px; }
  .chef__pics { padding: 0 0 24% 10%; }
}
@media (max-width: 40rem) {
  .tickets { grid-template-columns: minmax(0, 1fr); }
  .book { grid-template-columns: minmax(0, 1fr); }
  .note-card:nth-child(n) { margin-top: 0; rotate: calc(var(--r) * 0.5); }
  .ticket { padding: var(--space-lg) var(--space-xl); }
  .form { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-md); }
  .how > div, .carte__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .contact__foot { flex-direction: column; align-items: flex-start; }
  .form__foot .btn { width: 100%; }
  .gather { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .gather__title { grid-column: 1 / -1; margin-bottom: var(--space-md); }
  .gather .polaroid { position: relative; inset: auto; width: auto; }
  .gather .p3, .gather .p4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-lines] .line > span { transform: none; }
  .hero-run { height: auto; }
  .hero { position: relative; }
  .badge__ring { animation: none; }
  .js .tickets .ticket { transform: rotate(var(--tilt)); opacity: 1; }
  .js .book .note-card { transform: none; opacity: 1; }
}
.is-open .hero__text, .is-open .badge { visibility: hidden; }