/* ══════════════════════════════════════════════════════════════════════════
   DE KOP EN DE VOET — de twee dingen die op élke pagina hetzelfde zijn

   Ze stonden twee keer: één keer in reis.css voor de homepage en één keer in
   zine.css voor de rest. Dat is precies zo lang goed gegaan als het duurde
   voordat er iemand naar keek — de menuknoppen op de homepage kregen een
   randje en op de andere pagina's een streep, en dat is hetzelfde menu dat er
   anders uitziet als je doorklikt. Eén bestand dus, en elke pagina laadt het.

   Het mag maar op vijf kleuren rekenen, want dat zijn de enige die zowel
   reis.css als zine.css zetten: --inkt, --bos, --vanille, --vanille-zacht en
   --goud. Al het andere staat hieronder zelf.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --kv-soepel:cubic-bezier(.2,.8,.3,1);
  --kv-rand:clamp(1rem,2.6vw,2.6rem);   /* hoever kop en voet van de schermrand blijven */
  /* Het verval van de kromme: hoeveel lager zijn diepste punt ligt dan zijn
     hoogste. Het is niet de hoogte van de balk — de boog hangt eronder — maar
     wel precies hoever hij over de pagina valt.

     In het merkbestand is dat verval 9,4% van de breedte. Op 1440 px zou dat
     135 px zijn en dat is een kwart van een laptopscherm aan goud over de
     tekst; op 46 px is het 3,2%. De S wordt daarmee platgedrukt maar blijft een
     S, en dat is de hele reden dat juist deze kromme het uithoudt. Op een
     telefoon is de 24 px die overblijft naar verhouding 6,2% — bijna het
     origineel, want daar is het scherm smal. */
  --kv-boog:clamp(24px,3.2vw,46px);
}

/* ── de kop ─────────────────────────────────────────────────────────
   Blijft staan terwijl je scrolt, op elke pagina, en draagt de boog.

   DE BOOG IS OVERGENOMEN UIT HET ILLUSTRATOR-BESTAND VAN HET MERK en niet meer
   met het oog nagetekend. Daar hebben vier vormen gelegen — de golf van de
   oude website, de veeg van de banner, een nette boog met een buik, en een
   zelfbedachte swoosh — en geen ervan was het. Nu staat het echte pad erin.

   Uit dat bestand komen drie krommen, alle drie kubieken over de volle breedte,
   in zijn eigen assenstelsel van 1700,8 bij 566,9:

     de rand van het groen   (-17,2 123,6) (732,9 359,3) (1266,1 -162,8) (1719,9 98,2)
     de bovenrand van goud   ( -4,3 116,1) (733,9 337,0) (1342,5 -178,5) (1721,5  98,2)
     de onderrand van goud   ( -4,5 135,5) (743,5 375,6) (1354,3 -153,3) (1721,3 117,5)

   Het is een S en geen boog, en dat is precies waarom hij werkt. Hij begint
   links op ruim de helft van zijn diepte, zakt door tot zijn diepste punt op
   24% van de breedte, zwiept dan in één lange lijn omhoog tot hij op 83% de
   bovenkant raakt, en kantelt in de laatste zeshonderd eenheden weer naar
   beneden. Die omkering is het verschil met alles wat er eerder lag: een kromme
   die één kant op gaat leest bij weinig hoogte als een scheve streep, maar een
   kromme die van richting verandert blijft een kromme, hoe plat je hem ook
   drukt. Daarom mag deze in een dunne balk staan en de vorige niet.

   HET GOUD IS EEN BAND MET TWEE EIGEN RANDEN, geen lijn en geen verschoven
   kopie. In het merkbestand lopen die twee randen niet evenwijdig: verticaal
   gemeten zijn ze 19,4 eenheden uit elkaar aan de uiteinden en 29 in het
   midden. Dat komt doordat de band loodrecht op zichzelf even dik is en de
   kromme in het midden het steilst loopt — het is dus een streek van een kwast
   en geen streep van een liniaal, en van links naar rechts wordt hij dun, dik,
   dun. Dat is wat op de foto van de banner te zien was.

   Die verhouding is hier aangehouden en de band als geheel met 1,7 verdikt.
   Verdikken kan zonder de vorm aan te tasten: de bovenrand is
   (U+L)/2 − m·(L−U)/2 en de onderrand (U+L)/2 + m·(L−U)/2, en omdat beide
   lineair zijn in de controlepunten blijven het echte kubieken — punt voor
   punt uit te rekenen, geen benadering. Zonder die factor is het goud op 1440
   px vijfenhalve pixel aan de randen; nu is het negen aan de randen en veertien
   op de buik.

   DE BOOG HANGT ONDER DE BALK IN PLAATS VAN ERIN, en dat scheelt de hele hoogte
   die het gevecht van de vorige ronden was. De balk is nu alleen nog lucht, het
   merk en het menu: 78 px waar hij er 97 was en daarvoor 192. Het verval van de
   kromme — --kv-boog, 46 px op een breed scherm — zit vóór die balk uit en
   valt over de pagina.

   Dat kan alleen omdat de kromme zijn hoogste punt precies op de onderrand van
   de balk heeft. Op 83% van de breedte raakt hij die rand en verder naar links
   zakt hij weg; nergens komt hij erboven. Onder het menu staat dus altijd inkt
   en nooit pagina, en dat is de voorwaarde — zou de bovenkant van de boogzone
   één pixel onder de tekst liggen, dan schoven daar de foto's van de pagina
   tussen de letters door.

   Twee maskers, één per vlak, en het pad is het masker en niet de vulling: zo
   blijven beide kleuren een kleur uit de css en staat er geen hex in een
   data-uri. Het masker van het inktvlak heeft twee lagen — de kromme onderaan
   over --kv-boog hoog en een effen vlak over de rest — zodat één element de
   hele vorm is. Ze zitten op de vlakken en niet op .kop zelf, want een masker
   knipt ook de letters en de focusring van wat erin staat.

   Wat onder de boog door scrolt gaat er achterlangs. Dat is met opzet: het goud
   is de rand van de kop en geen bord dat ervoor hangt. Alles wat zelf plakt en
   dus bij die rand in de buurt komt — de categorieënbalk van de winkel, het
   filmpje bij een recept — rekent --kv-boog bij --kophoogte op. */
