/* ═══════════════════════════════════════════════════════════════
   T&T Private Dining

   De inkt is nu de ondergrond en het papier de letter. Dezelfde twee
   kleuren als het logo, omgedraaid, waardoor de pagina meeslepend
   wordt in plaats van luchtig.

   Het handschrift van deze site is de KOOK: elke tekening trilt in
   stappen, zoals de lijn in met de hand getekende animatie. Geen
   vloeiende beweging maar sprongen, want zo beweegt een stift.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #1f209e;   /* uit logo.png gesampled */
  --paper:      #f7f0e5;   /* uit logo.png gesampled */
  --paper-deep: #efe6d6;
  --zest:       #ff9a3c;   /* café del alma-bord; het enige accent */
  --zest-ink:   #2a1400;   /* leesbare letter op het accent */

  --ease: cubic-bezier(.22, .78, .24, 1);
  /* Veercurves: ze schieten een klein stukje door en veren terug. Dat is
     het verschil tussen "netjes aankomen" en "levend aanvoelen". */
  --spring:      cubic-bezier(.34, 1.56, .48, 1);   /* duidelijke overshoot */
  --spring-soft: cubic-bezier(.22, 1.2, .36, 1);    /* subtieler, voor groot beeld */
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
  --hand: "Caveat Brush", "Space Grotesk", cursive;

  --gutter: clamp(1.25rem, 6vw, 5.5rem);
  --max: 1240px;
  --arch: clamp(70px, 11vw, 180px);
  --boil: 1.4px;

  --fg: var(--paper);
  --line-col: color-mix(in srgb, var(--paper) 30%, transparent);
}

/* Secties dragen hun eigen thema; alles binnenin tekent met --fg,
   zodat één klasse de hele sectie omklapt. */
.on-ink {
  color-scheme: dark;          /* anders tekent de datumkiezer donker op donker */
  --fg: var(--paper);
  --line-col: color-mix(in srgb, var(--paper) 30%, transparent);
  background: var(--ink); color: var(--paper);
}
.on-paper {
  color-scheme: light;
  --fg: var(--ink);
  --line-col: color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--paper); color: var(--ink);
}
.on-paper--deep { background: var(--paper-deep); }

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

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body::after {
  content: ""; position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}

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

::selection { background: var(--zest); color: var(--zest-ink); }

/* knoppen zijn om te drukken, niet om te selecteren */
.sticker, .nav__cta, .gotcha__again { -webkit-user-select: none; user-select: none; }

/* Doorlopende animaties stoppen zodra ze buiten beeld zijn. Anders
   draaien ticker, stempel en kook de hele bezoekduur door en dat kost
   op een telefoon gewoon accu. */
.is-rust, .is-rust * { animation-play-state: paused !important; }
a { color: inherit; }

.skip { position: absolute; left: -9999px; background: var(--zest); color: var(--zest-ink); padding: .75rem 1.25rem; z-index: 1000; }
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--zest); outline-offset: 3px; }

/* ═══ DE KOOK ═══════════════════════════════════════════════════
   Drie standen met steps(1): het springt in plaats van te glijden.
   Omhulsel en beeld krijgen een eigen ritme, anders oogt het
   mechanisch. */

@keyframes boil {
  0%   { transform: translate(var(--px, 0px), var(--py, 0px)) translate(calc(var(--boil) * -1), var(--boil)) rotate(-.34deg); }
  33%  { transform: translate(var(--px, 0px), var(--py, 0px)) translate(var(--boil), calc(var(--boil) * -1)) rotate(.3deg); }
  66%  { transform: translate(var(--px, 0px), var(--py, 0px)) rotate(0deg); }
}
@keyframes boilInner {
  0%   { transform: translate(var(--boil), 0) rotate(.22deg); }
  33%  { transform: translate(0, var(--boil)) rotate(-.26deg); }
  66%  { transform: translate(calc(var(--boil) * -1), 0) rotate(0deg); }
}
.boil { animation: boil .4s steps(1) infinite; will-change: transform; }
.boil img { animation: boilInner .52s steps(1) infinite; }
.boil--slow { animation-duration: .56s; }
.boil--slow img { animation-duration: .68s; }
@media (prefers-reduced-motion: reduce) { .boil, .boil img { animation: none !important; } }

/* ═══ TYPE ══════════════════════════════════════════════════════ */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.7rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); letter-spacing: -.02em; }
p  { margin: 0 0 1.05em; }

.eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .24em;
  text-transform: uppercase; color: color-mix(in srgb, var(--fg) 62%, transparent);
  margin: 0 0 1.3rem;
}
/* Het accent markeert handelingen en handmerken. Door het stipje op elk
   opschrift te zetten komt het in iedere sectie terug in plaats van
   alleen bij de knoppen. */
.eyebrow::before {
  content: ""; display: inline-block;
  width: .44em; height: .44em; border-radius: 999px;
  background: var(--zest); margin-right: .75em;
  vertical-align: middle; transform: translateY(-.08em);
}
.closer .eyebrow { display: inline-flex; align-items: center; }
.lede { font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); line-height: 1.5; color: color-mix(in srgb, var(--fg) 70%, transparent); max-width: 36ch; }
.signature { color: var(--zest); font-family: var(--hand); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; margin: 1.2rem 0 0; transform: rotate(-3deg); transform-origin: left center; }

/* ═══ NAV ═══════════════════════════════════════════════════════ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--gutter);
  padding-top: calc(.9rem + env(safe-area-inset-top, 0px));
  transition: background .35s var(--ease), padding .35s var(--ease),
              transform .4s var(--ease);
}
/* De balk dekte op een telefoon steeds een kop of alinea af. Nu schuift
   hij weg zodra je naar beneden leest en komt hij terug zodra je
   omhoog scrollt. */
.nav--weg { transform: translateY(-115%); }
.nav--stuck {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  padding-block: .55rem;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
}
.nav__brand img { width: clamp(96px, 12vw, 124px); }
.nav__links { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.8rem); }
.nav__links a { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--paper) 72%, transparent); transition: color .2s var(--ease); }
@media (max-width: 780px) { .nav__links a:not(.nav__cta) { display: none; } }

/* het logo is inkt op transparant; op blauw moet het papierkleur worden */
.tint-paper { filter: brightness(0) invert(93%) sepia(13%) saturate(320%) hue-rotate(334deg) brightness(103%) contrast(95%); }

/* ═══ STICKER ═══════════════════════════════════════════════════ */

.sticker {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--zest); color: var(--zest-ink);
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .28s var(--spring), box-shadow .18s var(--ease);
}
.sticker:active { transform: rotate(-1deg) scale(.96); }
.sticker__dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--zest-ink); animation: pulse 1.5s steps(1) infinite; }
@keyframes pulse { 0%, 66% { opacity: 1; } 33% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .sticker__dot { animation: none; } }
.nav__cta { color: var(--zest-ink) !important; background: var(--zest); padding: .5rem 1rem; border-radius: 999px; font-weight: 700; }

/* ═══ HERO ══════════════════════════════════════════════════════ */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 920px);
  display: grid; align-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}
.hero__type {
  position: absolute; inset: 0; z-index: 0;
  display: grid; align-content: center; justify-items: center;
  font-weight: 700; line-height: .74; letter-spacing: -.045em;
  text-transform: uppercase; white-space: nowrap;
  font-size: clamp(4.5rem, 17.5vw, 16rem);
  color: color-mix(in srgb, var(--paper) 13%, var(--ink));
  user-select: none; pointer-events: none;
}
.hero__type span { display: block; }
.hero__type { transform: translate(var(--px, 0px), calc(var(--py, 0px) - 3%)); }

/* Het omhulsel is het gepositioneerde element, niet de <img>. Andersom
   valt het beeld terug op zijn natuurlijke formaat en beslaat het de
   halve pagina. */
.hero__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__stage > span { position: absolute; display: block; }
.hero__stage > span > img { width: 100%; opacity: .9; }
.float--a { width: clamp(78px, 9vw, 140px); top: 15%; left: 5%; }
.float--b { width: clamp(70px, 8vw, 120px); top: 11%; right: 8%; }
@media (max-width: 900px) { .float--b { display: none; } }

.hero__pair { position: relative; z-index: 2; margin: 0 auto; width: min(480px, 60%); }
.hero__copy { position: relative; z-index: 3; max-width: var(--max); width: 100%; margin: clamp(1.5rem, 4vw, 2.75rem) auto 0; display: grid; gap: 1.3rem; justify-items: start; }
.hero__copy h1 { max-width: 17ch; margin: 0; }
.hero__copy .lede { margin: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(.82) rotate(-6deg); } to { opacity: 1; transform: none; } }

