/* ═══════════════════════════════════════════════════════════════════════════
   DE THUISPAGINA — en sinds kort ook ONS VERHAAL

   Ons verhaal (ons-verhaal.html) laadt dit blad ook: het merk, de beloftes en
   contact stonden op de thuispagina en zijn daarheen verhuisd, met hun
   opmaak. Hier staat dus wat op een van die twee pagina's staat.

   Dit blad heette over-ons.css, en die naam klopte zolang de pagina zo heette.
   Ze heet niet meer zo: ze ís de thuispagina, en er stond ook een menu-item
   "Over ons" dat je vanaf de thuispagina naar de thuispagina bracht. Dat item
   is weg — het merk linksboven gaat naar huis, en dat is genoeg.

   De rest van deze pagina draait op zine.css: het toneel, het manifest, het
   gegraveerde kader, het kleed met de schalen, de horizon en de sluiting staan
   daar. Alleen de beloftes, het merk, de vitrine, de gerechtenrij,
   het schap, contact en de sluitdingen zijn van deze pagina alleen, en die staan hier — apart, zodat
   zine.css onaangeroerd blijft en de andere pagina's er niets van merken.

   Alles hieronder leunt op de tokens en de type-klassen die zine.css al zet;
   er wordt geen kleur, maat of ritme opnieuw bedacht.
   ══════════════════════════════════════════════════════════════════════════ */

#belofte,
#mensen,
#gerechten,
#contact{position:relative;padding-block:var(--lucht)}
.verkoop__zin{margin:.4rem 0 0;color:var(--vanille-zacht);max-width:44ch}

/* ── de opening ───────────────────────────────────────────────────────────
   Twee regels erbij onder de kop met de twee schriften: de kopregel die zegt
   waar dit over gaat, en een tweede alinea onder de eerste. .opening__zin
   staat in zine.css; deze twee horen bij deze pagina en dus hier. */
.opening__kicker{margin:.1rem 0 clamp(.8rem,2vh,1.3rem);color:var(--goud)}
.opening__na{
  margin-top:clamp(.7rem,1.8vh,1.1rem);
  color:var(--vanille-zacht);max-width:42ch;
}

/* Zonder js is er geen clip-path die iets verbergt; de drie secties hier
   hangen aan hetzelfde data-blok dat zine.js afloopt. Faalt dat script, dan
   valt html.js weg en staat alles er gewoon. */

/* ── de kop van een sectie ────────────────────────────────────────────────
   Kicker, één regel groot, en een regel body eronder. Dezelfde opbouw als
   #assortiment, zodat de pagina één ritme houdt. */
.belofte__top,
.mensen__top,
.gerechten__top{
  display:flex;flex-direction:column;gap:clamp(.6rem,1.6vh,1rem);
  margin-bottom:clamp(2rem,5vh,3.4rem);
}
.belofte__zin,
.mensen__zin,
.gerechten__zin{margin:0;color:var(--vanille)}
/* Deze twee stonden samen met .gerechten__onder in één regel. Die laatste is
   eruit gegaan toen dat blok zijn ondertitel verloor, en de regel bleef met
   een komma achter een selector staan -- waarmee .belofte__onder en
   .mensen__onder onderdeel werden van de selector die erna kwam, .beloftes.
   Die alinea's kregen dus een raster van drie kolommen over zich heen en
   braken af op een derde van hun kolom. */
.belofte__onder,
.mensen__onder{margin:0;color:var(--vanille-zacht)}

/* ── De drie beloftes ──────────────────────────────────────
   Hier stonden drie gelijke rechthoeken met een haarlijn eromheen, op één
   lijn, met een motief als vulling erachter. Dat leest als een formulier en
   niet als een pagina over eten — en het was ook het enige stuk van deze
   pagina zonder één foto.

   Nu is elk van de drie een plaat: een gravure met een voorwerp erin. Dat is
   letterlijk dezelfde vorm als de krans bij het manifest, waar de schaal
   dadels midden in het ornament ligt, maar dan drie keer en klein. De gravures
   zijn de vt-motieven die al in de <defs> van de pagina staan; ze hebben hun
   eigen rechthoek aan boord, dus de haarlijn eromheen mag weg.

   De drie staan niet op één lijn en niet recht. --hoog zet elke plaat op een
   andere hoogte en --kant geeft hem een paar graden. Die twee samen zijn het
   verschil tussen drie kaarten en drie dingen die op tafel zijn neergelegd.
   Alleen de plaat draait; de kop en de tekst eronder blijven recht, want
   gedraaide tekst leest als een ongeluk en niet als een keuze. */
