/* Latin-subset, gesubset waar het kon: Tiro ging van 98 naar 1,3 kB omdat we er
   maar acht glyphs uit gebruiken (जवाहर१२३). font-display:block is hier goed:
   met preload staat de letter er al, en block voorkomt dat er ooit nog een
   fallback in beeld komt om daarna te wisselen. */
@font-face{font-family:"Fraunces";font-weight:700;font-style:normal;font-display:block;
  src:url("/assets/fonts/Fraunces-700.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 600;font-style:normal;font-display:block;
  src:url("/assets/fonts/InstrumentSans.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:normal;font-display:block;
  src:url("/assets/fonts/InstrumentSerif.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:italic;font-display:block;
  src:url("/assets/fonts/InstrumentSerif-italic.woff2") format("woff2")}
@font-face{font-family:"Tiro Devanagari Hindi";font-weight:400;font-style:normal;font-display:block;
  src:url("/assets/fonts/TiroDevanagariHindi.woff2") format("woff2")}
/* MAKAWAO — ACTIVEER ZODRA HET GEKOCHTE BESTAND IN assets/fonts/ STAAT: haal de
   twee schuine-streep-sterretjes rond het blok hieronder weg. Uitgeschakeld tot
   dan, anders geeft elke paginalading twee 404's.
   Makawao heeft één gewicht (Regular). Het bereik 100-900 zorgt dat de browser dit
   bestand voor élk gevraagd gewicht pakt zonder een nep-vet te synthetiseren —
   de koppen vragen 900 voor Fraunces, en dat mag niet doorwerken. */
/*
@font-face{font-family:"Makawao";font-weight:100 900;font-style:normal;font-display:swap;
  src:url("/assets/fonts/Makawao-Regular.woff2") format("woff2"),
      url("/assets/fonts/Makawao-Regular.woff") format("woff")}
*/
:root{
  --ink:#0B0806;          /* paginacanvas, warm bijna-zwart */
  --ink2:#15100C;         /* iets opgelicht vlak */
  --paper:#F3EADB;        /* warme creme, de lichte sectie */
  --paper2:#E7D9C2;
  --gold:#E9A13B;         /* turmeric — het enige hete accent */
  --gold-deep:#C7801F;
  --chili:#C4321F;        /* reserveren, spaarzaam */
  --copper:#A96A3A;
  --line:rgba(243,234,219,.15);
  --line-ink:rgba(11,8,6,.16);
  /* Displayletter naar het karakter van Busy Bee Honey. Hun TayMakawao is een
     eigen webfont op hun CDN en dus niet over te nemen; het is een zware, iets
     versmalde wigserif ("houten kistletter"). Fraunces komt daar het dichtst bij
     en is variabel: opsz 144 en WONK 1 zetten de gekantelde wigschreven aan,
     SOFT 100 maakt de hoeken rond — dichter bij Makawao. Refero adviseerde Playfair/Bodoni, maar dat
     zijn didones met haarfijne dwarsstreken — een ander beest.
     Lopende tekst blijft Instrument Sans. */
  /* Makawao (Taylor Penton, taylorpenton.com/products/makawao, $25, één
     commerciële licentie incl. websites) is het echte font van Busy Bee Honey.
     Het bestand hoort NIET van hun site geplukt te worden — dat is gebruik
     zonder licentie. Zodra het gekochte bestand in assets/fonts/ staat als
     Makawao-Regular.woff2 (en .woff), neemt het hier automatisch over; tot dan
     valt alles terug op Fraunces. */
  --display:"Makawao","Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  /* Tweede stem: Instrument Serif. Hij heeft wat Fraunces mist — een echte
     cursief — en die gebruiken we waar een accent moet klinken in plaats van
     schreeuwen: nadruk in koppen, het hoofdstuknummer (zoals bij Palma) en het
     citaat onder Method. */
  --serif:"Instrument Serif",Georgia,serif;
  --dev:"Tiro Devanagari Hindi",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;max-width:100%;scroll-behavior:auto}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
  touch-action:pan-y pinch-zoom;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 1;
  text-transform:uppercase;line-height:.86;letter-spacing:-.012em}
/* De nadruk zat in cursief; een grotesk heeft dat niet, dus die komt nu uit
   breedte: hetzelfde gewicht, maar wijder gezet. */
/* Fraunces heeft geen echte cursief in deze levering en geen breedte-as, dus de
   nadruk komt uit gewicht: de kop staat op 900, het accent zakt naar 700. Dat
   leest als een klemtoon zonder van letter te wisselen. In het citaat doet de
   goudkleur die er al op staat de rest. */
/* Nadruk in een kop: cursieve Instrument Serif. Fraunces heeft geen cursief en
   staat zelf al op 700, dus via gewicht of breedte kon het niet. Een tweede
   letter mag hier omdat het een accent is en geen tweede systeem: iets kleiner
   gezet, want een serif-cursief oogt groter dan kapitalen van dezelfde maat. */
h1 em,h2 em,h3 em,#method blockquote em{font-family:var(--serif);font-style:italic;
  font-weight:400;text-transform:none;font-size:1.04em;letter-spacing:0}
em{font-style:italic}

.kicker{
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,54px)}

/* ============================ loader ============================ */
/* Hij begint ONZICHTBAAR en wordt alleen zichtbaar als het opstarten langer duurt
   dan een knipoog. Eerder lag hij vanaf frame nul als dekkend paneel over de
   pagina en ging hij pas weg als 18 frames gedecodeerd waren — dus ook uit cache
   zag je hem elke refresh. Bovendien: is hij ooit uitgespeeld, dan onthoudt de
   browser dat en slaat hij hem daarna helemaal over. */
/* Palma-patroon: het paneel is bij de start ALTIJD dicht (inkt + embleem) en
   gaat altijd met een fade van .6s open — ook bij een refresh. Zo komt de
   pagina elke keer rustig uit het zwart in plaats van erop te knallen. Alleen
   de teller en de balk verschijnen pas (.show) als het echt langer duurt. */
#loader{position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:1;visibility:visible;
  transition:opacity .6s ease,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .em{width:268px;height:auto;opacity:.95}
#loader .pct{font-family:var(--display);font-weight:700;font-size:54px;color:var(--paper);
  font-variant-numeric:tabular-nums;line-height:1}
#loader .bar{width:170px;height:1px;background:var(--line);position:relative;overflow:hidden}
#loader .bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
#loader .note{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(243,234,219,.42)}
#loader .pct,#loader .bar,#loader .note{opacity:0;transition:opacity .4s ease}
#loader.show .pct,#loader.show .bar,#loader.show .note{opacity:1}

/* ============================ header ============================ */
/* De header blijft altijd staan. Wegduiken bij naar-beneden-scrollen wint ruimte
   die deze pagina niet nodig heeft, en kost je de weg terug precies in de film,
   waar iemand het langst hangt.
   Geen zwart blok maar een sluier: de tint en de blur zitten op ::before, dat 34px
   ONDER de header doorloopt en daar met een mask uitdooft. Zo staat de tekst over
   volle dekking en is er nergens een harde rand — de reden dat het vorige zwart
   als een balk las in plaats van als glas. */