.kop{
  position:sticky;top:0;z-index:30;
  --kv-lucht:clamp(.55rem,1.2vh,.8rem);
  /* Onder net zoveel lucht als boven: de boog zit hier niet meer in. */
  padding-block:var(--kv-lucht);
}
.kop::before,
.kop::after{content:"";position:absolute;left:0;right:0;z-index:-1}

/* Het inktvlak: recht boven, de kromme onder. Het steekt precies --kv-boog
   onder de balk uit, want dat is het verval van de kromme en de onderste
   masker-laag is even hoog. */
.kop::before{
  top:0;bottom:calc(var(--kv-boog) * -1);
  background:var(--inkt);
  /* De rand van het groen uit het merkbestand, omgerekend naar een kader van
     1440 bij 120: x maal 1440/1737,1 vanaf de linkerrand, y maal 120/163,363
     vanaf het hoogste punt van de kromme. Boven- en onderkant van het kader
     zijn dus het hoogste en het diepste punt van de rand zelf. */
  --kv-inkt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,73.82 C621.81,246.96 1063.81,-136.56 1440,55.16 L1440,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
  --kv-effen:linear-gradient(#000,#000);
  /* De effen laag is één pixel hoger dan de ruimte die hij te vullen heeft, en
     overlapt dus de bovenkant van de kromme. Zonder die pixel valt er op
     sommige breedtes een haarlijn tussen de twee lagen waar de pagina
     doorheen schijnt — een streep over de volle breedte, dwars door de inkt. */
  -webkit-mask:var(--kv-inkt)  no-repeat bottom center / 100% var(--kv-boog),
               var(--kv-effen) no-repeat top    center / 100% calc(100% - var(--kv-boog) + 1px);
          mask:var(--kv-inkt)  no-repeat bottom center / 100% var(--kv-boog),
               var(--kv-effen) no-repeat top    center / 100% calc(100% - var(--kv-boog) + 1px);
}

/* De gouden band. Hij ligt in hetzelfde assenstelsel als het inktvlak —
   dezelfde schaal, dezelfde nulpunten — maar in een kader dat van -16 tot 142
   loopt in plaats van van 0 tot 120, want de band steekt aan twee kanten buiten
   het verval van de rand uit: dertien eenheden erboven en zeventien eronder.
   Zonder die overhoogte wordt hij boven en onder vlak afgesneden.

   Uit dat kader volgen de twee getallen hieronder rechtstreeks: 158 eenheden
   hoog is 79/60 van de 120 van de boog, en de onderkant ligt 142 eenheden onder
   de balk, dus 71/60. Ze horen bij elkaar; klopt de ene niet bij de andere, dan
   ligt de band niet meer op de kromme en blijft er een strook inkt onder het
   goud staan. Dat is precies wat er één keer gebeurde.

   De band loopt door tot buiten beeld — van -24 tot 1466 — en de laatste
   stukjes zijn recht, langs de raaklijn van de kromme. Anders eindigt hij met
   een punt op de schermrand en leest dat als een lijn die er niet helemaal is.
   Wat je ziet is het begin en het einde van een streek die doorgaat.

   De rand van het inktvlak valt over de volle breedte binnen de band —
   nagerekend op duizend punten — dus het goud dekt de naad altijd af. */
.kop::after{
  bottom:calc(var(--kv-boog) * -71 / 60);
  height:calc(var(--kv-boog) * 79 / 60);
  /* Het verloop van het merkbestand. Het goud is daar geen vlakke kleur maar
     metaal: donker brons aan de uiteinden, bijna wit op het lichtste punt.
     --goud van de site valt er middenin, dus dat blijft het midden van de
     schaal en alleen de twee uitersten komen erbij. */
  --kv-brons:#A67E23;
  --kv-glans:#FBF3A9;
  background:linear-gradient(to right,
    var(--kv-brons) 0%, #D7BD60 20%, var(--goud) 30%,
    var(--kv-glans) 50%, var(--goud) 70%, var(--kv-brons) 100%);
  --kv-lint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -16 1440 158' preserveAspectRatio='none'%3E%3Cpath d='M-24,54.35 L10.75,63.32 C619.85,220.65 1123.72,-154.57 1441.38,50.2 L1466,66.07 L1466,90.64 L1441.1,74.3 C1140.35,-123.1 633.38,268.85 10.47,87.55 L-24,77.52 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--kv-lint) no-repeat center / 100% 100%;
          mask:var(--kv-lint) no-repeat center / 100% 100%;
}