.beloftes{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.belofte{
  position:relative;
  display:flex;flex-direction:column;gap:clamp(.7rem,1.8vh,1.1rem);
  margin-top:var(--hoog,0);
}
/* De plaquette is vierkant, want de motieven zijn dat ook. Het voorwerp staat
   er middenin en vult iets meer dan de helft: groter en het raakt de gravure,
   kleiner en het zweeft.

   Dit stond op .plaat zonder meer, en .plaat is het beeldkader van de hele
   site (zie zine.css). De foto in het gegraveerde kader van de naam kreeg daarmee
   een breedte van 18rem in een kader van 1280: een lijst met een postzegel
   erin en verder leeg groen. Nu hangt de regel aan de sectie waar hij voor
   bedoeld is. */
.belofte .plaat{
  margin:0 0 clamp(.3rem,1vh,.6rem);
  width:min(100%,18rem);aspect-ratio:1;
  display:grid;place-items:center;
  transform:rotate(var(--kant,0deg));
}
.plaat__gravure{
  --m:var(--vanille-zacht);
  /* inset:0 zet alle vier de zijden, dus de maat ligt vast en de
     aspect-ratio van .gravure doet hier niets — dat klopt: het motief mag
     de hele plaquette vullen. mask-size:contain houdt hem vierkant. */
  position:absolute;inset:0;
}
.plaat__ding{
  position:relative;z-index:1;
  width:var(--vul,54%);height:auto;
  filter:var(--foto);
}
.belofte__kop{margin:0;position:relative;color:var(--vanille);font-size:var(--nl-kop)}
.belofte__tekst{margin:0;position:relative;color:var(--vanille-zacht);max-width:min(38ch,100%)}

/* ── De etalage pal onder de kop ──────────────────────────────────────────
   Eén product in het midden en de andere twee klein ernaast, als een flat-lay
   op de plank. js/etalage.js zet data-plek op midden, links of rechts, en
   alles hieronder volgt daaruit met css-overgangen. Zonder script staat het
   er ook: dadels in het midden, de andere twee ernaast.

   Eén maat stuurt het hele toneel: --maat. Alle afstanden op het toneel zijn
   pixels van een breed scherm maal --maat, zodat een telefoon dezelfde
   compositie krijgt, alleen kleiner. */
.etalage{
  --maat:1;
  --stap:min(29vw,26rem);        /* hoe ver de twee kleintjes van het midden liggen */
  --ease-etalage:cubic-bezier(.22,.8,.2,1);
  /* Een tikje voorbij het doel en dan terug: zo landt iets in plaats van dat
     het stopt. Alleen voor wat neergelegd wordt, niet voor tekst. */
  --ease-veer:cubic-bezier(.34,1.3,.5,1);
  --px:0;--py:0;                 /* de muis, van -1 tot 1 (js/etalage.js) */
  position:relative;
  padding-block:clamp(2.2rem,5vh,3.6rem) clamp(2.2rem,5vh,3.4rem);
  overflow-x:clip;
}
.etalage__kop{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.5rem,1.4vh,.9rem);
}
.etalage__titel{margin:0;color:var(--vanille)}

.etalage__toneel{
  position:relative;
  height:calc(480px * var(--maat));
  margin-top:clamp(.4rem,1.6vh,1.2rem);
  touch-action:pan-y;
}
/* De krans ligt vast in het midden en de producten schuiven eroverheen. Hij
   draait heel langzaam rond, bij elke stap een twaalfde slag extra, en hij
   schuift tegen de muis in: de diepste laag. */
.etalage__krans{
  --m:var(--vanille-zacht);
  position:absolute;left:50%;top:50%;z-index:0;
  width:calc(450px * var(--maat));
  translate:calc(-50% - var(--px) * 10px) calc(-50% - var(--py) * 6px);
  rotate:var(--krans-draai,0deg);
  opacity:.26;
  animation:etalage-krans 140s linear infinite;
  transition:rotate 1.1s var(--ease-etalage),translate .7s ease-out;
}
@keyframes etalage-krans{to{transform:rotate(360deg)}}
.etalage__rij{list-style:none;margin:0;padding:0;position:absolute;inset:0}