/* De header blijft altijd staan. Wegduiken bij naar-beneden-scrollen wint ruimte
   die deze pagina niet nodig heeft, en kost je de weg terug precies in de film.
   Verder: alleen een blur met een vlakke doorschijnende laag. Geen verloop, geen
   rand, geen schaduw — je ziet de film eronder doorlopen, zachter en gedempt. */
header{position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) clamp(20px,4vw,54px) 20px;
  transition:background .45s ease,color .45s ease,backdrop-filter .45s ease}
/* Over de film: alleen logo en links, geen glas. Het glas (blur + lichte
   sluier) komt pas als de gerechtensectie onder de balk staat. */
header.solid,header.on-light{backdrop-filter:blur(6px) saturate(1.06);
  -webkit-backdrop-filter:blur(6px) saturate(1.06)}
header.solid{background:#ffffff08}
header.on-light{color:var(--ink);background:rgba(243,234,219,.72)}
header.on-light.on-gold{background:rgba(233,161,59,.86)}

/* Het echte logo bestaat uit twee delen: het Ganesha-embleem in een lotus, en het
   gouden woordmerk. Op 34px hoog is de volledige lockup onleesbaar, dus in de
   header staan ze naast elkaar. Het woordmerk blijft overal het gouden origineel,
   ook op de cremesectie: een merknaam is geen leestekst en mag zijn eigen kleur
   houden. */
header .brand{display:flex;align-items:center;gap:11px;height:36px;padding:4px 0;margin:-4px 0;min-height:44px}
header .brand .mark{height:34px;width:auto;flex:none}
header .brand .wordmark{height:19px;width:auto}
header nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
/* De achtergrond blijft vrijwel leeg, dus de leesbaarheid moet uit de tekst zelf
   komen: een zachte donkere halo. Op de reel loopt een fel botergerecht onder de
   header door en zonder dit valt "MENU" daar weg. Op de cremekaart is de halo
   onnodig en zou hij vies staan, dus daar gaat hij uit. */
/* Tikdoel 44px hoog (WCAG 2.5.8) zonder de tekst groter te maken: verticale
   padding en negatieve marge, zodat de balk niet hoger wordt. */
header nav a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:.9;text-shadow:0 1px 10px rgba(6,4,2,.7),0 0 2px rgba(6,4,2,.5);
  padding:15px 8px;margin:-15px -8px;
  transition:opacity .25s,color .25s}
header nav .links{display:flex;align-items:center;gap:clamp(4px,1vw,10px)}
header nav .navlink{margin:-15px 0;padding:15px 10px}
header .pill.pill-hot{min-height:44px}
header .brand img{filter:drop-shadow(0 1px 7px rgba(6,4,2,.55))}
header.on-light nav a{text-shadow:none}
header.on-light .brand img{filter:none}
header nav a:hover{opacity:1;color:var(--gold)}
.pill{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;border-radius:999px;padding:11px 20px;
  border:1px solid currentColor;transition:background .28s ease,color .28s ease,border-color .28s}
.pill-hot{background:var(--chili);border-color:var(--chili);color:var(--paper)}
.pill-hot:hover{background:transparent;color:var(--chili)}
.pill-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
header .pill{padding:9px 17px}
/* Op klein scherm ruimen we op, maar "Menu" blijft: bij een restaurant is dat de
   link waarvoor mensen komen. Ruimte daarvoor komt uit het woordmerk — het
   Ganesha-embleem alleen is genoeg om te weten waar je bent. */
@media (max-width:820px){
  header nav .navlink{display:none}
  header nav .navlink[href="#menu"]{display:inline-flex;align-items:center}
}
@media (max-width:560px){
  header .brand .wordmark{display:none}
  header nav{gap:16px}
}

/* ============================ film ============================ */
#film{position:relative}
/* 1150vh over 285 frames is ~36px scroll per frame — traag genoeg om
   cinematisch te lezen, en de film houdt dan ~65% van de pagina in plaats van
   driekwart, zodat de inhoud er niet achteraan bungelt. */
#rail{height:1150vh}
#stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Alleen nog het vignette. De korrellaag die hier stond (feTurbulence op .14 met
   mix-blend-mode overlay, elke 1,1s in drie stappen verschoven) is eruit: die
   dateerde uit de tijd dat de bron 854px breed was en opgeschaald werd, en dan
   maakt korrel van zacht "filmisch". De bron is nu 1600px. Gemeten voegde die
   laag sigma 1,07 aan ruis toe over het hele beeld — in een vlak stuk beeld ging
   het van 0,41 naar 0,71 — en omdat hij drie keer per seconde verspringt, was
   dat precies de kruipende ruis tijdens het scrollen. */
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--vig,1);
  background:
    radial-gradient(130% 100% at 50% 42%,transparent 38%,rgba(11,8,6,.62) 100%),
    linear-gradient(to bottom,rgba(11,8,6,.55) 0%,transparent 26%,transparent 62%,rgba(11,8,6,.86) 100%)}
/* Naad naar de gerechtensectie, naar het Palma-patroon: over de laatste 20% van
   de film smelt de ONDERKANT van het beeld naar de kleur die de sectie aan haar
   bovenrand heeft (gemeten #461D0B). Boven blijft de film gewoon zichtbaar; op
   de snede zijn beeld en veld dezelfde kleur, dus er is geen rand meer. */
#seam{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(70,29,11,0) 8%,rgba(70,29,11,.16) 40%,rgba(70,29,11,.55) 68%,#461D0B 94%)}

.beats{position:absolute;inset:0;z-index:3;pointer-events:none}
/* Beats, naar het Palma-patroon: elke beat staat op DEZELFDE plek — links,
   verticaal gecentreerd, vaste marge — in plaats van per beat een andere hoek.
   Een streepje voor de kicker, een grote kop met harde regelafbrekingen, en een
   flauw Devanagari-cijfer rechts als cultureel teken (Palma heeft daar het
   Japanse woord). De envelope is fade-in -> HOLD -> fade-out met een lichte
   verticale beweging; zonder de hold is een regel maar één moment vol zichtbaar
   en leest het als geflikker. */
.beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 calc(clamp(22px,7vw,110px) + env(safe-area-inset-right))
          0 calc(clamp(22px,7vw,110px) + env(safe-area-inset-left));
  opacity:0;pointer-events:none;will-change:opacity,transform}
.beat .inner{max-width:640px}
.beat .kicker{margin-bottom:18px;display:flex;align-items:center;gap:14px}
.beat .kicker::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.beat h2{font-size:clamp(36px,5.6vw,80px);color:var(--paper);
  text-shadow:0 2px 40px rgba(0,0,0,.45)}
.beat p{margin-top:16px;font-size:clamp(14.5px,1.25vw,17.5px);line-height:1.55;
  color:rgba(243,234,219,.85);max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.beat .dev{position:absolute;right:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);
  font-family:var(--dev);font-size:clamp(80px,12.5vw,170px);color:rgba(243,234,219,.07);
  line-height:1;user-select:none}

