/* ============================================================================
   ZINE — het blad van de site. Begon als de stylesheet van één homepage en
   draagt nu elke pagina die tekst heeft: thuis, producten, recepten, elk
   recept, over ons en contact. Elk van die pagina's legt er haar eigen blad
   naast (thuis.css, zine-shop.css, recept.css, …) voor wat alleen daar staat.
   Laadt naast css/fonts.css. Laadt NIET style.css / pages.css.
   Ramadhan Mubarok wordt hier bewust niet gebruikt en niet gepreload (spec §3.1).
   Letters: Ramadhan Mubarok (de merkregel) · Amiri (Latijn 400, verfijnd
   klein) · Roboto (al het andere).
   ========================================================================= */

/* ── 1. RESET ─────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
/* clip, niet hidden: clip maakt geen scrollcontainer, dus position:sticky
   blijft aan de viewport hangen. Zowel op html als op body, want de
   doorgifte van body naar de viewport is niet overal betrouwbaar. */
body,h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0}
/* koppen krijgen hun maat uitsluitend van een typeklasse: de UA-maat
   (1.5em / bold) zou anders in het typografische gat vallen. */
h1,h2,h3{font-size:1rem;font-weight:400;line-height:inherit}
/* Geen los woord op de laatste regel: "is" in zijn eentje onder een alinea
   leest als een fout, niet als tekst. */
p,li,dd,figcaption{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}


/* ── 2. KLEURSYSTEEM ──────────────────────────────────────────────────────
   Alle contrastwaarden zijn berekend (WCAG 2.1 relatieve luminantie), niet
   geschat. De gebruiksbeperking staat achter elke waarde en is bindend.
   ──────────────────────────────────────────────────────────────────────── */

:root{
  --inkt:#12251A;
  /* Diepste groen. Geen paginagrond meer: de pagina is één kleur en de
     grondmorph is eruit. Blijft in gebruik voor de donkere vakken in het
     sluitraster, de duotoon over de horizonfoto en als tekstkleur op lichte
     op het kleed. NOOIT als tekstkleur op groen. */

  --bos:#2A5731;
  /* Het merkgroen, en sinds de grondmorph eruit is de enige paginagrond:
     body draagt het permanent, elke sectie is er transparant overheen.
     --vanille erop 6,79:1 · --goud 6,24:1 · --wit 8,38:1. */

  --vanille:#DFEDC0;
  /* Zest VANILLA ICE. Alle kalligrafie en alle koppen op groen.
     10,89:1 op --bos · 13,15:1 op --inkt. De enige kleur die groot mag. */

  --vanille-zacht:#C9DBAF;
  /* Lopende tekst, alle kleine labels, kickers, bijschriften, indexcijfers en
     navigatie op groen. Een echte kleurwaarde, GEEN --vanille met opacity.
     Opnieuw gemeten toen --bos lichter werd: 5,69:1 op --bos · 10,94:1 op
     --inkt. Overal toegestaan. */

  --vanille-stil:#A5BD92;
  /* De derde trede van de vanilletrap, niet een vierde kleur. Uitsluitend
     voor de stilste labels — de hoofdstuknummers, de aantallen, de
     veldnamen, de plaatshouder.
     7,90:1 op --inkt · 4,11:1 op --bos -> niet op groen. Nooit lopende tekst. */

  --goud:#F9DE60;
  /* De derde kleur. Vervangt boter, amber en amber-diep in één keer:
     de focusring, de knoponderlijn, de navigatie-hairline, het ruitje,
     één woord in het manifest, de warme laag over de horizonfoto, het
     artikelcodeblok op de assortimentspagina.
     12,55:1 op --inkt · 10,42:1 op --bos. Draagt --inkt-tekst op 12,55:1.
     NOOIT tekst op wit (1,53:1) en nooit tekst op vanille. */

  --wit:#FFFFFF;
  /* Vervangt de botkleur. Het kleedpaneel.
     Nooit als paginagrond, altijd als paneel of vlak.
     Tekst erop is --inkt (16,42:1). */

  /* ── typografie ───────────────────────────────────────────────────────
     Latijn: er bestaat op deze pagina geen tekst tussen 1,3rem en 1,7rem.
     Dat gat dwingt elk stuk Latijn in de rol van fluisteren of van kop. */
  --ar-mega:clamp(6rem,24vw,20rem);
  --ar-mini:1.05rem;

  --nl-groot:clamp(2.4rem,7vw,5.2rem);
  --nl-manifest:clamp(1.45rem,2.55vw,2.35rem);
  --nl-kop:clamp(1.7rem,3vw,2.4rem);
  --nl-body:clamp(1.05rem,.6vw + .9rem,1.3rem);
  --label:.92rem;
  --label-mini:.9rem;
  --knop:1rem;

  /* ── ronding ──────────────────────────────────────────────────────────
     Twee maten en niet meer. --rond is het blok zelf: een kaart, een paneel,
     een plaat. --rond-in is wat er op dat blok ligt, en die is kleiner --
     dezelfde ronding binnen een ronding leest als een sticker, een kleinere
     leest als een lijst om een foto. Allebei klein: het gaat erom dat de hoek
     niet scherp is, niet dat hij rond is. */
  --rond:14px;
  --rond-in:9px;

  /* ── ruimte ───────────────────────────────────────────────────────── */
  --breed:min(1360px,100% - 2 * clamp(1.5rem,6vw,5rem));
  --gap:clamp(1rem,2vw,2rem);
  --rand:clamp(10px,1.4vw,18px);      /* de zichtbare groene lijst rond het kleed */
  --lucht:clamp(3rem,7vh,5.5rem);
  --uitgang:clamp(1.8rem,4vh,2.8rem);   /* boven de knop van een sectie */
  --lucht-groot:clamp(3.5rem,9vh,6.5rem);
  --lucht-stil:clamp(2.5rem,6vh,4rem);

  --ease-ui:cubic-bezier(.2,.8,.3,1);

  /* Eén gradatie voor alle fotografie. Bewust bijna niets: elke ontkleuring
     legde een grijze waas over het eten. Alleen een tikje contrast. */
  --foto:contrast(1.03);
}


/* ── 3. BASIS ─────────────────────────────────────────────────────────── */

body{
  background-color:#2A5731;          /* --bos, permanent. Eén grond, nooit getweend. */
  /* De grond is een plank: groen gebeitst hout met de nerf in de lengte van
     de pagina, alsof de site erop ligt. Eén tegel van 1200 px die naadloos
     herhaalt (tools/schetsen/hout.html maakt hem). Hij scrollt mee, want een
     plank ligt stil onder wat erop ligt. Nergens lichter dan --bos, alleen
     donkerder, dus lichte tekst verliest nergens contrast. */
  background-image:url(../assets/img/hout-bos.webp);
  background-size:1200px auto;
  color:var(--vanille-zacht);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--nl-body);
  font-weight:300;
  line-height:1.8;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.wrap{width:var(--breed);margin-inline:auto}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

.vh{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;font-size:1rem;
}
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:99;
  padding:.9rem 1.4rem;
  background:var(--vanille);color:var(--inkt);
  font-size:var(--label);font-weight:500;letter-spacing:.04em;
  text-decoration:none;
  transition:top .2s var(--ease-ui);
}
.skip:focus{top:1rem}

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


/* ── 4. TYPOGRAFIE ────────────────────────────────────────────────────── */

/* Arabisch — Amiri 400, NOOIT 700, letter-spacing altijd normal,
   line-height >=1.4 (meerwoordig >=1.55), nooit text-transform. */
.ar-mega{font-size:var(--ar-mega);line-height:1.4}
.ar-mini{font-size:var(--ar-mini);line-height:1.6}

/* Amiri Latin 400 rechtop — exact twee taken, één register.
   Er bestaat geen Amiri-italic, dus nergens font-style:italic. */
.amiri-lat{font-family:'Amiri',serif;font-weight:400;font-style:normal}
.lockup{font-size:.86rem;letter-spacing:.34em;line-height:1.6;color:var(--vanille-zacht)}
.herkomst{font-size:1.05rem;letter-spacing:.06em;color:var(--vanille-zacht)}

.nl-groot{font-size:var(--nl-groot);font-weight:200;line-height:1.05;letter-spacing:-.03em}
.nl-manifest{font-size:var(--nl-manifest);font-weight:250;line-height:1.28;letter-spacing:-.018em}
.nl-kop{font-size:var(--nl-kop);font-weight:400;line-height:1.25;letter-spacing:-.015em}
.nl-body{font-size:var(--nl-body);font-weight:300;line-height:1.8;max-width:54ch}

.kicker,.label{
  font-size:var(--label);font-weight:500;line-height:1.4;
  letter-spacing:.04em;
  color:var(--vanille-zacht);
}
/* Het sectienummer. Het stond als "01 — Met aandacht gekozen" in de tekst,
   met een streepje ertussen; nu is het een eigen element. Dat scheelt niet
   alleen het streepje: het nummer is geen woord in de zin maar een merk in de
   marge, en het mag dus een eigen kleur hebben zonder dat de kop tweekleurig
   wordt. Cijfers op vaste breedte, anders staan 01 en 04 niet even ver van de
   titel af. */
.kicker__n{
  font-style:normal;
  color:var(--goud);
  margin-right:.75em;
  font-variant-numeric:tabular-nums;
}
.label-mini{
  font-size:var(--label-mini);font-weight:500;line-height:1.3;
  letter-spacing:.03em;
  color:var(--vanille-zacht);
}


/* ── 5. COMPONENTEN ───────────────────────────────────────────────────── */

/* Hairline — 1px, groeit altijd in met scaleX vanuit een vaste oorsprong. */
.lijn{
  display:block;
  height:1px;
  width:var(--lijn-b,100%);
  background:var(--vanille);
  opacity:.22;
  transform-origin:left center;
  border:0;
}
.lijn[data-lijn="rechts"]{transform-origin:right center}
.lijn[data-lijn="midden"]{transform-origin:center center}
.lijn--licht{opacity:.5}
.lijn--sterk{opacity:.35}

/* Ruitje — het enige ornament op de hele pagina. */
.ruit{
  display:block;width:6px;height:6px;
  background:var(--goud);
  transform:rotate(45deg);
  flex:none;
}

/* Tekstlink */
.tekstlink{
  display:inline-block;
  text-decoration:none;
  color:var(--vanille-zacht);
  font-size:var(--label);font-weight:500;
  letter-spacing:.04em;
  /* .55 en niet .35: met de regelhoogte erbij komt het raakvlak zo op 44 px,
     de maat van een vingertop. Op .35 was het 40 en dat mist een duim. */
  padding-block:.55rem;
  border-bottom:1px solid currentColor;
  border-color:rgba(198,191,164,.35);   /* --vanille-zacht op 35 % */
  transition:border-color .3s var(--ease-ui);
}
.tekstlink:hover{border-color:currentColor}
.tekstlink .pijl{display:inline-block;margin-left:.4em;transition:transform .35s var(--ease-ui)}
.tekstlink:hover .pijl{transform:translateX(6px)}

/* .navlink staat onderaan, bij NAVIGATIE. */

/* ── Knoppen ──────────────────────────────────────────────────────────────
   Elke uitgang naar een andere pagina was een .tekstlink: een woord met een
   haarlijn eronder en een pijltje. Dat is netjes en het valt niet op, en op
   een pagina waar de helft van het werk "ga hierheen" is, is niet opvallen
   het verkeerde antwoord. Het zijn nu pillen.

   Goud draagt --inkt op 12,55:1 en is de enige kleur die op dit groen harder
   roept dan vanille. Één gouden pil per sectie: de uitgang. Staat er een
   tweede knop naast, of zit er een in een kaart waarvan er drie naast elkaar
   staan, dan is die stil -- dezelfde vorm, geen vlak. Drie keer goud naast
   elkaar is drie keer hetzelfde roepen en dan roept niets meer.

   999px en geen eigen maat: een pil is zo rond als hij hoog is, wat er ook
   in staat. Dat is de enige plek op deze site waar dat mag -- de blokken
   hebben hun eigen twee maten. */
.pil,
.knop{
  position:relative;
  display:inline-flex;align-items:center;gap:.55em;
  padding:.82em 1.55em;
  border-radius:999px;border:0;
  text-decoration:none;
  background:var(--goud);color:var(--inkt);
  font-size:var(--knop);font-weight:600;line-height:1.15;
  letter-spacing:.01em;
  transition:transform .3s var(--ease-ui),
             box-shadow .3s var(--ease-ui),
             background .3s var(--ease-ui);
}
.pil .pijl,
.knop .pijl{transition:transform .35s var(--ease-ui)}
.pil:hover,
.knop:hover{transform:translateY(-2px);box-shadow:0 .7rem 1.6rem rgba(9,20,12,.38)}
.pil:hover .pijl,
.knop:hover .pijl{transform:translateX(5px)}
.pil:focus-visible,
.knop:focus-visible{outline:2px solid var(--vanille);outline-offset:3px}

/* ── Het bloempatroon op de knop ──────────────────────────────────────────
   Bij het aanwijzen komt er een patroon op de pil: dezelfde bloem, hetzelfde
   blad en dezelfde knop als in de goot van elke sectie, als masker over een
   vlak in één kleur. Het schuift er langzaam doorheen zolang je erop staat,
   want een patroon dat stilstaat is een textuur en een patroon dat beweegt is
   een uitnodiging.

   Het ligt ónder de tekst (z-index 0 tegen 1) en het is geknipt op de pil
   zelf, dus de ronding hoeft niet herhaald te worden. --bloem is de kleur:
   inkt op goud, vanille op de stille. */