/* De volle breedte van het scherm en niet de kolom waar de rest in staat: het
   merk helemaal links, het menu helemaal rechts. */
.kop__rij{
  /* Boven het paneel: zie de stapeluitleg bij .menu verderop. */
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;row-gap:.6rem;
  width:100%;max-width:none;padding-inline:var(--kv-rand);margin-inline:0;
}
/* Een blokje lucht eromheen: het teken zelf is 46 maar de link eromheen
   mat 42 bij 42, en dat is net geen vingertop. */
.kop__merk{display:block;line-height:0;padding:2px}
/* Het ronde merk van de oude site, en niet het woordmerk: dat is het teken dat
   op de verpakkingen staat en op de zijkant van de truck op de kopfoto. Het is
   vierkant, dus één maat is genoeg — height:auto doet de rest.

   Hij heeft op 66 gestaan en toen op 84. Die 84 was te groot: bij een balk van
   negentig hoog vult een merk van vierentachtig hem helemaal en blijft er geen
   lucht over, en dan leest het als een sticker en niet als een merk. Zesenveertig
   laat het teken nog lezen — de naam, het blad, de rand — en houdt de balk
   slank. De gloed die er eerst omheen zat is eruit: die was er omdat er niets
   achter stond. */
.kop__merk img{
  width:clamp(62px,5.6vw,84px);height:auto;display:block;
}
/* Hij wordt niet kleiner zodra hij blijft staan, en dat is geprobeerd en
   teruggedraaid. Een plakkende kop houdt zijn plek in de pagina: klapt hij in,
   dan schuift alles eronder omhoog — ook #verhaal op de homepage, en reis.js
   heeft de bovenkant daarvan dan al opgemeten. Het gevolg was dat de tafel
   over de grond ging glijden, precies de ene regel waar dat hele verhaal op
   rust. Hij is daarom meteen zo groot als hij blijft. */
.kop__nav{display:flex;align-items:center;gap:clamp(.2rem,1vw,.9rem);flex-wrap:wrap}

/* ── de menuknoppen ───────────────────────────────────────────────────────
   De maat komt van de homepage: knoppen en geen woordjes, met genoeg ruimte
   eromheen om raak te tikken. Wat ze dóén komt van de andere pagina's: de
   letters lichten op en er veegt een gouden streep onder vandaan, van links
   naar rechts, de kant op waar je leest. Dat was eerst een randje dat om de
   hele knop verscheen, en dat leest als een vakje in plaats van als een link.

   De ruimte tussen de items zit in de rij en niet in de knoppen; zie
   .kop__nav hierboven voor waarom. */