.beat.hero{align-items:center;text-align:center}
.beat.hero .inner{max-width:none;display:flex;flex-direction:column;align-items:center}
.beat.hero .logo-hero{width:clamp(220px,27vw,400px);height:auto;
  filter:drop-shadow(0 10px 60px rgba(0,0,0,.65)) drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.beat.hero .sub{margin-top:14px;font-size:clamp(13.5px,1.35vw,18px);color:rgba(243,234,219,.95);
  letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.85),0 2px 30px rgba(0,0,0,.7)}
/* Bewijsregel: sterren in goud, het cijfer groot, de rest rustig maar leesbaar.
   Eerst stond dit op 11,5px in 62% dekking, en dat was op de film onleesbaar. */
.beat.hero .proof{margin-top:16px;display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 14px;border-radius:999px;
  background:rgba(11,8,6,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(228,166,92,.22);
  font-size:clamp(13px,1.05vw,15px);color:rgba(243,234,219,.92);letter-spacing:.01em}
.beat.hero .proof b{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.35em;color:var(--gold);line-height:1}
.beat.hero .proof .of{color:rgba(243,234,219,.78)}
.stars{display:inline-flex;gap:3px}
.stars i{width:14px;height:14px;background:var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* vijfde ster voor 80%: 4,8 van 5 */
.stars i.part{background:linear-gradient(90deg,var(--gold) 80%,rgba(243,234,219,.28) 80%)}

/* reviews — naar het voorbeeld van de burgerposter: een warm effen vlak, één
   grote kop, een cream kaart met de review, een getekende pijl naar een groot
   uitgesneden gerecht, twee kleinere reviews ernaast en een paar gouden sterren. */
/* Een ECHT paneel: afgerond blok met marge in het zwart, geen masker over een
   vlak van volle breedte. Het komt als één geheel binnen (iets kleiner en lager
   beginnen, dan op maat), het gerecht loopt trager mee dan de pagina
   (parallax) en de kaarten komen verspringend omhoog. Alles scroll-gestuurd via
   animation-timeline; zonder ondersteuning staat het gewoon stil op de eindstand. */
/* GEEN overflow:hidden op het paneel zelf. Ronde hoeken + overflow:hidden op een
   element dat met transform binnenkomt dwingt de browser elke frame tot een
   nieuw masker van de hele sectie: gemeten 18-44 frames boven 33ms bij het
   binnenscrollen, 0 zonder. De achtergrond volgt de ronde hoeken vanzelf; wat
   moet worden afgesneden (het gerecht onder de rand, de pepers buiten het vlak)
   zit in .scene, en die krijgt een gewone rechte clip — die is gratis. */
#reviews{color:var(--paper);
  background:
    radial-gradient(120% 70% at 50% -10%,#F5B85A 0%,transparent 60%),
    radial-gradient(90% 60% at 50% 110%,#CF8A2A 0%,transparent 60%),
    var(--gold);
  --inzet:clamp(14px,5.2vw,75px);
  /* Het paneel schuift een klein stuk over de keukensectie heen: de onderkant
     van de tandoor-ets verdwijnt eronder, als een gordijn dat over de rand
     valt. Daarom boven het zwart getild (z-index) en een negatieve bovenmarge. */
  --overlap:clamp(36px,6vw,84px);
  position:relative;z-index:2;
  margin:calc(-1 * var(--overlap)) var(--inzet) var(--inzet);
  border-radius:clamp(22px,2.6vw,36px);
  padding:clamp(80px,12vh,150px) 0 0;
  box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transform-origin:50% 0}
#reviews .wrap{padding-left:clamp(20px,4vw,54px);padding-right:clamp(20px,4vw,54px)}
@supports (animation-timeline: view()){
  #reviews{animation:paneel-in cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();
    animation-range:entry 0% cover 22%}
  @keyframes paneel-in{
    from{transform:perspective(1400px) scale(.78) translateY(120px) rotateX(6deg);opacity:0}
    45%{opacity:1}
    to{transform:none;opacity:1}}
  /* de kop komt iets later en van dichterbij: eerst het paneel, dan de woorden */
  #reviews .pre,#reviews h2,#reviews .kicker{animation:woorden linear both;animation-timeline:view();
    animation-range:entry 20% cover 18%}
  #reviews .pre{animation-range:entry 35% cover 22%}
  @keyframes woorden{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}
  /* sterren en hartjes twinkelen op de scroll */
  #reviews .doodle{animation:twinkel linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes twinkel{0%{transform:scale(.6) rotate(-20deg);opacity:0}25%{opacity:1}
    60%{transform:scale(1.15) rotate(10deg)}100%{transform:scale(.9) rotate(25deg);opacity:.6}}
  #reviews .prop{animation:zweef linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  /* de basisdraai per prop (--rot) blijft behouden; de scroll-animatie draait er een stukje bovenop */
  @keyframes zweef{from{transform:translateY(40px) rotate(calc(var(--rot,0deg) - 14deg))}to{transform:translateY(-40px) rotate(calc(var(--rot,0deg) + 8deg))}}
  #reviews .dish{animation:dish-drijft linear both;animation-timeline:view();
    animation-range:entry 20% exit 60%}
  @keyframes dish-drijft{from{transform:translateY(30%) rotate(-5deg) scale(.92)}to{transform:translateY(-6%) rotate(2deg) scale(1.02)}}
  #reviews .card{animation:kaart-op linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  #reviews .mini:first-of-type{animation:kaart-op linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  #reviews .mini:last-of-type{animation:kaart-op-r linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes kaart-op{from{transform:translateY(70px) rotate(-2.5deg);opacity:0}to{opacity:1}}
  @keyframes kaart-op-r{from{transform:translateY(90px) rotate(2deg);opacity:0}to{opacity:1;transform:rotate(2deg)}}
  #reviews .card{animation-name:kaart-op-c}
  @keyframes kaart-op-c{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
  #reviews .mini:first-of-type{animation-name:kaart-op-l}
  @keyframes kaart-op-l{from{transform:translateY(70px) rotate(-6deg);opacity:0}to{transform:rotate(-2.5deg);opacity:1}}
  /* de data-rv reveal niet dubbelop laten lopen — alleen op desktop, waar de
     scroll-animaties het werk doen; op mobiel doen de reveals het juist */
  @media (min-width:901px){ #reviews [data-rv]{opacity:1;transform:none} }
}
#reviews .wrap{position:relative;z-index:1}
#reviews .kicker{color:rgba(11,8,6,.55)}
#reviews .pre{display:block;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2vw,30px);color:var(--ink);margin-bottom:.35em}
#reviews h2{text-align:center;font-size:clamp(44px,7vw,108px);line-height:.9;max-width:none}
#reviews .score{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:22px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(11,8,6,.72)}
#reviews .score .stars i{width:15px;height:15px;background:var(--paper)}
#reviews .score .stars i.part{background:linear-gradient(90deg,var(--paper) 80%,rgba(11,8,6,.22) 80%)}
#reviews h2 em{color:var(--chili)}
/* de grote kaart */
#reviews .card{position:relative;background:var(--paper);color:var(--ink);border-radius:26px;
  padding:clamp(26px,3vw,44px) clamp(26px,3.4vw,50px);max-width:820px;margin:clamp(34px,5vh,60px) auto 0;
  box-shadow:none}   /* op het gele vlak lezen zachte slagschaduwen als vieze vlekken */