.pil,
.knop{overflow:hidden;isolation:isolate}
.pil > *,
.knop > *{position:relative;z-index:1}
.pil::before,
.knop::before{
  content:"";position:absolute;inset:-25%;z-index:0;
  background:var(--bloem,var(--inkt));
  /* 46 en niet 84: een pil is een jaar of vijfenveertig pixels hoog, en met
     een tegel die groter is dan de knop zie je een stuk blad en geen
     patroon. Zo passen er twee bloemen boven elkaar in. */
  -webkit-mask:url(../assets/img/bloem-patroon.svg) repeat center / 46px 46px;
          mask:url(../assets/img/bloem-patroon.svg) repeat center / 46px 46px;
  opacity:0;
  transition:opacity .45s var(--ease-ui);
}
.pil:hover::before,
.pil:focus-visible::before,
.knop:hover::before,
.knop:focus-visible::before{
  opacity:.26;
  animation:bloemdrift 7s linear infinite;
}
/* De stille pil heeft geen vlak, dus een patroon erin hangt boven wat er
   toevallig achter staat -- op de herofoto zie je er niets van. Hij krijgt bij
   het aanwijzen een vulling om het patroon op te zetten, en dan mag het ook
   steviger. */
.pil--stil:hover::before,
.pil--stil:focus-visible::before{opacity:.34}
@keyframes bloemdrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-46px,-46px,0)}
}

/* ── De wolk bloemen ──────────────────────────────────────────────────────
   De laag waar js/bloei.js in werkt. Vast aan het scherm en niet aan de
   pagina, want de coordinaten komen uit een muisgebeurtenis en die zijn ook
   ten opzichte van het scherm. Nergens aanwijsbaar, nergens leesbaar, en
   boven alles behalve de kop. */
.bloeilaag{
  position:fixed;inset:0;z-index:70;
  pointer-events:none;overflow:hidden;
}
.bloei{position:absolute;left:0;top:0;will-change:transform}
.bloei > span{display:block;will-change:transform,opacity}
.bloei svg{display:block;fill:currentColor}

/* ── De overgang van pagina naar pagina ───────────────────────────────────
   Heen: de oude pagina wijkt naar achteren (kleiner, donkerder, met ronde
   hoeken, als een kaart die je opzij legt) en de nieuwe schuift er van
   onderen overheen. Terug: precies andersom, de pagina zakt weg en de vorige
   komt weer naar voren. js/overgang.js zegt welke kant (heen of terug) en
   welk pak er meevliegt van kaart naar productpagina.

   De nieuwe pagina is meteen te zien terwijl ze binnenschuift: hier lag ooit
   een inktvlak dat eerst dichtging, en dat gijzelde de pagina. Dit niet.

   De kop doet niet mee. Die staat op elke pagina op dezelfde plek met
   dezelfde gouden band, en blijft dus staan terwijl de pagina eronder
   wisselt. Kan de browser dit niet, dan springt hij gewoon en komt de pagina
   alleen zacht binnen (html.vt-binnen, onderaan dit blok). */
@view-transition{navigation:auto}
.kop{view-transition-name:kop}

/* Wat achter de wijkende pagina zichtbaar wordt: de donkerste plank. */
::view-transition{background:#12251A}

/* Alleen verschuiven en vervagen: dat doet de grafische kaart zelf, ook op
   een telefoon. Er stonden ook een donkerfilter en een afgeronde uitsnede
   op, en op twee schermvullende beelden tegelijk haperde dat. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.6s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-fill-mode:both;
}
::view-transition-old(root){animation-name:vt-wijk;animation-timing-function:cubic-bezier(.4,0,.6,1)}
::view-transition-new(root){animation-name:vt-schuif}
html:active-view-transition-type(terug)::view-transition-old(root){z-index:1;animation-name:vt-zak}
html:active-view-transition-type(terug)::view-transition-new(root){animation-name:vt-terug;animation-timing-function:cubic-bezier(.22,1,.36,1)}

@keyframes vt-wijk  {to  {opacity:0;transform:translateY(-2.5vh) scale(.97)}}
@keyframes vt-schuif{from{opacity:0;transform:translateY(5vh)}}
@keyframes vt-zak   {to  {opacity:0;transform:translateY(5vh)}}
@keyframes vt-terug {from{opacity:0;transform:translateY(-2.5vh) scale(.97)}}

/* De kop blijft boven alles en wisselt alleen zijn inhoud (de streep onder
   de pagina waar je bent). */
::view-transition-group(kop){z-index:10}
::view-transition-old(kop),
::view-transition-new(kop){animation-duration:.3s}

/* Het pak dat meevliegt: dezelfde duur en dezelfde vaart als de pagina, en
   boven de pagina's maar onder de kop. */
::view-transition-group(pak){
  z-index:5;
  animation-duration:.6s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(pak),
::view-transition-new(pak){
  height:100%;object-fit:contain;
  animation-duration:.35s;
  animation-timing-function:ease-out;
}

/* Zonder overgangen tussen pagina's (Firefox): de pagina komt alleen zacht
   binnen. backwards en niet both: na afloop mag er geen transform op main
   blijven staan, anders worden vaste dingen erin ten opzichte van main
   geplaatst in plaats van het scherm. */
html.vt-binnen main,
html.vt-binnen #voet{animation:vt-binnen .6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes vt-binnen{from{opacity:0;transform:translateY(22px)}}

/* De stille: dezelfde vorm, geen vlak. */
.pil--stil{
  --bloem:var(--vanille);
  background:none;color:var(--vanille);
  box-shadow:inset 0 0 0 1px rgba(223,237,192,.45);
}
.pil--stil:hover,
.pil--stil:focus-visible{
  background:rgba(18,37,26,.55);
  box-shadow:inset 0 0 0 1px var(--vanille),0 .7rem 1.6rem rgba(9,20,12,.38);
}

/* De slotknop van een pagina is dezelfde pil, een maat groter. Hier zat een
   gouden haarlijn onder de tekst die vanuit het midden opengroeide; die lijn
   is er niet meer, en de tween erop in js/zine.js staat op een guard. */
.knop{padding:1.05em 2.2em;font-size:calc(var(--knop) * 1.06)}

/* Beeldkader — geen kader, geen radius, geen schaduw.
   Op groen een 1px --mos rand op 30 %, zodat een foto als plaat op het groen
   ligt en niet als gat in de pagina. */
.plaat{
  position:relative;
  overflow:hidden;
  border-radius:var(--rond);
  box-shadow:inset 0 0 0 1px rgba(223,237,192,.22);  /* --vanille op 22 % */
}
.plaat img{width:100%;height:100%;object-fit:cover;filter:var(--foto)}

/* Regelmasker — uitsluitend voor Latijn. Arabisch krijgt nooit overflow:hidden. */
.m{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.m__i{display:block}

/* Arabische maskerwrapper — clip-path, nooit overflow:hidden,
   en altijd padding-block .08em zodat het masker ruimer is dan de inkt. */
[data-onthul="ar"]{display:block;padding-block:.08em}
[data-onthul="lat"],[data-onthul="beeld"],[data-onthul="beeld-op"]{display:block}
/* de horizonband opent rechts-naar-links in het ritme van het Arabisch,
   maar is zelf geen Arabisch: geen maskerlucht, verhouding blijft 5/2 */

/* Een masker mag niet breder zijn dan de inkt die het onthult. Staat de tekst
   rechts of gecentreerd in een containerbrede doos, dan veegt het grootste
   deel van de clip-path over leeg vlak en is de leesrichting — het vaste
   gebaar van deze site — onzichtbaar: het woord ploft er in twee frames in.
   width:fit-content laat de doos om de inkt krimpen zonder het blokniveau op
   te geven (inline-block zou een regeldoos en een basislijnsprong opleveren).
   De opmaak blijft identiek: zonder JS staat alles op precies dezelfde plek. */
.merk__kop [data-onthul="lat"],
.sluiting__kop .sluiting__woord{width:fit-content;margin-inline:auto}


/* ── 6. SECTIES ───────────────────────────────────────────────────────── */

main{display:block}
section{position:relative}

/* 6.1 #opening — de kop ───────────────────────────────────────────────── */

/* De kop en het menu staan in css/kop-voet.css. */

/* ── HET TONEEL ─────────────────────────────────────────────────
   Het eerste scherm is één beeld met drie lagen diepte: het uitzicht helemaal
   achteraan, de merkregel ertegenaan, en de tafel ervoor. Je zit aan tafel en
   kijkt uit — en op die tafel komt het eten te staan.

   Hier stond de kop met twee alinea's eronder en daaronder een band met de
   boomgaard. Die twee alinea's staan nu in §1b, onder het toneel: het eerste
   scherm moet in één oogopslag te lezen zijn, en dat kan niet als er ook nog
   honderdvijftig woorden op staan.

   DE HOOGTE IS EEN ONDERGRENS EN GEEN MAAT. 100svh, niet 100vh: op een
   telefoon is vh de hoogte mét de adresbalk, dus met vh zakt de tafel bij het
   laden precies de balk uit beeld. Groeit de kop op een laag scherm buiten die
   ondergrens, dan mag het toneel gewoon hoger worden; de tafel blijft
   onderaan plakken.

   Het past op elke maat die er toe doet. Op 1440 bij 900: de boog van de kop
   hangt tot 132, de twee regels van de merkregel zijn samen 478 hoog, de
   kicker eronder 17 — samen 657 — en de tafel begint op 720. Drieënzestig
   pixels lucht ertussen. Op 1280 bij 800 is dat 48, op 1024 bij 768 is het
   125. */
#opening{
  position:relative;
  /* Één scherm min de kop: die staat in de gewone stroom bóven het toneel en
     eet dus zijn eigen hoogte op. Zonder die aftrek valt de tafel precies de
     kop-hoogte onder de vouw — dat stond er, en dan zie je van het eten de
     bovenste helft. */
  min-height:calc(100svh - var(--kophoogte,78px));
  display:flex;flex-direction:column;justify-content:center;
  /* Bovenlangs de boog van de kop (die hangt 71/60 van --kv-boog onder de
     balk uit), onderlangs de tafel. De tekst komt nooit onder de een of de
     ander. */
  padding-block:calc(var(--kv-boog,0px) * 71 / 60 + clamp(1rem,3vh,2.2rem))
                calc(var(--toneel-tafel) + var(--toneel-balk) + clamp(1.2rem,3vh,2.2rem));
  /* Hoe hoog de tafel is en hoe ver hij het scherm uit loopt. Beide horen bij
     de foto die erin staat: komt er een andere tafel, dan zijn dit de twee
     knoppen. --uitzicht-plek is de uitsnede van het uitzicht — welk deel van
     de foto in beeld blijft als hij bijgesneden wordt. */
  --toneel-tafel:clamp(130px,24vh,300px);
  /* Hoeveel de tafel en de balk het scherm uit lopen, als kaal getal — want
     uit een percentage valt geen hoogte te rekenen. --toneel-breed blijft
     bestaan als de breedte zelf, want zo wordt hij overal gebruikt. */
  --toneel-over:1.12;
  --toneel-breed:calc(var(--toneel-over) * 100%);
  /* De balk is 2139 bij 201, en hij ligt net als de tafel op --toneel-breed
     van het scherm. Zijn hoogte is dus die breedte maal 201/2139 — met een
     bovengrens, want op een heel breed scherm wordt een evenredige plank een
     schot van tweehonderd pixels. */
  /* Geen balk, tenzij het toneel eronder ligt — zie .toneel hieronder.
     #opening staat ook op contact en recepten, en daar is geen tafel om
     een rand onder te leggen. */
  --toneel-balk:0px;
  --uitzicht-plek:center 66%;
  --uitzicht-breed:125%;
}

/* Alleen de thuispagina heeft het toneel, en dus de balk.
   <section id="opening" class="toneel"> */
#opening.toneel{
  /* De hoogte van de balk, en dat is een minimum van drie dingen.

     Zijn eigen maat: 2139 bij 201, op --toneel-over van het scherm. 100vw
     telt de schuifbalk mee en daar is dit bestand elders streng in — maar dat
     geldt voor breedtes, want die veroorzaken een horizontale schuif. Dit is
     een hóógte; het ergste wat de schuifbalk doet is de balk anderhalve pixel
     te dik maken.

     Een bovengrens, want op een heel breed scherm wordt een evenredige plank
     een schot van tweehonderd pixels.

     En de ruimte die er nog is. Op een breed maar laag venster — 1440 bij 600
     — vullen de kop en de tafel het scherm al bijna, en dan valt de onderrand
     van de balk eronder. Juist die rand is de overgang, dus die moet in beeld
     blijven. 60vh-330px is geen afleiding maar een gemeten grens: hij komt uit
     een proef die per schermmaat opzoekt hoeveel balk er nog bij kan. Hij
     bijt alleen op 1440x600 (30 px) en 1440x700 (90 px); overal elders wint
     de eigen maat. tools: scratchpad/balk-past.js bewaakt het. */
  --toneel-balk:min(calc(100vw * var(--toneel-over) * 201 / 2139),
                    104px,
                    max(28px, calc(60vh - 330px)));
}

/* De diepte: het uitzicht en de waas erover. Van rand tot rand en niet in de
   kolom — een uitzicht dat in een kader staat is een foto, een uitzicht dat
   het scherm vult is een uitzicht. */
/* De diepte: het uitzicht en de waas erover. Van rand tot rand en niet in de
   kolom — een uitzicht dat in een kader staat is een foto, een uitzicht dat
   het scherm vult is een uitzicht.

   HET UITZICHT STAAT BREDER DAN HET SCHERM EN TEGEN DE LINKERRAND, en dat is
   geen truc maar het antwoord op de foto zelf. Die foto is een laan: hij is
   overal donker — tussen de 5 en de 20 op honderd — behalve in één smalle
   verticale strook op 42 tot 58 % van de breedte, waar de zon door de bomen
   staat en de helderheid naar 45 springt. Precies daar staat "Middle East",
   en goud op een zon is licht op licht.

   Met 128 % breedte tegen de linkerrand schuift die strook naar 64 % van het
   scherm — voorbij het einde van de kop. De tekst staat dan op het donkere
   deel en de zon staat ernaast in plaats van erachter, en dat scheelt meer
   dan elke waas kan goedmaken. De compositie wordt er ook beter van: de kop
   links, het licht rechts. */
.toneel__diepte{position:absolute;inset:0;overflow:hidden;z-index:0}
/* Het uitzicht houdt op waar de tafel begint, met een vijfde van het blad
   als overlap zodat er nooit een naad tussen hout en foto valt. Eerst liep
   de foto door tot onder de balk, en dan stond de tafel precies op wat je
   wilde zien: de laan, de stammen en het gras. Nu staat de tafel vóór de
   boomgaard in plaats van erop, en de uitsnede (--uitzicht-plek, 66 %)
   houdt de zon bovenin en de voet van de stammen net boven het blad. */
/* Geen tafel meer: het uitzicht loopt door tot onder de balk. */
.toneel .toneel__diepte{bottom:calc(var(--toneel-balk) * .5)}
.toneel__uitzicht{
  /* max-width moet er expliciet af: regel 143 zet img{max-width:100%} voor de
     hele site, en dat knipt de 128 % terug naar 100. */
  width:var(--uitzicht-breed,100%);max-width:none;height:100%;display:block;
  object-fit:cover;object-position:var(--uitzicht-plek);
  filter:var(--foto);
}
/* De waas is er niet voor de sfeer maar voor de leesbaarheid, en de getallen
   zijn gemeten en niet gekozen — twee keer, want de eerste set was fout.

   Die eerste set had twee verlopen, van boven naar onder en van links naar
   rechts, en daar stond onder "Middle East" een contrast van 1,93 op 1. Dat
   is niet krap maar onleesbaar: wcag vraagt 3 voor grote letters en 4,5 voor
   gewone. De oorzaak is te zien op de foto — de zon staat precies achter dat
   woord, en goud op een ondergaande zon is licht op licht.

   Er is dus een derde verloop bij: een ovaal dat het leesvlak linksboven
   dempt, precies waar de merkregel en de kicker staan, en dat naar rechts
   helemaal wegvalt. Daarmee is het laagste contrast op vijf schermmaten
   5,14 op 1, gemeten op de ondergrond zélf en niet geschat: de tekst wordt
   onzichtbaar gemaakt en dan wordt elke zesde pixel onder elk woord tegen
   de letterkleur gehouden. Zie tools/schetsen — het meetscript staat erbij
   beschreven.

   Die marge boven de 4,5 is er met opzet. Komt er een andere foto voor het
   uitzicht, dan schuift dit getal mee; is de nieuwe foto lichter dan deze,
   dan is er ruimte vóór het onder de grens zakt. Meet het opnieuw als de
   foto wisselt. */
.toneel__waas{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(18,37,26,.80) 0%,
      rgba(18,37,26,.38) 22%,
      rgba(18,37,26,.16) 48%,
      rgba(18,37,26,.22) 72%,
      rgba(18,37,26,.34) 100%),
    radial-gradient(108% 84% at 16% 40%,
      rgba(18,37,26,.56) 0%,
      rgba(18,37,26,.30) 44%,
      rgba(18,37,26,0) 80%),
    linear-gradient(90deg,
      rgba(18,37,26,.48) 0%,
      rgba(18,37,26,.20) 46%,
      rgba(18,37,26,0) 60%);
}
/* Op een smal scherm kan de kop niet naast de lichtstrook: de foto is dan naar
   een staande strook gesneden en de strook staat toch achter het laatste woord.
   Daar moet de waas het dus alleen doen, en hij is er precies zoveel zwaarder
   dat het haalt — 3,75 op 1 werd 4,9. Meer is niet nodig en zou de foto op de
   telefoon, waar hij toch al het kleinst is, helemaal dichtsmeren. */