.navlink{
  position:relative;
  display:inline-block;
  /* .95 als ondergrens: op een iPad in staande stand gaf .85 een raakvlak
     van 42 px en dat is twee te weinig. */
  padding:clamp(.95rem,1.6vh,1.1rem) clamp(.9rem,1.7vw,1.5rem);
  text-decoration:none;color:var(--vanille-zacht);
  font-size:clamp(.92rem,.95vw,1rem);font-weight:500;
  letter-spacing:.04em;line-height:1;
  /* Een menu-item breekt niet middenin: met vier links viel "Over ons" op een
     telefoon uiteen over twee regels, en dan lijkt het twee items. De rij mag
     wel afbreken — dat doet .kop__rij al met flex-wrap. */
  white-space:nowrap;
  /* Hier stonden drie schaduwen omheen, want de letters moesten hun contrast
     zelf dragen boven wat er toevallig onder langsschoof. Dat hoeft niet meer:
     de kop is nu een vlak van --inkt, en --vanille-zacht staat daar op 10,94:1.
     Schaduw op tekst die al contrast heeft maakt hem alleen viezig. */
  transition:color .35s var(--kv-soepel);
}
/* De streep is precies zo lang als het woord: de knop heeft geen ruimte opzij
   meer, dus links en rechts op nul. */
.navlink::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:clamp(.25rem,.6vh,.45rem);
  height:1px;background:var(--goud);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s var(--kv-soepel);
}
.navlink:hover,.navlink:focus-visible{color:var(--vanille)}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1)}
/* Waar je bent staat de streep er al, en die veegt dus niet weg als je hem
   aanwijst. */
/* De streep staat er op elk aria-current, en niet alleen op "page": op een
   receptpagina licht "Recepten" op met aria-current="true", want je valt er wel
   onder maar je bént er niet. */
.navlink[aria-current]{color:var(--vanille)}
.navlink[aria-current]::after{transform:scaleX(1)}
.navlink:focus-visible{outline:2px solid var(--goud);outline-offset:3px}

/* ── het menu op de telefoon ──────────────────────────────────────
   Hier zakte de rij knoppen onder het merk en pakte hij de volle breedte: drie
   woordjes op .68rem van rand tot rand, met een raakvlak van nog geen twaalf
   millimeter. Dat is geen menu maar een uitgeknepen bureaublad. Het is nu een
   knop die een vlak opent.

   De knop is een woord en geen hamburger. Drie streepjes boven elkaar is
   precies het teken dat hier niet meer mag, en het woord doet het werk beter:
   er staat "Menu", en zodra het open is "Sluit". Ze liggen in hetzelfde vakje
   over elkaar, anders springt de knop van breedte op het moment dat je hem
   indrukt en verschuift hij onder je vinger.

   Het vlak zit in de kop. Dat is geen ordekwestie maar een stapelkwestie: de
   kop is sticky met z-index 30 en maakt dus een eigen stapelcontext, en alles
   wat erin ligt komt in een keer boven de pagina uit. Binnen die context ligt
   het inktvlak op -1, het paneel op 1 en de rij met het merk en de knop op 2:
   het merk en de knop blijven dus zichtbaar en aanraakbaar terwijl het paneel
   eronder ligt. Sticky maakt geen bevattend blok voor position:fixed, dus het
   paneel meet zich nog gewoon aan het scherm. */

.kop__knop{
  display:none;                 /* staat alleen op de telefoon aan */
  place-items:center;
  /* 1 rem boven en onder en niet .8: met een regelhoogte van 1 op .88rem
     komt de knop dan op 46 px en haalt hij de 44 van een vingertop. */
  border:0;background:none;padding:1rem 1.15rem;
  font:inherit;color:var(--vanille-zacht);
  font-size:.98rem;font-weight:500;letter-spacing:.04em;line-height:1;
  border-bottom:1px solid var(--goud);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--kv-soepel);
}
.kop__knop:hover{color:var(--vanille)}
.kop__knop:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
/* Beide woorden in hetzelfde vak, zodat de knop de breedte van het langste
   aanhoudt en niet verspringt. */
.kop__knop-w{grid-area:1/1;transition:opacity .22s var(--kv-soepel)}
.kop__knop-w[data-w="open"]{opacity:0}
.kop__knop[aria-expanded="true"] .kop__knop-w[data-w="dicht"]{opacity:0}
.kop__knop[aria-expanded="true"] .kop__knop-w[data-w="open"]{opacity:1}