#reviews .card::before{content:"\201C";position:absolute;left:clamp(18px,2.4vw,34px);top:-.28em;
  font-family:var(--display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 1;
  font-size:clamp(90px,9vw,140px);line-height:1;color:var(--chili);pointer-events:none}
/* staart van de ballon, richting het gerecht */
#reviews .card::after{content:"";position:absolute;right:18%;bottom:-26px;width:54px;height:54px;
  background:var(--paper);clip-path:polygon(0 0,100% 0,62% 100%)}
#reviews .card p{margin:0;padding-top:clamp(18px,2vw,30px);font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,2vw,30px);line-height:1.28}
#reviews .card p em{font-style:italic;color:var(--chili)}
#reviews .card .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(18px,2vw,28px);flex-wrap:wrap}
#reviews .card .stars i{width:22px;height:22px}
#reviews .who{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(11,8,6,.66)}
#reviews .who b{display:block;color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
#reviews .card .stars i,#reviews .mini .stars i{background:var(--gold-deep)}
#reviews .who .g{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.15)}
#reviews .who .g svg{width:18px;height:18px}
/* het tafereel: kleine kaart · gerecht · kleine kaart */
#reviews .scene{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr minmax(360px,54%) 1fr;
  /* de clip tot de paneelrand laten lopen, niet tot de binnenmarge van .wrap */
  margin-left:calc(-1 * clamp(20px,4vw,54px));margin-right:calc(-1 * clamp(20px,4vw,54px));
  padding-left:clamp(20px,4vw,54px);padding-right:clamp(20px,4vw,54px);
  align-items:end;gap:clamp(12px,2vw,30px);margin-top:clamp(28px,4vh,56px)}
#reviews .dish{position:relative;z-index:2;display:block;width:100%;height:auto;
  transform:translateY(6%)}   /* geen slagschaduw: op het vlakke geel leest die als vlek */
#reviews .mini{position:relative;z-index:3;background:var(--paper);color:var(--ink);border-radius:20px;
  padding:24px 26px;margin-bottom:clamp(60px,12vw,190px);
  transform:rotate(-2.5deg)}
#reviews .mini:last-child{margin-bottom:clamp(30px,7vw,110px);transform:rotate(2deg)}
#reviews .mini::before{content:"\201C";position:absolute;left:16px;top:-.3em;font-family:var(--display);
  font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:64px;line-height:1;color:var(--chili);pointer-events:none}
#reviews .mini p{margin:0;padding-top:14px;font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.35vw,21px);line-height:1.3}
#reviews .prop{position:absolute;z-index:2;pointer-events:none;width:clamp(90px,9vw,150px);height:auto}
#reviews .prop.chilli{left:2%;bottom:9%;--rot:-20deg;transform:rotate(var(--rot))}
/* steel omhoog en verstopt achter de kaart; de blaadjes komen eronderuit */
#reviews .prop.leaf{right:4.5%;bottom:48%;--rot:-98deg;transform:rotate(var(--rot))}
#reviews .prop.anise{right:12%;top:-6%;width:clamp(60px,6vw,96px)}
#reviews .mini .foot{display:flex;flex-direction:column;gap:8px;margin-top:14px}
#reviews .mini .stars i{width:14px;height:14px}
#reviews .mini .who{font-size:12px}
#reviews .mini .who b{font-size:13px}
/* krabbels: sterretjes en hartjes in goud, een "review"-ballon in cream */
#reviews .doodle{position:absolute;pointer-events:none;color:var(--paper)}
#reviews .d1{color:var(--chili)}
#reviews .d1{left:13%;bottom:4%;width:54px}
#reviews .d2{right:9%;top:22%;width:46px}
#reviews .d3{left:26%;top:14%;width:34px}
@media (max-width:900px){
  /* Op mobiel geen zwevend paneel: volle breedte, geen marge, geen ronde
     hoeken, geen schaal-animatie. De overlap met de keukensectie ook niet. */
  #reviews{margin:0;border-radius:0;box-shadow:none;animation:none;transform:none;opacity:1;
    padding-top:clamp(64px,10vh,110px)}
  /* verhoudingen op een smal scherm: de kop mag groot zijn (desktop is 108px op
     1440), de kaarttekst juist ingetogen, anders is de review groter dan de titel */
  #reviews h2{font-size:clamp(48px,15vw,70px);line-height:.9;max-width:9ch;margin:0 auto}
  #reviews .pre{font-size:19px}
  #reviews .pre{margin-bottom:.5em}
  #reviews .score{margin-top:18px;font-size:10px;gap:10px}
  #reviews .score .stars i{width:13px;height:13px}
  /* kaart hoger (meer binnenruimte), dichter op de kop; het gerecht dichter
     op de kaart en de twee kleine reviews verder van het gerecht af */
  #reviews .card{padding:32px 22px 30px;border-radius:20px;max-width:360px;margin:22px auto 0}
  #reviews .scene{margin-top:10px;row-gap:34px}
  /* Op mobiel geen scroll-gestuurde animaties in de sectie (de parallax schoof
     het gerecht tot in de kaarten, en niet elke telefoon kent ze); de elementen
     komen in plaats daarvan één voor één binnen via de reveal: kop, sterren,
     kaart, gerecht (opduikend met een draai), kleine kaarten van links en rechts. */
  #reviews .card,#reviews .mini,#reviews .dish,#reviews .doodle,#reviews .prop,#reviews .pre,#reviews h2,#reviews .score{animation:none !important}
  #reviews .dish{margin-bottom:6px}
  #reviews .mini.rv-left{--rv-end:rotate(-2.5deg)}
  #reviews .mini.rv-right{--rv-end:rotate(2deg)}
  #reviews .card p{font-size:18px;line-height:1.35;padding-top:12px}
  #reviews .card::before{font-size:72px;left:14px}
  #reviews .card .stars i{width:17px;height:17px}
  #reviews .card::after{width:40px;height:40px;bottom:-20px}
  /* gerecht bovenaan over de volle breedte, de twee kleine reviews eronder
     naast elkaar */
  #reviews .scene{grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
  #reviews .dish{order:-1;grid-column:1 / -1;width:92%;margin:0 auto;transform:none}
  #reviews .mini,#reviews .mini:last-child{margin-bottom:0;transform:none;padding:18px 16px}
  #reviews .mini p{font-size:15px;line-height:1.3}
  #reviews .mini::before{font-size:44px;left:12px}
  #reviews .mini .stars i{width:12px;height:12px}
  #reviews .prop{display:none}
  #reviews .d1,#reviews .d3{display:none}
    #reviews{padding-bottom:60px}
}
.lead{margin-top:18px;font-size:clamp(14.5px,1.2vw,17px);line-height:1.6;max-width:52ch;
  color:rgba(243,234,219,.72)}