.etalage__stuk{
  --x:0;--s:1;
  position:absolute;left:50%;top:50%;z-index:1;
  width:calc(var(--pw) * var(--maat) * 1px);
  translate:calc(-50% + var(--x) * var(--stap)) -50%;
  scale:var(--s);
  /* Ernaast liggen ze wat donkerder: verder weg van het licht, en zo is het
     midden zonder pijl of rand het midden. */
  filter:brightness(.72) saturate(.85);
  cursor:pointer;
  transition:
    translate .95s var(--ease-veer),
    scale .95s var(--ease-veer),
    filter .9s var(--ease-etalage),
    opacity .3s linear;
}
.etalage__stuk[data-plek="midden"]{z-index:3;filter:none;cursor:auto}
.etalage__stuk[data-plek="links"]{--x:-1;--s:.5}
.etalage__stuk[data-plek="rechts"]{--x:1;--s:.5}
/* Van links naar rechts gaat hij niet dwars door het midden: eerst verder
   weg en uit beeld, dan aan de andere kant weer binnen. */
.etalage__stuk.is-weg{opacity:0}
.etalage__stuk.is-sprong{opacity:0;transition:none}

.etalage__pak{
  position:relative;z-index:2;
  display:block;width:100%;height:auto;
  rotate:var(--draai,0deg);
  translate:calc(var(--px) * 7px) calc(var(--py) * 5px);
  filter:drop-shadow(0 calc(14px * var(--maat)) calc(22px * var(--maat)) rgba(9,20,12,.5));
  transition:translate .6s ease-out;
}
/* Het pak in het midden ligt niet doodstil: het deint heel licht, alsof het
   net is neergelegd. En wie over tafel geschoven wordt helt even over. */
.etalage__stuk[data-plek="midden"] .etalage__pak{animation:etalage-zweef 5.6s ease-in-out infinite}
.etalage__stuk.is-zwaai .etalage__pak{animation:etalage-zwaai .95s cubic-bezier(.3,.7,.3,1)}
@keyframes etalage-zweef{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(calc(-9px * var(--maat))) rotate(.7deg)}
}
@keyframes etalage-zwaai{
  0%{transform:rotate(0)}
  35%{transform:rotate(var(--zwaai,-7deg))}
  70%{transform:rotate(calc(var(--zwaai,-7deg) * -.3))}
  100%{transform:rotate(0)}
}

/* Wat erbij hoort: dadels, een schaal. Alleen bij het midden, en ze komen
   na het product: eerst de doos neerleggen, dan wat ernaast ligt. */
.etalage__bij{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* de bovenste laag: schuift het verst mee met de muis */
  translate:calc(var(--px) * 16px) calc(var(--py) * 10px);
  transition:translate .6s ease-out;
}
/* Ze vallen erbij: van een stukje hoger, iets gedraaid en iets groter, en
   landen met een veertje. Daarna drijven ze, elk op een eigen moment. */
.etalage__ding{
  --ty:calc(var(--dy) * var(--maat) * 1px);
  position:absolute;left:50%;top:50%;
  width:calc(var(--b) * var(--maat) * 1px);height:auto;
  translate:calc(-50% + var(--dx) * var(--maat) * 1px) calc(-50% + var(--ty) - 46px);
  rotate:calc(var(--r) - 28deg);
  scale:1.12;
  opacity:0;
  transition:opacity .2s linear,translate .2s ease-in,rotate .2s ease-in,scale .2s ease-in;
}
.etalage__stuk[data-plek="midden"] .etalage__ding{
  opacity:1;
  translate:calc(-50% + var(--dx) * var(--maat) * 1px) calc(-50% + var(--ty));
  rotate:var(--r);
  scale:1;
  animation:etalage-drijf 6.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * -2.1s);
  transition:
    opacity .35s linear calc(.42s + var(--i) * .12s),
    translate .9s var(--ease-veer) calc(.42s + var(--i) * .12s),
    rotate .9s var(--ease-veer) calc(.42s + var(--i) * .12s),
    scale .9s var(--ease-veer) calc(.42s + var(--i) * .12s);
}
@keyframes etalage-drijf{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(3px,-6px) rotate(3deg)}
}

/* Voordat de etalage in beeld is liggen de dingen er nog niet naast;
   js/etalage.js haalt dit weg zodra hij in beeld komt. */