@media (max-width:899px){
  .toneel__waas{
    background:
      linear-gradient(180deg,
        rgba(18,37,26,.84) 0%,
        rgba(18,37,26,.50) 22%,
        rgba(18,37,26,.28) 48%,
        rgba(18,37,26,.36) 72%,
        rgba(18,37,26,.42) 100%),
      radial-gradient(140% 95% at 22% 41%,
        rgba(18,37,26,.72) 0%,
        rgba(18,37,26,.47) 46%,
        rgba(18,37,26,0) 86%),
      linear-gradient(90deg,
        rgba(18,37,26,.53) 0%,
        rgba(18,37,26,.28) 46%,
        rgba(18,37,26,0) 82%);
  }
}

/* De tafel. Hij plakt onderaan, loopt links en rechts het scherm uit — een
   tafel waarvan je beide uiteinden ziet is een plank — en ligt vóór het
   uitzicht. object-fit:cover met de verre rand bovenaan: die rand is wat een
   blad tot een tafel maakt, dus die mag er nooit af. */
/* Gecentreerd met left en niet met translateX, en dat is geen smaak: de
   openingstijdlijn schuift de tafel omhoog en zou een translate in de css
   overschrijven. Dezelfde reden als bij .krans hierboven — transform hoort
   bij één baas en dat is gsap. */
.tafel{
  position:absolute;z-index:2;
  /* Niet meer op nul: de balk ligt daar nu, en de tafel staat erbovenop. */
  bottom:var(--toneel-balk);
  left:calc((100% - var(--toneel-breed)) / 2);
  width:var(--toneel-breed);height:var(--toneel-tafel);
}

/* ── De balk ───────────────────────────────────────────────────────
   Het toneel hield onderaan gewoon op: de tafel was op de sectiegrens
   afgesneden en daaronder begon het groen. Dat is geen rand maar een knip.

   De balk is die rand. Hij ligt tegen de onderkant van het blad aan, loopt
   net als de tafel het scherm uit zodat je zijn uiteinden nooit ziet, en
   werpt schaduw naar beneden — op het groen dat eronder doorloopt. Daarmee
   ligt de pagina achter het toneel in plaats van eronder.

   Zijn hoogte staat niet vast maar volgt de breedte, want het is één plank
   en geen vlak: uitrekken zou het hout vervormen. --toneel-balk rekent die
   hoogte uit één keer uit, want drie dingen hebben hem nodig — de balk zelf,
   de tafel die erbovenop staat, en de binnenruimte van #opening die de tekst
   boven allebei houdt. */
.toneel__balk{
  position:absolute;bottom:0;z-index:3;
  left:calc((100% - var(--toneel-breed)) / 2);
  width:var(--toneel-breed);height:var(--toneel-balk);
  display:block;pointer-events:none;
}
.toneel__balk img{
  width:100%;height:100%;display:block;
  /* Bijsnijden en niet uitrekken. Waar de balk lager moet dan zijn eigen maat
     gaat er bovenaan af, en dat is precies de rand die tegen de tafel aan
     ligt en die je dus toch niet ziet. Uitrekken zou de nerf vervormen. */
  object-fit:cover;object-position:center bottom;
  /* De schaduw valt naar beneden, op het groen dat eronder doorloopt, en
     rekent in de hoogte van de balk zelf — in rem is hij op een breed scherm
     een streepje onder een plank van honderd pixels en op een telefoon een
     wolk onder een plank van veertig. */
  filter:var(--foto) drop-shadow(0 calc(var(--toneel-balk) * .14)
                                   calc(var(--toneel-balk) * .30) rgba(9,20,12,.55));
}
.tafel__blad{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center top;
  filter:var(--foto) drop-shadow(0 -1.2rem 2.4rem rgba(9,20,12,.5));
}
/* Wat er op tafel staat. Alles rekent in procenten van de tafel, dus het
   dek schuift niet als de tafel van maat verandert. --y is de diepte: 0 % is
   de verre rand en 100 % de rand bij je. De schaduw hoort bij het ding en
   niet bij de doos — een uitgeknipte schaal zonder schaduw zweeft. */