.hero__type span { animation: rise 1.1s var(--spring-soft) backwards; }
.hero__type span:nth-child(1) { animation-delay: .05s; }
.hero__type span:nth-child(2) { animation-delay: .13s; }
.hero__type span:nth-child(3) { animation-delay: .21s; }
.hero__pair { animation: rise 1s .28s var(--spring-soft) backwards; }
.hero__stage > span { animation: pop .8s var(--spring) backwards; }
.float--a { animation-delay: .54s; } .float--b { animation-delay: .65s; }
.hero__copy > * { animation: rise .85s var(--spring) backwards; }
.hero__copy > *:nth-child(1) { animation-delay: .48s; }
.hero__copy > *:nth-child(2) { animation-delay: .56s; }
.hero__copy > *:nth-child(3) { animation-delay: .64s; }
@media (prefers-reduced-motion: reduce) {
  .hero__type span, .hero__pair, .hero__stage > span, .hero__copy > * { animation: none; }
}

/* ═══ SECTIES ═══════════════════════════════════════════════════ */

.section { padding: clamp(4.5rem, 10vw, 9.5rem) var(--gutter); }
.section > * { max-width: var(--max); margin-inline: auto; }
/* .section > * geeft margin-inline:auto; een kop van 44ch zou daardoor
   gecentreerd staan in plaats van uitgelijnd met de inhoud eronder */
.section__head { max-width: 44ch; margin-inline: 0; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.closer .section__head { margin-inline: auto; }

.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--ink); }
.strip figure { margin: 0; overflow: hidden; }
.strip img { width: 100%; height: clamp(160px, 23vw, 340px); object-fit: cover; transition: transform .7s var(--ease); }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip figure:last-child { display: none; } }

.ticker {
  border-block: 1px solid var(--line-col); overflow: hidden; padding: .8rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: run 38s linear infinite; }
.ticker__track span { font-family: var(--hand); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1; white-space: nowrap; }
.ticker__track i { font-style: normal; color: var(--zest); font-size: .75rem; }
@keyframes run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ═══ MENU ══════════════════════════════════════════════════════ */

.menu { list-style: none; margin: 0; padding: 0; }
.menu__intro { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 45%, transparent); margin: 0 0 1rem; }
.dish {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
}
.dish:last-child { border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); }
.dish:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dish:nth-child(even) .dish__art { order: 2; }
@media (max-width: 720px) {
  /* .dish:nth-child(even) weegt zwaarder dan .dish, dus met dezelfde
     selector terugzetten, anders blijft elke tweede rij tweekoloms */
  .dish, .dish:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
  .dish:nth-child(even) .dish__art { order: 0; }
}
.dish__art { margin: 0; overflow: hidden; border-radius: var(--arch) var(--arch) 14px 14px; }
.dish__art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s var(--ease); }
.dish__art img.pos-low { object-position: 50% 72%; }
.dish--drawn .dish__art { overflow: visible; border-radius: 0; }
.dish--drawn .dish__art img { object-fit: contain; padding: 6%; }
.dish__course { font-style: italic; color: var(--zest); margin: 0 0 .4rem; }
.dish__body h3 { margin-bottom: .3em; }
.dish__body p:last-child { margin: 0; color: color-mix(in srgb, var(--fg) 70%, transparent); max-width: 50ch; }
.menu__foot { margin: clamp(2rem, 4vw, 3rem) 0 0; font-family: var(--mono); font-size: .78rem; color: color-mix(in srgb, var(--fg) 64%, transparent); max-width: 60ch; }
.menu__foot em { font-style: normal; color: var(--zest); }

/* ═══ SPLIT / KOK / FEITEN / SHOP ═══════════════════════════════ */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--flip .split__art { order: 2; }
.split__art { margin: 0; }
.split__art img { border-radius: var(--arch) var(--arch) 14px 14px; aspect-ratio: 4 / 5; object-fit: cover; }
.split__art--draw img { border-radius: 0; aspect-ratio: auto; width: 92%; margin-inline: auto; }
.split__body p { color: color-mix(in srgb, var(--fg) 70%, transparent); max-width: 42ch; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--flip .split__art { order: 0; } }

.kok { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.kok__art { margin: 0; }
.kok__art img { border-radius: var(--arch) var(--arch) 14px 14px; aspect-ratio: 4 / 5; object-fit: cover; }
.note { margin: 0; padding: clamp(1.6rem, 4vw, 2.8rem); border: 1px solid var(--line-col); border-radius: 26px; transform: rotate(-1.3deg); }
.note p { font-family: var(--hand); font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.2; margin: 0 0 .4em; }
.note cite { font-family: var(--hand); font-style: normal; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); display: block; text-align: right; color: var(--zest); }
@media (max-width: 760px) { .kok { grid-template-columns: 1fr; } }