/* Het paneel. 100dvh en niet inset:0, want op een telefoon met een balk die in-
   en uitschuift is de vaste viewport de grote en valt de onderkant van het
   paneel onder die balk. */
.menu{
  position:fixed;left:0;right:0;top:0;
  height:100vh;height:100dvh;
  z-index:1;
  background:var(--inkt);
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(var(--kophoogte,96px) + clamp(1rem,4vh,2.4rem)) var(--kv-rand) clamp(1.6rem,5vh,3rem);
  /* De gravure steekt met opzet over de rechterrand heen. overflow-y:auto laat
     overflow-x op auto uitkomen, en dan kun je het paneel tien pixels opzij
     schuiven aan iets wat je niet eens hoort te zien. clip snijdt hem af
     zonder een tweede schuifrichting te maken. */
  overflow-x:clip;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transition:opacity .3s var(--kv-soepel);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}

/* De gravure eronder. Een effen toon en geen doorzichtigheid: --bos op --inkt
   staat op 1,9:1, genoeg om te zien dat er iets ligt en te weinig om de woorden
   erboven in de weg te zitten. Het masker staat hier en niet in zine.css, want
   tafel.html laadt die niet en de kop staat op elke pagina. */
.menu__gravure{
  position:absolute;
  right:calc(var(--kv-rand) * -.6);
  bottom:calc(var(--kv-rand) * -.4);
  width:min(68vw,460px);aspect-ratio:1;
  background:var(--bos,#2A5731);
  -webkit-mask:url("../assets/img/gravure-krans.svg") no-repeat center / contain;
          mask:url("../assets/img/gravure-krans.svg") no-repeat center / contain;
  pointer-events:none;
}

/* Op een telefoon staat de lijst midden in het vlak. Op een hoog scherm zou dat
   een gat geven: een tablet rechtop is 1024 hoog en dan staat er vierhonderd
   pixels niets boven het eerste item, en dat leest als een pagina die nog moet
   laden. Vanaf 820 hangt hij daarom aan de bovenkant, een stuk onder de kop. */
.menu__lijst{position:relative;display:flex;flex-direction:column;justify-content:center}
@media (min-height:820px){
  .menu__lijst{justify-content:flex-start;padding-top:clamp(1rem,9vh,5.5rem)}
}
.menu__link{
  position:relative;
  display:block;
  padding-block:clamp(.7rem,2.2vh,1.15rem);
  text-decoration:none;color:var(--vanille);
  font-size:clamp(1.9rem,10vw,3rem);font-weight:200;line-height:1.1;
  letter-spacing:-.025em;
}
/* De scheiding is een haarlijn tussen de items en geen streek die onder een
   woord vandaan veegt: op een aanraakscherm bestaat hover niet, dus die zou je
   hier nooit zien. */
.menu__link + .menu__link{border-top:1px solid rgba(201,219,175,.16)}
.menu__link[aria-current]{color:var(--goud)}
.menu__link:focus-visible{outline:2px solid var(--goud);outline-offset:2px}

/* De items komen los van elkaar omhoog. Niets beweegt verder dan een regel,
   want het paneel is er al: dit is het invullen ervan en geen tweede opkomst. */
.menu .menu__link{opacity:0;transform:translateY(14px);
  transition:opacity .34s var(--kv-soepel),transform .34s var(--kv-soepel)}
.menu.is-open .menu__link{opacity:1;transform:none}
.menu.is-open .menu__link:nth-child(1){transition-delay:.06s}
.menu.is-open .menu__link:nth-child(2){transition-delay:.11s}
.menu.is-open .menu__link:nth-child(3){transition-delay:.16s}
.menu.is-open .menu__link:nth-child(4){transition-delay:.21s}

.menu__voet{position:relative;margin-top:clamp(1.6rem,5vh,3rem);
  font-size:.95rem;line-height:1.9;color:var(--vanille-zacht)}
.menu__voet a{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(249,222,96,.45)}
/* De merkregel in Amiri, hetzelfde schrift als op de verpakking. Het Arabisch
   staat hier niet: dat is uit de fontset gehaald (zie fonts.css) en zou dus op
   een systeemletter terugvallen. */
.menu__regel{display:block;font-family:'Amiri',serif;font-weight:400;
  font-size:1.15rem;line-height:1.6;letter-spacing:.06em;
  color:var(--goud);margin-bottom:.5rem}

/* De omslag. Onder deze breedte is het merk groot en staat het menu achter een
   knop; erboven blijft de rij zoals hij was. 820 en niet 640, want een tablet
   rechtop is 768 breed en heeft er net zo goed wat aan. */
@media (max-width:820px){
  .kop__nav{display:none}
  .kop__knop{display:grid}
  /* Groot linksboven: het merk is het enige wat iemand hier hoeft te herkennen
     voordat hij iets aanwijst. 18vw loopt van 64 px op een kleine telefoon tot
     de bovengrens van 96, en dat is op een scherm van 390 breed een kwart van
     de breedte. */
  /* 18vw is op een telefoon zeventig pixels en dat is de maat die het
     hier moet hebben. De bovengrens van 96 raakte alleen een tablet, en
     daar staat het merk dan naast een menuknop van veertig. */
  .kop__merk img{width:clamp(78px,22vw,100px)}
  .kop__rij{gap:1rem;flex-wrap:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .menu,.menu .menu__link,.kop__knop-w{transition:none}
  .menu .menu__link{transform:none}
}

/* ── de voet ──────────────────────────────────────────────────────────────
   Vier kolommen: het merk, het menu, de gegevens en waar het ligt. auto-fit en
   geen vast getal, want dan vouwt hij vanzelf naar twee en naar één zonder dat
   er per breedte een regel bij hoeft.

   Hij hangt nergens aan: geen onthulling, geen tijdlijn. Een voet met een
   adres erin hoort er gewoon te staan, ook als er een script faalt. */
#voet{
  position:relative;z-index:1;background:var(--inkt);color:var(--vanille-zacht);
  padding-block:clamp(2.4rem,5vh,3.6rem);
}
#voet .wrap{width:min(100% - 2 * var(--kv-rand),1400px);margin-inline:auto}
.voet__lijn{display:block;height:1px;background:currentColor;opacity:.22;
  margin-bottom:clamp(2rem,5vh,3.2rem)}
.voet__kolommen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  font-size:.88rem;line-height:1.9;
}
.voet__kol h2{margin:0 0 .4rem;font-size:.95rem;font-weight:500;
  letter-spacing:.04em;color:var(--vanille)}