.tafel__dek{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.tafel__dek[hidden]{display:none}
/* --b is een factor van de tafelhoogte en geen percentage van zijn breedte,
   en dat scheelt alles. De tafel is op een breed scherm zestienhonderd bij
   tweehonderdveertig en op een telefoon vierhonderd bij tweehonderddertig —
   dezelfde diepte, vier keer zo smal. Een schaal van 6 % van de breedte is
   daar honderd pixels en hier vijfentwintig. Van de hoogte uit gerekend
   staat hij op allebei even groot op tafel. */
/* De maat van het dek is de diepte van de tafel, maar niet meer dan ruim een
   kwart van het scherm. Alleen de diepte nemen werkt op een breed scherm —
   daar is de tafel 1600 bij 216 — maar op een telefoon is hij 437 bij 202, even
   diep en vier keer zo smal, en dan staat er een bord van tweehonderd pixels
   op een scherm van driehonderdnegentig. De 26vw houdt dat tegen en raakt een
   breed scherm niet: daar is hij 374 en wint de tafeldiepte.

   HET ANKER IS DE ONDERKANT EN NIET HET MIDDEN. De borden zijn op ooghoogte
   gefotografeerd, net als de tafel: je ziet de zijkant en de voet. Zo'n ding
   heeft één punt dat ertoe doet en dat is waar het de tafel raakt. Met
   translate(-50%,-100%) is --y dus waar het bord stáát en niet waar zijn
   midden zweeft — verder naar voren is hoger --y én groter, precies zoals je
   het op een echte tafel neerzet.

   Om diezelfde reden staat er geen --r meer op. Een schaal die van bovenaf is
   gefotografeerd mag je draaien, want draaien is dan hetzelfde als de schaal
   verdraaien. Een bord dat op ooghoogte staat kantelt ervan, en een gekanteld
   bord op een rechte tafel is een ongeluk. */
/* Perspectief: --d is de diepte als getal (0 de verre rand, 1 de rand bij
   je). Achteraan is alles een vijfde kleiner dan vooraan. */
.dek{
  position:absolute;
  left:var(--x);top:calc(var(--d) * 100%);
  --dek-maat:min(var(--toneel-tafel),17vw);
  width:calc(var(--b) * var(--dek-maat) * (.8 + .2 * var(--d)));
  transform:translate(-50%,-100%);
}
/* De schaduw waar het bord de tafel raakt. De foto's zijn uitgeknipt en dragen
   hun eigen schaduw niet mee; zonder deze zweeft alles een centimeter boven
   het hout. Hij ligt onder het beeld en niet erachter, dus hij hoort bij de
   voet en niet bij de omtrek. */
/* De ovaal rekent in zijn eigen breedte en niet in de hoogte van het beeld.
   Met een percentage van de hoogte krijgt de lantaarn — twee keer zo hoog als
   breed — een schaduw van zeventig pixels en de schaal dadels een van veertig,
   terwijl hun voeten even groot zijn. Een voet is zo breed als het ding en
   zo diep als de tafel het toelaat; aspect-ratio houdt die verhouding vast,
   hoe hoog het ding er ook bovenuit steekt. */
.dek::before,
.dek::after{
  content:"";position:absolute;z-index:-1;left:50%;bottom:0;
  /* De schaduw hoort bij het ding en komt dus met het ding mee. Hij zit op
     .dek en het ding zit in .dek__ding, dus hij valt buiten het masker dat
     het ding onthult: --voet staat op 1 zolang er geen js is. */
  opacity:var(--voet,1);
  pointer-events:none;
}
/* Twee schaduwen, zoals echt licht ze geeft. De zon staat laag achter de
   bomen, dus het licht komt van achteren: een smalle donkere rand precies
   waar het ding het hout raakt, en een zachte vlek die naar voren valt, naar
   jou toe. */
.dek::before{
  width:108%;aspect-ratio:4 / 1;
  transform:translate(-50%,46%);
  background:radial-gradient(ellipse closest-side,
    rgba(22,10,2,.88) 0%, rgba(22,10,2,.6) 40%, rgba(22,10,2,0) 100%);
}
.dek::after{
  width:150%;aspect-ratio:2.2 / 1;
  transform:translate(-50%,66%);
  background:radial-gradient(ellipse closest-side,
    rgba(22,10,2,.5) 0%, rgba(22,10,2,.24) 50%, rgba(22,10,2,0) 100%);
  filter:blur(4px);
}
.dek__ding{display:block;position:relative}
.dek img{
  width:100%;height:auto;display:block;
  filter:var(--foto);
}
/* De productfoto's zijn studiofoto's: wit licht van voren. Hier staat de
   zon laag achter de bomen, dus ze krijgen een warme, iets gedempte tint en
   onderaan wat schaduw, zodat ze in dezelfde lucht staan als de schalen. */
.dek--prod .dek__ding img{
  filter:var(--foto) brightness(.9) saturate(.92) sepia(.12) contrast(1.03);
}


/* ── Wat er op tafel staat vertelt wat het is ───────────────────────────
   Hetzelfde gebaar als de schalen op het kleed in §04: wijs iets aan en je
   leest wat het is. Alleen is het hier geen kaartje in het midden met een
   draad ernaartoe maar een kaartje bóven het ding zelf, want de tafel is maar
   tweehonderd pixels diep en er is geen midden om iets in te leggen.

   Het steeltje eronder doet wat die draad deed: het zegt bij wélk ding het
   kaartje hoort. Zonder dat zweeft er een label boven een tafel met vier
   dingen erop en mag je raden.

   Alleen op een scherm met een muis en genoeg ruimte. Op een telefoon is er
   geen hover en zou het kaartje bij een tik tegelijk met de link verschijnen
   en verdwijnen; daar is het ding gewoon een link. De kaartjes staan daarom
   op visibility:hidden en niet op display:none: dan kan :focus-within ze bij
   het tabben wél laten zien. */
.dekkaart{
  position:absolute;left:50%;bottom:calc(100% + .85rem);z-index:2;
  transform:translateX(-50%) translateY(.4rem);
  width:max-content;max-width:min(17rem,38vw);
  display:flex;flex-direction:column;gap:.16rem;
  padding:.58rem .78rem;
  background:#FBF6E8;
  border:1px solid rgba(150,112,48,.42);
  border-radius:var(--rond-in);
  box-shadow:0 .5rem 1.5rem rgba(9,20,12,.46);
  color:var(--inkt);text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
}
/* het steeltje van het kaartje naar het ding */
.dekkaart::after{
  content:"";position:absolute;left:50%;top:100%;
  width:1px;height:.85rem;background:rgba(150,112,48,.62);
}
.dekkaart__naam{
  font-size:clamp(.78rem,.92vw,.92rem);font-weight:500;line-height:1.25;
}
.dekkaart__zin{
  font-size:clamp(.68rem,.8vw,.8rem);font-weight:300;line-height:1.4;
  color:var(--inkt);opacity:.72;
}
.dekkaart__n{
  margin-top:.22rem;
  font-size:var(--label-mini);font-weight:500;
  letter-spacing:.02em;
  display:flex;align-items:center;gap:.4rem;
}
.dekkaart__pijl{transition:transform .3s var(--ease-ui)}

@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .dekkaart{transition:opacity .3s var(--ease-ui),transform .3s var(--ease-ui)}
  .dek__ding{transition:transform .35s var(--ease-ui)}
  .dek:hover,
  .dek:focus-within{z-index:6}
  .dek:hover .dekkaart,
  .dek:focus-within .dekkaart{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
  /* het ding komt een tikje omhoog — op het omhulsel en niet op de foto,
     want de openingstijdlijn schrijft op de foto en zou dit overschrijven */
  .dek:hover .dek__ding,
  .dek:focus-within .dek__ding{transform:translateY(-.32rem)}
  .dek:hover .dekkaart__pijl{transform:translateX(.22rem)}
}
a.dek__ding{text-decoration:none;color:inherit}
a.dek__ding:focus-visible{outline:2px solid var(--goud);outline-offset:6px}
/* Op een telefoon is de tafel vier keer zo smal en staat dezelfde verdeling
   scheef: het bord hangt tegen de linkerrand en rechts ligt een halve tafel
   leeg. Twee plekken opgeschoven, meer is het niet. */
/* WAAR ALLES STAAT. Drie getallen per ding: --x hoever naar rechts over de
   tafel, --y waar het stáát, --b hoe groot. Ze staan hier en niet in een
   style-attribuut in de markup, en dat is geen voorkeur maar noodzaak: een
   custom property in een style wint van elke regel in een blad, ook van een
   media query, en dan doen de verdelingen hieronder niets.

   Hoeveel er op tafel past hangt van de breedte af, en dat moet wel: de tafel
   is 112 % van het scherm en de dingen erop rekenen in zijn diepte, dus op een
   smaller scherm schuift alles naar elkaar toe terwijl het even groot blijft.
   Op negenhonderd pixels lagen de schaal dadels en de doos voor veertig
   procent over elkaar en werd "Medjoul Dates" onleesbaar — en een pak op tafel
   waarvan je de naam niet ziet is geen pak maar een vlek.

   Boven 900 px staan alle vier de dingen erop. Tussen 640 en 900 gaat de
   schaal noten eraf en krijgen de drie die overblijven meer ruimte én meer
   maat. Onder 640 blijven de schaal dadels en de doos over: de hero moet ook
   op een telefoon zeggen van wie hij is, en dat doet de doos en niet de noten.
   De lantaarn gaat daar sowieso af — twee keer zo hoog als breed, en de tekst
   zit daar dicht op de tafel. */
/* --b is de echte breedte gedeeld door 30 cm (de diepte van de tafel is
   ongeveer 30 cm in beeld). Fles olie 8 cm, pak sap 9,5, pot wijnbladeren
   8,5, pot kikkererwten 7, blik foul 10, doos dadels 23, schaal noten 18,
   schaal dadels 25, theeglas op schoteltje 12, lantaarn 22. --d is de
   diepte. Hoge dingen rechts: links staat de kop. */
/* ── De producten op de balk ─────────────────────────────────────────
   Geen tafel meer: de producten staan op de balk, rechts in beeld. Alles
   rekent in --cm, één echte centimeter, zodat de maten kloppen: doos dadels
   25 cm breed, doos maamoul 17,5, blik foul en dolmeh 10, fles 6,5. --w is
   de breedte in cm, --r hoever het midden links van het anker staat (het
   anker is de rechterrand van de groep). Achteraan staat iets kleiner en
   lager in de stapel. */
.tafel__blad{display:none}
#opening{--cm:min(.92vw,1.35vh);--toneel-tafel:calc(22 * var(--cm))}
.tafel__dek{--anker:calc((6% + 94%) / 1.12)}
.dek{
  top:auto;bottom:-2px;
  left:calc(var(--anker) - var(--r) * var(--cm));
  width:calc(var(--w) * var(--cm));
  transform:translateX(-50%);
  z-index:2;
}
.dek--achter{z-index:1;width:calc(var(--w) * var(--cm) * .94)}
.dek::before{width:100%;aspect-ratio:5 / 1;transform:translate(-50%,40%)}
.dek::after{width:120%;aspect-ratio:4 / 1;transform:translate(-50%,46%);opacity:calc(var(--voet,1) * .7)}
.dek--prod .dek__ding img{filter:var(--foto) brightness(.94) saturate(.95) sepia(.08)}
/* ── Zweven ───────────────────────────────────────────────────────────
   De producten zweven elk op een eigen hoogte boven de balk en deinen zacht
   op en neer. Bij binnenkomst vallen ze uit de lucht (js/zine.js, stap 3).
   De schaduw op de balk krimpt mee als een product omhoog gaat. Bij
   "minder beweging" hangen ze stil. */
.dek{bottom:calc(var(--hoog,4) * var(--cm))}
.dek::before{
  bottom:calc(var(--hoog,4) * var(--cm) * -1);
  width:80%;aspect-ratio:7 / 1;
  transform:translate(-50%,95%);
  opacity:calc(var(--voet,1) * (1 - var(--hoog,4) / 30));
  background:radial-gradient(ellipse closest-side,
    rgba(30,14,2,.9) 0%, rgba(30,14,2,.6) 35%, rgba(30,14,2,0) 100%);
  filter:blur(3px);
}
.dek::after{display:none}
@media (prefers-reduced-motion:no-preference){
  .dek__ding img{animation:zweef var(--duur,5s) linear var(--vertraag,0s) infinite}
  .dek::before{animation:zweef-schaduw calc(var(--duur,5s) / 2) ease-in-out calc(var(--vertraag,0s) / 2 - var(--duur,5s) / 8) infinite}
}
/* Een kleine cirkel in plaats van alleen op en neer: rechts, boven, links,
   onder, met een tikje kanteling mee. --rond is de straal in cm. Linear
   met acht stappen geeft een ronde baan zonder haperingen op de kwarten. */
@keyframes zweef{
  0%,100%{translate:calc(var(--rond,1) * var(--cm)) 0;rotate:.6deg}
  12.5%{translate:calc(var(--rond,1) * .707 * var(--cm)) calc(var(--rond,1) * -.707 * var(--cm))}
  25%{translate:0 calc(var(--rond,1) * -1 * var(--cm));rotate:0deg}
  37.5%{translate:calc(var(--rond,1) * -.707 * var(--cm)) calc(var(--rond,1) * -.707 * var(--cm))}
  50%{translate:calc(var(--rond,1) * -1 * var(--cm)) 0;rotate:-.6deg}
  62.5%{translate:calc(var(--rond,1) * -.707 * var(--cm)) calc(var(--rond,1) * .707 * var(--cm))}
  75%{translate:0 calc(var(--rond,1) * var(--cm));rotate:0deg}
  87.5%{translate:calc(var(--rond,1) * .707 * var(--cm)) calc(var(--rond,1) * .707 * var(--cm))}
}
/* Voordat js/zine.js ze laat vallen hangen ze al boven het scherm, anders
   staan ze heel even op hun plek en springen ze dan omhoog. */
html.js:not(.zine-klaar-dek) .tafel__dek .dek__ding{transform:translateY(-28vh);opacity:0}
@media (prefers-reduced-motion:reduce){
  html.js .tafel__dek .dek__ding{transform:none}
}
.dek--doos{--hoog:10;--duur:11.2s;--vertraag:-1.1s;--rond:0.9}
.dek--maamoul{--hoog:14;--duur:10.1s;--vertraag:-3.4s;--rond:0.8}
.dek--dolmeh{--hoog:7;--duur:8.3s;--vertraag:-2.2s;--rond:1.1}
.dek--foul{--hoog:11;--duur:9.4s;--vertraag:-4.6s;--rond:1.1}
.dek--basil-mango{--hoog:17;--duur:7.9s;--vertraag:-.6s;--rond:1.2}
.dek--basil-granaat{--hoog:12;--duur:8.8s;--vertraag:-2.9s;--rond:1.2}

/* Achter: de dozen, naast elkaar. Voor: blik en dolmeh voor de doos
   dadels, de flessen rechts naast de maamoul, zodat elk etiket leesbaar
   blijft. */
.dek--doos         {--w:25;  --r:47.5}
.dek--maamoul      {--w:17.5;--r:22}
.dek--dolmeh       {--w:10;  --r:63.5}

.dek--foul         {--w:10;  --r:32}
.dek--basil-mango  {--w:6.5; --r:10.5}
.dek--basil-granaat{--w:6.5; --r:3.5}

@media (max-width:900px){
  #opening{--cm:min(1.4vw,1.2vh)}
}
@media (max-width:640px){
  #opening{--cm:1.55vw;--toneel-tafel:calc(25 * var(--cm))}
  .tafel__dek{--anker:calc((6% + 97%) / 1.12)}
  .dek--dolmeh{--r:52;z-index:3}
  .dek--foul  {--r:31}
}

/* De kolom met de merkregel staat boven de diepte en onder de tafel. */
.opening__raam{position:relative;z-index:1}
#opening .dadel,
#opening .orn{z-index:1}

/* Het Arabisch is hier de kop; het woordmerk linksboven draagt de naam al. */
.opening__woord{max-width:none}
/* Eén volle regel: het Arabisch is de kop en pakt de hele kolom. De maat is
   gemeten, niet gegokt: deze regel is precies 7,4 keer de lettergrootte breed,
   dus 12vw vult de kolom op elke breedte. */
.opening__kop{
  margin:0;color:var(--vanille);font-weight:400;
  font-size:clamp(1.9rem,12vw,11.5rem);
  white-space:nowrap;
}
/* ── De regels van de kop ───────────────────────────────────────────────
   Eén regel per pagina, behalve op de thuispagina: daar staat de merkregel en
   die staat op twee, zoals op de oude site — "Tasting The" boven en "Middle
   East" eronder in goud.

   De maat was ooit zo gekozen dat de Latijnse regel even breed werd als het
   Arabisch dat eronder lag (factor 0,705). Dat Arabisch is er niet meer, dus
   de maat is nu wat hij moet zijn: zo groot dat het woord de kolom vult. */
.opening__regel{display:block;font-size:clamp(1.32rem,8.3vw,8rem);
  line-height:1.5;letter-spacing:-.02em}

/* De merkregel staat op twee regels en moet dus dichter op elkaar: 1,5 is de
   afstand voor één regel die alleen ruimte onder zich nodig heeft, niet voor
   twee die een blok moeten vormen. */
/* Op regelafstand 1 zit er geen lucht meer onder de staarten van de letters,
   en dan plakt de kicker tegen de onderkant van "Middle East". Die lucht komt
   er hier weer bij, als marge en niet als regelafstand: regelafstand zou ook
   tussen de twee regels gaan zitten en die horen juist dicht op elkaar. */
/* ── De merkregel ─────────────────────────────────────────────────────────
   "Tasting the Middle East" staat in Ramadhan Mubarok, het display-letterbeeld
   dat bij het merk hoort. Alleen hier: het is een sierletter en die leest op
   twee woorden en niet op twee alinea's. Al het andere is Roboto.

   Let op als je de tekst verandert: deze letter mist de tekens , ! en : -- die
   komen er als een leeg vak uit. */
.opening__kop--merk{
  font-family:'Ramadhan Mubarok','Roboto',system-ui,sans-serif;
  font-weight:400;letter-spacing:0;
  line-height:1;margin-bottom:clamp(.9rem,2.4vh,1.7rem);
}
/* 16,6vw vulde de kolom voor 96 % en dat was juist toen er niets achter
   stond. Op het uitzicht is een kop die het hele scherm vult geen kop meer
   maar een gordijn: de heuvels, het licht en de truck verdwijnen erachter.
   Op 13vw blijft hij de eerste regel die je leest én blijft er beeld over.
   De -0,075 em hieronder rekent in em en verschuift dus gewoon mee. */
.opening__kop--merk .opening__regel{
  /* Ook aan de hoogte gebonden, en dat is geen sier maar het enige wat een
     laag scherm redt. Op 1440 bij 600 — een laptop met veel browser eromheen,
     of een telefoon dwars — is 13vw honderdzevenentachtig pixels per regel,
     twee regels dus driehonderdvierenzeventig, en dan valt de tafel
     honderdvijftig pixels onder de vouw. Met min() wint op zo'n scherm de
     hoogte en past het toneel weer in één beeld. Op alles wat normaal hoog is
     wint de breedte gewoon. */
  font-size:clamp(2.4rem,min(13vw,20vh),12rem);
  line-height:1;
}
/* Op een breed scherm is de kop kleiner, en dat komt uit de foto en niet uit
   smaak. De laan is overal donker — tussen de 5 en de 20 op honderd — behalve
   in één verticale strook op 42 tot 58 % van de breedte, waar de zon door de
   bomen staat en de helderheid naar 45 springt. Daar staat goud op licht.

   Er is gemeten wat een waas daaraan kan doen en het antwoord is: niet genoeg.
   Een waas die die strook dempt dempt de hele foto mee — dan is het uitzicht
   weg — en een waas die alleen het leesvlak dempt reikt niet tot de strook:
   het contrast zakte daar naar 1,29 op 1. De tekst moet er dus náást.

   Twee getallen samen doen dat. Het uitzicht staat 140 % breed tegen de
   linkerrand, waardoor de strook van 42 % naar 59 % van het scherm schuift; en
   de kop is 10vw, waardoor de langste regel op 54 % eindigt. Vijf procent
   ruimte ertussen. De compositie wordt er beter van ook: de kop links, het
   licht rechts.

   Onder 900 px geldt dit niet. Daar is de foto naar een smalle staande strook
   gesneden en staat de strook toch in het midden; daar doet de waas het werk,
   en mag de kop zijn volle 13vw houden. */
@media (min-width:900px){
  .opening__kop--merk .opening__regel{font-size:min(7.6vw,18vh)}
}
/* Op een laag venster moet de kop verder inbinden. Er staat sinds kort een
   regel met twee uitgangen onder de kicker, en die zesendertig pixels pasten
   er op 1440 bij 700 niet meer bij: de balk viel er precies zo ver onder de
   vouw. Op zo'n scherm wint de hoogte het van de breedte -- 13,5vh in plaats
   van 18 -- en gaat de lucht rond de kop mee omlaag. De breedtevoorwaarde
   staat erbij omdat de kop onder de 900 uit een andere regel komt; zonder die
   voorwaarde zou 7,6vw daar de kop naar zevenentwintig pixels duwen.
   scratchpad/balk-past.js bewaakt het. */
@media (min-width:900px) and (max-height:800px){
  .opening__kop--merk .opening__regel{font-size:min(7.6vw,13.5vh)}
}
@media (max-height:800px){
  .opening__kop--merk{margin-bottom:clamp(.4rem,1.4vh,1.2rem)}
  .opening__weg{margin-top:clamp(.9rem,2.4vh,1.6rem)}
}
/* Het schild van de T reikt tot de rand van zijn letterbak en de stam van de M
   niet. De twee regels beginnen daardoor niet op dezelfde lijn, en dat is aan
   een kop van deze grootte te zien als een rafelige linkerkant. Deze
   verschuiving zet ze optisch gelijk.

   Gemeten en niet gegokt, met actualBoundingBoxLeft op de letter zoals hij op
   de pagina geladen is (tools in de kladmap: kantlijn.js). In Ramadhan Mubarok
   begint de inkt van "Tasting the" op -7,0 px en die van "Middle East" op
   -5,0 px bij een letter van 109,4: twee pixels verschil, oftewel 0,018 em.
   In de vorige letter was dat 0,075 em -- vier keer zoveel -- dus dit getal
   hoort bij déze letter en moet opnieuw gemeten als de woorden of de letter
   veranderen. */
.opening__regel--goud{color:var(--goud);margin-left:-.018em}


/* ── De wenk bij de schalen ─────────────────────────────────────────────
   Alleen daar waar hoveren ook echt bestaat; anders zou hij iets beloven wat
   er niet is. Het pijltje is met de hand gezet: geen vloeiende boog maar drie
   stukken die net niet in elkaars verlengde liggen. */
.wenk{display:none;margin:clamp(1.1rem,2.8vh,1.9rem) 0 0;color:var(--goud)}
/* html.js en no-preference staan er niet voor de sier: zonder JS of met
   gereduceerde beweging bestaat het hoveren niet, en dan mag de wenk er ook
   niet staan — anders belooft hij iets wat er niet is. */
/* Hij stond alleen waar hoveren bestaat, want er stond "beweeg over een
   schaal" en dat kun je op een telefoon niet. Er staat nu "kies een schaal",
   en dat kan overal: op een aanraakscherm is het een tik. De schalen zijn
   altijd al links geweest, alleen zei niemand dat. */
@media (prefers-reduced-motion:no-preference){
  html.js .wenk{display:flex;align-items:center;gap:clamp(.6rem,1vw,1rem)}
}
.wenk__t{
  font-size:var(--label);font-weight:500;
  letter-spacing:.04em;line-height:1;
}
.wenk__pijl{width:clamp(52px,4.6vw,78px);height:auto;display:block;overflow:visible}
/* De weg uit de hero. Die was er niet: je landde op een gedekte tafel en het
   enige wat je kon aanwijzen stond in de kop van de pagina. Twee links, in de
   maat van de kicker eronder, en niet meer dan twee -- wie kiezen moet uit
   vijf dingen kiest niets. */
.opening__weg{
  display:flex;flex-wrap:wrap;
  gap:clamp(.7rem,1.6vw,1.1rem);
  margin:var(--uitgang) 0 0;
}

/* ── De afstand boven een uitgang ─────────────────────────────────────────
   De knop onderaan een sectie stond overal anders: nergens op de thuispagina
   (dan plakt hij aan de laatste regel), zes tienden van een rem op contact en
   op de receptenpagina, anderhalve rem bij het kleed, twee rem bij de
   beloftes, drie en een halve bij de recepten en vierenzestig harde pixels
   onder de slotregel. Zeven verschillende afstanden voor zeven keer hetzelfde
   ding, en dat zie je: de ene knop leest als een conclusie en de andere als
   iets dat is blijven plakken.

   Eén maat, en die staat hier zodat de volgende sectie hem ook krijgt. De
   slotknop van een pagina is de enige uitzondering: die staat los in het
   midden en mag ruimer. */
.verder__ruim,
.verder__alles,
.keuken__ruim,
.gerechten__weg,
.tafellijst__meer,
.assortiment__na,
.shopslot__knoppen{margin:var(--uitgang) 0 0;display:flex;flex-wrap:wrap;gap:clamp(.7rem,1.6vw,1.1rem)}

.opening__zin{
  margin-top:clamp(.6rem,1.6vh,1.1rem);
  font-size:clamp(1rem,1.3vw,1.22rem);font-weight:300;line-height:1.65;
  color:var(--vanille-zacht);max-width:38ch;
}

/* ── De band onder de kop ───────────────────────────────────────────────
   Was het kleed; dat is naar §03 verhuisd, waar het een menukaart is in plaats
   van een merkbeeld. Hier staat nu één echte foto: de boomgaard van bovenaf.
   Hij eet dezelfde marge op als het kleed dat deed, dus de kop houdt zijn
   kolom en het beeld ligt van rand tot rand. */
/* Hij liep van rand tot rand toen hij onder de kop hing. Nu staat hij in de
   rechterhelft van §1b, dus de uitloop gaat eraf en hij wordt wat staander:
   een band van 1400 bij 640 is in een halve kolom een streepje. */
.heroband{
  position:relative;overflow:hidden;
  aspect-ratio:7 / 5;
}
.heroband img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto)}
@media (max-width:899px){
  .heroband{--rui:clamp(1.2rem,5vw,2rem);aspect-ratio:3 / 2}
}

