@import url("../lettertypes/lettertypes.css");

/* ============================================================
   CAFÉ VUE GRANDIGÉ
   Palet en sfeer komen uit concept 1 v5 "De Klassieker".
   Chocoladebruin met de rood-oranje-amber banen uit het logo.
   Jaren zeventig, geen klassiek bruin café.

   Contrast is nagerekend tegen WCAG AA. Wat hier staat haalt het;
   de gedimde crème mag daarom níét verder gedimd worden met
   doorzichtigheid, dan zakt hij onder 4,5:1.
   ============================================================ */

:root {
  /* grond & vlakken — warm chocoladebruin, rechtstreeks uit het logo */
  --grond:        #33150A;
  --grond-diep:   #250F06;  /* alleen nog voor het drukraster en sluiers */
  --panel:        #3F1D11;
  --panel-licht:  #4C2616;  /* niet meer in gebruik als achtergrond */

  /* inkt */
  --creme:        #F5E7D2;  /* 13,8:1 op grond */
  --creme-dim:    #CBB093;  /*  8,1:1 op grond — de ondergrens, niet verder dimmen */

  /* de vier banen van het logo, van buiten naar binnen */
  --rood:         #C9252C;  /* alleen als vlak of baan: 3,0:1, te weinig voor tekst */
  --rood-licht:   #D9342F;  /* 3,6:1 — veilig voor grote displaytekst, zoals CAFÉ */
  --oranje:       #E8862A;  /* 6,3:1 — het werkaccent */
  --amber:        #F0AB42;  /* 8,5:1 — kleine tekst en links */

  /* Lichte vlakken. De pagina was overal bruin-op-bruin; een lichte
     kaart op donkere grond geeft diepte die je met nog een tint bruin
     nooit krijgt. Let op de inktset die erbij hoort: oranje en amber
     zijn op crème onleesbaar (2,2 en 1,6) en mogen daar alleen als
     rand of vlak. */
  --creme-vlak:      #F5E7D2;
  --op-licht:        #33150A;  /* 13,8:1 — lopende tekst op crème */
  --op-licht-dim:    #6B4634;  /*  6,8:1 — secundaire tekst op crème */
  --op-licht-accent: #A81E27;  /*  6,0:1 — koppen en iconen op crème */

  /* signaal */
  --groen-licht:  #86B27A;  /* het "nu geopend"-bolletje */

  /* De banenbundel als één herbruikbaar verloop. Harde overgangen, geen
     vervaging: het zijn vier stroken, geen kleurverloop.

     Let op de richting: to right, niet to bottom. Op een dunne
     horizontale regel geeft to bottom vier gestapelde strepen, en rood
     boven goud met donker eromheen leest onmiskenbaar als de Duitse
     vlag. Lopend over de lengte kan dat niet gebeuren, en het sluit
     bovendien beter aan bij het logo, waar de banen een pad volgen in
     plaats van plat op elkaar te liggen. */
  --banen: linear-gradient(to right,
    var(--rood)       0    25%,
    var(--rood-licht) 25%  50%,
    var(--oranje)     50%  75%,
    var(--amber)      75%  100%);

  /* randen — als losse tokens, zodat een randkleur op één plek verandert */
  --rand:         #E8862A44;
  --rand-sterk:   #E8862A99;
  --rand-fijn:    #E8862A26;

  /* Geen ronding op vlakken. De enige ronding op deze site is de bocht
     van het banenmotief; verder is alles rechthoekig, zoals drukwerk.
     Dat is een bewuste koerswijziging: zachte afgeronde kaarten met een
     randje zijn het handschrift van een andere kroeg in deze stad, en
     daar hoort deze site niet op te lijken. */
  --ronding: 0;
  --ronding-klein: 0;

  /* letters */
  --letter: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Koppen staan smal en zwaar, zoals de blokletter van het logo.
     Lopende tekst staat op normale breedte. */
  --smal: 78%;
  --smaller: 70%;

  /* ruimte — een schaal, geen losse getallen */
  --ruimte-1: .35rem;
  --ruimte-2: .7rem;
  --ruimte-3: 1.1rem;
  --ruimte-4: 1.8rem;
  --ruimte-5: 2.8rem;
  /* De sectiemaat. Geldt boven én onder, dus tussen twee hoofdstukken
     staat hij twee keer: op een laptop 70 + 70 = 140 px.

     Stond op clamp(3.5rem, 8vw, 6.5rem), oftewel 208 px tussen twee
     hoofdstukken. Dat werkte toen de secties nog van kleur wisselden en
     die ruimte de overgang moest dragen. Met één grond is het dood vlak
     geworden: zeven keer een kwart scherm zonder dat er iets gebeurt.
     De scheiding komt nu van het banenblokje en van het verschil tussen
     de ruime en de strakke secties, niet van de leegte zelf. */
  --ruimte-6: clamp(2.6rem, 5.5vw, 4.4rem);

  /* stapeling — benoemd, nooit losse getallen als 999 */
  --z-ruis:     1;
  --z-inhoud:   2;
  --z-snelbalk: 15;
  --z-balk:     20;
  --z-menu:     30;
  --z-lichtbak: 40;

  /* beweging */
  --uit: cubic-bezier(.22, 1, .36, 1);          /* ease-out-quint */
  --uit-zacht: cubic-bezier(.16, 1, .3, 1);     /* ease-out-expo */
}

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

html {
  background: var(--grond);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--creme);
  font-family: var(--letter);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.62;                 /* lichte tekst op donker heeft lucht nodig */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

::selection { background: var(--oranje); color: var(--grond); }

/* Fijne ruis over de hele pagina — geeft de vlakken de korrel van oud papier.
   Vast gepositioneerd, dus hij scrollt niet mee en blijft één laag. */
/* De korrel: een raster van 3px dat het vlakke bruin de textuur van
   drukwerk geeft.

   Hij lag hier als vaste laag óver de hele pagina (body::before, met
   mix-blend-mode: overlay). Daardoor lag hij ook over de foto's, en op
   een foto leest zo'n raster niet als papier maar als een rasterdruk —
   zwarte rondjes over de bar heen.

   Nu ligt hij als achtergrond ván de vlakken in plaats van erover. Een
   background-image staat achter de inhoud van het element, dus foto's
   dekken hem vanzelf af: de korrel zit op het bruin en nergens anders.

   Geen overlay-menging meer, want die werkt alleen als laag bovenop.
   Kale zwart op 6% geeft op dit bruin hetzelfde effect. */
.hero,
section,
footer {
  background-image: repeating-conic-gradient(#0000000f 0% 25%, transparent 0% 50%);
  background-size: 3px 3px;
}

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

/* --- overslaan-naar-inhoud, alleen zichtbaar bij toetsenbordgebruik --- */
.overslaan {
  position: absolute;
  left: .8rem;
  top: -4rem;
  z-index: calc(var(--z-balk) + 1);
  background: var(--oranje);
  color: var(--grond);
  padding: .7rem 1.2rem;
  text-decoration: none;
  font-weight: 600;
  transition: top .18s var(--uit);
}
.overslaan:focus { top: .8rem; }

.breed {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 3rem);
  position: relative;
  z-index: var(--z-inhoud);
}

.smal { max-width: 42rem; }

/* ============================================================
   TYPOGRAFIE
   Eén familie, Archivo, in twee stemmen. Koppen staan smal en zwaar
   in kapitalen — dat is de blokletter van het logo. Lopende tekst
   staat op normale breedte en normaal gewicht.

   Het verschil tussen die twee is groot genoeg om als twee
   lettertypes te lezen, terwijl het er één is. Dat is precies wat
   de breedte-as van een variabel lettertype je geeft.
   ============================================================ */

h1, h2, h3 {
  font-weight: 800;
  font-stretch: var(--smal);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.9rem, 9vw, 5.4rem);
  font-stretch: var(--smaller);
  line-height: .94;
  letter-spacing: -.012em;
  margin-bottom: var(--ruimte-3);
}

h2 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.008em;
}

h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-stretch: 86%;
  line-height: 1.15;
  letter-spacing: .005em;
}