.light .lead{color:rgba(30,20,12,.72)}
/* in een gecentreerde kop ook het blok zelf centreren, anders hangt het links */
#menu .head .lead,#dishes .head .lead{margin-left:auto;margin-right:auto}
.scrollcue{position:absolute;bottom:calc(34px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(243,234,219,.6)}
.scrollcue i{width:1px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);
  animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.beat.finale{justify-content:flex-end;padding-bottom:calc(14vh + env(safe-area-inset-bottom))}
.beat.finale .inner{max-width:560px}
.beat.finale .actions{display:flex;gap:28px;align-items:center;margin-top:30px;
  pointer-events:auto;flex-wrap:wrap}
.cta-text{display:inline-flex;align-items:center;gap:9px;color:var(--paper);font-size:12px;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid rgba(243,234,219,.45);padding-bottom:6px;
  text-shadow:0 1px 8px rgba(0,0,0,.5);transition:border-color .3s,gap .3s;min-height:44px;display:inline-flex;align-items:center}
.cta-text:hover{border-color:var(--paper);gap:13px}
@media (max-width:560px){
  .beat.finale .actions{gap:16px;flex-wrap:nowrap;align-items:center}
  .beat.finale .pill{padding:13px 20px;font-size:10.5px;letter-spacing:.13em;white-space:nowrap}
  .beat.finale .cta-text{font-size:10.5px;letter-spacing:.13em;gap:7px;white-space:nowrap;padding-bottom:5px}
  .beat .kicker{font-size:10px;letter-spacing:.3em}
  .beat .kicker::before{width:22px}
  .beat .dev{display:none}
}

/* hoofdstukblok linksonder: nummer, naam, en een rail die de TOTALE voortgang van
   de film toont — niet de voortgang binnen het hoofdstuk zoals de oude spoel */
#chapter{position:absolute;left:calc(clamp(20px,4vw,54px) + env(safe-area-inset-left));
  bottom:calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;
  color:rgba(243,234,219,.85);z-index:5}
#chapter .num{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;color:rgba(243,234,219,.75)}
#chapter .num b{color:var(--gold);font-weight:600}
#chapter .name{font-size:11px;font-weight:600;letter-spacing:.4em;text-transform:uppercase}
#chapter .rail{width:150px;height:1px;background:rgba(243,234,219,.2);position:relative}
#chapter .rail i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
@media (pointer:coarse){#chapter{bottom:calc(78px + env(safe-area-inset-bottom))}}

/* Exact dezelfde letter, maat en kleur als #dishes .ghost, anders leest het niet
   als hetzelfde woord maar als een tweede element. */
/* Eén woord dat van de film naar de poster reist: het komt door de onderrand van
   het beeld omhoog, stijgt door, zakt daarna terug en gaat exact op de plek staan
   van de ghost in de gerechtensectie — en neemt die dan over. Daarom position:
   fixed: als het in het toneel bleef zitten, scrollde het met de film weg en kon
   het zijn bestemming nooit bereiken. */
#film{position:relative;z-index:0}

@media (prefers-reduced-motion:reduce){
  #reviews,#reviews *{animation:none !important}
  #rail{height:auto}#stage{position:static;height:78svh}
  .beat{position:static;opacity:1;transform:none;margin:0 0 44px}
  .beat.hero{transform:none}
}

/* ============================ blokken ============================ */
/* de header staat vast bovenaan, dus ankersprongen moeten eronder uitkomen */
.block{padding:clamp(96px,15vh,190px) 0;position:relative;scroll-margin-top:86px}
.block.light{background:var(--paper);color:var(--ink)}
.block.light .kicker{color:var(--gold-deep)}
.rule{height:1px;background:var(--line);border:0}
/* kapittelkop voor de secties die geen volle displaymaat vragen. Stond eerder als
   tweede style-attribuut op de h2, wat ongeldige HTML is: de browser negeert het
   en de kop viel terug op de UA-standaard. */
.h-mid{font-size:clamp(32px,4.4vw,66px);max-width:19ch;line-height:1.02}
.light .rule{background:var(--line-ink)}

[data-rv]{opacity:0;transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0)*90ms)}
/* varianten: van links, van rechts, of opduikend met een draai */
[data-rv].rv-left{transform:translate(-44px,24px) rotate(-7deg)}
[data-rv].rv-right{transform:translate(44px,24px) rotate(7deg)}
[data-rv].rv-pop{transform:translateY(70px) scale(.9) rotate(-5deg)}
/* Kom je van BOVEN (omhoog scrollen, of refresh onderaan en dan terug), dan is
   de startstand gespiegeld: het element komt van boven naar zijn plek, in
   plaats van 34px de verkeerde kant op te schuiven. Zo is omhoog net zo
   vloeiend als omlaag. */
[data-rv].van-boven{transform:translateY(-34px)}
[data-rv].rv-left.van-boven{transform:translate(-44px,-24px) rotate(-7deg)}
[data-rv].rv-right.van-boven{transform:translate(44px,-24px) rotate(7deg)}
[data-rv].rv-pop.van-boven{transform:translateY(-70px) scale(.9) rotate(-5deg)}
[data-rv].in,[data-rv].in.van-boven{opacity:1;transform:var(--rv-end,none)}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}


.dish .badge.heat{border-color:var(--chili);color:var(--chili)}
/* Asymmetrie zonder negatieve marges: die lieten captions over elkaar heen
   lopen. Nu drie rijen van groot + klein, met de kleine steeds aan de andere
   kant en onderaan uitgelijnd, zodat het oog zigzagt. */

/* ==================== signature dishes ====================
   Naar de DOSA-poster: uitgesneden gerechten op een kaneelbruin veld.
   Drie dingen doen het werk, en ze zijn alle drie eerder onderschat:

   - de radiale verdieping naar de hoeken plus papierkorrel; vlak middenbruin
     ziet er goedkoop uit;
   - twee schaduwlagen per gerecht. De brede zachte laag alleen laat het bord
     zweven. Wat het op de tafel legt is de korte donkere CONTACTschaduw, dicht
     tegen de onderrand en naar rechtsonder verschoven omdat het licht in al deze
     foto's van linksboven komt;
   - de ingrediënten hangen aan de gerechten, niet aan de rand van het veld. Dat
     is wat er misging: aan de rand lezen ze als losse decoratie, geclusterd rond
     een bord lezen ze als één gedekte tafel. Bijkomend voordeel: op mobiel
     reizen ze automatisch mee. */
/* De achtergrond is nu een echte gefotografeerde pleisterdoek in plaats van een
   CSS-verloop. Die heeft wolkige toonvariatie, een lichtplek en een eigen korrel;
   dat is niet na te bouwen met een radiaal verloop, en het verloop was precies
   waarom het veld vlak aanvoelde. Kleuren gemeten uit de doek: lichtplek #7D320F,
   midden #87340D, hoeken #3C1503.
   cover schaalt de staande doek 1,6x op — bij een zachte pleistertextuur is dat
   niet te zien. Het extra verloop erboven verdiept alleen de zijkanten, want
   cover snijdt de eigen zijvignettering van de doek eraf op breede schermen. */