/* ── Het tapijt ─────────────────────────────────────────────────────────
   Was één breed fotoblok; dat toonde één gerecht. Nu ligt de tafel er zelf:
   het kleed is de grond, de schalen liggen erop, het midden draagt het merk.

   Het kleed bepaalt de maat van de doos — de rest staat absoluut binnen
   diezelfde doos, in procenten. Daarom klopt de compositie op elke breedte
   en is er geen enkele media query voor nodig.

   --x/--y is het MIDDEN van een schaal (procent van breedte, resp. hoogte),
   --b haar breedte. Het centreren gebeurt met negatieve procentmarges: die
   rekenen in beide assen met de BREEDTE van het kleed, en omdat elke schaal
   vierkant is, is -b/2 precies de halve schaal — horizontaal én verticaal.
   Geen transform dus, zodat die vrij blijft voor de tijdlijn.

   container-type maakt van het kleed bovendien de maatstaf voor zijn eigen
   inhoud: de slogan kan daardoor in cqw en schaalt mee met het kleed in
   plaats van met het scherm. */
.tapijt{position:relative;margin:0;container-type:inline-size}
.tapijt__kleed{display:block;width:100%;height:auto;filter:var(--foto)}
/* Elke schaal is een link naar haar categorie. Dat is de bodem waar de rest op
   rust: zonder muis, zonder JS en met gereduceerde beweging blijft het gewoon
   een link, en is er niets wat kapot kan. */
.tapijt__schaal{
  display:block;
  position:absolute;left:var(--x);top:var(--y);
  width:var(--b);height:auto;
  margin-left:calc(var(--b) / -2);
  margin-top:calc(var(--b) / -2);
  z-index:2;
  /* contactschaduw, zodat een schaal op het kleed ligt en er niet voor zweeft */
  filter:drop-shadow(0 clamp(3px,.55vw,9px) clamp(7px,1.1vw,18px) rgba(20,32,14,.42));
}
.tapijt__schaal img{display:block;width:100%;height:auto}
.tapijt__schaal:focus-visible{outline:2px solid var(--goud);outline-offset:6px;border-radius:50%}

/* ── Het kaartje bij een schaal ─────────────────────────────────────────
   Op een muisscherm licht de schaal op zodra je erheen gaat, verschijnt in
   het open midden — waar anders het merk staat — een kaartje met de categorie
   erachter, en loopt er een draad van het kaartje naar die schaal.

   Alle zeven kaartjes staan in de opmaak op dezelfde plek, niet in een
   JS-sjabloon: zo valt er op het moment zelf niets te bouwen, en staat er
   zonder JS alleen iets onzichtbaars. De draad is één pad dat per schaal
   opnieuw wordt getekend; de viewBox is exact de maat van het kleed, dus de
   units zijn kleedpixels en de meetkunde klopt op elke breedte. */
.tapijt__kaarten{
  position:absolute;left:50%;top:50%;
  width:min(34%,430px);
  transform:translate(-50%,-50%);
  z-index:4;pointer-events:none;
}
.tafelkaart{
  position:absolute;left:0;top:50%;width:100%;
  transform:translateY(-50%);
  display:flex;align-items:center;gap:clamp(.6rem,1.1vw,1rem);
  padding:clamp(.6rem,.9vw,.9rem);
  background:#FBF6E8;
  border:1px solid rgba(150,112,48,.42);
  border-radius:var(--rond-in);
  box-shadow:0 clamp(10px,1.4vw,20px) clamp(24px,3vw,44px) rgba(10,20,8,.38);
  color:var(--inkt);
  opacity:0;visibility:hidden;
}
.tafelkaart__foto{
  flex:none;width:clamp(56px,6.2cqw,86px);height:auto;display:block;
  filter:drop-shadow(0 2px 4px rgba(20,32,14,.3));
}
.tafelkaart__tekst{min-width:0}
/* rtl-tekst lijnt zichzelf rechts uit; in dit kaartje hoort hij links, boven
   de naam waar hij bij hoort */