.facts { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.fact { border-top: 1px solid var(--line-col); padding-top: 1.1rem; }
.fact dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 52%, transparent); margin-bottom: .7rem; }
.fact dd { margin: 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem); line-height: 1.42; letter-spacing: -.015em; }

.shop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.product { border: 1px solid var(--line-col); border-radius: clamp(36px, 5vw, 64px) clamp(36px, 5vw, 64px) 16px 16px; padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; transition: transform .32s var(--spring), border-color .2s var(--ease); }
.product figure { margin: 0 0 1rem; }
.product figure img { width: 66%; margin-inline: auto; aspect-ratio: 1; object-fit: contain; }
.product h3 { min-height: 2.1em; margin-bottom: .25em; }
.product__price { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--zest); margin-bottom: .8rem; }
.product p:last-child { margin: 0; color: color-mix(in srgb, var(--fg) 70%, transparent); font-size: .95rem; }

/* ═══ FORMULIER ═════════════════════════════════════════════════ */

.form-card { border: 1px solid var(--line-col); border-radius: clamp(48px, 7vw, 110px) clamp(48px, 7vw, 110px) 18px 18px; max-width: 520px; }
.form-card__inner { padding: clamp(1.7rem, 3.4vw, 2.7rem); }
.form-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin-bottom: .3em; }
.form-card__note { color: color-mix(in srgb, var(--fg) 78%, transparent); font-size: .92rem; margin-bottom: 1.6rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { grid-column: 1 / -1; display: grid; gap: .35rem; }
.field--half { grid-column: span 1; }
@media (max-width: 460px) { .field--half { grid-column: 1 / -1; } }
.field label { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.field input, .field select {
  font: inherit; font-size: 1rem;   /* 16px: minder en iOS zoomt in bij focus */
  color: var(--fg); background: transparent;
  border: none; border-bottom: 1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  border-radius: 0; padding: .45rem .1rem; width: 100%;
  transition: border-color .25s var(--ease);
}
.field select {
  appearance: none; padding-right: 1.4rem; background-repeat: no-repeat; background-position: right .1rem center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23f7f0e5' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
.on-paper .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231f209e' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
.field input::placeholder { color: color-mix(in srgb, var(--fg) 55%, transparent); }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--zest); }
.field option { color: #1f209e; }
.btn { grid-column: 1 / -1; width: 100%; justify-content: center; margin-top: .6rem; }
.form__fineprint { grid-column: 1 / -1; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: color-mix(in srgb, var(--fg) 60%, transparent); text-align: center; margin: .2rem 0 0; }

.gotcha { padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center; animation: gotchaIn .5s var(--ease) both; }
@keyframes gotchaIn { from { opacity: 0; transform: scale(.94) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gotcha { animation: none; } }
.gotcha__mark { font-family: var(--hand); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 1.05; margin: 0 0 .35em; transform: rotate(-2deg); color: var(--zest); }
.gotcha__body { color: color-mix(in srgb, var(--fg) 74%, transparent); max-width: 30ch; margin: 0 auto 1.6rem; }
.gotcha__body strong { color: var(--fg); }
.gotcha__again { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; background: none; border: none; cursor: pointer; color: color-mix(in srgb, var(--fg) 52%, transparent); text-decoration: underline; text-underline-offset: 4px; padding: .4rem; }

/* ═══ STEMPEL ═══════════════════════════════════════════════════ */

.stamp { position: relative; width: clamp(130px, 18vw, 190px); aspect-ratio: 1; flex: none; }
.stamp__ring { width: 100%; height: 100%; animation: turnSlow 34s linear infinite; }
@keyframes turnSlow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stamp__ring { animation: none; } }
.stamp__circle { fill: none; stroke: var(--fg); stroke-width: 2.5; }
.stamp__circle--thin { stroke-width: 1; opacity: .5; }
.stamp__text { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; fill: var(--fg); }
.stamp__art { position: absolute; inset: 24%; width: 52%; height: 52%; object-fit: contain; }

/* ═══ CLOSER + FOOTER ═══════════════════════════════════════════ */

.closer { text-align: center; }
.closer__inner { max-width: 620px; margin-inline: auto; display: grid; justify-items: center; }
.closer .lede { max-width: 40ch; }
.closer .form-card { margin-top: 2.5rem; text-align: left; }

.footer { border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; }
.footer > * { max-width: var(--max); margin-inline: auto; }
.footer__logo { width: clamp(160px, 26vw, 250px); margin: 0 0 2.5rem; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; padding-bottom: 2.5rem; }
.footer__cols h4::before { content: ""; display: inline-block; width: .44em; height: .44em; border-radius: 999px; background: var(--zest); margin-right: .7em; vertical-align: middle; transform: translateY(-.08em); }
.footer__cols h4 { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 52%, transparent); margin-bottom: 1rem; }
.footer__cols a, .footer__cols p { display: block; text-decoration: none; color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: .95rem; margin-bottom: .45rem; }
.footer__note { border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); padding-top: 1.5rem; margin: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: color-mix(in srgb, var(--paper) 46%, transparent); }