.voet__kol p{margin:0;font-size:inherit;color:inherit}
.voet__merk img{width:112px;height:auto;margin-bottom:1rem}
.voet__merkregel{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.voet__zin{margin:.6rem 0 0;max-width:32ch}
/* Uit elkaar en hoger: dit stond als regels van achtentwintig pixels met
   zes pixels ertussen, en dat is op een telefoon drie keer mis tikken. */
.voet__links{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.voet__links a{color:inherit;text-decoration:none;display:inline-block;padding-block:.5rem;
  border-bottom:1px solid transparent;transition:border-color .3s var(--kv-soepel)}
.voet__links a:hover{border-color:currentColor}
.voet__adres address{font-style:normal}
.voet__adres a{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(223,237,192,.3)}
.voet__adres a:hover{border-color:currentColor}
.voet__kol .tekstlink{display:inline-block;margin-top:.8rem;color:var(--goud);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s var(--kv-soepel)}
.voet__kol .tekstlink:hover{border-color:currentColor}
.voet__slot{margin-top:clamp(2.4rem,6vh,4rem);text-align:center}
.voet__slot .ar{font-size:1.4rem;line-height:1.6}
.voet__copy{margin-top:1rem;font-size:.9rem}
@media (max-width:599px){
  .voet__kolommen{text-align:center}
  .voet__links{align-items:center}
  .voet__merk img{margin-inline:auto}
  .voet__merkregel{justify-content:center}
  .voet__zin{margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .kop,.kop__merk img,.navlink,.navlink::after,
  .voet__links a,.voet__kol .tekstlink{transition:none}
}

/* Groothandel & B2B: hetzelfde omlijnde blok als op de contactpagina, onder
   de kolommen en boven de copyright. */
.voet__b2b{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.4rem;
  margin-top:clamp(2rem,5vh,3rem);padding:clamp(1rem,2vw,1.3rem) clamp(1rem,2.4vw,1.6rem);
  border:1px solid rgba(249,222,96,.35);border-radius:var(--rond-in,9px);
}
.voet__b2b-zin{display:flex;flex-direction:column;gap:.25rem;margin:0;flex:1 1 16rem;line-height:1.6}
.voet__b2b-kop{color:var(--goud);font-weight:500}
@media (max-width:700px){
  .voet__b2b{flex-direction:column;text-align:center}
  .voet__b2b-zin{flex:none;align-items:center}
}