.tafelkaart__naam{
  margin:.15em 0 0;
  font-size:clamp(.95rem,1.15cqw,1.12rem);font-weight:500;line-height:1.25;
  letter-spacing:-.01em;color:var(--inkt);
}
.tafelkaart__zin{
  margin:.35em 0 0;
  font-size:clamp(.72rem,.86cqw,.84rem);line-height:1.5;color:#4A5C44;
}
.tafelkaart__n{
  margin:.5em 0 0;
  display:flex;align-items:center;gap:.5em;
  font-size:.84rem;font-weight:500;letter-spacing:.03em;
  color:var(--bos);
}
/* De draad. Donker, want hij loopt over een crème kleed. */
.tapijt__draad{
  position:absolute;inset:0;width:100%;height:100%;
  color:#22401F;pointer-events:none;z-index:3;
  filter:drop-shadow(0 1px 1px rgba(250,244,228,.55));
}
/* 6.2 #manifest — één zin ───────────────────────────────────────────── */

#manifest{
  min-height:auto;
  display:flex;align-items:center;
  /* onderlucht kleiner dan bovenlucht: §02 sluit hier direct op aan */
  padding-block:var(--lucht-groot) clamp(1.6rem,4vh,2.8rem);
}
/* De zin staat links en smal: zes van twaalf kolommen, tegen de linkerrand
   van .wrap aan. Daardoor loopt hij in het lood met de kicker van §02
   eronder, en houdt de rechterhelft ruimte over voor de krans. */
.manifest__raster{align-items:center;row-gap:clamp(2.5rem,7vh,4rem)}
.manifest__blok{grid-column:1 / 7}

/* De krans: de SVG bepaalt de maat, de schaal ligt er middenin. De 59 % is
   uitgerekend, geen gok. Het ornament beslaat 88 % van zijn eigen viewBox, de
   schaal moet 64 % van dát ornament vullen (0,88 x 0,64 = 56 %), en de rand
   van de schaal vult zelf 96 % van haar vierkante bestand: 56 / 0,96 = 59. */
.krans{
  position:relative;margin:0;
  grid-column:8 / 13;align-self:center;
  aspect-ratio:875 / 893;
}
.krans__orn{display:block;width:100%;height:auto}
/* Centreren met negatieve marges, niet met translate: een procentmarge rekent
   ook verticaal met de BREEDTE van de doos, dus -29,5 % is precies de halve
   schaal in beide richtingen. Zo blijft transform vrij voor de tijdlijn — met
   een translate in css leest GSAP die als pixels en telt de centrering dubbel. */
.krans__foto{
  position:absolute;left:50%;top:50%;
  width:59%;height:auto;
  margin:-29.5% 0 0 -29.5%;
  filter:var(--foto);
}
.manifest__zin{color:var(--vanille)}
.manifest__accent{color:var(--goud)}
.manifest__regel{position:relative;display:block}
/* De Arabische glos zweeft boven het woord "tafel". Hij staat BUITEN het
   regelmasker: Arabisch komt nooit in een overflow:hidden doos. De x-positie
   komt van een onzichtbare kopie van de voorafgaande tekst — geen meting,
   geen JS, exact op de letter. */
.manifest__glos{
  position:absolute;left:0;bottom:calc(100% - .34em);
  display:flex;align-items:flex-end;white-space:pre;
  font:inherit;line-height:1;pointer-events:none;
}
.manifest__meet{visibility:hidden}
.manifest__glos [data-onthul="ar"]{font-size:.9rem;line-height:1.5;color:var(--vanille-zacht)}

/* 6.3 #merk — de naam ─────────────────────────────────────────────────────
   Ging over de tafel, gaat nu over Ziné zelf: het eigen assortiment. De kop
   sluit daarom korter aan op het manifest erboven — bovenlucht klein, de
   onderlucht blijft staan om §03 te laten ademen. */

#merk{padding-block:clamp(.6rem,1.6vh,1.2rem) var(--lucht-groot)}
.merk__top{margin-bottom:clamp(1.1rem,2.6vh,2rem)}
/* De zin van §01 hangt verticaal in het midden van een krans die ruim twee keer
   zo hoog is; daaronder blijft links een lap groen over. §02 klimt daarin: de
   hele sectie schuift omhoog, dus de onderlinge maatvoering blijft precies
   staan en alleen het gat ervoor wordt kleiner. Botsen kan niet — de kicker en
   de kop staan links en in het midden, de krans staat rechts, en het beeld
   houdt er nog bijna tweehonderd pixels onder vandaan. Onder 900 px stapelt de
   krans zich onder de zin en is er niets om in te klimmen. */
@media (min-width:900px){
  #merk{margin-top:calc(-1 * clamp(0px,10vw,160px))}
}
.merk__kicker{grid-column:1 / 4;display:flex;flex-direction:column;gap:.6rem}
.merk__nr{
  font-size:3rem;font-weight:200;line-height:1;letter-spacing:-.02em;
  color:var(--vanille-zacht);
}
.merk__plaat{position:relative;--kader-uit:clamp(10px,1.6vw,22px)}
/* Stond half over de foto; met een kader eromheen sneed de kaderlijn er
   dwars doorheen. Nu staat de kop erboven, met lucht ertussen. */
.merk__kop{
  position:relative;z-index:0;
  margin:0 0 clamp(.8rem,2.4vh,1.8rem);
  text-align:center;font-weight:400;
  color:var(--vanille);
}
.merk__plaat .plaat{position:relative;z-index:1;aspect-ratio:3/2}
.merk__plaat .plaat img{object-position:50% 55%}

/* ── Het kader ──────────────────────────────────────────────────────────
   Eén rechte haarlijn in --vanille, op afstand van de foto. Het kader staat
   naast de figuur en niet erin: .plaat heeft overflow:hidden en een clip-path
   voor de onthulling, en die zouden alles wegsnijden wat erbuiten valt. */
.lijstwerk{position:relative}
/* de eigen haarlijn van .plaat vervalt hier: het kader doet dat werk al */
.plaat--kaal{box-shadow:none}
.kader{
  position:absolute;inset:calc(-1 * var(--kader-uit));
  border:1px solid var(--vanille);
  pointer-events:none;z-index:2;
}

.merk__onder{margin-top:clamp(3rem,8vh,5.5rem);row-gap:clamp(2.5rem,6vh,4rem)}
/* Over de volle breedte. Rechts hiernaast stond de naamverklaring, en die
   is eruit; een lijst van een halve pagina met een lege helft ernaast
   leest als een gat. Zo lopen de regels bovendien precies tot de
   rechterrand van het derde artikel erboven. */
.tafellijst{grid-column:1 / -1}
/* De vier grootste categorieen. Ze stonden hier als tekst, en dat is zonde:
   het zijn de vier duidelijkste verwijzingen van de hele pagina. De rij is nu
   een link, en de opmaak zit op de link en niet op de <li> -- anders is alleen
   het woord aanwijsbaar en niet de hele regel. */
.tafelregel{position:relative}
.tafelregel__gaat{
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  padding-block:.85rem;
  text-decoration:none;color:inherit;
  transition:color .3s var(--ease-ui);
}
.tafelregel__nl{color:var(--vanille);transition:color .3s var(--ease-ui)}
.tafelregel__gaat:hover .tafelregel__nl,
.tafelregel__gaat:focus-visible .tafelregel__nl{color:var(--goud)}
.tafelregel__gaat:focus-visible{outline:2px solid var(--goud);outline-offset:4px}
/* In dezelfde kolom als de lijst; .merk__onder is een raster, dus zonder
   deze regel gaat hij naast de lijst staan in plaats van eronder. */
.tafellijst__meer{grid-column:1 / -1}
.tafelregel .lijn{position:absolute;left:0;right:0;bottom:0;width:auto}

/* 6.4 #assortiment — het kleed met de schalen ────────────────────── */

/* Het kleed opent deze sectie. Het midden blijft leeg: de kicker draagt de
   naam al, dus het merk hoeft er niet op — en juist die lege plek is waar het
   kaartje bij hover verschijnt. */
#assortiment .tapijt{margin-block:clamp(1.4rem,3.4vh,2.6rem) clamp(2.6rem,7vh,5rem)}
#assortiment .wenk{margin-top:clamp(1.2rem,3vh,2rem)}


#assortiment{padding-block:var(--lucht)}
.assortiment__top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gap);flex-wrap:wrap;
  margin-bottom:clamp(1.8rem,5vh,3rem);
}
.assortiment__top .kicker{margin:0}
/* Hier lag een vloer van zestien tegels, één per hoofdcategorie, met de
   vt-motieven erin. Die is eruit: zestien gekleurde vakken naast elkaar is
   een raster en geen tafel, en het was het strakste blok van de pagina. Wat
   ervan overblijft is de regel eronder — één link naar het hele assortiment,
   en dat is waar de tegels ook heen gingen. */


/* 6.6 #horizon — waar te koop ───────────────────────────────────────── */

#horizon{padding-block:var(--lucht-stil)}
.horizon{
  position:relative;
  isolation:isolate;
  aspect-ratio:5/2;
  overflow:hidden;
  margin:0;
}
.horizon__img{
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:saturate(.52) contrast(1.06) brightness(.92);
}
/* Duotone — voorwaarde, geen finesse. Zonder deze behandeling gaat de foto eraf. */
.horizon::after{
  content:"";position:absolute;inset:0;
  background:var(--bos);opacity:.46;mix-blend-mode:multiply;
}
.horizon::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--goud);opacity:.12;mix-blend-mode:soft-light;
}
.horizon__bij{
  position:absolute;z-index:3;
  right:clamp(1rem,3vw,2rem);bottom:clamp(.8rem,2vh,1.4rem);
  color:var(--vanille-zacht);
}
.verkoop{
  position:relative;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gap);
  margin-top:clamp(2.5rem,7vh,4.5rem);
  padding-block:clamp(1.6rem,4vh,2.6rem);
}
.verkoop .lijn{position:absolute;left:0;right:0;width:auto}
.verkoop__boven{top:0}
.verkoop__onder{bottom:0}
.verkoop__midden{color:var(--vanille);word-spacing:.3em;text-align:center;flex:1}

/* 6.7 #sluiting — tot slot ─────────────────────────────────────────────── */

#sluiting{
  min-height:auto;
  display:flex;align-items:center;
  padding-block:var(--lucht-stil);
  text-align:center;
}
.sluiting__raam{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.5vh,1.6rem)}
.sluiting__kop{color:var(--vanille);font-weight:400;margin:0}
.sluiting__kop .sluiting__woord{text-align:center;font-size:var(--nl-groot);font-weight:200;line-height:1.05;letter-spacing:-.03em}
.sluiting__zin{color:var(--vanille-zacht)}
.sluiting__knopruim{margin-top:clamp(2.4rem,5.5vh,3.8rem)}

/* 6.8 #sluitraster + #voet ──────────────────────────────────────────── */

#sluitraster{
  display:grid;
  grid-template-columns:repeat(var(--st-kolommen,8),minmax(0,1fr));
  gap:0;
}
.st{position:relative;aspect-ratio:1;display:grid;place-items:center}
.st__onder,.st__boven{position:absolute;inset:0}
.st__onder{background:var(--st-vlak)}
.st__boven{background:var(--bos);opacity:0}  /* begintoestand 1 achter html.js;
                                               de kleurgolf (E4) veegt hem weg */
.st__ding{
  position:relative;z-index:2;
  display:grid;place-items:center;text-align:center;
  width:100%;
  color:var(--st-ink);
}
.st__merk{
  display:block;width:min(62%,120px);aspect-ratio:3/1;
  background:var(--st-ink);
  -webkit-mask:url(../assets/img/logo-woordmerk-web.webp) center/contain no-repeat;
          mask:url(../assets/img/logo-woordmerk-web.webp) center/contain no-repeat;
}
.st__motief{
  width:34%;height:auto;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
}
.st__winkel{
  font-family:'Roboto',system-ui,sans-serif;
  font-size:.9rem;font-weight:600;letter-spacing:.18em;line-height:1;
}
.st--bos    {--st-vlak:var(--bos);    --st-ink:var(--vanille)}
.st--vanille{--st-vlak:var(--vanille);--st-ink:var(--inkt)}
.st--goud   {--st-vlak:var(--goud);   --st-ink:var(--inkt)}
.st--wit    {--st-vlak:var(--wit);    --st-ink:var(--inkt)}

/* De voet staat in css/kop-voet.css. */


/* ── 7. BEGINTOESTANDEN VOOR DE BEWEGING ──────────────────────────────────
   Alles wat iets verbergt staat uitsluitend achter html.js. Zonder JavaScript
   — of als zine.js faalt en het inline script .js na 1,5 s weghaalt — staat er
   een afgemaakte, volledig zichtbare pagina. Opacity blijft overal 1:
   een onthulling is een masker, nooit een fade.
   ──────────────────────────────────────────────────────────────────────── */

html.js [data-onthul="ar"]   {clip-path:inset(0% 0% 0% 100%)}
html.js [data-onthul="lat"]  {clip-path:inset(-40% 100% -40% -5%)}
html.js [data-onthul="beeld"]{clip-path:inset(0% 0% 100% 0%)}
html.js [data-onthul="beeld-rtl"]{clip-path:inset(0% 0% 0% 100%)}
html.js [data-onthul="beeld-op"] {clip-path:inset(100% 0% 0% 0%)}
html.js #vitrine .vitrine__stuk {clip-path:inset(100% 0% 0% 0%)}
html.js #opening .dek       {--voet:0}
/* De versiering in de goot van de opening. Een tween in een gepauzeerde
   tijdlijn zet zijn beginstand pas neer als de tijdlijn gaat lopen, en die
   wacht op de foto van het toneel. Zonder deze regel staat de ster dus in het
   eerste beeld op ware grootte op een leeg groen vlak, om daarna te
   verdwijnen en opnieuw op te komen. */