p { margin: 0 0 var(--ruimte-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Kleine gezette labels. Bewust spaarzaam: alleen op de balk, knoppen
   en de dagbadges — niet als kopje boven elke sectie. */
.label {
  font-size: .8rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dim { color: var(--creme-dim); }

/* ============================================================
   SECTIEKOPPEN
   Een blokje van de vier banen boven de kop. Dat is het merkteken
   van het café, dus het hoeft niet uitgelegd te worden — en het
   scheelt een klein kapitaalregeltje boven elke sectie, wat toch
   stapelwerk is.
   ============================================================ */

section {
  padding-block: var(--ruimte-6);
  position: relative;
  z-index: var(--z-inhoud);
  /* Niet een vast getal maar de gemeten balk: die is op een telefoon
     twee regels hoog geworden, en op 5rem verdween de sectiekop er net
     achter. --balk-hoogte zet site.js; de 5rem is het vangnet voor als
     dat script wegvalt. */
  scroll-margin-top: calc(var(--balk-hoogte, 5rem) + 1rem);
}

.sectie-kop {
  text-align: center;
  /* Dicht op de inhoud die hij aankondigt. Stond op --ruimte-5 (45 px);
     daardoor zweefde de kop tussen twee secties in plaats van bij zijn
     eigen inhoud te horen. */
  margin-bottom: var(--ruimte-4);
}

/* ------------------------------------------------------------------
   Twee soorten sectie

   Zeven secties met dezelfde padding en dezelfde gecentreerde kop
   lopen in elkaar over: je scrollt door één lange band in plaats van
   langs hoofdstukken. Zolang de pagina twee achtergrondkleuren had
   verhulde dat kleurverschil de eentonigheid; met één grond niet meer.

   Vandaar twee ritmes, en de indeling volgt wat je met de sectie doet:

   RUIM EN GECENTREERD zijn de verhalende stukken — het café, de
   foto's, Instagram, de reviews. Daar mag je blijven hangen, dus
   krijgen ze lucht en staat de kop midden boven de inhoud.

   STRAK EN LINKS is het praktische stuk onderaan — Bezoek ons. Dat lees
   je niet, dat raadpleeg je: je zoekt een tijd of een adres. Een linkse
   kop leest sneller, want je oog hoeft niet eerst naar het midden. Het
   is meteen de laatste sectie, dus de pagina trekt onderaan samen in
   plaats van uit te waaieren.
   ------------------------------------------------------------------ */
#bezoek .sectie-kop { text-align: left; }
#bezoek .sectie-kop .banen { margin-inline: 0; }

/* Op een telefoon staat alles in het midden, ook de koppen die hierboven
   bewust links zijn gezet.

   Dat tweede ritme werkt op een breed scherm: daar stáát een linkse kop
   ergens, namelijk tegen de linkerkolom aan, en zie je in één oogopslag
   dat dit stuk anders is dan de rest. Op één kolom van 375px is er geen
   overkant om je tegen af te zetten. Dan is een linkse kop naast een
   gecentreerde geen ritme meer maar een oneffenheid: "Wat gasten zeggen"
   in het midden, "Bezoek ons" eronder tegen de rand.

   De tijdentabel en de adresregels blijven links. Gecentreerde lopende
   tekst geeft een rafelige linkerkant en leest trager, dus dat is niet
   iets om overal te doen.

   Bij "Een echte bruine kroeg" gaat de tekst wél mee, op verzoek. Daar
   is ook wat voor te zeggen: dat is de enige sectie waar de tekst op een
   telefoon op het beeld ligt in plaats van op de kale grond, en dan
   hangt een linkse alinea onder een gecentreerde kop scheef in een vlak
   dat zelf gecentreerd is. De alinea's zijn er bovendien kort. */
@media (max-width: 40rem) {
  #bezoek .sectie-kop { text-align: center; }
  #bezoek .sectie-kop .banen { margin-inline: auto; }

  /* "Een echte bruine kroeg" staat niet in een .sectie-kop maar in de
     linkerkolom van het tweeluik, met zijn eigen banenblokje ervoor. */
  .verhaal > h2 { text-align: center; }
  .verhaal > .banen { margin-inline: auto; }
  /* En de alinea's mee. margin-inline is nodig naast text-align: de
     openingszin heeft een max-width van 34ch, en zonder die marge staat
     dat smallere blok links terwijl de tekst erbinnen gecentreerd is. */
  .verhaal p {
    text-align: center;
    margin-inline: auto;
  }

  /* "Openingstijden" en "Adres & contact". */
  .blok h3 { text-align: center; }

  /* De adresregels ook. Drie korte regels — straat, postcode,
     telefoonnummer — zijn geen lopende tekst maar een blokje, en dat
     mag gecentreerd onder een gecentreerde kop. De tijdentabel blijft
     wel links: daar staan dag en tijd in twee kolommen tegenover
     elkaar, en dat is precies wat je aan het aflezen bent. */
  .contact { text-align: center; }
}

/* De banenbundel. Overal dezelfde vier stroken, alleen in andere
   maten: hier een blokje, onder de menubalk een streep over de volle
   breedte, in de hero een grote bocht. */
.banen {
  display: block;
  width: 5.5rem;
  height: .62rem;
  /* Links uitgelijnd, want hij hoort bij de kop eronder. In een
     gecentreerde sectiekop schuift hij mee naar het midden. */
  margin: 0 0 var(--ruimte-3);
  background: var(--banen);
  border-radius: 1px;
}
.sectie-kop .banen { margin-inline: auto; }

.sectie-intro {
  color: var(--creme-dim);
  margin: var(--ruimte-2) auto 0;
  max-width: 46ch;
  font-size: 1.02rem;
}

/* De grond van de pagina. Twee kleuren, meer niet.

   Er stonden er eerst vier: --grond, --grond-diep, --panel-licht en
   crème. Die drie bruintinten liggen zo dicht bij elkaar dat het niet
   als bedoeling leest maar als slordigheid — elk stuk pagina een
   nét iets andere kleur. Nu is de regel eenvoudig: donker is de
   pagina — alle secties staan erop. Crème komt nog op één plek voor:
   het kaartje bij Bezoek ons. Dat is geen sectie maar een gedrukt
   ding op de pagina, en juist doordat het nu het enige lichte vlak is,
   valt het meteen op als de plattegrond.

   Het onderscheid tussen secties komt van witruimte en de banenregel,
   niet van kleur. */
/* background-color en niet de background-korthand: die zou de
   scheidingsregel hieronder wegvagen. */
#over,
#fotos,
#insta,
#reviews,
#kaarten,
#bezoek   { background-color: var(--grond); color: var(--creme); }

/* Hier stond een naad: een streep van 2px in de banenkleuren bovenaan
   elke sectie. Die was nodig toen de pagina twee achtergrondkleuren had
   en de overgang tussen twee gelijk gekleurde secties onzichtbaar was.

   Met één grond doet hij dat werk niet meer, en dan valt op wat hij wél
   deed: het banenmotief twee keer vlak onder elkaar zetten, want een
   paar centimeter lager staat het blokje boven de sectiekop al. Zeven
   secties, zeven dubbelingen.

   De scheiding komt nu van de ruimte tussen de secties (--ruimte-6) en
   van dat blokje bij de kop. Het motief blijft daardoor een merkteken
   in plaats van behang. */

/* De foto ís de sectie. Geen ruimte boven of onder: de bar loopt van
   rand tot rand en de kop staat erop. De rand van de foto is hier zelf
   de scheiding met de secties erboven en eronder.

   De donkere grondkleur is alleen de vangnet-kleur voor het moment dat
   de foto nog laadt. */
#kaarten {
  padding-block: 0;
  background-color: var(--grond);
  color: var(--creme);
}

/* h2 en .sectie-intro erven hun kleur van de sectie; alleen #kaarten
   houdt een eigen regel omdat de foto daar de achtergrond is. */
#kaarten h2 { color: var(--creme); }
#kaarten .sectie-intro { color: var(--creme-dim); }

/* ============================================================
   KNOPPEN
   ============================================================ */

.knop {
  border-radius: var(--ronding-klein);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.9rem;                 /* aanraakvlak */
  padding: .75rem 1.7rem;
  border: 1px solid var(--oranje);
  background: none;
  color: var(--creme);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .24s var(--uit), color .24s var(--uit),
              transform .24s var(--uit), box-shadow .24s var(--uit);
}
.knop:hover,
.knop:focus-visible {
  background: var(--oranje);
  border-color: var(--oranje);
  color: var(--grond);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -10px #00000099;
}
/* De hoofdknop is massief oranje: op dit bruin roept die kleur het
   hardst, en met bruine letters erin haalt hij 6,3:1. */
.knop.vol {
  background: var(--oranje);
  border-color: var(--oranje);
  color: var(--grond);
}
.knop.vol:hover,
.knop.vol:focus-visible { background: var(--amber); border-color: var(--amber); }

.knop svg { flex: none; }

/* ============================================================
   DE DRIEHOEKSPIJL
   Eén vorm voor allebei de carrousels op de site: de kaarten op een
   telefoon, en de reviews.

   Een driehoek, geen pijl in een rondje. Uitgesproken lang en smal,
   zodat de bovenste en onderste hoek ver uit elkaar staan: de rechte
   zijde is een streep en de punt steekt er kort uit. Dat is dezelfde
   vorm als de banen in het logo — recht afgesneden, geen ronding, geen
   kader. Vandaar clip-path en geen border-truc: die tekent hetzelfde,
   maar met vier randen die je alle vier moet blijven natellen.

   Amber en niet oranje: dit is bediening, en amber is op deze grond de
   kleur die de site voor aanklikbaar gebruikt.

   De maat staat in twee eigenschappen, want naast een kaart hoort hij
   groter dan onder een tekstblok. De knop eromheen is altijd minstens
   44px: dat is de maat van een duim, en die haal je niet met een punt
   van veertien.
   ============================================================ */

.pijlknop {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  height: var(--knop-hoog, 44px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* De vorm hieronder wijst naar links; .om draait hem om. */
.pijlpunt {
  display: block;
  width: var(--punt-breed, 13px);
  height: var(--punt-hoog, 30px);
  background: var(--amber);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  transition: background-color .25s var(--uit), transform .25s var(--uit);
}
.pijlknop.om .pijlpunt { clip-path: polygon(0 0, 0 100%, 100% 50%); }

/* Crème alleen waar er echt een aanwijzer is. Op een telefoon blijft
   :hover na een tik gewoon aan staan — dan blijft de driehoek wit tot je
   ergens anders tikt, en dat leest als "deze knop staat aan". */
@media (hover: hover) {
  .pijlknop:hover .pijlpunt { background: var(--creme); }
}
.pijlknop:focus-visible .pijlpunt { background: var(--creme); }
/* Indrukken is het enige antwoord dat een tik krijgt; op een telefoon is
   er geen aanwijzer die er al overheen stond. */
.pijlknop:active .pijlpunt { transform: scale(.86); }
.pijlknop:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* ============================================================
   MENUBALK
   ============================================================ */

.balk {
  position: sticky;
  top: 0;
  z-index: var(--z-balk);
  background: #33150Af2;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -12px #000000cc;
}
/* De banen lopen over de volle breedte onder de balk door. Dit is het
   eerste wat je van het merk ziet, en het houdt de balk vast.

   Hij is tegelijk de voortgangsbalk: --voortgang wordt door site.js
   gezet en loopt van 0 naar 1 terwijl je zakt. Zonder JavaScript, en
   bij prefers-reduced-motion, blijft hij gewoon helemaal gevuld. */
.balk::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--banen);
  transform-origin: left;
}
.js .balk::after {
  transform: scaleX(var(--voortgang, 1));
}
.balk {
  --voortgang: 1;
}
/* De niet-gevulde rest blijft zichtbaar als een fijne lijn, anders
   verdwijnt de onderrand van de balk helemaal. */
.balk::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: #E8862A24;
}
@media (prefers-reduced-motion: reduce) {
  .js .balk::after { transform: none; }
}
.balk-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ruimte-3);
  padding-block: .7rem;
}

#hoofdmenu {
  justify-self: center;
}

.status {
  margin-right: -.6rem;
}

/* Het beeldmerk, letterlijk uit het logo: CAFÉ in rood, VUE GRANDIGÉ
   in oranje, allebei zwaar en smal in kapitalen. Getypt en niet als
   plaatje, zodat het op elk scherm scherp blijft en Google het leest. */
/* Let op: .merk staat ook in de footer, als getypte naam. De regels
   hieronder gelden dus voor allebei; wat alleen voor de balk geldt staat
   verderop onder .balk .merk. */
.merk {
  font-weight: 800;
  font-stretch: var(--smaller);
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--rood-licht);
  text-decoration: none;
  white-space: nowrap;
  /* Houd het klikdoel groot genoeg, maar haal een beetje hoogte uit de balk. */
  padding-block: .28rem;
}

/* In de balk staat geen getypte naam maar het logo. De letterregels
   hierboven doen daar niets, de afmeting wel: het logo is twee regels
   hoog (CAFE Vue / Grandige) en bepaalt daarmee de hoogte van de balk.
   38px houdt de sierletters net leesbaar zonder dat de balk een blok
   wordt. De hero rekent die hoogte er vanzelf af, want site.js meet de
   balk en zet --balk-hoogte. */
.balk .merk { display: block; }
.balk .merk img {
  height: 38px;
  width: auto;
}
@media (max-width: 40rem) {
  .balk .merk img { height: 32px; }
}

/* Het groepje om het logo. De status hoort er níét in: die staat in de
   html als eigen element en wordt door het raster van .balk-in
   geplaatst — rechts op een breed scherm, op een eigen regel op een
   telefoon. Hier stond eerder een opmerking dat de twee op een telefoon
   onder elkaar zouden staan; dat deed deze regel nooit, want de status
   is geen kind van .merk-groep. */
.merk-groep {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  margin-right: 0;
  min-width: 0;
  justify-self: start;
}
.merk-groep img {
  display: block;
  height: clamp(2.9rem, 3.5vw, 4.8rem);
  width: auto;
  max-width: none;
  object-fit: contain;
}
.merk b { color: var(--oranje); font-weight: 800; }

.status {
  justify-self: end;
  margin-left: 0;
  margin-right: .25rem;
}

.balk nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
}
.balk nav a {
  position: relative;
  color: var(--creme-dim);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .84rem;
  font-weight: 700;
  font-stretch: 88%;
  padding-block: .4rem;
  transition: color .22s var(--uit);
}
.balk nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--oranje);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--uit);
}
.balk nav a:hover,
.balk nav a:focus-visible { color: var(--amber); }
.balk nav a:hover::after,
.balk nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* --- het open/dicht-bolletje --- */
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--creme-dim);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* De korte tekst is er alleen voor de balk op een telefoon; overal
   anders staat de volle zin. display:none en niet transparant of buiten
   beeld: zo leest een schermlezer hem ook niet dubbel. */
.status .kort { display: none; }

.status .bol {
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--groen-licht);
  box-shadow: 0 0 0 0 #86B27A99;
  animation: hartslag 2.8s var(--uit-zacht) infinite;
}
.status.dicht .bol { background: var(--rood); animation: none; box-shadow: 0 0 8px #C9252C99; }
@keyframes hartslag {
  0%   { box-shadow: 0 0 0 0 #86B27A66; }
  70%  { box-shadow: 0 0 0 .5rem #86B27A00; }
  100% { box-shadow: 0 0 0 0 #86B27A00; }
}


/* --- menuknop op smalle schermen --- */
.menu-knop {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .55rem .85rem;
  min-height: 2.5rem;
  cursor: pointer;
}
.menu-knop .streepjes {
  position: relative;
  width: 1rem;
  height: .7rem;
  flex: none;
}
.menu-knop .streepjes::before,
.menu-knop .streepjes::after,
.menu-knop .streepjes span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--uit), opacity .2s linear;
}
.menu-knop .streepjes::before { top: 0; }
.menu-knop .streepjes span    { top: 50%; margin-top: -.75px; }
.menu-knop .streepjes::after  { bottom: 0; }
.menu-knop[aria-expanded="true"] .streepjes::before { transform: translateY(.335rem) rotate(45deg); }
.menu-knop[aria-expanded="true"] .streepjes span    { opacity: 0; }
.menu-knop[aria-expanded="true"] .streepjes::after  { transform: translateY(-.335rem) rotate(-45deg); }

@media (max-width: 60rem) {
  /* Een uitklappaneel onder de balk, niet schermvullend.
     Let op: .balk heeft backdrop-filter, en dat maakt de balk het
     referentiekader voor absoluut én vast gepositioneerde kinderen.
     Een position:fixed paneel zou zich dus naar de balk richten in
     plaats van naar het scherm — vandaar bewust absolute. */
  .balk nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grond);
    border-bottom: 1px solid var(--rand);
    box-shadow: 0 18px 32px -18px #000000dd;
    padding: var(--ruimte-2) clamp(1.2rem, 4vw, 3rem) var(--ruimte-3);
    max-height: 70dvh;
    overflow-y: auto;
    /* Uit beeld én uit de tabvolgorde zolang het menu dicht is. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.6rem);
    transition: opacity .24s var(--uit), transform .28s var(--uit), visibility .24s;
  }
  .balk nav[data-open="ja"] { visibility: visible; opacity: 1; transform: none; }
  .balk nav a {
    font-size: .95rem;
    letter-spacing: .16em;
    padding-block: .95rem;
    border-bottom: 1px solid #F5E7D21a;
  }
  .balk nav a::after { display: none; }
  .menu-knop { display: inline-flex; }

  /* De knop hoort rechts, niet in het midden. Zodra hij verschijnt zijn
     er drie dingen in de balk in plaats van twee, en dan komt hij in de
     middelste kolom terecht — tussen het logo en de status in, waar hij
     nergens bij hoort. Status naar het midden, knop naar de rand: het
     raster zelf blijft zoals het is.

     De rij staat er met de hand bij, en dat is geen overdaad. In de html
     komt de knop vóór de status, maar hier staat hij in een kolom
     ernáást. De automatische plaatsing van Grid werkt met een cursor die
     alleen vooruit loopt: krijgt een item een kolom die links van de
     vorige ligt, dan schuift hij een rij naar beneden. De status belandde
     daardoor onder het logo in plaats van ernaast. Met grid-row: 1 kan
     dat niet gebeuren. */
  .status    { grid-row: 1; grid-column: 2; }
  .menu-knop { grid-row: 1; grid-column: 3; justify-self: end; }

  .merk { padding-block: .2rem; }
  .status { font-size: .68rem; letter-spacing: .1em; }
  .status .bol { width: .45rem; height: .45rem; }
}

/* Op een telefoon paste de volle zin niet tussen het logo en de knop.
   Hij stond op nowrap in een kolom die niet kon krimpen, en bij de
   langste tekst — "Gesloten · morgen om 16:00 open" — liep hij dwars
   over de menuknop heen.

   De oplossing is niet een tweede regel maar een kortere zin. "Gesloten
   · om 12:00 weer open" zegt precies hetzelfde als "Gesloten tot 12:00",
   en het tweede past wél. Het zijn de wóórden die eraf gaan, niet de
   tijd: "tot 2" leest net zo goed als twee uur 's middags, en dan denkt
   iemand dat de zaak over een half uur sluit. status.js levert die
   korte vorm als apart veld.

   Nagerekend met de fontmetriek van Archivo: de langste korte tekst die
   deze openingstijden kunnen opleveren is "Morgen vanaf 16:00" met
   147px, en tussen logo en knop is op een iPhone SE 162px vrij.

   Het raster is hier auto-1fr-auto en niet 1fr-auto-1fr. Dat is het punt
   waar het eerder misging: een 1fr-kolom mag onder zijn inhoud krimpen,
   en dan schuift de knop over de tekst. Nu houden het logo en de knop
   altijd hun eigen maat en krijgt de status wat er overblijft. */
@media (max-width: 40rem) {
  .balk-in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 .6rem;
  }
  /* Alle drie op rij 1, met de hand. Zie de uitleg hierboven: zonder
     die rij zet Grid de status een rij lager, omdat hij in de html ná de
     menuknop staat maar in een kolom links ervan. */
  .merk-groep { grid-row: 1; grid-column: 1; }
  .status     { grid-row: 1; grid-column: 2; }
  .menu-knop  { grid-row: 1; grid-column: 3; }

  .status {
    /* Uitgerekt over de kolom en de inhoud daarbinnen gecentreerd, niet
       justify-self: center. Dat laatste geeft de status zijn eigen
       breedte terug, en die kan dan weer buiten de kolom vallen. */
    justify-self: stretch;
    justify-content: center;
    min-width: 0;
    margin: 0;
    letter-spacing: .06em;
  }
  .status .tekst { display: none; }
  .status .kort {
    display: inline;
    /* Vangnet voor openingstijden die hier nog niet in staan: past de
       tekst ondanks alles niet, dan kort hij af in plaats van over de
       knop heen te lopen. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Onder 26rem verdwijnt het woord "Menu" en blijft alleen het icoon.
   Dat is de prijs van de status op dezelfde regel: mét het woord blijft
   er op een iPhone SE 106px over voor de tekst, en "Gesloten tot 12" is
   er 124. Zonder het woord is het 162 en past alles ruim.

   De regel voor .merk geldt voor de getypte naam in de voettekst, niet
   voor het logo in de balk. */
@media (max-width: 26rem) {
  .merk { font-size: .82rem; letter-spacing: .08em; }
  .menu-knop .woord { display: none; }
  .menu-knop { padding-inline: .7rem; }
}

/* ============================================================
   SNELBALK
   Vast onderaan op smalle schermen. Twee dingen, allebei groot
   genoeg om met een duim te raken.
   ============================================================ */

.snelbalk { display: none; }

@media (max-width: 60rem) {
  .snelbalk {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-snelbalk);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #33150Af7;
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--rand);
    box-shadow: 0 -8px 20px -12px #000000cc;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .snelbalk a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.4rem;
    color: var(--creme);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: background .2s var(--uit), color .2s var(--uit);
  }
  .snelbalk a + a { border-left: 1px solid var(--rand-fijn); }
  .snelbalk a:active { background: var(--oranje); color: var(--grond); }
  .snelbalk svg { color: var(--amber); flex: none; }
  .snelbalk a:active svg { color: var(--grond); }

  /* Ruimte onderaan de pagina, anders dekt de balk de footer af. */
  body { padding-bottom: calc(3.4rem + env(safe-area-inset-bottom)); }
}