.etalage.is-wacht .etalage__stuk[data-plek="midden"] .etalage__ding{
  opacity:0;
  translate:calc(-50% + var(--dx) * var(--maat) * 1px) calc(-50% + var(--ty) - 46px);
  rotate:calc(var(--r) - 28deg);
  scale:1.12;
}

.etalage__pijl{
  position:absolute;top:50%;z-index:5;
  display:grid;place-items:center;
  width:52px;height:52px;padding:0;
  border:1px solid rgba(223,237,192,.45);border-radius:50%;
  background:rgba(18,37,26,.6);color:var(--vanille);
  translate:0 -50%;
  cursor:pointer;
  transition:background .3s var(--ease-ui),border-color .3s var(--ease-ui),color .3s var(--ease-ui);
}
.etalage__pijl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.etalage__pijl--terug{left:max(.5rem,calc(50% - var(--stap) * 1.5))}
.etalage__pijl--verder{right:max(.5rem,calc(50% - var(--stap) * 1.5))}
.etalage__pijl--verder svg{rotate:180deg}
.etalage__pijl:hover{background:var(--inkt);border-color:var(--goud);color:var(--goud)}
.etalage__pijl:focus-visible{outline:2px solid var(--goud);outline-offset:3px}

.etalage__onder{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.6rem,1.8vh,1.1rem);
}
/* De drie teksten liggen in dezelfde cel: het blok is zo hoog als de
   langste, en er springt niets als je verder klikt. */
.etalage__teksten{display:grid;width:min(100%,42rem)}
.etalage__tekst{
  grid-area:1 / 1;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .25s linear,translate .25s ease-in,visibility 0s .25s;
}
.etalage__tekst.is-actief{
  opacity:1;visibility:visible;translate:0 0;
  transition:opacity .5s linear .3s,translate .7s var(--ease-veer) .3s,visibility 0s;
}
/* Onder het toneel alleen de naam en de knop. Er stonden ook een categorie,
   een omschrijving en de verpakking, elk in een eigen maat en kleur, en een
   labeltje naast het pak met de naam nog eens: zes soorten tekst voor één
   product. De naam zegt wat het is; de rest staat een klik verder. */
.etalage__naam{
  margin:0;color:var(--vanille);
  font-size:clamp(1.35rem,2vw,1.75rem);font-weight:400;line-height:1.25;
}
.etalage__weg{margin:.35rem 0 0}

html.no-js .etalage__pijl{display:none}

@media (max-width:1100px){.etalage{--maat:.86}}
@media (max-width:899px){.etalage{--maat:.76;--stap:36vw}}
/* Op een telefoon liggen de twee anderen half buiten beeld: genoeg om te
   zien dat er meer is, en dat je kunt vegen. */
@media (max-width:599px){
  .etalage{--maat:.6;--stap:44vw}
  .etalage__pijl{width:44px;height:44px}
}
@media (max-width:380px){.etalage{--maat:.54}}
@media (prefers-reduced-motion:reduce){
  .etalage__krans,
  .etalage__stuk,
  .etalage__pak,
  .etalage__bij,
  .etalage__ding,
  .etalage__tekst,
  .etalage__stuk[data-plek="midden"] .etalage__pak,
  .etalage__stuk[data-plek="midden"] .etalage__ding,
  .etalage__tekst.is-actief{transition:none;animation:none}
}

/* ── De gerechtenrij ──────────────────────────────────────────────────
   De pagina liet zien wat er is en waar het te krijgen is, maar niet wat je
   ermee maakt: recepten stonden hier alleen als woord in het menu en als knop
   onderaan. Er staan er nu drie, tussen de producten en de winkels in.

   De kaart zelf (.rkaart) staat in zine.css, want recepten.html heeft
   dezelfde. Hier staat alleen het raster.

   Drie naast elkaar tot 900 en daaronder onder elkaar, net als de vitrine.
   Dat is geen toeval: het zijn twee rijen op dezelfde pagina en ze horen
   hetzelfde te breken. */
.gerechten__rij{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);
  /* Wél even hoog, en op recepten.html niet. Daar staan twee kaarten met heel
     verschillende hoeveelheden tekst naast elkaar en leest gelijk trekken als
     witruimte die niet klopt; hier staan drie kaarten met dezelfde vier regels
     en dan is de onderrand die niet uitlijnt juist het rommelige. */
  align-items:stretch;
}
@media (max-width:899px){
  .gerechten__rij{grid-template-columns:1fr;gap:clamp(1.4rem,4vh,2.4rem)}
}