html.js #opening .dadel img,
html.js #opening .orn svg   {transform:scale(0)}
/* En om dezelfde reden de vloer en het meubel. Zonder deze twee regels staat
   de tafel in het eerste beeld op zijn plek, springt hij omlaag zodra de
   tijdlijn begint, en komt hij daarna op. De percentages horen bij de
   yPercent waarmee js/zine.js ze laat opkomen: lopen ze uiteen, dan springt
   het alsnog. scratchpad/openmeet.js bewaakt dat -- die kijkt of niets ooit
   terugspringt. */
/* Allebei precies de hoogte van de balk plus die van de tafel omlaag. In
   procenten van zichzelf kan niet: de balk zou dan ver genoeg zakken en de
   tafel niet, en dan schijnt de tafel door de strook waar de balk hoort te
   liggen -- een reep hout op een leeg groen vlak. Met deze maat staat de
   bovenrand van de tafel precies op de onderrand van het toneel, en dat is
   de vouw, want #opening is een scherm hoog min de kop. */
html.js #opening .toneel__balk,
html.js #opening .tafel        {transform:translateY(calc(var(--toneel-tafel) + var(--toneel-balk)))}
html.js .m__i                {transform:translateY(105%)}
html.js .lijn                {transform:scaleX(0)}
html.js .scrollhint .lijn    {transform:scaleY(0)}
html.js .st__boven           {opacity:1}


/* ── 8. MOBIEL ────────────────────────────────────────────────────────── */

@media (max-width:899px){
  :root{
    --breed:min(1360px,100% - 2 * clamp(1.2rem,5vw,2rem));
    --rand:12px;
  }
  .raster{grid-template-columns:repeat(6,minmax(0,1fr))}


  /* Op een smal scherm is het kleed het beeld: het mag de marge van .wrap
     opeten en van rand tot rand liggen. --rui is exact diezelfde marge, dus
     het kleed wordt precies zo breed als het scherm — geen 100vw, want dat
     telt op een desktop de schuifbalk mee en levert een horizontale schuif. */
  .tapijt{
    --rui:clamp(1.2rem,5vw,2rem);
    width:calc(100% + 2 * var(--rui));
    margin-inline:calc(-1 * var(--rui));
  }

  /* Onder de 900 px staat de zin weer over de volle breedte en mag hij dus
     terug naar zijn oude maat; de krans zakt eronder, gecentreerd. De
     ondergrens blijft 1,45rem: bij 390 px past de langste regel dan nog
     net binnen .wrap. */
  :root{--nl-manifest:clamp(1.45rem,4.2vw,2.9rem)}
  .manifest__blok{grid-column:1 / -1}
  .krans{grid-column:1 / -1;width:min(380px,78%);margin-inline:auto}

  .merk__kicker{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:1.2rem}
  .merk__plaat .plaat{aspect-ratio:4/3}
  .tafellijst{grid-column:1 / -1;order:2}


  #sluitraster{--st-kolommen:6}
  }

@media (max-width:599px){
  .raster{grid-template-columns:minmax(0,1fr)}
  .raster > *{grid-column:1 / -1!important}


  .merk__plaat .plaat{aspect-ratio:1/1}
  .merk__plaat .plaat img{object-position:52% 50%}

  .horizon{aspect-ratio:3/2}
  .verkoop{flex-direction:column;align-items:flex-start;gap:1.2rem;text-align:left}
  .verkoop__midden{text-align:left;flex:none}



  #sluitraster{--st-kolommen:4}
  .st__winkel{font-size:.78rem;letter-spacing:.14em}

  .tekstlink{min-height:44px;display:inline-flex;align-items:center}
  /* het logo blijft 40 px (spec), het raakvlak eromheen wordt 44 x 44 */
  .kop__merk{display:inline-block;padding:2px;margin:-2px}
}


/* ── 9. GEREDUCEERDE BEWEGING ─────────────────────────────────────────────
   Geen Lenis, nul ScrollTriggers, alles direct in eindtoestand. De pagina is
   volledig leesbaar en volledig statisch. Geen restbeweging, geen "zachte"
   variant.
   ──────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  /* De sterregel hieronder zet elke animatie op een duizendste milliseconde,
     dus ook die van de paginaovergang. Hier staat hij er nog eens met zoveel
     woorden bij: geen overgang, gewoon springen. */
  @view-transition{navigation:none}
  html.js [data-onthul]    {clip-path:none!important}
  html.js #opening .dek    {--voet:1!important}
  html.js #opening .dadel img,
  html.js #opening .orn svg,
  html.js #opening .toneel__balk,
  html.js #opening .tafel  {transform:none!important}
  html.js #vitrine .vitrine__stuk{clip-path:none!important}
  html.js .m__i,
  html.js .lijn,
  html.js .st__boven       {opacity:0!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


#manifest,#merk,#assortiment,#kleed,#horizon,#sluiting{position:relative}

/* ══ ORNAMENTEN ═══════════════════════════════════════════════════════════
   Twee acht-punts sterren uit de merkset, verspreid langs de zijranden.
   Decoratief: pointer-events uit, aria-hidden in de markup. Ze drijven mee
   met de scroll (transform-only) en staan nooit boven tekst.            */
.orn{
  position:absolute;z-index:0;pointer-events:none;
  color:var(--goud);opacity:1;
  /* De goot is exact de marge die .wrap openlaat. Elke ster blijft daarbinnen:
     zichtbaar breed is nooit meer dan de goot, dus een ster komt nooit achter
     een letter te staan. --m regelt de maat, de klasse regelt de overhang. */
  --goot:clamp(1.5rem,6vw,5rem);
  width:var(--orn-w);
}
.orn svg{width:100%;height:auto;display:block;fill:currentColor}

/* Vol uit de muur: helemaal te zien, tegen de rand aan. */
/* De bovengrens is de goot, met marge voor de draaiing: een gedraaide ster
   is breder dan zijn doos. Hoe groot --m ook staat, de inkt blijft in de
   marge en dus buiten de tekstkolom. */
.orn--vol{--orn-w:min(calc(var(--goot) * var(--m,.7)), calc(var(--goot) * .78))}
.orn--vol.orn--l{left:calc(var(--goot) * .06)}
.orn--vol.orn--r{right:calc(var(--goot) * .06)}

/* Half uit de muur: de pagina snijdt hem doormidden. */
.orn--half{--orn-w:min(calc(var(--goot) * var(--m,1.4)), calc(var(--goot) * 1.6))}
.orn--half.orn--l{left:calc(-1 * var(--orn-w) / 2)}
.orn--half.orn--r{right:calc(-1 * var(--orn-w) / 2)}

/* Onder de 900 px zet §2 --breed op een smallere marge, en dan is de goot
   niet meer wat hier staat. .dadel--rand doet dit al — .orn had het nooit
   gekregen, en dat is te zien: de halve ster in §02 en de volle in §03 staan
   daar op de tekst, op elke breedte van 834 omlaag. Gemeten, en met dezelfde
   proef op de versie ervoor gecontroleerd dat het er al stond.

   En wat van de muur af staat kan niet meer: naar binnen opschuiven in een
   goot van een duim is de tekstkolom in. Die gaan uit, net als .dadel--vrij. */
@media (max-width:899px){
  .orn,
  .hoop{--goot:clamp(1.2rem,5vw,2rem)}
  .orn--los,
  .hoop--los{display:none}
}

@media (max-width:720px){
  /* de goot is dan nog maar een centimeter: alles hangt half de muur uit,
     anders eet de ster de tekstkolom op */
  .orn--vol{--orn-w:min(calc(var(--goot) * var(--m,.8) * 1.5), calc(var(--goot) * 1.4))}
  .orn--vol.orn--l{left:calc(-1 * var(--orn-w) / 3)}
  .orn--vol.orn--r{right:calc(-1 * var(--orn-w) / 3)}
}
/* Van de muur af: hij staat niet tegen de rand maar een eind naar binnen,
   nog steeds binnen de goot. Smaller dan .orn--vol, want wat je naar binnen
   opschuift moet je in breedte inleveren — anders komt de punt alsnog achter
   een letter. Samen met --vol en --half staan de sterren zo op drie
   afstanden van de rand in plaats van twee, en dat alleen al haalt de
   regelmaat eruit. */
.orn--los{--orn-w:min(calc(var(--goot) * var(--m,.5)), calc(var(--goot) * .56))}
.orn--los.orn--l{left:calc(var(--goot) * .34)}
.orn--los.orn--r{right:calc(var(--goot) * .34)}

@media (prefers-reduced-motion:reduce){ .orn{transition:none} }


/* ══ HOOPJES ════════════════════════════════════════════════════
   Eén ster in de goot is een accent; een handjevol bloemetjes bij elkaar is
   een hoopje. Ze liggen door elkaar, in verschillende maten en een beetje
   scheef, zoals iets dat er neergelegd is en niet iets dat uitgezet is.

   De garantie is dezelfde als bij de sterren: de inkt blijft in de goot en
   dus buiten de tekstkolom, en er steekt niets buiten de sectie. Die volgt
   hier uit de bouw en niet uit goed mikken.

   Het hoopje is een vierkante doos in de goot. Elk bloemetje staat op --x en
   --y in procenten van die doos, met zijn middelpunt op dat punt, en is --m
   van de doos breed. Een gedraaid vierkant groeit rond zijn midden tot 0,71
   keer zijn zijde, dus zolang --x en --y tussen 35,4 x --m en 100 min dat
   blijven, raakt het bloemetje de rand van de doos niet — hoe scheef het ook
   staat. Die grens staat niet in de css maar wordt gecontroleerd door
   scratchpad/hoopjes.js, dat per breedte meet of er inkt over de kolom komt.

   Onder de 720 px is de goot nog maar een duim breed. Een hoopje van drie
   bloemetjes wordt daar een gele vlek, dus daar gaan ze uit — de losse
   sterren blijven. */
.hoop{
  position:absolute;z-index:0;pointer-events:none;
  color:var(--goud);
  --goot:clamp(1.5rem,6vw,5rem);
  top:var(--y);
  width:var(--hoop-w);aspect-ratio:1;
}
.hoop--vol{--hoop-w:calc(var(--goot) * .86)}
.hoop--vol.hoop--l{left:calc(var(--goot) * .04)}
.hoop--vol.hoop--r{right:calc(var(--goot) * .04)}

/* En het hoopje dat van de muur af ligt. Smaller, want het schuift naar
   binnen op en de goot wordt niet breder. */
.hoop--los{--hoop-w:calc(var(--goot) * .60)}
.hoop--los.hoop--l{left:calc(var(--goot) * .32)}
.hoop--los.hoop--r{right:calc(var(--goot) * .32)}

/* --bx en --by en niet --x en --y: --y is op .hoop de plek in de sectie,
   net als bij een dadel, en die erft door naar de bloemetjes. Eén vergeten
   waarde en het bloemetje springt naar de hoogte van het hele hoopje. */
.hoop__b{
  position:absolute;left:var(--bx);top:var(--by);
  width:calc(var(--hoop-w) * var(--m));aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  fill:currentColor;display:block;
}

/* Onder de 720 px is de goot een duim breed, en vier bloemetjes in een duim
   zijn geen hoopje maar een gele veeg. Het hoopje klapt daar in tot zijn
   eerste — en grootste — bloem, die dan net als een volle ster half de muur
   uit hangt. Zo staat er op een telefoon nog steeds geel in de marge in
   plaats van niets.

   De maat en de plek staan hier op de eigenschappen zelf en niet op --bx,
   --by en --m: die staan inline op elk bloemetje, en een inline custom
   property wint van elke regel in een stylesheet, ook uit een media query.
   Het masker eromheen (translate + rotate) blijft staan, dus de bloem houdt
   zijn scheve stand. */
@media (max-width:720px){
  .hoop__b{display:none}
  .hoop__b:first-child{
    display:block;top:50%;
    /* Eerst stond hier 1,15 en dat was te breed. De bloem staat scheef, en
       een gedraaid vierkant is (cos + sin) keer zo breed als zijn zijde —
       bij de scheefste stand in de sjablonen, 24 graden, is dat 1,32. Met
       zijn middelpunt op 0,281 van de goot mag hij dan tot 1,09 x de goot
       breed zijn voordat zijn binnenrand de tekst raakt. Op 360 px stak hij
       twee pixels over de eerste regel van de receptkop heen. */
    width:var(--goot);
  }
  /* En het middelpunt dichter naar de muur, zodat hij een stuk de muur uit
     hangt zoals een volle ster dat ook doet, en aan de binnenkant ruimte
     overhoudt. */
  .hoop--l .hoop__b:first-child{left:28%}
  .hoop--r .hoop__b:first-child{left:72%}
}


/* ══ GRAVURES ═════════════════════════════════════════════════
   Vier arabesken uit het vormenboek: een krans, een vlecht, een kader en een
   ovaal. Ze staan op de plaquettes, het prikbord, de contacthoek, de
   wegwijzers, de receptkaarten en de lege beeldvakken.

   Ze liggen NIET als <svg> in de pagina maar als masker op een vlak, en dat
   is dezelfde truc als de boog in de kop: het pad is het masker en niet de
   vulling, dus de kleur blijft een kleur uit de css en staat niet in het
   bestand. --m blijft daarmee de enige knop, precies zoals bij de oude
   motieven.

   Dat het masker moet en niet inline kan, is een kwestie van gewicht. De
   oude motieven waren vijf keer een halve kilobyte; deze vier zijn samen
   honderdtwintig. In acht pagina's inline gezet zou elke pagina drie keer zo
   zwaar worden, en dan staat er op elke pagina beeld dat die pagina niet
   gebruikt. Als masker is het vier bestanden die de browser één keer haalt
   en daarna uit zijn cache pakt.

   Wat hier niet meer hoeft: één toon en één lijndikte bewaken. Een masker
   kent maar één kleur — die van het vlak eronder — en waar twee lijnen elkaar
   kruisen is het masker gewoon dekkend. Oplichtende kruispunten kunnen niet
   meer bestaan; dat volgt uit de techniek en niet uit een afspraak. */
.gravure{
  display:block;pointer-events:none;
  background:var(--m,var(--vanille-zacht));
  -webkit-mask:var(--gravure) no-repeat center / contain;
          mask:var(--gravure) no-repeat center / contain;
  aspect-ratio:1;
}
.gravure[data-gravure="krans"] {--gravure:url("../assets/img/gravure-krans.svg")}
.gravure[data-gravure="vlecht"]{--gravure:url("../assets/img/gravure-vlecht.svg")}
.gravure[data-gravure="kader"] {--gravure:url("../assets/img/gravure-kader.svg")}
.gravure[data-gravure="ovaal"] {--gravure:url("../assets/img/gravure-ovaal.svg")}


/* ══ DADELS ═══════════════════════════════════════════════════════════════
   De pagina is de tafel, en er zijn dadels overheen gerold: hier en daar
   eentje, nooit twee dicht bij elkaar. Ze staan als los kind in de sectie,
   vóór .wrap, dus ze schilderen altijd achter de inhoud.

   Twee soorten, elk met een eigen garantie.

   .dadel--rand ligt in de marge die .wrap openlaat. Maat én afstand tot de
   rand rekenen daarom in --marge en niet in procenten van de sectie: dat is
   het verschil tussen "meestal net goed" en "kan niet fout".

   Een dadel staat scheef, en een gedraaide doos groeit rond zijn MIDDEN: bij
   hooguit 24 graden steekt hij aan beide kanten ongeveer 0,15 x zijn breedte
   uit. Daarom twee grenzen op --x en --m: --m blijft onder 0,66 en --x staat
   nooit lager dan 0,15 x --m. Zo raakt de inkt de tekstkolom niet en steekt
   er niets buiten de sectie — een horizontale schuifbalk is onmogelijk.

   .dadel--vrij ligt juist middenin, op een leeg stuk vlak. Dat kan alleen
   zolang er ruimte naast de tekstkolom is; onder 900 px loopt die kolom van
   rand tot rand en gaan ze uit.                                          */
.dadel{
  position:absolute;z-index:0;pointer-events:none;
  top:var(--y);
  filter:drop-shadow(0 3px 8px rgba(8,18,6,.5));
  opacity:.94;
}
.dadel img{display:block;width:100%;height:auto}
.dadel--rand{
  /* exact de marge van .wrap uit §2; onder 900 px verspringt die en de dadel mee */
  --marge:clamp(1.5rem,6vw,5rem);
  width:min(calc(var(--marge) * var(--m,.5)), calc(var(--marge) * .66));
  transform:rotate(var(--r,0deg));
}
.dadel--rand.dadel--l{left:calc(var(--marge) * var(--x,.15))}
.dadel--rand.dadel--r{right:calc(var(--marge) * var(--x,.15))}
.dadel--vrij{
  width:clamp(20px, calc(var(--m,3) * 1vw), calc(var(--m,3) * 14px));
  transform:rotate(var(--r,0deg));
}
.dadel--vrij.dadel--l{left:var(--x)}
.dadel--vrij.dadel--r{right:var(--x)}
/* Eén uitzondering op "altijd erachter": op het witte kleed van §04 ligt de
   dadel er juist bovenop — daar is het paneel de tafel. Alleen op een leeg
   stuk vlak, nooit over een regel. */
.dadel--op{z-index:1}

@media (max-width:899px){
  .dadel--rand{--marge:clamp(1.2rem,5vw,2rem)}
  .dadel--vrij{display:none}
}


/* ══ NAVIGATIE ════════════════════════════════════════════════════════════
   Geen pillen: die vochten met het woordmerk en gaven de kop een knoppenbalk
   in plaats van een merkregel. Nu kapitalen met veel spatiëring en één gouden
   haarlijn die van links invaart. De huidige pagina houdt die lijn vast. */
/* .navlink staat in css/kop-voet.css. */


/* ── De receptkaart ───────────────────────────────────────────────────────
   Op de thuispagina en op recepten.html, uit tools/recepten.py. Hetzelfde
   blok als de etalage en contact: --inkt met het beeld als tegel erin, zodat
   de kaart een lijst om de foto is. De hele kaart is de link.

   Het beeldvak toont een foto van het gerecht als die er is (--foto, vult het
   vak), anders een uitgesneden schaal op vanille (--schaal), anders de pakken
   waarmee je het maakt (--spul). Bij de laatste twee ligt er een gravure
   achter, zoals bij de beloftes. */
.rkaart-vak{display:flex}
.rkaart{
  display:flex;flex-direction:column;width:100%;
  padding:clamp(.7rem,1.3vw,.95rem);
  background:var(--inkt);
  border-radius:var(--rond);
  color:inherit;text-decoration:none;
  transition:transform .45s var(--ease-ui);
}
.rkaart:focus-visible{outline:2px solid var(--goud);outline-offset:4px}

.rkaart__beeld{
  position:relative;
  display:grid;place-items:center;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--vanille);
  border-radius:var(--rond-in);
  /* De pakken rekenen in de breedte van dit vak (cqw): een procent-hoogte in
     een flexrij in een rastervak loste niet op, en dan stonden ze op hun
     eigen maat en vielen ze onderaan uit het vak. */
  container-type:inline-size;
}
.rkaart__beeld > *{grid-area:1 / 1}
.rkaart__motief{--m:var(--bos);width:94%;opacity:.16}
.rkaart__foto{
  width:100%;height:100%;object-fit:cover;
  /* uitsnede en zoom per foto (style-attribuut); de zoom draait om hetzelfde
     punt als de uitsnede, zodat dat punt in het vak blijft */
  object-position:var(--uitsnede,50% 50%);
  transform-origin:var(--uitsnede,50% 50%);
  scale:var(--zoom,1);
  transition:scale .7s var(--ease-ui);
}
.rkaart__schaal{
  position:relative;width:auto;height:86%;
  transition:scale .7s var(--ease-ui),rotate .7s var(--ease-ui);
}
.rkaart__pakken{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;gap:4cqw;
  width:86%;
  transition:scale .7s var(--ease-ui);
}
.rkaart__pak{
  height:46cqw;width:auto;min-width:0;max-width:30cqw;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 .6rem .7rem rgba(9,20,12,.26));
}