/* ============================================================
   HERO
   Asymmetrisch: tekst links, één grote foto rechts. De foto doet
   het overtuigingswerk, de tekst geeft alleen de feiten.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Het scherm vol. Stond op clamp(30rem, 76vh, 44rem): op een venster
     van 900px zag je daardoor ruim 200px van de sectie eronder, en dan
     opent de pagina met een bruine balk in plaats van met de foto.

     svh en niet vh of dvh. Op een telefoon is svh de hoogte mét de
     browserbalken in beeld — precies de toestand bij het openen, dus de
     foto vult wat je ziet en er valt niets buiten. dvh zou meegroeien
     zodra de adresbalk wegschuift, en dan springt de hele hero tijdens
     het scrollen. vh staat op de grootste maat en zou onderaan een
     stuk afsnijden.

     De menubalk staat erboven in de flow en is sticky, dus de hero
     loopt precies één balkhoogte door onder de vouw. Dat is de
     bedoeling: je ziet foto tot onderaan, geen naad. --balk-hoogte
     wordt door site.js gemeten en bijgehouden; de terugval van 3.4rem
     is de maat bij de standaard lettergrootte, voor als dat script
     niet draait. */
  min-height: calc(100vh - var(--balk-hoogte, 3.4rem));    /* terugval zonder svh */
  min-height: calc(100svh - var(--balk-hoogte, 3.4rem));
  padding-block: var(--ruimte-6);
  /* background-color en niet de background-korthand: die zou de korrel
     hierboven wegvagen. */
  background-color: var(--grond);
  overflow: hidden;
}

.hero-beeld {
  position: absolute;
  inset: 0;
  /* Iets hoger dan de hero zelf: de parallax schuift hem omlaag, en
     zonder die overmaat kijk je onderaan tegen een lege rand aan. */
  height: 128%;
  width: 100%;
  will-change: transform;
  object-fit: cover;
  /* De hero is veel breder dan de foto, dus snijdt hij alleen verticaal
     bij: de horizontale waarde doet hier niets. 64% duwt de uitsnede
     omlaag naar de pooltafel; op 50% zag je vooral muur. */
  object-position: 50% 64%;
}

/* Alleen een milde demping, zodat de foto niet naast de rest van de
   pagina staat te schreeuwen. De leesbaarheid van de tekst zit niet
   hierin maar in het paneel eronder — een verloop over een foto is
   daar geen betrouwbaar middel voor. Onderlangs loopt het donkerder
   weg zodat de sectiegrens niet in een fel stuk foto valt. */
.hero-waas {
  position: absolute;
  inset: 0;
  /* Onderlangs loopt de foto helemaal weg in de grondkleur, zodat er
     geen zichtbare rand tussen hero en sectie zit maar een overgang.
     De laatste stop is de grondkleur zelf, niet f0: op 94% bleef er een
     flinterdunne naad staan waar de foto ophield. */
  background: linear-gradient(to bottom,
    #33150A5c 0%,
    #33150A75 50%,
    #33150A9c 74%,
    #33150Ad6 88%,
    #33150A   100%);
}

/* De sectie eronder komt twee pixels over de hero heen. Dat dekt een
   naad af die anders op een telefoon zichtbaar is: één rij
   onverduisterde foto op de grens, grijsgroen, want daar zit het laken
   van de pooltafel.

   De oorzaak zit in de parallax. Die verschuift .hero-beeld met
   translate3d, en daarmee staat de foto in een eigen compositielaag.
   Zo'n laag wordt door de GPU op zijn eigen pixelrand afgerond, en de
   sluier eroverheen — gewone opmaak, geen laag — op een andere. Op een
   niet-hele pixelhoogte lopen die twee een halve pixel uit elkaar en
   zie je de foto er onderlangs onder vandaan komen. Hoeveel precies
   hangt van de scrollpositie af, dus de streep verandert terwijl je
   zakt.

   Repareren binnen de hero lukt daarom niet: alles wat je daar zet
   valt onder dezelfde afknipping. Van buiten wel — secties hebben
   z-index 2 en de hero niet, dus deze twee pixels liggen er
   gegarandeerd overheen. Wat eronder verdwijnt is de donkerste punt
   van de sluier, dus je ziet er niets van.

   Op een laptop valt het niet op: daar is de hero meestal een hele
   pixel hoog en staat er niets scheef. */
.hero + section { margin-top: -2px; }

.hero-in { width: 100%; }

/* De tekst staat in een eigen paneel op de foto, niet los erop.

   Dat is geen opmaakkeuze maar een leesbaarheidskeuze. Met alleen een
   verloop kwam het rode CAFÉ op een fel stuk muur uit op 1,00:1 —
   letterlijk onzichtbaar. Een foto heeft nu eenmaal geen vaste
   helderheid, dus is er geen verloop dat je kunt narekenen. Op een
   dekkend paneel gelden de cijfers die wél kloppen: rood 3,6 op
   displayformaat, oranje 6,3, crème 13,8.

   Het paneel is bruin en niet crème, want op crème valt het oranje van
   VUE GRANDIGÉ terug naar 2,2 en verlies je de tweekleur van het logo. */
/* Het paneel staat links: het heeft een max-width en geen marge, dus
   dat gebeurt vanzelf. Naar rechts? margin-inline-start: auto.

   ------------------------------------------------------------------
   Waarom 83% en niet minder

   Het paneel is doorschijnend, zodat je de foto er nog doorheen ziet.
   Hoevéél doorschijnend is niet gekozen maar gemeten: de foto is pixel
   voor pixel uitgelezen en elke tekstkleur is nagerekend tegen het
   felste stuk foto dat achter het paneel kan vallen.

   Er zit een volledig uitgebrande witte plek in de foto (de lamp), en
   23% van het gebied achter het paneel is fel. Daardoor helpt een
   backdrop-filter hier niets: dat middelt over een gebied dat zelf al
   licht is. De dekking moet het werk doen.

   De sluier over de foto is niet overal even sterk: bovenaan de hero is
   hij 36%, op halve hoogte 46%. Het paneel staat verticaal gecentreerd
   en loopt dus door het lichtere deel. Gerekend met de lichtste waarde
   die eronder kan vallen, is 85% de laagste dekking waarbij alles zijn
   drempel haalt:

     CAFÉ (rood-licht)     3,02  — drempel 3,0 voor grote displaytekst
     VUE GRANDIGÉ (oranje) 5,26
     lopende tekst (crème) 11,49
     label (oranje)        5,26

   Het rode CAFÉ is de krappe: op 83% zakt dat woord naar 2,90 en dus
   door de drempel. Met het gewone --grond zou je nog hoger moeten, dus
   het donkerdere --grond-diep laat juist méér foto door bij dezelfde
   leesbaarheid.

   LET OP: dit hangt aan déze foto. Komt er een andere hero-foto, dan
   moet deze dekking opnieuw nagerekend worden.
   ------------------------------------------------------------------ */
.hero-tekst {
  position: relative;
  z-index: var(--z-inhoud);
  max-width: 38rem;
  background: color-mix(in srgb, var(--grond-diep) 85%, transparent);
  border: 2px solid color-mix(in srgb, var(--oranje) 90%, white 10%);
  border-radius: 2rem;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  padding-top: clamp(1.5rem, 2.8vw, 2.3rem);
  box-shadow: 0 22px 44px -22px #000000cc;
  overflow: hidden;
}
/* Dezelfde banen als bij de kaart, zodat het paneel bij de rest hoort. */
.hero-tekst::before,
.hero-tekst::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--banen);
}

.hero-tekst::before {
  top: 0;
}

.hero-tekst::after {
  bottom: 0;
}
.hero-tekst .plaats {
  color: var(--oranje);
  margin-bottom: var(--ruimte-2);
  display: block;
}
/* Zelfde tweekleur als het logo: CAFÉ rood, de rest oranje. Het rood
   haalt 3,6:1 op dit bruin — genoeg voor displaytekst van dit formaat,
   niet genoeg voor lopende tekst, en daar wordt het ook niet gebruikt. */
.hero-tekst h1 { color: var(--rood-licht); }
.hero-tekst h1 b { color: var(--oranje); font-weight: inherit; }
.hero-tekst .leid {
  color: var(--creme);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  max-width: 34ch;
  margin-bottom: var(--ruimte-4);
}
.hero-knopen { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }

/* ------------------------------------------------------------------
   DE HERO OP EEN TELEFOON

   De kop vulde maar tweederde van zijn kolom: op 375px was "GRANDIGÉ"
   189 van de 291 beschikbare pixels breed. Dat zit niet in de grootte
   maar in de breedte-as. Koppen staan op deze site op 70% (--smaller),
   en dat is op een laptop precies goed — daar staan ze naast andere
   dingen — maar op een telefoon is het zonde van de enige kolom die je
   hebt.

   Dus breder, niet hoger. Op 100% is dezelfde regel 260 van de 291
   pixels en blijft de letterhoogte gelijk: 46,5px op een scherm van
   375, waar hij nu 46,4 is. Op een smallere telefoon zakt de grootte
   mee met de breedte, zodat "GRANDIGÉ" er ook op 320px net binnen valt.

   Nagerekend met de fontmetriek van Archivo zelf: de vulling loopt van
   94% op 320px tot 86% op 430px.

   Dit geldt alleen hier. Boven de 40rem blijft de kop smal en zwaar
   zoals de blokletter van het logo; daar is ruimte zat, en dan is die
   smalle vorm het merk in plaats van verspilde breedte.
   ------------------------------------------------------------------ */
@media (max-width: 40rem) {
  .hero-tekst h1 {
    font-stretch: 100%;
    font-size: clamp(2.45rem, 12.4vw, 3.6rem);
  }

  /* Gecentreerd, alleen hier. Op een telefoon is het paneel zo breed als
     het scherm en staat er niets naast; dan is een linkerkantlijn een
     kantlijn zonder overkant. Op een laptop staat het paneel links in
     een brede foto en hóórt de tekst tegen die ene lijn aan te staan. */
  .hero-tekst { text-align: center; }
  /* De alinea staat op 34ch en is dus smaller dan het paneel. Zonder
     deze marge blijft dat blok links hangen en staat alleen de tekst
     erbinnen gecentreerd — scheef ten opzichte van de kop erboven. */
  .hero-tekst .leid { margin-inline: auto; }
}

/* De twee knoppen naast elkaar in plaats van onder elkaar. Ze zijn
   allebei even belangrijk — openingstijden en de kaart — en onder
   elkaar leest de tweede als een naschrift.

   Pas vanaf 22,5rem (360px). Daaronder past "Bekijk de kaart" alleen
   nog op een lettergrootte waar je op armlengte niets meer van leest,
   en dit publiek loopt tot ver in de zeventig. Op een iPhone SE blijven
   ze dus onder elkaar; dat is beter dan twee knoppen die niemand kan
   lezen. */