#dishes{
  --field:#7D320F; --field-deep:#3C1503; --field-ghost:#9C4A1E;
  --sig-cream:#F6E9D2; --sig-gold:#E4A65C;
  position:relative;overflow:hidden;color:var(--sig-cream);
  /* De header staat nu altijd vast bovenaan en dekt ~78px af. Met de oude
     bovenmarge begon SIGNATURE op 14px en stond de titel op 159px: allebei tegen
     de rand geplakt en deels onder de header. Vandaar meer lucht boven, en de
     ghosts schuiven mee via een variabele zodat hun onderlinge afstand blijft. */
  --ghost-top:clamp(56px,7vw,120px);
  padding:clamp(150px,20vh,240px) 0 clamp(72px,10vh,120px);
  /* Geen harde snede meer. De sectie schuift --veer (160px) over het einde van
     de film, en haar bovenste 160px zijn een VEER: hetzelfde veld, maar met een
     masker van doorzichtig naar dekkend, zodat de film er doorheen schemert en
     het veld erin opkomt. De achtergrond zit daarom niet op de sectie zelf maar
     op twee kinderen (.veer en .bg) die samen precies dezelfde lagen tekenen;
     het script rekent cover-schaal en verloop om naar pixels, zodat er tussen
     die twee geen naad zit. Het masker staat op een element van 160px hoog en
     beweegt niet: dat kost niets. */
  --veer:220px;
  margin-top:calc(-1 * var(--veer));
  background:none;
}
#dishes .bg,#dishes .veer{position:absolute;left:0;right:0;z-index:0;pointer-events:none;
  background-color:var(--field);background-repeat:no-repeat}
#dishes .bg{top:var(--veer);bottom:0}
#dishes .veer{top:0;height:var(--veer);
  /* volledig dekkend vanaf 72%, anders is de veer op de naad met .bg nog een
     beetje doorzichtig (donkerder) en zie je daar een streep */
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 38%,#000 72%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 38%,#000 72%,#000 100%)}
@media (prefers-reduced-motion:reduce){#dishes{margin-top:0}#dishes .veer{mask-image:none;-webkit-mask-image:none}}
/* De korrel zit als achtergrondlaag IN .veer en .bg (zie het script), niet meer
   als aparte ::before over de hele sectie: die begon op de sectietop met een
   harde rand van +23 kleurwaarde over de film heen. Nu vervaagt de korrel mee
   met de veer. */
#dishes .ghost{position:absolute;left:0;right:0;z-index:0;text-align:center;
  pointer-events:none;user-select:none;font-family:var(--display);color:var(--field-ghost);
  font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 1;
  font-size:clamp(90px,20vw,300px);line-height:.82;letter-spacing:-.02em;
  text-transform:uppercase}
#dishes .g1{top:var(--ghost-top);opacity:.46}
/* Het tweede SIGNATURE is de waterspiegel van het eerste: dezelfde letters op
   hun kop, direct onder de basislijn van het bovenste woord, vervagend naar
   beneden en een fractie zachter — als een weerspiegeling in stil water. Het
   masker wordt vóór de spiegeling toegepast: doorzichtig aan de (pre-transform)
   bovenkant = na het kantelen doorzichtig aan de onderkant. Eén stil element,
   dus dit kost niets. */
#dishes .g2{top:calc(var(--ghost-top) + .82em - .04em);opacity:.20;
  transform:scaleY(-1);filter:blur(1.2px);
  mask-image:linear-gradient(to bottom,transparent 6%,rgba(0,0,0,.5) 50%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 6%,rgba(0,0,0,.5) 50%,#000 100%)}
#dishes .g3{bottom:clamp(120px,20vw,230px);opacity:.26}
#dishes .inner{position:relative;z-index:2}
#dishes .kicker{color:var(--sig-gold)}
/* De oude sectie was een grid met de kicker links en de boog rechts; dat was
   nog een flexrij, waardoor "FIVE REGULARS" onderaan links hing in plaats van
   boven de titel. Deze kop is een poster: alles onder elkaar, gecentreerd. */
#dishes .head{display:block;text-align:center;margin-bottom:clamp(44px,7vh,88px)}
#dishes h2{color:var(--sig-cream);font-size:clamp(34px,5.4vw,76px);margin-top:16px;
  text-wrap:balance}   /* anders valt "OUT" alleen op regel twee */
#dishes .arc{display:block;margin:24px auto 0}

.sigfield{position:relative;margin-top:clamp(34px,6vh,60px)}

/* ---------- z-index-ladder ----------
   Een gerecht ligt altijd boven elk ornament. Van onder naar boven:
     0  gouden halen
     1  takken die van buiten binnenkomen
     2  satellieten (specerijen, blad, bakjes) — binnen hun eigen bord
     3  het gerecht zelf
     4  het label
   De .sig-blokken krijgen bovendien een oplopende z-index in DOM-volgorde
   (--z), zodat ook een satelliet van een later gerecht nooit over een eerder
   bord valt. */
.sigswirl{position:absolute;z-index:0;width:auto;pointer-events:none;
  transform-origin:center}

/* takken komen van buiten het veld naar binnen en worden afgesneden */
.branch{position:absolute;z-index:1;height:auto;pointer-events:none}

.sig{position:absolute;z-index:var(--z,10);width:var(--w);will-change:transform}
/* de borden komen van de zijkant binnen in plaats van van onder */
.sig[data-rv].rv-left{transform:translate(-90px,20px) rotate(-5deg)}
.sig[data-rv].rv-right{transform:translate(90px,20px) rotate(5deg)}
.sig[data-rv].rv-left.van-boven{transform:translate(-90px,-20px) rotate(-5deg)}
.sig[data-rv].rv-right.van-boven{transform:translate(90px,-20px) rotate(5deg)}
.sig[data-rv].in,.sig[data-rv].in.van-boven{transform:none}
.sig[data-rv]{transition-duration:1.3s,1.3s}
.sig .plate{position:relative}

/* Beide schaduwen moeten ONDER de onderrand van het beeld uitkomen. Zaten ze
   binnen de doos (bottom:1%), dan verstopte het gerecht ze volledig: de doos is
   precies zo groot als de uitsnede. Vandaar de negatieve bottom.
   Omgevingsschaduw: breed en zacht, geeft de massa. */
/* Schaduwen zonder filter:blur — een blur-filter op een element dat beweegt
   (reveal, hover) wordt elke frame opnieuw gerenderd. De zachtheid zit nu in het
   verloop zelf: bredere uitloop, geen harde stops. */
.sig .plate::before{content:"";position:absolute;left:-14%;right:-14%;bottom:-24%;
  height:56%;z-index:0;
  background:radial-gradient(50% 50% at 50% 46%,rgba(26,9,2,.42) 0%,rgba(26,9,2,.22) 30%,rgba(26,9,2,.06) 62%,transparent 85%)}
/* contactschaduw: twee gestapelde verlopen in één laag. De strakke donkere kern
   is wat het bord op de tafel legt; de bredere plas eromheen maakt de overgang.
   Naar rechtsonder verschoven, want het licht komt in al deze foto's van
   linksboven. */
.sig .plate::after{content:"";position:absolute;left:9%;right:3%;bottom:-11%;
  height:26%;z-index:0;
  background:
    radial-gradient(40% 38% at 53% 46%,rgba(12,4,0,.85) 0%,rgba(12,4,0,.45) 40%,transparent 75%),
    radial-gradient(72% 62% at 55% 50%,rgba(20,8,2,.5) 0%,rgba(20,8,2,.18) 50%,transparent 85%)}
.sig .dish{position:relative;z-index:3;width:100%;height:auto;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}