.rkaart__tekst{
  display:flex;flex-direction:column;gap:.55rem;flex:1;
  padding:clamp(1rem,2vw,1.4rem) clamp(.45rem,1vw,.75rem) clamp(.45rem,1vw,.7rem);
}
.rkaart__naam{
  margin:0;color:var(--vanille);
  font-size:var(--nl-kop);font-weight:400;line-height:1.15;
  transition:color .3s var(--ease-ui);
}
.rkaart__zin{margin:0;color:var(--vanille-zacht);font-size:var(--nl-body);font-weight:300;line-height:1.7}
.rkaart__feit{
  margin:0;color:var(--goud);
  font-size:var(--label);font-weight:500;letter-spacing:.04em;line-height:1.4;
}
.rkaart__mee{margin:0;color:var(--vanille-zacht);font-size:var(--nl-body);font-weight:300;line-height:1.6}
/* Ziet eruit als de gouden pil, maar is geen eigen link: de kaart is de link,
   en een link in een link bestaat niet. */
.rkaart__knop{
  align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.25rem;
  border-radius:999px;
  background:var(--goud);color:var(--inkt);
  font-size:var(--knop);font-weight:600;line-height:1.2;
}
.rkaart__knop .pijl{transition:translate .35s var(--ease-ui)}

@media (hover:hover) and (pointer:fine){
  .rkaart:hover{transform:translateY(-.35rem)}
  .rkaart:hover .rkaart__foto{scale:calc(var(--zoom,1) * 1.04)}
  .rkaart:hover .rkaart__pakken{scale:1.04}
  .rkaart:hover .rkaart__schaal{scale:1.05;rotate:6deg}
  .rkaart:hover .rkaart__naam{color:var(--goud)}
  .rkaart:hover .rkaart__knop .pijl{translate:.3rem 0}
}
@media (prefers-reduced-motion:reduce){
  .rkaart,.rkaart__foto,.rkaart__schaal,.rkaart__pakken,.rkaart__knop .pijl{transition:none}
}

/* De receptkaarten komen op als ze in beeld scrollen, op de thuispagina en
   op recepten.html. Alleen waar de browser een tijdlijn op het scrollen
   kent; elders staan ze er gewoon. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rkaart-vak{
      animation:rkaart-op linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
  }
}
@keyframes rkaart-op{from{opacity:0;transform:translateY(28px) scale(.98)}}

/* De tekst en de knoppen liggen boven de producten. Het vlak eromheen laat
   klikken door, zodat de producten eronder aanwijsbaar blijven. */
#opening .opening__raam{z-index:5;pointer-events:none}
#opening .opening__raam a,#opening .opening__raam button{pointer-events:auto}
/* Tussen tablet en breed scherm komt de groep anders tegen de knoppen aan. */
@media (min-width:901px) and (max-width:1200px){
  #opening{--cm:min(.78vw,1.2vh)}
  .tafel__dek{--anker:calc((6% + 95%) / 1.12)}
}
@media (min-width:641px) and (max-width:900px){
  .dek{--hoog-x:.6}
  .dek--doos{--hoog:6}.dek--maamoul{--hoog:9}.dek--dolmeh{--hoog:4}
  .dek--foul{--hoog:7}.dek--basil-mango{--hoog:11}.dek--basil-granaat{--hoog:8}
}

/* Aanwijzen houdt de volgorde: een doos achteraan komt niet ineens voor het
   blik dat ervoor zweeft. Het kaartje staat boven de doos en heeft die
   voorrang niet nodig. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .dek--achter:hover,.dek--achter:focus-within{z-index:1}
}

/* ── Op de plank, op een rij ──────────────────────────────────────────
   Geen zweven en niets voor elkaar: de producten staan naast elkaar op de
   balk, rechts in beeld, op echte maten (--w in cm). De rij is zo breed als
   de som van de producten plus de tussenruimte; --cm schaalt hem per
   schermbreedte zodat hij naast de kop past. */
.tafel__dek{
  display:flex;align-items:flex-end;justify-content:flex-end;
  gap:calc(2.2 * var(--cm));
  padding-right:calc(100% * 6 / 112 + 4vw);
}
.dek,.dek--achter{
  position:relative;left:auto;top:auto;bottom:auto;
  margin-bottom:-2px;flex:none;
  width:calc(var(--w) * var(--cm));
  transform:none;z-index:2;
}
.dek__ding img{animation:none!important;translate:none;rotate:none}
.dek::before{
  bottom:0;width:96%;aspect-ratio:6 / 1;
  transform:translate(-50%,48%);
  opacity:var(--voet,1);animation:none!important;
  background:radial-gradient(ellipse closest-side,
    rgba(26,12,2,.85) 0%, rgba(26,12,2,.5) 45%, rgba(26,12,2,0) 100%);
  filter:blur(2px);
}
.dek--dolmeh{order:1}.dek--foul{order:2}.dek--doos{order:3}
.dek--maamoul{order:4}.dek--basil-mango{order:5}.dek--basil-granaat{order:6}
#opening{--cm:min(.66vw,1.25vh)}
@media (max-width:1200px){#opening{--cm:min(.58vw,1.2vh)}}
@media (max-width:900px){
  #opening{--cm:.98vw;--toneel-tafel:calc(24 * var(--cm))}
  .tafel__dek{justify-content:center;padding-right:0}
}

/* Ze staan óp de plank en niet erachter: de voet zakt een stuk over de
   bovenrand van de balk heen, zodat het hout onder ze doorloopt. */
.dek,.dek--achter{margin-bottom:calc(var(--toneel-balk) * -.42)}
.dek::before{transform:translate(-50%,40%);opacity:calc(var(--voet,1) * .9)}
.toneel .tafel{z-index:4}

/* ── Eén bloem ────────────────────────────────────────────────────────
   Op de hele site staat alleen nog de dubbele bloem (orn-ster-dubbel). De
   hoopjes van bloem, knop en blad in de goot staan uit, en het
   bloempatroon dat bij het aanwijzen op een knop verscheen ook. */
.hoop{display:none!important}
.pil::before,.knop::before{display:none!important}