@media (min-width: 22.5rem) and (max-width: 40rem) {
  .hero-knopen { flex-wrap: nowrap; }
  .hero-knopen .knop {
    /* Twee gelijke helften. min-width: 0 hoort erbij: zonder dat weigert
       een flex-item onder zijn inhoud te krimpen en loopt de tweede knop
       het paneel uit. */
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    /* Ietsjes kleiner: de letter en de zijkanten. De hoogte niet — die
       blijft 2,75rem oftewel 44px, de ondergrens voor een duim. */
    min-height: 2.75rem;
    padding-inline: .55rem;
    font-size: .74rem;
    letter-spacing: .05em;
  }
}

/* Kaarslicht-stofjes. Puur decoratief, dus aria-hidden in de markup. */
.deeltjes {
  position: absolute;
  inset: 0;
  z-index: var(--z-ruis);
  pointer-events: none;
  /* De width/height-attributen van een canvas gelden ook als
     CSS-breedte. Die staan op tweemaal de schermmaat voor een scherp
     beeld, dus zonder deze twee regels tekent het canvas op dubbele
     grootte en valt de rechterhelft weg. */
  width: 100%;
  height: 100%;
}

/* ============================================================
   FOTO'S
   Eén behandeling voor elke foto: geen kader, wel een warme waas
   eroverheen, zodat losse foto's met verschillend licht toch één
   geheel vormen en in de pagina lijken te liggen.
   ============================================================ */

/* Foto's staan in de pagina, niet erop: geen rand, geen lijst, geen
   slagschaduw. Wat ze bij elkaar houdt is de warme waas eroverheen,
   niet een kader eromheen. */
.beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--ronding);
  /* Wat je kort ziet voordat een foto geladen is. Gelijk aan de grond
     van de pagina, zodat er ook dan geen extra tint verschijnt. */
  background: var(--grond);
}
/* Een fijn puntraster over elke foto, zoals een gedrukte plaat in een
   oude reclame. Het bindt de beelden aan het papierkarakter van de rest
   en haalt de gladheid van een telefoonfoto er net af. Vermenigvuldigen
   met de donkerste bruintint, dus het maakt de foto iets doffer maar
   verschuift de kleur niet. */
.beeld::after,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #250F06 40%, transparent 41%);
  background-size: 4px 4px;
  opacity: .2;
  mix-blend-mode: multiply;
}
/* In de hero mag het raster grover en zwakker: het beeld is daar groot,
   en op een groot vlak wordt een fijn raster snel vuil. */
.hero::after { background-size: 6px 6px; opacity: .16; }

.beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De waas: tempert felle telefoonfoto's tot het lamplicht van de zaak. */
  filter: saturate(.92) contrast(1.02) brightness(.94);
  transition: transform .6s var(--uit-zacht), filter .4s var(--uit);
}



/* Zolang er nog geen foto is, moet je kunnen zien dát er een komt.
   Deze streepjesrand verdwijnt vanzelf zodra je het bestand neerzet. */
/* Een lege fotoplek was een bruin gat in de pagina. Nu is het een
   merkvlak: dezelfde vier banen, schuin en sterk gedempt. Zolang de
   foto's er nog niet zijn draagt de pagina zo toch kleur, en zodra een
   bestand er staat verdwijnt dit vanzelf. */
.plek {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--ruimte-4) var(--ruimte-3);
  color: var(--creme);
  outline: 1px dashed #E8862A55;
  outline-offset: -1px;
  background:
    repeating-linear-gradient(135deg,
      #C9252C 0 20px,
      #D9342F 20px 40px,
      #E8862A 40px 60px,
      #F0AB42 60px 80px);
}
/* Een donkere sluier eroverheen, zodat de tekst erop leesbaar blijft.
   Zonder deze laag haalt crème op de amberbaan het niet. */
.plek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #250F06d9;
  /* .beeld::after zet hier het puntraster neer met opacity .2 en
     vermenigvuldigen. Dat is hetzelfde pseudo-element, dus die twee
     eigenschappen moeten expliciet terug naar normaal — anders is deze
     sluier 20% doorzichtig en blijft de tekst onleesbaar. */
  background-image: none;
  opacity: 1;
  mix-blend-mode: normal;
}
/* z-index 2, niet 1: de sluier hierboven staat op 1 en een
   pseudo-element schildert bij gelijk niveau ná de kinderen. Op 1 zou
   de sluier dus over de tekst heen komen. */
.plek > * { position: relative; z-index: 2; }
.plek span { max-width: 26ch; font-size: .9rem; line-height: 1.5; }
.plek span::before {
  content: "";
  display: block;
  width: .5rem;
  height: .5rem;
  margin: 0 auto .8rem;
  background: var(--oranje);
  transform: rotate(45deg);
  opacity: .8;
}

/* ============================================================
   OVER ONS
   ============================================================ */

.verhaal h2 { margin-bottom: var(--ruimte-3); }
.verhaal p { max-width: 62ch; }
/* De eerste alinea is de openingszin en staat groter. Een initiaal
   stond hier eerst; die hoort bij een schreefletter en vloekte met de
   blokletter erboven. */
.verhaal p:first-of-type {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.42;
  color: var(--creme);
  max-width: 34ch;
  margin-bottom: var(--ruimte-4);
}
.verhaal p:not(:first-of-type) { color: var(--creme-dim); }

/* ------------------------------------------------------------------
   HET BIERTJE

   Ligt achter de hele sectie, in het midden, over de volle hoogte.
   Geen kader en geen ronding: het beeld hoort op te lossen in de
   sectie, en een kader zou dat juist ongedaan maken.

   Het werk is verdeeld over twee plekken, en dat is met opzet.

   DE VERDONKERING zit in het bestand (zie maak-bierfilm.mjs). Hoe
   donker het moet zijn hangt af van hoe fel de opname is, en dat is
   per opname nagerekend. Een vaste sluier hier zou bij een ander
   filmpje weer te licht of te zwaar zijn.

   HET MASKER zit hier. Eerst was de rand ook ingebakken: wegvloeien
   naar de grondkleur, plat op een ondergrond van diezelfde kleur. Dat
   zag er goed uit in het bestand maar niet op de pagina. Video wordt
   opgeslagen als YUV met een beperkter bereik dan css-kleuren
   gebruiken, en na terugrekenen kwam #33150A eruit als #31130A — twee
   punten donker. Genoeg om een rechthoek te zien staan tegen de
   sectie. Omdat elke browser die terugrekening nét anders doet, valt
   dat ook niet met een correctie op te lossen.

   Met een masker worden de randen écht doorzichtig. De echte
   achtergrond schijnt erdoorheen, dus de kleur klopt per definitie, en
   de korrel van de sectie loopt er gewoon doorheen.

   WAT HET MASKER IS, is wél veranderd. Hier stond een ovale
   vervaging, met als reden: "een masker dat de vórm van het glas
   volgt klopt niet meer zodra de camera inzoomt." Dat gold voor de
   toenmalige opname, die inzoomde. De opname die er nu ligt staat
   stil — en wordt door maak-bierfilm.mjs ook nog eens beeldje voor
   beeldje rechtgetrokken. Daarmee vervalt het bezwaar, en kan het
   glas echt uit zijn achtergrond geknipt worden in plaats van
   weggevaagd. Wat je nu ziet is een glas en geen vlek.

   Het masker zelf wordt door datzelfde script geschreven, uit de
   maten waarmee het ook de uitsnede bepaalt. Vorm en beeld kunnen dus
   niet uit elkaar lopen: één opname, één keer draaien, allebei bij.

   mask-size spant de vorm op tot precies het video-vlak — de svg is
   op dezelfde verhouding getekend, en met preserveAspectRatio="none"
   erin valt hij daarmee sluitend over het beeld.

   height: 100% en width: auto — het beeld is staand en vult de hoogte
   van de sectie. max-width moet uit, anders knijpt de algemene
   img/video-regel hem terug tot de sectiebreedte.
   ------------------------------------------------------------------ */
#over { position: relative; overflow: hidden; }
/* De inhoud bovenop, anders verdwijnt de tekst achter de video. */
#over > .breed { position: relative; z-index: var(--z-inhoud); }

.bierfilm {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  pointer-events: none;

  /* WAAR HET GLAS STAAT — de knop voor links/rechts.

     --opzij is de afstand van de rechterrand van het beeld tot de
     rechterrand van de sectie, in procenten van de sectiebreedte.
     Groter is verder naar links, nul zet het tegen de rand.

     Waarom dit hier staat en niet in maak-bierfilm.mjs: het beeld is
     even hoog als de sectie maar smaller, dus opzij is er ruimte om
     te schuiven en verticaal niet. Wie het in het filmbestand doet
     betaalt lege pixels én een nieuwe codering voor elke poging; hier
     is het één getal en meteen zichtbaar. (In het script heeft daarom
     een NAAR_RECHTS gestaan, en die is er weer uit gehaald.)

     De tekst van de sectie staat links, dus hoe verder naar rechts,
     hoe minder het glas achter de letters ligt. */
  --opzij: 5%;
  align-items: center;
  justify-items: end;
  padding-inline-end: var(--opzij);

  /* De rij krijgt een vaste maat, en dat is geen opsmuk.

     De video hieronder staat op height: 100%. Een percentage moet ergens
     tegenaan kunnen rekenen, en een impliciete rasterrij maat zichzelf
     op zijn inhoud — dus op de video. Dat is rond, en css lost dat op
     door de hoogte als auto te behandelen: de video ging op zijn eígen
     maat staan en stak onder en boven de sectie uit.

     Dat viel jarenlang niet op omdat het bestand toevallig 720 hoog was
     en de sectie er ongeveer 657, dus scheelde het een randje. Toen het
     bestand op ware grootte ging (1150 hoog) stond er ineens een glas
     van anderhalve sectie hoog.

     minmax(0, 1fr) van een raster met een vaste hoogte — en die is er,
     want .bierfilm is inset: 0 — is wél bepaald, dus daar kan 100%
     tegenaan.

     En de minmax(0, ...) is het halve punt: een kale 1fr heeft een
     automatisch minimum ter grootte van zijn inhoud, dus die zou hier
     gewoon de hoogte van de video aannemen en we waren geen stap verder.
     Dezelfde valkuil als bij de rasters verderop, waar elke kolom om
     dezelfde reden een minmax(min(...), 1fr) heeft. */
  grid-template-rows: minmax(0, 1fr);

  /* En om exact dezelfde reden ook de kolom, want die viel er eerst
     buiten — met hetzelfde soort gevolg, alleen opzij.

     Op een breed scherm is de video smaller dan de sectie. Een
     impliciete auto-kolom slurpt dan de vrije ruimte op, wordt dus
     precies zo breed als de sectie, en justify-items zet het glas
     netjes rechts. Niets aan de hand.

     Op een telefoon is het andersom: het beeld is even hoog als de
     sectie, een sectie is daar lang, en dus wordt de video breder dan
     het scherm. Een auto-kolom maat zich op zijn inhoud en wordt dan
     breder dan de sectie — en een rasterkolom begint aan de linkerrand
     en steekt er alleen rechts uit. De justify-items: center hieronder
     centreerde het glas dus keurig in een kolom die zelf scheef hing,
     en daarmee stond het glas 177 van de 390 pixels naar rechts.

     minmax(0, 1fr) knijpt de kolom terug tot de sectiebreedte. Dan
     centreert center weer op de sectie en steekt het beeld links en
     rechts even ver uit. Op een breed scherm verandert er niets: daar
     was de kolom al zo breed als de sectie. */
  grid-template-columns: minmax(0, 1fr);
}

/* Smal scherm: terug naar het midden. Daar is het beeld breder dan de
   sectie — het is even hoog als een sectie die op een telefoon lang
   wordt — en dan schuift opzij het glas gewoon het scherm af. */


.bierfilm video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;

  /* HOE DONKER HET GLAS OP DE PAGINA STAAT.

     1 is het beeld zoals het is weggeschreven; lager maakt het donkerder
     doordat de grondkleur erdoorheen schijnt.

     Het staat op 1, en dat is sinds september 2026 het hele punt. Er zat
     een sluier van 35% naar de grondkleur in het bestand (DIM_VAST in
     maak-bierfilm.mjs) plus 0,55 dekking hier op smalle schermen. Dat
     leverde een biertje op dat naast de opname zelf melkig en dof stond:
     mengen naar de grondkleur tilt de zwarten op en haalt het goud eruit.
     Zonder die sluier staat hetzelfde beeldje uit het bestand nu op
     (179,143,20) tegen (184,146,32) in de opname — dat is codering en
     verder niets.

     Nodig was die sluier alleen waar tekst over het glas valt, en dat is
     alleen op een smal scherm. Daar staat het glas nu ónder de tekst in
     plaats van erachter (zie de media query hierboven), dus er valt
     nergens meer tekst overheen en hoeft er nergens meer iets af.

     Blijft staan als knop: komt er ooit een opname waarin het glas een
     stuk feller is, dan kan hij hier omlaag. */
  --sluier: 1;
  opacity: var(--sluier);
}

/* ------------------------------------------------------------------
   OP EEN TELEFOON STAAT HET GLAS ACHTER DE TEKST

   Daar is het beeld breder dan het scherm — het is even hoog als de
   sectie, en een sectie is op een telefoon lang — dus het staat in het
   midden in plaats van rechts, en je kijkt naar de middenstrook van het
   glas.

   Hier valt de tekst er wél overheen, en dat is de enige plek op de
   pagina waar dat gebeurt. Dus is dit ook de enige plek waar het beeld
   gedimd wordt. Zie --sluier hierboven voor wat dat kost en waarom het
   op een breed scherm niet nodig is.
   ------------------------------------------------------------------ */