/* ---------- stoom: warmte die van het gerecht komt ----------
   Drie vooraf gerenderde slierten (webp met alpha, geen filter, geen blend),
   elk met een eigen tempo en eigen zwaai. Alleen transform en opacity, dus
   geen herrender per frame; ze lopen pas als het bord binnen is (.in) en staan
   stil zolang het buiten beeld is. */
.sig .stoom{position:absolute;z-index:4;pointer-events:none;width:56%;height:auto;
  left:22%;bottom:22%;opacity:0;transform-origin:50% 100%;will-change:transform,opacity;
  animation:stoom 6.5s linear infinite paused}
.sig.in .stoom{animation-play-state:running}
.sig .stoom.s1{left:14%;animation-duration:6.9s;animation-delay:-1.1s;--zw:-7%}
.sig .stoom.s2{left:26%;width:62%;animation-duration:7.8s;animation-delay:-4.3s;--zw:6%}
.sig .stoom.s3{left:36%;width:50%;animation-duration:6.1s;animation-delay:-2.6s;--zw:-3%}
@keyframes stoom{
  0%  {opacity:0;transform:translate(0,22%) scale(.6,.55)}
  16% {opacity:.6}
  55% {opacity:.48;transform:translate(var(--zw,0%),-24%) scale(1,1)}
  100%{opacity:0;transform:translate(calc(var(--zw,0%) * 1.9),-72%) scale(1.45,1.25)}
}
@media (prefers-reduced-motion:reduce){.sig .stoom{display:none}}

/* ---------- hover: het bord komt van tafel ----------
   Het bord tilt 10px op en draait een graad, de contactschaduw wordt breder en
   zachter (hij staat verder van de tafel), de omgevingsschaduw dieper, en de
   satellieten drijven een paar procent naar buiten — elk een andere kant op,
   zodat het als diepte leest en niet als schaal. Niets verspringt: alles is
   transform en opacity. Alleen met een echte muis (hover:hover), op touch niet. */
.sig .plate::before,.sig .plate::after{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s ease}
.sat{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.sig .lab{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.sig .pr{transition:color .4s ease}
@media (hover:hover) and (pointer:fine){
  .sig:hover .dish{transform:translateY(-10px) rotate(-1deg) scale(1.025)}
  .sig.l:hover .dish{transform:translateY(-10px) rotate(1deg) scale(1.025)}
  .sig:hover .plate::before{transform:scale(1.12);opacity:.85}
  .sig:hover .plate::after{transform:translateY(6px) scaleX(1.08);opacity:.55}
  .sig:hover .sat:nth-of-type(1){transform:translate(-4%,-5%) rotate(calc(var(--rot,0deg) - 4deg))}
  .sig:hover .sat:nth-of-type(2){transform:translate(4%,-3%) rotate(calc(var(--rot,0deg) + 5deg))}
  .sig:hover .sat:nth-of-type(3){transform:translate(3%,5%) rotate(calc(var(--rot,0deg) - 3deg))}
  .sig:hover .lab{transform:translateY(-4px)}
  .sig:hover .pr{color:var(--sig-gold)}
}

/* satellieten hangen aan het bord, maten in procenten daarvan, en liggen er
   altijd achter */
.sat{position:absolute;z-index:2;height:auto;pointer-events:none;transform:rotate(var(--rot,0deg))}

.sig .lab{position:absolute;top:var(--lt);white-space:nowrap;z-index:4}
.sig.r .lab{left:calc(100% + clamp(18px,2.4vw,40px));text-align:left}
.sig.l .lab{right:calc(100% + clamp(18px,2.4vw,40px));text-align:right}
.sig .nm{display:block;font-size:clamp(12px,1.05vw,15px);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sig-cream)}
.sig .pr{display:block;margin-top:7px;font-family:var(--sans);font-weight:600;font-size:15px;
  color:var(--sig-gold)}
.sig .ds{display:block;margin-top:9px;font-size:12.5px;line-height:1.5;
  color:rgba(246,233,210,.7);max-width:24ch;white-space:normal;letter-spacing:.01em}
.sig.l .ds{margin-left:auto}

#dishes .foot{position:relative;z-index:3;text-align:center;
  margin-top:clamp(40px,6vh,72px)}
#dishes .foot .pill{border-color:var(--sig-cream);color:var(--sig-cream)}
#dishes .foot .pill:hover{background:var(--sig-cream);color:var(--field-deep)}

/* ---------- tablet en mobiel ----------
   Eén kolom. De satellieten blijven staan: ze zitten in .plate en schalen mee,
   dus het cluster blijft intact. De gouden haal blijft ook: gecentreerd en
   breder dan het scherm, zodat hij als veeg door de kolom zakt. */
@media (max-width:1023px){
  .sigfield{height:auto !important;display:flex;flex-direction:column;
    gap:clamp(56px,9vh,92px);align-items:stretch;overflow:visible}
  .sigswirl{left:50% !important;top:5% !important;height:auto !important;width:150vw;
    transform:translateX(-50%);opacity:.42 !important}
  .sig{position:static !important;width:auto !important;
    display:flex;flex-direction:column;gap:18px}
  .sig .plate{width:min(76%,360px)}
  .sig.l .plate{margin-left:auto}
  .sig .lab{position:static;white-space:normal;text-align:left !important}
  .sig.l .lab{text-align:right !important}
  .sig .ds{max-width:32ch}
  /* satellieten die ver buiten het bord hangen naar binnen halen, anders vallen
     ze buiten de viewport */
  .sat{max-width:34%}
}
@media (max-width:560px){
  .sig .plate{width:88%}
  .sig.l .plate{margin-left:12%}
  .sig .lab,.sig.l .lab{text-align:left !important}
  .sig.l .ds{margin-left:0}
}

/* takken op mobiel: kleiner, en nog steeds van buiten naar binnen */
@media (max-width:1023px){
  .b-leaf-branch-b{width:190px !important;right:calc(-30px - (100vw - 100%)/2) !important;top:-64px !important}
  .b-leaf-branch-a{width:200px !important;left:calc(-26px - (100vw - 100%)/2) !important;top:76% !important}
}

/* kaart, lichte sectie */
#menu .head{text-align:center;margin-bottom:clamp(30px,5vh,54px)}
#menu h2{font-size:clamp(34px,5vw,72px)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:0 auto clamp(44px,7vh,76px);max-width:820px}
.tab{position:relative;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-radius:999px;padding:9px 16px;border:1px solid var(--line-ink);
  color:var(--ink);background:transparent;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s}
/* raakvlak 44px hoog zonder de knop groter te tekenen */
.tab::before{content:"";position:absolute;inset:-8px 0}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;align-content:start;
  gap:clamp(18px,2.4vw,40px) clamp(36px,6vw,96px);max-width:1080px;margin:0 auto}
@media (max-width:820px){.menu-grid{grid-template-columns:1fr}}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding-bottom:14px;border-bottom:1px dotted var(--line-ink)}
.item h4{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.2;
  letter-spacing:-.005em}
.item .price{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--gold-deep);
  white-space:nowrap;border-bottom:1px dotted var(--gold-deep);align-self:start}
.item p{grid-column:1 / -1;font-size:13.5px;line-height:1.55;
  color:rgba(11,8,6,.62);max-width:44ch}