/* Twee secties liepen dood: je las ze uit en er was niets om aan te wijzen.
   De recepten stonden vanaf deze pagina zelfs maar één keer genoemd, in de
   knop helemaal onderaan, terwijl het een van de drie bestemmingen is. */

/* Het prikbord naast het verhaal. De krant en het tekenblad hangen scheef
   over elkaar heen, met een gravure erachter die half onder de krant
   verdwijnt — dat laatste is het punt: iets dat je niet helemaal ziet leest
   als een stapel, iets dat je helemaal ziet als een plaatje.

   Ze staan in procenten van het prikbord zelf en niet in pixels, dus de hele
   stapel schaalt mee met de kolom waarin hij hangt. */
.prikbord{
  grid-column:8 / 13;grid-row:1;
  position:relative;aspect-ratio:1 / .96;
  align-self:center;
}
.prikbord__gravure{
  --m:var(--vanille-zacht);
  position:absolute;right:10%;top:8%;width:58%;
  pointer-events:none;transform:rotate(9deg);
}

.prikbord__stuk{
  position:absolute;height:auto;display:block;
  filter:var(--foto);
  /* Een vage slagschaduw zodat de twee vellen uit elkaar te houden zijn; op
     een groen vlak is dat het enige wat zegt welk vel bovenop ligt. */
  box-shadow:0 clamp(.4rem,1.2vw,1rem) clamp(1rem,3vw,2.4rem) rgba(9,20,12,.34);
}
.prikbord__krant{left:4%;top:0;width:54%;transform:rotate(-4.5deg);z-index:2}
.prikbord__blad{right:0;bottom:2%;width:46%;transform:rotate(6deg);z-index:1}

/* Het verhaal houdt de linkerhelft. Zonder die begrenzing loopt de alinea
   onder het prikbord door en staat er tekst achter de krant. */
.mensen__raster{row-gap:clamp(2rem,5vh,3.4rem)}
/* Midden naast het prikbord: bovenaan hing de tekst met een gat van
   vierhonderd pixels eronder, en dat las als een blok dat halfleeg is. */
.mensen__raster .mensen__top{grid-column:1 / 7;grid-row:1;margin-bottom:0;align-self:center}

/* ── Contact ──────────────────────────────────────────────────────────
   Eén blok, links uitgelijnd, met dezelfde haarlijn eromheen als de beloftes.
   Zolang er geen geverifieerde gegevens zijn staat hier alleen wat wél klopt. */
.contact__raster{align-items:center;row-gap:clamp(2rem,5vh,3.2rem)}
.contact__raam{
  grid-column:1 / 8;
  display:flex;flex-direction:column;gap:clamp(.7rem,1.8vh,1.1rem);
  padding:clamp(1.6rem,4vw,2.8rem);
  border:1px solid rgba(223,237,192,.28);
  border-radius:var(--rond);
  max-width:64ch;
}

/* De hoek van de tafel. De rechterhelft was leeg groen, en onder "wij zitten
   hier gewoon" is dat precies het verkeerde beeld. Nu brandt er een lantaarn
   en staat er thee — twee dingen, half over elkaar, met een gravure eronder
   die een tafelkleed suggereert zonder er een te zijn. */
.hoek{
  grid-column:9 / 13;grid-row:1;
  position:relative;aspect-ratio:1 / .9;
}
.hoek__gravure{
  --m:var(--vanille-zacht);
  position:absolute;left:0;bottom:2%;width:78%;
  pointer-events:none;transform:rotate(-7deg);
}

.hoek__ding{position:absolute;height:auto;display:block;filter:var(--foto)}
.hoek__lamp{right:6%;top:0;width:44%;transform:rotate(3deg);z-index:2}
.hoek__glas{left:2%;bottom:0;width:50%;transform:rotate(-5deg);z-index:1}
.contact__zin{margin:0;color:var(--vanille)}
.contact__tekst{margin:0;color:var(--vanille-zacht)}
/* Het adres naast de twee regels waarop je ons bereikt. Naast elkaar zolang er
   ruimte is, daaronder gestapeld. */
.contact__gegevens{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  gap:clamp(1rem,3vw,2.4rem);
  margin-top:clamp(.6rem,1.6vh,1rem);
  font-size:var(--nl-body);font-weight:300;line-height:1.8;
  color:var(--vanille-zacht);
}
.contact__adres{font-style:normal}
.contact__wie{color:var(--vanille)}
.contact__lijn{margin:0;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}