@media (max-width: 60rem) {
  .bierfilm {
    justify-items: center;
    padding-inline-end: 0;
  }

  /* En de vervolgalinea's krijgen hier volle crème.

     Ze staan normaal in gedempte crème, en dat is op de kale grond ruim
     genoeg (8,1:1). Op het glas is het dat niet: nagemeten op de
     gerenderde pagina haalde de gedempte crème daar 3,4:1 waar de volle
     6,1 haalde. Dat is wat er onleesbaar aan was, en dat los je niet op
     door alleen het beeld donkerder te zetten — dan moet de dekking naar
     0,18 en is er van het bier niets meer over.

     Dezelfde regel als in de footer, en om dezelfde reden: waar een
     patroon onder de letters door beweegt is alle tekst volle crème, en
     komt het verschil tussen de regels van grootte en gewicht in plaats
     van een gedempte kleur. */
  .verhaal p:not(:first-of-type) {
    color: var(--creme);
  }

  /* Nagemeten op de gerenderde pagina, crème op de felste plek achter
     de tekst — de schuimkraag, die in deze opname helemaal wit is
     uitgeslagen en hier precies achter de lopende tekst valt:

       0,32   5,25:1
       0,34   4,74:1   ← wat er staat
       0,35   4,58:1
       0,40   3,86:1

     Die getallen horen bij het glas op zijn huidige plek. Het schoof
     hieronder tien procent omhoog, en daarmee kwam een iets feller stuk
     achter de tekst te staan — vandaar 0,34 en niet 0,35.

     Zo licht als de leesbaarheid toelaat, met net genoeg marge. Hoger
     zakt crème onder de 4,5 van WCAG, en de doelgroep loopt tot ver in
     de zeventig.

     Dat het hier wél moet en op een breed scherm niet, is het hele
     verschil: daar staat de tekst links en het glas rechts. */
  .bierfilm video {
    --sluier: 0.26;

    /* Hier heeft een --omhoog gestaan die het glas tien procent
       omhoog schoof. Dat was nodig toen er in het beeld zelf 22% lucht
       boven het glas stond: die viel op een telefoon samen met de kop en
       de eerste alinea, en dan zag je van het glas alleen de onderste
       helft.

       Die lucht staat nu op 10% (LUCHT in maak-bierfilm.mjs), want op
       ware grootte was er ook geen reden meer om zoveel leeg vlak mee te
       coderen. Daarmee vervalt de verschuiving: tien procent omhoog op
       tien procent lucht snijdt de schuimkraag er juist af. */
  }
}



/* ------------------------------------------------------------------
   DRIE UITVOERINGEN — data-bier op #over kiest ertussen

   TIJDELIJK. Er staan drie antwoorden op dezelfde vraag naast elkaar,
   zodat ze in de browser te vergelijken zijn. Zodra de keuze gevallen
   is gaat de rest hier weg, en voor "donker" ook zijn bestanden in
   afbeeldingen/ en zijn regel in UITVOERINGEN in maak-bierfilm.mjs.

   Wisselen: zet data-bier op de sectie #over in index.html op
   "uitgeknipt", "gloed" of "donker" en herlaad. Meer is het niet.
   ------------------------------------------------------------------ */

/* --- uitgeknipt en gloed: het masker knipt het glas uit -------------

   Het masker maakt de randen écht doorzichtig, dus de sectiekleur
   schijnt erdoorheen en klopt per definitie — dat was de reden om de
   rand niet in het bestand te bakken. Video wordt opgeslagen als YUV
   met een beperkter bereik dan css-kleuren gebruiken, en #33150A komt
   daar als #31130A uit: genoeg om een rechthoek te zien staan.

   Dit is de standaard, en de reden is fidelity: waar het masker dekt
   komt de video ongewijzigd op de pagina. Screen kan dat niet, want dat
   telt de grondkleur er altijd bij op.

   Wat het uitknippen kost is randcontrast. In de opname staat het glas
   tégen een lichte bar, dus wat de flank zichtbaar maakt is het
   contrast met dat licht en niet licht óp de rand; knip je die
   achtergrond weg, dan heeft de flank niets meer om zich tegen af te
   tekenen. Sinds het beeld op volle sterkte staat is dat een stuk
   minder erg — een fel glas tekent zich af tegen donkerbruin — maar
   weg is het niet. Daar is "gloed" voor, verderop. */
#over[data-bier="uitgeknipt"] .bierfilm,
#over[data-bier="gloed"] .bierfilm {
  z-index: 0;
  /* De uitdoving onderaan, en die ligt hier en niet in het masker.

     De voet van het glas staat niet op de opname: het loopt daar het
     beeld uit. Er heeft een rechte snee gestaan met de redenering dat
     die samenvalt met de onderrand van de sectie, zodat het glas
     daarachter vandaan komt — maar die sectierand is niet zichtbaar,
     er staat dezelfde bruine grond onder. Zonder rand om achter te
     verdwijnen leest een rechte snee gewoon als afgezaagd.

     Waarom op de figure en niet op de video: de gloed hieronder leest
     de dekking van het uitgeknipte glas en waaiert die uit. Een
     uitdoving in het masker dooft het glas dus wél uit maar zijn gloed
     niet, en dan snijdt de sectie die gloed alsnog af op haar
     onderrand. Filters gaan vóór maskers, dus hier ligt de uitdoving ná
     de gloed en dooft alles tegelijk uit.

     En daarom kan het ook in procenten: .bierfilm is inset: 0 op de
     sectie, dus 100% is precies de sectiehoogte. Het masker van het
     glas zelf kan dat niet — dat is in de maten van de opname
     getekend. */
  --uitdoving: linear-gradient(
    to bottom,
    #000 0 70%,
    rgba(0, 0, 0, 0.3) 88%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: var(--uitdoving);
          mask-image: var(--uitdoving);
}

/* --- alleen gloed: de warme rand eromheen ---------------------------

   Het uitknippen en de gloed zaten aan elkaar vast en dat is er weer
   uit: het eerste is de manier waarop het glas op de pagina komt, het
   tweede is smaak. "uitgeknipt" is dezelfde uitvoering zonder.

   Het is een drop-shadow op de figure en niet op de video, en dat is
   nodig: filters worden vóór het masker toegepast, dus een schaduw op
   het video-element zelf volgt de rechthoek en wordt daarna weggeknipt.
   Op de figure eromheen volgt hij het uitgeknipte glas.

   Drie lagen: een dunne lichte lijn die als randlicht leest, en twee
   brede warme in de kleuren van de site — amber dichtbij, oranje verder
   weg — die samen doorgaan voor lamplicht op de bar. */
#over[data-bier="gloed"] .bierfilm {
  filter: drop-shadow(0 0 2px rgba(245, 231, 210, 0.3))
    drop-shadow(0 0 24px rgba(240, 171, 66, 0.22))
    drop-shadow(0 0 52px rgba(232, 134, 42, 0.14));
}

#over[data-bier="uitgeknipt"] .bierfilm video,
#over[data-bier="gloed"] .bierfilm video {
  --glas: url("../afbeeldingen/glas-masker.svg");
  -webkit-mask-image: var(--glas);
          mask-image: var(--glas);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* --- donker: er wordt niets uitgeknipt ------------------------------

   De bar staat gewoon in beeld, maar is in het bestand naar zwart
   gedrukt (zie de sluier in maak-bierfilm.mjs). Met screen wordt zwart
   precies de grondkleur — screen(grond, 0) is grond — dus er is nergens
   een rand die kan opvallen en klopt de kleur per definitie in elke
   browser. Datzelfde probleem loste het masker op, maar dan door het
   glas open te snijden.

   Geen z-index hier, en dat is geen slordigheid maar de voorwaarde:
   een positie plus een z-index maakt een eigen stapelcontext, en dan
   heeft de video de sectie niet meer als ondergrond om mee te mengen.
   Hij mengt dan met niets en blijft een zwarte rechthoek. De tekst
   blijft er alsnog bovenop, want .breed heeft zelf z-index --z-inhoud.

   Zonder ondersteuning voor mix-blend-mode staat er een donkere
   rechthoek met een glas erin. Lelijker, niet stuk. */
#over[data-bier="donker"] .bierfilm video {
  mix-blend-mode: screen;
}


/* ============================================================
   GOED OM TE WETEN — de praktische feiten in één rij
   ============================================================ */

/* Elk item is even breed. Dat is het hele punt: laat je ze zo breed
   worden als hun woord, dan staan "Pinnen" en "Hond welkom" op heel
   verschillende afstanden van hun buren, ook al is de tussenruimte
   overal hetzelfde getal. Gelijke vakken geven gelijke afstanden. */
/* Deze strip sluit direct aan op "Bezoek ons" en vormt daarmee één
   lichte blok. Eén banenregel bovenaan markeert de overgang; twee
   regels, boven en onder, maakten er weer een apart lint van. */

/* ============================================================
   DE KAART
   Vier kaarten naast elkaar op een crèmevlak, als een drukvel.
   Klikken opent de kaart in de lichtbak; daar zit ook de pdf.

   Een pdf rechtstreeks in de pagina zetten met een iframe is bewust
   niet gedaan. Elke browser tekent er zijn eigen werkbalk omheen, en
   op iOS weigeren de meeste hem inline te tonen — dan staat er een
   grijs vlak waar je kaart hoort te staan.

   Wat hier vóór stond was één bord: vier kaarten tegen elkaar aan in
   een vierkleurenkader, zonder tussenruimte. Dat las als één plaat
   behang in plaats van als vier kaarten, en de losse kaart had geen
   naam — je moest de kop op de afbeelding zelf lezen om te weten
   waar je naar keek, en op die maat is die kop nauwelijks leesbaar.

   Nu staat elke kaart los, met lucht eromheen, een gekleurde balk
   eronder en zijn naam eronder in de blokletter van het logo. De
   kleur van die balk is één van de vier banen, in de volgorde van
   het logo: rood, rood-licht, oranje, amber. De rij ís daardoor de
   banenbundel — dat is de reden dat het er vier zijn en dat de
   volgorde vastligt.
   ============================================================ */

/* ============================================================
   DE TOOG
   De foto van de bar, van bovenaf, met de kaarten erop.

   De verhouding staat vast op die van de foto zelf. Dat is de spil van
   het geheel: doordat de band precies de vorm van de foto heeft, staat
   het houten blad altijd op dezelfde plek in de band — van 53% tot 79%
   van de hoogte — en kunnen de kaarten daar met een percentage op
   gelegd worden dat op elk schermformaat blijft kloppen.

   De foto staat op ware grootte in plaats van uitvergroot. Bij de
   vorige poging vulde het blad de hele sectie, en daarvoor moest het
   beeld bijna vier keer worden opgeblazen: dan is alles wat een bar
   herkenbaar maakt — de tap, de flessen, de krukken — buiten beeld, en
   houd je een bruine waas over. Nu wordt de foto juist verkleind
   (1190 px naar de schermbreedte), dus hij is ook scherper.

   Het bronbeeld is BarGoedVue.png, 1747 bij 900. Daar is 557 px rechts
   af, 150 px boven en 165 px onder. Die uitsnede is niet cosmetisch —
   het zijn twee knoppen die tegen elkaar in draaien, en het is de moeite
   waard om te weten welke welke is:

   De bréédte bepaalt hoe groot alles op het scherm wordt. De band vult
   altijd de schermbreedte, dus een kaart is altijd 8,1% van het scherm,
   ongeacht het schermformaat. Smaller snijden = groter beeld = grotere
   kaarten. Dat is de enige knop die de kaarten groter maakt.

   De hóógte bepaalt niets aan de schaal, alleen hoeveel er boven en
   onder de bar in beeld staat — en dus hoe hoog de sectie op het scherm
   wordt (schermbreedte gedeeld door de verhouding). Op 2,03 is dat op
   een laptop van 1512 px zo'n 743 px: dat past op één scherm.

   Die twee samen dwingen de uitsnede af. 1190 px breed is nodig voor
   kaarten op hun oude formaat, en dan mag de foto nog maar 585 px hoog
   zijn om binnen één laptopscherm te blijven. Het hout zit op 460–612
   van het origineel en daar moet nog een rij krukken onder, dus die
   585 px moeten van bovenaf komen — en daar hingen net de twee neonborden
   (tot y 128). Die zijn er dus af. Dat is een echte prijs en geen
   vergissing: ze passen niet binnen "kaarten groot" plus "past op één
   scherm". Wil je ze terug, dan gaat de bovenkant omlaag naar y 0 en
   wordt de verhouding 1,86 of hoger.

   Wat er ook af ging: de vijf tapkranen, die op x 1195–1445 stonden en
   dus buiten de 1190 vallen. De rode neon van het café zat op x 735–1096
   en zou de snede rechts wél hebben overleefd — alleen de snede bóven
   niet.

   De prijs is de schaal van de kaarten: op een bar van vier meter is
   een A4 nu eenmaal klein. Dat is precies waarom de echte foto dichter
   op de toog moet staan — zie afbeeldingen/LEESMIJ.md. */
.toog {
  position: relative;
  width: 100%;
  aspect-ratio: 1190 / 585;
  background: url("../afbeeldingen/bar-bovenaf.jpg") center / cover no-repeat;
  background-color: var(--grond);
}

/* De sluier doet twee dingen. Bovenin maakt hij de achterwand donker
   genoeg om er crème tekst op te zetten: daar staan flessen en spiegels
   met felle lichtjes, en zonder deze laag valt de kop daar in stukken
   uiteen. Verder naar beneden is hij vrijwel weg, want daar moet je de
   bar gewoon zien — er staat geen tekst meer overheen. */
.toog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #1A0701D9 0%, #1A0701A6 14%, #1A070126 28%, #1A070100 48%,
    #1A070100 78%, #1A070126 100%);
  pointer-events: none;
}