.item.cat-note{display:block;grid-column:1 / -1;border:0;padding:0;text-align:center;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.item .price small{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(11,8,6,.55)}
/* Een gerecht met een eigen foto: klein en rond vóór de naam, de omschrijving schuift mee onder de naam.
   Een gerecht zonder foto blijft precies zoals hierboven. */
.item.has-img{grid-template-columns:auto 1fr auto;column-gap:16px}
.item .dish-img{grid-row:1 / span 2;align-self:start;width:72px;height:72px;border-radius:50%;overflow:hidden;
  background:rgba(11,8,6,.05);box-shadow:0 0 0 1px var(--line-ink),0 8px 18px -10px rgba(11,8,6,.45)}
.item .dish-img picture{display:block;height:100%}
.item .dish-img img{display:block;width:100%;height:100%;object-fit:cover}
.item.has-img p{grid-column:2 / -1}
@media (max-width:820px){.item .dish-img{width:60px;height:60px}}
.menu-note{max-width:56ch;margin:clamp(40px,6vh,72px) auto 0;text-align:center;
  font-size:13.5px;color:rgba(11,8,6,.66)}
.tbd{color:var(--gold-deep);border-bottom:1px dotted var(--gold-deep)}
.light .tbd{color:var(--gold-deep)}

/* De tafel als sluitstuk van de kaart. Twee dingen doen het werk:
   het VERLOOP van de band zelf dooft de creme naar exact het zwart van de
   volgende sectie, en het MASK dooft de onderkant van de foto weg, zodat het
   blad in dat zwart oplost in plaats van op een rand te eindigen.
   De negatieve ondermarge heft de sectiepadding op, anders blijft er een strook
   creme tussen de band en de volgende sectie staan. */
.menu-foot{position:relative;overflow:hidden;pointer-events:none;
  margin-top:clamp(46px,7vh,92px);
  margin-bottom:calc(-1 * clamp(96px,15vh,190px));
  padding-top:clamp(12px,2.4vw,40px);
  /* Het beeld dooft zelf uit (ingebakken smoothstep-alpha), dus dit verloop hoeft
     alleen te zorgen dat er ZWART achter zit op het moment dat de foto
     doorschijnend wordt.
     173deg = 6,8 graden uit het lood, gelijk aan de gemeten hoek van de tafelrand
     (-0,1191 = -6,8°, afgelezen uit de alpha-grens van de foto zelf, mediane
     afwijking 1px over 119 meetpunten). Zo loopt de
     uitdoving MET de tafel mee in plaats van er dwars doorheen.
     De stops staan lager dan bij een recht verloop omdat een gedraaid
     linear-gradient zijn stops langs een langere as meet: |b·sin| + |h·cos|. */
  background:linear-gradient(173deg,
    transparent 0%, transparent 55%,
    rgba(11,8,6,.60) 66%, var(--ink) 76%)}
/* Geen vaste bandhoogte: die volgt uit het beeld. Met een vaste hoogte snijdt
   hij bij sommige breedtes de bovenkant af — een harde rand door de naanmand.
   De min-width zorgt dat het beeld op kleine schermen niet verschrompelt maar
   aan de zijkanten wordt afgesneden; overflow:hidden vangt dat op.
   Het mask van eerder is weg: een lineaire CSS-ramp knikt aan begin en eind, en
   dat was precies de zichtbare band. De uitdoving zit nu in het bestand. */
.menu-foot img{display:block;width:100%;min-width:820px;height:auto;
  margin-left:50%;transform:translateX(-50%)}
/* De verdonkering naar rechts zit in het BESTAND, niet hier. Als CSS-laag met
   inset:0 tintte hij ook de creme boven de tafelrand mee — van 243,234,219 links
   naar 152,145,135 rechts, en dat las als een vreemd grijs verloop boven de foto.
   Ingebakken raakt hij alleen de pixels van het blad. */

/* vuur / methode */
/* De tandoor-ets (door de klant aangeleverd, wit op zwart; hier omgezet naar
   transparant, randen koper en hoogste lichten goud) staat rechtsonder in de
   sectie, achter de tekst, zakt een stuk onder de rand en vervaagt naar de
   randen toe zodat hij in het zwart opgaat. */
#method{overflow:hidden}
#method .wrap{position:relative;z-index:1}
#method .tandoor{position:absolute;z-index:0;right:clamp(24px,5vw,90px);bottom:-6%;
  width:clamp(300px,32vw,470px);height:auto;opacity:.72;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 28%,transparent 96%);
  mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 28%,transparent 96%)}
@media (max-width:820px){
  #method .tandoor{right:-6%;transform:none;width:min(70%,320px);bottom:-4%;opacity:.6}
}
#method .steps{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,4vw,64px);margin-top:clamp(44px,7vh,84px)}
@media (max-width:820px){#method .steps{grid-template-columns:1fr;gap:44px}}
#method .num{font-family:var(--dev);font-size:clamp(46px,5vw,74px);line-height:1;
  color:var(--gold);opacity:.9}
#method .steps h3{margin-top:18px;font-size:clamp(22px,2.15vw,32px);white-space:nowrap}
#method .steps p{margin-top:10px;font-size:14.5px;color:rgba(243,234,219,.68);max-width:36ch}
#method blockquote{margin-top:clamp(60px,9vh,120px);font-family:var(--serif);
  font-weight:400;text-transform:none;
  font-size:clamp(26px,3.4vw,46px);line-height:1.18;max-width:26ch}
#method blockquote em{color:var(--gold)}


/* bezoek */
#visit{overflow:hidden}
#visit .ghost{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  font-family:var(--dev);font-size:clamp(190px,30vw,520px);line-height:.8;
  color:var(--paper);opacity:.04;pointer-events:none;user-select:none;white-space:nowrap}
#visit .inner{position:relative;z-index:2}
#visit h2{font-size:clamp(40px,6vw,96px);max-width:16ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,60px);
  margin-top:clamp(46px,7vh,88px)}
@media (max-width:820px){.facts{grid-template-columns:1fr;gap:32px}}
.facts dt{font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.facts .muted{color:rgba(243,234,219,.5)}
.facts dd{font-size:15px;line-height:1.75;color:rgba(243,234,219,.82)}
.actions{margin-top:clamp(40px,6vh,72px);display:flex;gap:12px;flex-wrap:wrap}

/* footer */
footer{padding:clamp(50px,7vh,86px) 0 calc(40px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line)}
footer .row{display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  justify-content:space-between}
footer .fnav{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.7}
footer .fnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
footer .small{margin-top:30px;font-size:12.5px;color:rgba(243,234,219,.55);
  display:flex;flex-wrap:wrap;gap:18px}
footer .brand{font-family:var(--display);font-weight:700;font-size:21px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* alleen voor schermlezers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* skip-link: onzichtbaar tot hij focus krijgt */
.skip{position:fixed;left:16px;top:-60px;z-index:1000;padding:12px 18px;border-radius:999px;
  background:var(--gold);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;
  text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
/* pillen en telefoonlinks minimaal 44px raakvlak */
.pill{min-height:44px}
.facts a{display:inline-block;padding:10px 0;margin:-10px 0}