/* Hier stond het schap: zeven pakken onder de regel over de partnerwinkels
   op de thuispagina. Die regel en dat schap zijn weg -- de zeven stonden
   al in de vitrine en in de winkel, en de knop ernaast was de derde naar
   dezelfde pagina. .dekkaart blijft in zine.css: de dingen op de tafel in
   de kop gebruiken hem ook. */

/* De roos en de kaars naast de slotregel stonden hier. Die sectie is van de
   thuispagina af; op contact en de receptenpagina staat hij nog, maar daar
   hebben die twee dingen nooit gelegen. */

/* ── smaller ──────────────────────────────────────────────────────────────
   Drie beloftes naast elkaar past tot ongeveer 900 px; de mensen tot 1040.
   Daaronder halveren en daarna stapelen. */
@media (max-width:1040px){
  /* Het prikbord en de hoek naast de tekst worden hier te smal om nog iets te
     zijn. Ze gaan eronder staan, halve breedte, en houden hun scheefheid. */
  .mensen__raster .mensen__top{grid-column:1 / -1}
  .prikbord{grid-column:1 / -1;grid-row:2;width:min(30rem,88%);margin-inline:auto}
  .contact__raam{grid-column:1 / -1}
  .hoek{grid-column:1 / -1;grid-row:2;width:min(24rem,74%);margin-inline:auto}
}
@media (max-width:900px){
  .beloftes{grid-template-columns:1fr;gap:clamp(2rem,5vh,3rem)}
  /* Onder elkaar is de trap zinloos — en erger: hij duwt de eerste plaat
     zomaar naar beneden. De hoogtes gaan eruit, de scheefheid blijft. */
  .belofte{margin-top:0}
  .belofte .plaat{width:min(17rem,64%)}
}

/* ── Onder andere te krijgen bij ──────────────────────────────────────────
   Een eigen sectie boven de voet, met de winkels in het groot. De merken zijn
   voorlopig nagebouwd (zie de opmerking in index.html). */
#winkels{position:relative;padding-block:clamp(2.5rem,7vh,4.5rem) var(--lucht)}
.winkels{display:flex;flex-direction:column;align-items:center;gap:clamp(1.2rem,3vh,2rem);text-align:center}
.winkels__kop{margin:0;color:var(--vanille);font-size:var(--nl-kop);font-weight:400}
.winkels__rij{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,2.4rem)}
/* De schaduw als box-shadow en niet als filter, en de animatie zonder schaal:
   een filter of een schaal op een vlak laat de browser het als plaatje
   rekenen, en dan werden de letters van de logo's zacht. */
.winkel{
  display:flex;
  height:clamp(5.5rem,9vw,8.5rem);max-width:100%;
}
.winkel__merk,.winkel__logo{
  height:100%;width:auto;max-width:100%;display:block;border-radius:var(--rond-in);
  box-shadow:0 1rem 1.6rem rgba(9,20,12,.35);
  shape-rendering:geometricPrecision;text-rendering:geometricPrecision;
}
.winkels__ook{margin:0;max-width:40ch;color:var(--vanille-zacht);font-size:var(--nl-body)}
/* Jumbo is een los woordmerk met een eigen schaduw, geen tegel: geen
   kaderschaduw, en lager, want het is vijf keer zo breed als hoog. */
.winkel--jumbo{height:clamp(3rem,4.8vw,4.6rem);align-self:center}
.winkel--jumbo .winkel__logo{box-shadow:none;border-radius:0}
.winkels__let{margin:0;max-width:44ch;color:var(--vanille-zacht);font-size:var(--nl-body);font-weight:300}
.winkels__let .tekstlink{color:var(--goud);font:inherit}
@media (max-width:520px){.winkel{height:5.4rem}.winkel--jumbo{height:3.4rem}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .winkel{animation:winkel-op linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes winkel-op{from{opacity:0;translate:0 28px}}

/* De merkregel en de knoppen staan iets lager in de kop, dichter bij de
   producten op de balk. Relatief verschoven, zodat er niets anders meeschuift. */
#opening .opening__raam{position:relative;top:clamp(1.5rem,7vh,4.5rem)}
@media (max-width:640px){#opening .opening__raam{top:clamp(.8rem,3vh,1.6rem)}}