/* De kop staat op de foto in plaats van erboven. Bovenin de bar is het
   donker en de sluier maakt het daar nog wat rustiger, dus crème haalt
   er ruim voldoende contrast. */
.toog .sectie-kop {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(1.5rem, 4vw, 3.4rem);
  z-index: 3;
  margin: 0;
  padding-inline: clamp(1.2rem, 4vw, 3rem);
}
.toog .sectie-kop h2 { text-shadow: 0 2px 12px #1A0701B3; }

/* Elke kaart ligt op zijn eigen plek op de bar, opgegeven als
   percentage van de foto in --x en --y (het midden van de kaart). Die
   percentages staan in de html, want ze horen bij déze foto.

   Percentages en geen pixels: de band heeft een vaste verhouding, dus
   een kaart die op 31% van de breedte en 65% van de hoogte ligt, ligt
   op elk schermformaat op dezelfde plek op het hout.

   Hiervóór verdeelde een flexbox de vier kaarten gelijkmatig over een
   strook. Dat gaf nette afstanden maar je kon er niets aan verschuiven;
   nu is elke kaart los te leggen. */
.kaartvellen {
  position: absolute;
  inset: 0;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* De breedte is een percentage van de foto en niet van een lijst
   eromheen. Daardoor verandert de grootte van een kaart niet als je ze
   verder uit elkaar legt — dat waren eerder twee getallen die je
   tegelijk moest bijstellen. 8,1% is de maat waarop een staande A4 net
   binnen het houten blad past.

   Dat getal komt niet uit de lucht vallen; het is de uitsnede die het
   dicteert. Het rechte deel van het blad — tussen de lekbak en de
   voorrand — is in het origineel 152 px hoog (y 460 tot 612), en dat
   verandert niet door te snijden. Een kaart mag dus nooit hoger worden
   dan die 152 px, en omdat een staande A4 √2 keer zo hoog is als breed
   komt dat neer op ruim 96 px breed. Wat wél verandert door te snijden is
   wat 96 px als percentage ís: op de foto van 1747 px was dat 5,5%, op
   1460 px 6,5%, en op de 1190 px van nu 8,1%.

   Dáárom is smaller snijden de enige manier om de kaarten groter te
   krijgen, en daarom staat 8,1% hier vrijwel gelijk aan de 8,6% van de
   allereerste barfoto. Ga je hoger zitten dan 8,1%, dan ligt de kaart met
   zijn bovenrand op de lekbak.

   Geen kleurblok meer achter de kaarten. Op crème was dat het element
   dat de vier uit elkaar hield; op de bar doet het hout dat werk, en
   dan is die kleur een sticker op een foto. */
.kaartvel {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 8.1%;
  /* Let op: dit staat in de losse eigenschappen translate en rotate en
     niet in transform. Dat is geen stijlkeuze maar noodzaak — op deze
     li zet de onthul-animatie (.zet) zelf een transform, en die zou een
     transform hier volledig overschrijven. Het gevolg was stil en
     vervelend: --x en --y kwamen op de línkerbovenhoek van de kaart
     terecht in plaats van op het midden, en de draaiing deed niets.

     translate en rotate zijn eigen eigenschappen die de browser vóór
     transform toepast, dus ze bijten elkaar niet en de kaart draait
     netjes om zijn eigen midden. */
  translate: -50% -50%;
  rotate: var(--draai, 0deg);
  z-index: calc(var(--plek) + 1);
}

.kaartvel-knop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}

/* Een eigen laag om de vergroting op te zetten, los van de knop zelf.
   Dat houdt de klikbare rechthoek op zijn plek terwijl het beeld erin
   opzwelt: de muis glijdt er dan niet vanaf halverwege de animatie. */
.kaartvel-blad {
  display: block;
  position: relative;
  transition: transform .45s var(--uit);
}
/* Alleen schaduw, geen kleurblok meer. Op hout hoort een kaart een
   contactschaduw te hebben, anders zweeft hij erboven: een korte harde
   laag vlak onder de rand en twee zachtere daarboven. Fors donkerder
   dan op crème, want op een donkere ondergrond is een lichte schaduw
   simpelweg niet te zien. */
.kaartvel-blad img {
  display: block;
  width: 100%;
  height: auto;
  /* Op hout hoort een kaart een contactschaduw te hebben, anders zweeft
     hij erboven. Vandaar een korte harde laag vlak onder de rand en twee
     zachtere daarboven, en fors donkerder dan op crème: op een donkere
     ondergrond is een lichte schaduw simpelweg niet te zien. */
  box-shadow:
    0 1px 2px #0F0501A6,
    0 5px 12px #0F050194,
    0 16px 32px #0F050180;
  transition: box-shadow .5s var(--uit), filter .4s var(--uit);
}

/* Bij aanwijzen komt de kaart recht en naar voren, en wordt hij groter.
   Dat is het punt: je krijgt de kaart groot in beeld zonder te klikken. */
/* Bij aanwijzen springt de kaart fors op. Op ware schaal is een A4 op
   deze bar maar een paar honderd pixels en dus onleesbaar; dit vergroten
   is daarom niet een aardigheidje maar de eigenlijke bediening.

   Twee en zes tiende, en dat getal wordt niet bepaald door wat mooi is
   maar door de hóógst liggende kaart. Reken maar mee: een kaart is 23,3%
   van de bandhoogte, het zetje omhoog haalt daar 4,2% vanaf, en de kaart
   op de ronde kop ligt op 34,9%. Zijn midden komt dus op 30,7% en zijn
   bovenrand op 30,7 − 11,65 × factor. Bij 2,63 raakt die de bovenkant van
   de band; daarboven steekt de kaart eruit.

   En dat is geen schoonheidsfoutje. #kaarten heeft geen overflow, dus
   een kaart die er bovenuit komt wordt gewoon getekend over de sectie
   erboven heen — hij komt ná #over in de html en wint dus. Een bierkaart
   die half over de tekst van "Een echte bruine kroeg" valt zodra je hem
   aanwijst, ziet eruit als een storing.

   Verhuist die kaart naar beneden, dan mag dit getal weer omhoog: de op
   één na krapste is de kaart rechtsonder op 91,3%, en die laat 2,95 toe.
   Vandaar dat de plek van de kaarten en dit getal bij elkaar horen — zie
   de opmerking bij de kaartplekken in index.html.

   Het zetje omhoog is er niet voor de sier: een kaart die alleen opzwelt
   groeit even hard naar beneden, en daar zit de voorrand van de bar. */
/* Alles wat aan :hover hangt zit in @media (hover: hover). Een telefoon
   houdt :hover na een tik namelijk vást: je tikt een kaart aan, de
   lichtbak gaat open, en daarachter staat die kaart opgetild met de
   andere gedimd tot je ergens anders tikt. Wat een aanwijzing hoort te
   zijn wordt dan een toestand. Toetsenbord loopt via :focus-visible en
   staat er daarom buiten. */
@media (hover: hover) {
  .kaartvel-knop:hover .kaartvel-blad {
    transform: translateY(-20%) scale(2.6) rotate(calc(var(--draai, 0deg) * -1));
  }
  .kaartvel-knop:hover .kaartvel-blad img {
    box-shadow:
      0 3px 6px #0F0501B3,
      0 14px 28px #0F0501A6,
      0 34px 60px #0F050199;
  }
  /* De andere kaarten zakken weg zodra er één wordt aangewezen. Zonder
     :has-ondersteuning gebeurt er simpelweg niets. */
  .kaartvellen:has(.kaartvel-knop:hover) .kaartvel:not(:hover) .kaartvel-blad img {
    filter: brightness(.78) saturate(.85);
  }
}
.kaartvel-knop:focus-visible .kaartvel-blad {
  /* De draaiing van de kaart wordt hier teruggedraaid: de kaart die je
     bekijkt komt recht overeind. Beide draaiingen gaan om hetzelfde
     middelpunt, dus ze heffen elkaar precies op. */
  transform: translateY(-20%) scale(2.6) rotate(calc(var(--draai, 0deg) * -1));
}
.kaartvel-knop:focus-visible .kaartvel-blad img {
  box-shadow:
    0 3px 6px #0F0501B3,
    0 14px 28px #0F0501A6,
    0 34px 60px #0F050199;
}
.kaartvellen:has(.kaartvel-knop:focus-visible) .kaartvel:not(:focus-within) .kaartvel-blad img {
  filter: brightness(.78) saturate(.85);
}

.kaartvel-knop:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 5px;
}

/* Onder de 60rem valt de foto weg. Op een telefoon is een liggende
   barfoto van 1190 bij 585 nog maar tweehonderd pixels hoog, en dan zijn
   de kaarten erop postzegels — je ziet noch de bar, noch de kaart.

   Wat overblijft is een gewone donkere sectie met een raster van twee.
   De ruimte eromheen moet hier wél terug: zonder foto is er geen band
   meer die de sectie vult, en .breed staat er niet omheen. */
@media (max-width: 60rem) {
  #kaarten { padding-block: var(--ruimte-6); }

  .toog {
    aspect-ratio: auto;
    background-image: none;
    background-color: transparent;
    padding-inline: clamp(1.2rem, 4vw, 3rem);
    max-width: 74rem;
    margin-inline: auto;
  }
  .toog::after { display: none; }

  /* De kop staat hier weer gewoon boven de kaarten in plaats van op een
     foto die er niet is. */
  .toog .sectie-kop {
    position: static;
    padding-inline: 0;
    margin-bottom: var(--ruimte-4);
  }
  .toog .sectie-kop h2 { text-shadow: none; }

  .kaartvellen {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 3.5vw, 2rem);
  }

  /* Zonder foto zijn de losse plekken zinloos: dan is het een raster. */
  .kaartvel {
    position: static;
    width: auto;
    translate: none;
    rotate: none;
  }

  .kaartvel-blad { transform: none; }
  @media (hover: hover) {
    .kaartvel-knop:hover .kaartvel-blad { transform: translateY(-.5rem); }
  }
  .kaartvel-knop:focus-visible .kaartvel-blad { transform: translateY(-.5rem); }

}
/* ============================================================
   DE KAARTEN ALS CARROUSEL — ALLEEN OP EEN TELEFOON

   Onder de 40rem worden de vijf kaarten een rij van twee met een
   pijl aan weerszijden. In het raster van twee stonden ze in drie
   rijen onder elkaar, en dan is de kaart een sectie waar je dóór
   moet in plaats van eentje waar je even in kijkt.

   Het schuiven is gewoon een overflow met scroll-snap, dus het
   veegt met de vinger ook als het script wegvalt. De pijlen zijn
   een tweede weg naar hetzelfde, niet de enige.

   De rij loopt tot aan de schermrand: de pijlen staan in de
   kantlijn en niet over de kaarten heen. Anders eten ze bijna
   honderd pixels uit een blad dat er nog geen vierhonderd heeft.
   ============================================================ */