/* ═══ ENTREE OP SCROLL ══════════════════════════════════════════
   Elementen komen van hun eigen kant binnen: beeld van links, tekst
   van rechts. Dat is beweging die de opbouw van de pagina volgt in
   plaats van beweging om de beweging. */

.js [data-in] {
  opacity: 0;
  transition: opacity .5s var(--ease), transform .85s var(--spring);
  will-change: transform, opacity;
}
.js [data-in="up"]    { transform: translateY(54px); }
.js [data-in="left"]  { transform: translateX(-96px) rotate(-1.2deg); }
.js [data-in="right"] { transform: translateX(96px) rotate(1.2deg); }
/* grote beelden mogen minder stuiteren, anders wordt het onrustig */
.js .split__art[data-in], .js .dish__art[data-in], .js .kok__art[data-in] {
  transition: opacity .5s var(--ease), transform .95s var(--spring-soft);
}
.js [data-in].is-in   { opacity: 1; transform: none; }

/* op smal scherm staan de kolommen onder elkaar, dus zijdelings
   invliegen slaat nergens meer op */
@media (max-width: 820px) {
  .js [data-in="left"], .js [data-in="right"] { transform: translateY(38px); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-in] { opacity: 1; transform: none; transition: none; }
}

/* ═══ VEELGESTELDE VRAGEN ═══════════════════════════════════════
   Uitklapbaar via <details>, zodat het op een telefoon geen lap
   tekst is. Native element, dus het werkt ook zonder JavaScript. */

.faq { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

.faq__item {
  border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
}
.faq__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); }

.faq__item summary {
  -webkit-user-select: none; user-select: none;
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  transition: color .15s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }

/* plus dat een min wordt */
.faq__mark { position: relative; flex: none; width: 18px; height: 18px; }
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--zest);
  transition: transform .4s var(--spring);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }

/* animeerbare hoogte zonder vaste maat */
.faq__answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--spring-soft);
}
.faq__item[open] .faq__answer { grid-template-rows: 1fr; }
.faq__answer > div { overflow: hidden; }
.faq__answer p {
  margin: 0; padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  max-width: 62ch;
}
.faq__answer em { font-style: normal; color: var(--zest); }
@media (prefers-reduced-motion: reduce) {
  .faq__answer, .faq__mark::before, .faq__mark::after { transition: none; }
}

/* ═══ CONTACT NAAST HET FORMULIER ═══════════════════════════════ */

.closer__alt {
  margin: 1.6rem 0 0; font-size: .95rem;
  color: color-mix(in srgb, var(--fg) 68%, transparent);
}
.closer__alt a { color: var(--zest); text-decoration: underline; text-underline-offset: 4px; }

.inline-link {
  color: var(--zest); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ═══ VOORTGANG ═════════════════════════════════════════════════
   Dunne accentlijn bovenaan. Lost meteen op dat het accent eerder
   alleen bij losse knoppen opdook. */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 200; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--zest); }
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }


/* ═══ HOVER ═════════════════════════════════════════════════════
   Een telefoon kent geen hover: zonder deze query blijft een effect
   na een tik hangen tot je ergens anders drukt. */

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--paper); }
  .sticker:hover { transform: rotate(-2.5deg) scale(1.05); box-shadow: 0 14px 34px -16px #000; }
  .strip figure:hover img { transform: scale(1.07); }
  .dish:hover .dish__art img { transform: scale(1.05); }
  .product:hover { transform: translateY(-6px); border-color: var(--zest); }
  .gotcha__again:hover { color: var(--fg); }
  .footer__cols a:hover { color: var(--zest); }
  .faq__item summary:hover { color: var(--zest); }
  .inline-link:hover { text-decoration-thickness: 2px; }
}