@media (max-width: 40rem) {
  /* De barfoto komt hier terug, maar met een andere rol dan op een
     laptop. Daar liggen de kaarten erop en moet je het hout kunnen
     zién; hier is het alleen de grond waar de sectie op staat. Dat is
     precies waarom het nu wél kan: als achtergrond mag hij bijna
     helemaal wegvallen.

     Staand geschaald vult de foto de hoogte en houd je de middelste
     strook over: de lekbak vol omgekeerde glazen, het hout eronder en de
     rij krukken. Alle drie herkenbaar genoeg om te weten waar je bent,
     ook al zie je de bar niet in zijn geheel.

     Het neonbord van het café zelf zit hier níét meer in — dat viel weg
     bij het bijsnijden voor de laptop, zie DE TOOG hierboven. Wil je het
     op een telefoon toch, dan is dat een eigen bestand: een staande
     uitsnede van BarGoedVue.png rond x 700–1150, y 0–900. Dat is meteen
     ook de nettere oplossing, want dan hoeft een telefoon de liggende
     foto niet op te halen.

     Let op: dit is hetzelfde bestand als op de laptop, 132 kB. Op een
     telefoon werd het tot nu toe niet opgehaald. Dat is een kwart van
     wat het was, dus het valt mee. */
  #kaarten { padding-block: 0; }

  .toog {
    background-image: url("../afbeeldingen/bar-bovenaf.jpg");
    background-position: center;
    background-size: cover;
    background-color: var(--grond);
    /* De ruimte die #kaarten hierboven kwijtraakt: de foto loopt nu van
       rand tot rand, de lucht zit binnen de band. */
    padding-block: var(--ruimte-6);
  }

  /* De sluier terug, maar veel zwaarder dan op een laptop. Daar dekt hij
     alleen de bovenkant af zodat de kop leesbaar is; hier ligt de hele
     sectie erop en moet de foto sfeer worden in plaats van inhoud.

     De lichtste plek is 72% dekking. Dat is nagerekend op de ergste
     ondergrond die de foto kan hebben — een spotje van puur wit: crème
     haalt daar 6,7:1 en de amber driehoek 4,1:1, allebei ruim boven de
     grens. Zakt dit getal, dan zakt dat contrast mee. */
  .toog::after {
    display: block;
    background: linear-gradient(180deg,
      #1A0701E6 0%, #1A0701C7 30%, #1A0701B8 62%, #1A0701D1 100%);
  }

  /* De sluier is een positioned ::after en zou zonder dit over de
     kaarten heen liggen: op een laptop lost de absolute .kaartvellen
     met z-index 2 dat op, maar hier staat alles gewoon in de stroom. */
  .toog .sectie-kop,
  .kaartrij,
  .kaartrail {
    position: relative;
    z-index: 1;
  }

  .kaartrij {
    display: flex;
    align-items: center;
    gap: 0;
    /* Naast een kaart van tweehonderd pixels hoog mag de driehoek fors
       zijn; onder een tekstblok zou dezelfde maat schreeuwen. */
    --punt-breed: 14px;
    --punt-hoog: 60px;
    --knop-hoog: 68px;
    /* Uit de kantlijn van .toog stappen, tot aan het glas. Dezelfde
       clamp als daar; wijkt die af, dan hangt de rij scheef. */
    margin-inline: calc(clamp(1.2rem, 4vw, 3rem) * -1);
  }

  .kaartvellen {
    /* --gat staat hier als eigenschap en niet als los getal, omdat de
       breedte van een kaart eruit gerekend wordt. Twee plekken die
       hetzelfde getal moeten weten is één plek te veel. */
    --gat: .8rem;
    display: flex;
    flex: 1;
    min-width: 0;
    gap: var(--gat);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* De contactschaduw onder een kaart valt buiten de li; zonder deze
       ruimte snijdt de overflow hem er aan alle kanten af. */
    padding-block: .5rem;
    scrollbar-width: none;
  }
  .kaartvellen::-webkit-scrollbar { display: none; }

  /* Twee in beeld, precies passend: de helft van de rij, min de helft
     van de tussenruimte. */
  .kaartvel {
    flex: 0 0 calc((100% - var(--gat)) / 2);
    scroll-snap-align: start;
  }

  /* De rail zegt hoeveel er nog komt. Twee kaarten in beeld verzwijgen
     dat er vijf zijn; de pijlen alleen ook. */
  .kaartrail {
    position: relative;
    height: 3px;
    margin-top: var(--ruimte-3);
    background: var(--rand-fijn);
    overflow: hidden;
  }
  .kaartrail-loper {
    display: block;
    height: 100%;
    /* Zo breed als het deel dat je ziet: twee van de vijf, dus 40%. */
    width: calc(100% * var(--zicht, 1) / var(--deel, 1));
    background: var(--banen);
    /* Eén druk op de pijl is één kaart, oftewel een vijfde van de rail.
       translateX rekent in procenten van de loper zélf, en die is twee
       vijfde breed — één stap is dus een halve loper. Vandaar stap
       gedeeld door zicht, en niet door deel. */
    transform: translateX(calc(100% * var(--stap, 0) / var(--zicht, 1)));
    transition: transform .4s var(--uit);
  }
  /* Uit beeld, niet uit de pagina: wie de rail niet ziet, hoort "2 van
     de 3" zodra de rij verspringt. */
  .kaartrail-stand {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


@media (prefers-reduced-motion: reduce) {
  .kaartvel-blad, .kaartvel-blad img { transition: none; }
  .kaartvel-knop:hover .kaartvel-blad,
  .kaartvel-knop:focus-visible .kaartvel-blad {
    }
}

/* ============================================================
   DE LICHTBAK VOOR DE KAARTEN
   Een eigen lichtbak, los van die van de fotogalerij. Een foto past
   op het scherm en is daarmee klaar; een kaart niet. Een A4 dat op
   een telefoonscherm past, heeft letters van twee millimeter — je
   ziet dan dat het een bierkaart is, maar je leest hem niet.

   Vandaar dat deze kan inzoomen. Het schuiven daarna doet de browser
   zelf met overflow: auto, en dat is met opzet: eigen sleepcode is
   altijd slechter dan het schuiven dat het toestel zelf al kan, met
   uitloop en al.
   ============================================================ */

.kaartlicht {
  position: fixed;
  inset: 0;
  z-index: var(--z-lichtbak);
  border: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  /* Doorzichtig, niet dekkend. Hiervóór stond hier de volle grondkleur,
     en dan is er van de pagina niets meer te zien: dat leest als een
     ander scherm in plaats van als een kaart die je even optilt. Nu
     blijft de site achter de sluier staan. */
  background: transparent;
  color: var(--creme);
  overflow: hidden;
}

/* De balk bovenaan houdt zijn hoogte, het doek eronder krijgt de rest.
   Zonder dit groeit het doek buiten het scherm zodra er ingezoomd is
   en verdwijnen de knoppen naar boven.

   Op [open] en niet op .kaartlicht zelf: de browser houdt een gesloten
   <dialog> verborgen met display:none, en een display in onze eigen CSS
   wint het daarvan. Zonder deze haakjes staat de lichtbak dus altijd
   open over de pagina heen. */
.kaartlicht[open] {
  display: grid;
  grid-template-rows: auto 1fr;
}
/* De sluier zit op de backdrop en niet op de dialoog zelf, juist zodat
   de pagina erdoorheen blijft schemeren. De vervaging maakt het verschil
   tussen "er ligt iets overheen" en "ik ben ergens anders". */
.kaartlicht::backdrop {
  background: #150e0899;
  backdrop-filter: blur(5px);
}

/* Wat er van de balk over is: alleen het kruisje, rechtsboven. De naam
   en de twee knoppen zijn eruit; wat overblijft zweeft over de sluier
   in plaats van in een dichte strook te zitten. */
.kaartlicht-balk {
  display: flex;
  align-items: center;
  padding: var(--ruimte-2) var(--ruimte-3);
  background: transparent;
}
/* Uit beeld, maar niet uit de pagina: een schermlezer moet horen wélke
   kaart is opengegaan, en de dialoog wordt via aria-labelledby door deze
   regel benoemd. Verbergen met display:none zou hem ook voor de
   schermlezer wegnemen, vandaar deze omweg. */
.kaartlicht-naam {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kaartlicht-sluit {
  flex: none;
  margin-left: auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: #33150ACC;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--uit), color .2s var(--uit);
}
.kaartlicht-sluit:hover { background: var(--oranje); color: var(--grond); }

@media (max-width: 30rem) {
  .kaartlicht-balk { padding: var(--ruimte-2); }
  .kaartlicht-sluit { width: 2.3rem; height: 2.3rem; }
}

/* Uitgezoomd staat de kaart midden in beeld en past hij helemaal.
   Ingezoomd wordt hij hoger dan het scherm en neemt de browser het
   schuiven over. */
.kaartlicht-doek {
  overflow: auto;
  display: flex;
  /* min-height: 0 is hier geen detail maar de hele truc. Een grid-item
     krimpt standaard niet onder zijn inhoud, waardoor de 1fr-rij net zo
     hoog wordt als de kaart erin. De max-height: 100% van het beeld
     meet zich dan aan zijn eigen hoogte en beperkt dus niets: de kaart
     opent op ware grootte in plaats van passend. */
  min-height: 0;
  padding: var(--ruimte-3);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Centreren met marge en niet met justify-content. Dat scheelt niets
   zolang het beeld past, maar zodra er ingezoomd is, is de linkerkant
   van een met justify-content gecentreerd item niet meer te bereiken —
   je kunt er dan wel naartoe schuiven, maar de inhoud is weggesneden. */
.kaartlicht-doek img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--rand-sterk);
  /* Een zware schaduw, want de kaart ligt nu ergens boven in plaats van
     op een dichte ondergrond. Zonder dit plakt hij tegen de sluier. */
  box-shadow: 0 10px 30px #0F0501A6, 0 40px 90px #0F050199;
}
/* De hoogte zelf komt uit het script: een vast veelvoud van de maat
   waarop de kaart net past. Een vaste maat in vh werkt hier niet, want
   die hangt aan de schermhoogte terwijl leesbaarheid van de breedte
   afhangt — op een telefoon werd de kaart daarmee ruim drie keer
   vergroot en zag je nog maar een derde van elke regel. */
.kaartlicht-doek.ingezoomd img {
  /* Boven uitgelijnd, horizontaal gecentreerd: bovenaan de kaart staat
     de kop, en daar begin je met lezen. */
  margin: 0 auto;
  max-width: none;
  max-height: none;
  width: auto;
}


/* ============================================================
   FOTOGALERIJ
   ============================================================ */

.galerij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--ruimte-2);
}
.galerij > * { aspect-ratio: 4 / 3; margin: 0; }
/* De eerste krijgt twee kolommen op ruime schermen: een galerij van
   gelijke vierkanten leest als een contactvel, niet als een zaak. */
@media (min-width: 52rem) {
  .galerij { grid-template-columns: repeat(4, 1fr); }
  .galerij > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

button.beeld {
  padding: 0;
  border: 0;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  background: none;
}
/* Geen lift en geen schaduw: de foto zelf komt naar voren doordat de
   waas eraf gaat en hij een fractie inzoomt. */
button.beeld:hover img,
button.beeld:focus-visible img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.02) brightness(1);
}

/* ============================================================
   LICHTBAK
   ============================================================ */

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: var(--z-lichtbak);
  border: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--creme);
}
.lichtbak::backdrop { background: #150e08f0; backdrop-filter: blur(3px); }
.lichtbak-in {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: var(--ruimte-3);
  height: 100%;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) var(--ruimte-4);
}
.lichtbak img {
  border-radius: var(--ronding);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--rand-sterk);
}
.lichtbak figcaption {
  color: var(--creme-dim);
  text-align: center;
  font-size: .95rem;
}
.lichtbak-sluit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  background: #33150Ae0;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--uit), color .2s var(--uit);
}
.lichtbak-sluit:hover { background: var(--oranje); color: var(--grond); }

/* ============================================================
   INSTAGRAM
   Wordt gevuld uit data/feed.json. Laadt die niet, dan blijft de
   sectie leeg en verdwijnt hij — liever niets dan zes lege vakjes.
   ============================================================ */

.insta-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: .7rem;
}
.insta-tegel {
  border-radius: var(--ronding-klein);
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--rand);
  display: block;
  background: var(--grond);
  transition: transform .28s var(--uit), border-color .28s var(--uit), box-shadow .28s var(--uit);
}
.insta-tegel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--uit-zacht);
}
.insta-tegel .waas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end start;
  padding: .8rem;
  background: linear-gradient(to top, #250F06ee 0%, #250F0666 45%, transparent 80%);
  color: var(--creme);
  font-size: .82rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .28s var(--uit);
}
.insta-tegel .waas span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insta-tegel:hover,
.insta-tegel:focus-visible {
  transform: translateY(-3px);
  border-color: var(--rand-sterk);
  box-shadow: 0 16px 26px -14px #000000a0;
}
.insta-tegel:hover img,
.insta-tegel:focus-visible img { transform: scale(1.06); }
.insta-tegel:hover .waas,
.insta-tegel:focus-visible .waas { opacity: 1; }

.insta-voet { text-align: center; margin-top: var(--ruimte-4); }

/* ============================================================
   REVIEWS
   Komen rechtstreeks van Google. Wat Google teruggeeft staat er,
   Met de hand gekozen citaten uit data/reviews.json. Drie tegelijk
   in beeld, met pijltjes eronder om door de rest te bladeren.
   ============================================================ */

.review-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  flex-wrap: wrap;
  margin-bottom: var(--ruimte-4);
}
.score-getal {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--creme);
}
.sterren { display: inline-flex; gap: .1rem; color: var(--amber); line-height: 0; }
.sterren .leeg { opacity: .24; }
.score-bij { color: var(--creme-dim); font-size: .95rem; }

.review-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--ruimte-2);
}

/* ------------------------------------------------------------------
   Bladeren

   Op een breed scherm staan drie citaten naast elkaar en springen de
   pijlen naar het volgende drietal.

   Op een telefoon werd het een strook waar je doorheen veegde, met
   kaartjes van 82% breed. Dat gaf twee bedieningen door elkaar: binnen
   het groepje veegde je, en de pijlen sprongen naar het vólgende
   groepje. Je wist nooit welke van de twee je nodig had.

   Nu staan er twee citaten onder elkaar en doen alleen de pijlen het
   werk. Twee en geen drie: een citaat is hier zo'n vier regels, en drie
   daarvan is meer scrollen dan er te lezen valt. Naast elkaar kan niet —
   op 375px is een kolom dan 140px breed en dat is geen alinea meer.
   ------------------------------------------------------------------ */
@media (max-width: 40rem) {
  .review-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ruimte-4);
  }

  /* Het hele citaat in het midden: de sterren, de tekst en de naam. Op
     verzoek — een citaat van vier regels is kort genoeg dat de rafelige
     linkerkant hier niet in de weg zit, en zo staat het blok in één lijn
     met de gecentreerde koppen elders op de telefoon.

     .sterren is zelf een flexrij, dus die centreert met
     justify-content en niet met text-align. */
  .review { text-align: center; }
  .review .sterren { justify-content: center; }
  /* Gecentreerde tekst valt door met een losse laatste regel; pretty
     houdt daar een woord voor achter. */
  .review blockquote { text-wrap: pretty; }
}

.review-blader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-2);
  margin-top: var(--ruimte-3);
}
.review-teller {
  color: var(--creme-dim);
  font-size: .86rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: center;
}
/* Geen doosje maar een kolom onder een banenregel. Een citaat hoeft
   geen kader; wit ruimte en een goede regelval doen meer. */
.review {
  position: relative;
  padding-top: var(--ruimte-4);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
}
.review::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--banen);
}
.review blockquote {
  margin: 0;
  color: var(--creme);
  font-size: 1.08rem;
  line-height: 1.6;
  position: relative;
}
.review blockquote::before,
.review blockquote::after {
  color: var(--oranje);
  font-size: 2.4rem;
  line-height: 0;
  vertical-align: -.35em;
}
.review blockquote::before { content: "“"; margin-right: .12em; }
/* Een citaat dat wel opent maar niet sluit leest als een afgebroken zin. */
.review blockquote::after { content: "”"; margin-left: .06em; }
.review figcaption {
  margin-top: auto;
  color: var(--amber);
  font-size: .86rem;
  letter-spacing: .06em;
}
/* De afsluiting van de sectie: eerst de uitnodiging, dan pas de
   herkomst. Andersom leest het als een voetnoot met een knop eronder.

   De knop is de omlijnde variant en niet de massieve. Massief oranje is
   op deze pagina de hoofdknop in de hero (Openingstijden); een tweede
   even luide knop halverwege zou die verzwakken. Bij aanwijzen vult
   deze zich alsnog oranje, dus als knop leest hij onmiskenbaar. */
.review-voet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-5);
}
.review-bron {
  text-align: center;
  color: var(--creme-dim);
  font-size: .84rem;
  margin: 0;
  text-wrap: balance;
}
/* De link was 15 pixels hoog; met wat ruimte eromheen is hij te raken
   zonder dat de regel eromheen uit elkaar valt. */
.review-bron a {
  display: inline-block;
  padding-block: .35rem;
  color: var(--amber);
}

/* ============================================================
   BEZOEK
   ============================================================ */

.bezoek-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.blok {
  position: relative;
  color: var(--creme);
  padding: var(--ruimte-4) 0 0;
}
.blok::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: var(--banen);
}
/* Oranje is het werkaccent; de tijden zelf krijgen het helderdere
   amber, want dat is waar iemand voor komt. */
.blok h3 {
  color: var(--oranje);
  margin-bottom: var(--ruimte-3);
  font-size: 1.2rem;
  letter-spacing: .04em;
}
.tijden { width: 100%; border-collapse: collapse; }
.tijden th { font-weight: 400; text-align: left; }
.tijden td, .tijden th {
  padding-block: .5rem;
  border-bottom: 1px solid var(--rand-fijn);
  vertical-align: baseline;
}
.tijden tr:last-child td, .tijden tr:last-child th { border-bottom: 0; }
.tijden td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  white-space: nowrap;      /* "12:00 – 01:00" mag nooit afbreken */
  padding-left: var(--ruimte-2);
}
.tijden tr.dicht td { color: var(--creme-dim); }
.tijden tr.vandaag th { color: var(--creme); font-weight: 700; }
.tijden tr.vandaag th::before { content: "▸ "; color: var(--oranje); }

.contact { font-style: normal; line-height: 2; margin-top: var(--ruimte-3); }
.contact a {
  /* Inline-blok met wat ruimte erboven en eronder: zonder dat is het
     klikdoel 21 pixels hoog, en dat is te klein om te raken. */
  display: inline-block;
  padding-block: .2rem;
  color: var(--creme);
  text-decoration-color: var(--amber);
  text-underline-offset: .2em;
}
.contact a:hover { color: var(--amber); }

/* --- het kaartje ---
   Twaalf OpenStreetMap-tegels die één keer zijn opgehaald en nu lokaal
   staan. Een echte kaart, meteen zichtbaar, zonder sleutel en zonder
   één verzoek naar buiten. */

.plattegrond {
  position: relative;
  min-height: 22rem;
  height: 100%;
  border: 2px solid var(--grond);
  overflow: hidden;
  background: #E6DCCB;
}

/* De tegels vormen samen 1024 x 768. Het café ligt daarin op
   x=561, y=496; door dat punt op het midden van het venster te leggen
   staat de speld altijd op het pand, ongeacht de vensterbreedte. */
.kaartbeeld {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -561px;
  margin-top: -496px;
  width: 1024px;
  height: 768px;
  display: grid;
  grid-template-columns: repeat(4, 256px);
  grid-template-rows: repeat(3, 256px);
  /* OpenStreetMap tekent koel blauwgrijs. Warm getrokken staat het naast
     de rest van de pagina in plaats van ertegenover. */
  filter: saturate(.5) sepia(.34) brightness(1.02) contrast(1.02);
}
.kaartbeeld img { display: block; width: 256px; height: 256px; }

.kaart-speld {
  position: absolute;
  left: 50%;
  top: 50%;
  /* De punt van de speld op het midden, niet het hart ervan. */
  transform: translate(-50%, -100%);
  color: var(--rood);
  filter: drop-shadow(0 3px 5px #00000066);
  pointer-events: none;
  z-index: 2;
}

.kaart-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: .9rem;
  text-decoration: none;
}
.kaart-open span {
  background: #33150Aee;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  font-size: .72rem;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem .8rem;
  transition: background .2s var(--uit), color .2s var(--uit);
}
.kaart-open:hover span,
.kaart-open:focus-visible span { background: var(--oranje); color: var(--grond); }
.kaart-open:focus-visible { outline: 2px solid var(--oranje); outline-offset: -4px; }

/* Bronvermelding is verplicht bij OpenStreetMap-tegels. Klein maar
   leesbaar: donkerbruin op het lichte kaartbeeld. */
.kaart-bron {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: .3rem .6rem;
  background: #F5E7D2e6;
  color: var(--op-licht);
  font-size: .7rem;
  line-height: 1.3;
}
/* Inline link in een zin, dus vrijgesteld van de minimummaat voor
   klikdoelen — maar wat lucht eromheen maakt hem prettiger te raken. */
.kaart-bron a { color: var(--op-licht-accent); display: inline-block; padding-block: .15rem; }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  position: relative;
  z-index: var(--z-inhoud);
  text-align: center;
  padding: var(--ruimte-5) 1.5rem var(--ruimte-5);
  color: var(--creme);
  background-color: var(--grond);
  /* De waaier liep vroeger door een leeg vlak onder de tekst; daar was
     die ruime onderrand voor. Nu staat de tekst erop, dus die ruimte
     mag terug naar normaal. */
  padding-bottom: clamp(2.6rem, 7vw, 4.2rem);
}
footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 4px;
  background: var(--banen);
}

/* De stralenwaaier uit de poster met de pitcher. Een kegelverloop met
   harde stops vanuit een punt onder de onderrand, zodat de stralen
   omhoog uitwaaieren.

   Het adres, de knoppen en de rechtenregel staan hier bovenop. Dat mag
   niet ten koste van de leesbaarheid gaan, dus is het nagerekend tegen
   de helderste straal (amber, op 42% over de grond):

     volle crème   5,31:1  — ruim boven de 4,5 die kleine tekst nodig heeft
     gedempte crème 3,13:1  — te weinig
     amber          3,27:1  — te weinig

   Daaruit volgen twee regels die niet onderhandelbaar zijn zolang de
   tekst op de waaier staat: alle tekst hier is volle crème, en het
   verschil tussen de regels komt van grootte en gewicht, niet van een
   gedimde kleur. De knoppen krijgen bovendien een eigen donker vlak,
   want een kale link op een bewegend patroon leest slecht, hoe hoog het
   contrast ook is.

   Het masker loopt nu tot 62% door en dooft op 92%, zodat de waaier
   achter de tekst staat maar de merknaam bovenaan vrij blijft. */
footer .stralen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background: repeating-conic-gradient(from 200deg at 50% 128%,
    var(--rood)       0deg    2.6deg,
    var(--rood-licht) 2.6deg  5.2deg,
    var(--oranje)     5.2deg  7.8deg,
    var(--amber)      7.8deg 10.4deg,
    transparent      10.4deg 26deg);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 62%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, #000 62%, transparent 92%);
}
footer > *:not(.stralen) { position: relative; z-index: 1; }


footer .merk { font-size: 1.5rem; }
footer .merk { margin: 0 0 var(--ruimte-2); display: inline-block; }

/* Het adres stond op 13 px. Dat is te klein voor lopende tekst bij een
   publiek dat tot ver in de zeventig loopt, en op de waaier helemaal. */
footer .klein { font-size: 1rem; margin-top: var(--ruimte-2); }

footer .sociaal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
  margin: var(--ruimte-3) 0 0;
  padding: 0;
  list-style: none;
}
/* Knoppen, geen kale links: het donkere vlak tilt ze van de waaier af.
   Hetzelfde recept als de Vergroten-knop op het kaartje. */
footer .sociaal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;         /* aanraakvlak */
  box-sizing: border-box;
  padding: .5rem 1.1rem;
  background: #33150Acc;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 600;
  transition: background-color .2s var(--uit), border-color .2s var(--uit), color .2s var(--uit);
}
footer .sociaal a:hover,
footer .sociaal a:focus-visible {
  background: var(--oranje);
  border-color: var(--oranje);
  color: var(--grond);
}

/* De rechtenregel is een voetnoot, geen lopende tekst; klein mag hier,
   maar gedimd niet — zie de opmerking bij .stralen. */
footer .rechten {
  margin: var(--ruimte-3) 0 0;
  font-size: .8rem;
  letter-spacing: .04em;
}

/* ============================================================
   BEWEGING
   Alles hieronder is een verbetering bovenop een pagina die al
   volledig zichtbaar is. De onthullingen worden pas ingeschakeld
   als JavaScript draait (html.js) — zonder script staat er dus
   nooit een lege sectie.
   ============================================================ */

.js .rijs {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--uit), transform .7s var(--uit);
}
.js .rijs.zichtbaar { opacity: 1; transform: none; }

/* Het banenblokje veegt open vanuit het midden. Dat is de enige
   onthulling die elke sectie deelt; de rest krijgt iets eigens. */
.js .sectie-kop .banen { transform: scaleX(0); transition: transform .7s var(--uit-zacht); }
.js .sectie-kop.zichtbaar .banen { transform: scaleX(1); }

/* Foto's zakken op hun plaats in plaats van omhoog te schuiven:
   een beeld dat scherpstelt, niet een blok dat binnenschuift. */
.js .zet { opacity: 0; transform: scale(1.04); transition: opacity .8s var(--uit), transform .9s var(--uit-zacht); }
.js .zet.zichtbaar { opacity: 1; transform: none; }
.js .galerij > *,
.js .kaartvellen > *,
.js .insta-raster > *,
.js .review-raster > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* Openingsanimatie van de hero: één keer, bij binnenkomst. */
@keyframes opkomst { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .hero-tekst > * { animation: opkomst .8s var(--uit) backwards; }
.js .hero-tekst > *:nth-child(1) { animation-delay: .05s; }
.js .hero-tekst > *:nth-child(2) { animation-delay: .14s; }
.js .hero-tekst > *:nth-child(3) { animation-delay: .23s; }
.js .hero-tekst > *:nth-child(4) { animation-delay: .34s; }
/* De achtergrondfoto animeert bewust níét. Hij is de grond waar de
   hero op staat, en een grond die invaagt geeft bij het laden een flits
   van leeg bruin. Alleen de tekst erboven komt op. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .rijs, .js .zet { opacity: 1; transform: none; }
  .js .sectie-kop .banen { transform: scaleX(1); }
}

[hidden] { display: none !important; }

/* ============================================================
   AFDRUKKEN
   Iemand print dit om het adres mee te nemen. Geef hem dat, en
   verder niets.
   ============================================================ */

@media print {
  body { background: #fff; color: #000; }
  .balk, .deeltjes, .hero-knopen, #insta, #reviews,
  .plattegrond, .galerij, .lichtbak, .kaartlicht,
  .snelbalk, .overslaan, footer .stralen { display: none !important; }
  /* De korrel zit nu op de vlakken zelf in plaats van als laag over de
     pagina, dus hij moet er hier per vlak af. */
  .hero, section, footer { background: none !important; }
  body { padding-bottom: 0; }
  section { padding-block: 1rem; background: none !important; border: 0 !important; }
  .blok { border: 1px solid #999; }
  a { color: #000; text-decoration: underline; }
  .tijden td { color: #000; }
}

/* ============================================================
   DE KAARTEN NEERLEGGEN
   Alleen zichtbaar als je de site lokaal opent met #leggen achter het
   adres. Op het echte domein bestaat deze stand niet — het script zet
   de klasse dan niet.
   ============================================================ */

.legmodus .kaartvel { cursor: grab; touch-action: none; }
.legmodus .kaartvel.legt { cursor: grabbing; z-index: 20; }

/* Een streepje om te zien dat je iets kunt pakken, en waar de kaart
   ophoudt: op donker hout is de rand van een donkere kaart nauwelijks
   te zien, en dan sleep je op de tast. Bij een gedraaide kaart laat het
   bovendien zien hoe scheef hij staat. */
.legmodus .kaartvel-blad img { outline: 1px dashed var(--amber); outline-offset: 3px; }

/* De vergroting staat uit tijdens het leggen: een kaart die onder je
   muis opzwelt is niet te richten. */
.legmodus .kaartvel-knop:hover .kaartvel-blad,
.legmodus .kaartvel-knop:focus-visible .kaartvel-blad { transform: none; }
.legmodus .kaartvellen:has(.kaartvel-knop:hover) .kaartvel:not(:hover) .kaartvel-blad img {
  filter: none;
}

.legpaneel {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  max-width: 24rem;
  padding: var(--ruimte-3);
  background: #1A0701F2;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  font-size: .8rem;
  line-height: 1.5;
}
.legpaneel-kop {
  margin: 0 0 .3rem;
  font-weight: 700;
  font-stretch: var(--smal);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}
.legpaneel-uitleg { margin: 0 0 var(--ruimte-2); color: var(--creme-dim); }
.legpaneel-uitleg code { font-size: .95em; }
.legpaneel-uitvoer {
  margin: 0 0 var(--ruimte-2);
  padding: var(--ruimte-2);
  background: #00000059;
  border: 1px solid var(--rand-fijn);
  font-size: .72rem;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  color: var(--creme);
}
.legpaneel-knop {
  padding: .45rem .8rem;
  background: transparent;
  border: 1px solid var(--rand-sterk);
  color: var(--creme);
  font: 600 .7rem/1 var(--letter);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.legpaneel-knop:hover { background: var(--oranje); color: var(--grond); }
.legpaneel-melding { margin-left: .6rem; color: var(--amber); font-size: .72rem; }

/* Alleen zichtbaar als je de site lokaal opent: laat zien dat een
   sectie bestaat terwijl de feed nog leeg is. Op het echte domein
   verschijnt dit nooit. */
.sectie-plek {
  max-width: 46ch;
  margin: 0 auto;
  padding: var(--ruimte-4) var(--ruimte-3);
  text-align: center;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--creme-dim);
  outline: 1px dashed var(--rand);
}