/* ==========================================================================
   Mockup: proportiesysteem + bordeaux lijnwerk
   Drie beeldmaten, drie luchtmaten, drie lijnsterktes.
   ========================================================================== */
:root{
  --C:min(1180px, calc(100vw - 2 * var(--gutter)));
  --col-gap:calc(var(--C) * .05);
  --col:calc(var(--C) * .30);
  --img-l:calc(var(--C) * .65);
  --img-m:calc(var(--C) * .44);
  --air-s:clamp(48px,5.5vw,84px);
  --air-m:clamp(80px,9.5vw,132px);
  --air-l:clamp(104px,12.5vw,176px);
  --lijn-raster:rgba(86,9,21,.13);
  --lijn-scheid:rgba(86,9,21,.20);
  --lijn-accent:rgba(86,9,21,.45);
}

/* --- Eén ritme voor elk onderwerp --- */
.topic{padding:var(--air-l) var(--gutter) var(--air-m);position:relative}
.topic>*{position:relative;z-index:1}
/* Gecentreerde leadteksten houden een leesbare regellengte. */
.topic.center .lead{max-width:52ch;margin-inline:auto}
.topic-kort{padding:var(--air-s) var(--gutter);position:relative}

/* --- Beeldmaten: alleen de hero raakt de schermrand --- */
.beeld{position:relative;overflow:hidden;background:var(--paper)}
.beeld picture{display:block;width:100%;height:100%}
.beeld img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1)}
.beeld:hover img{transform:scale(1.035)}
@media(hover:none){.beeld:hover img{transform:none}}
.beeld-l{width:var(--img-l);aspect-ratio:16/9}
.beeld-m{width:100%;aspect-ratio:3/2}
.beeld-s{width:100%;aspect-ratio:4/5}

/* --- Hero: vult het volledige scherm, het bord hoger in beeld zodat de
   kop in het groen eronder valt en niet over de belettering heen. --- */
.hero{min-height:100svh}
.hero .bg img{object-position:center 38%}
.hero .bg::after{background:linear-gradient(180deg,rgba(30,22,18,.28) 0%,
  rgba(30,22,18,.02) 20%,rgba(28,18,10,.30) 46%,rgba(24,15,8,.72) 72%,
  rgba(20,12,6,.90) 100%)}
.hero .edition{margin-bottom:22px}
@media(max-width:700px){.hero{min-height:100svh}}

/* --- Twee identieke splits, alleen gespiegeld --- */
.mk-split{display:grid;grid-template-columns:1fr var(--img-m);
  gap:clamp(44px,7vw,116px);align-items:start;max-width:var(--C);margin-inline:auto}
/* Tekst en beeld op één basislijn: de label-regel lijnt uit met de bovenrand. */
.mk-split .txt{padding-top:clamp(6px,1.4vw,22px)}
/* Tekst mag ademen: ruimere regelafstand en meer lucht onder de kop. */
.mk-split .lead,.wrap-n .lead{line-height:1.62}
.mk-split h2{margin:.34em 0 .62em}
.mk-split .txt .label{margin-bottom:.5em}
.mk-split.flip{grid-template-columns:var(--img-m) 1fr}
.mk-split h2{font-family:var(--display);font-weight:600;
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.014em;
  margin:.3em 0 .5em;color:var(--ink)}
@media(max-width:860px){
  /* Gestapeld leest elke sectie hetzelfde: tekst eerst, dan het beeld.
     Zo botsen er nooit twee foto's op een sectiegrens. */
  .mk-split,.mk-split.flip{grid-template-columns:1fr;gap:clamp(28px,8vw,40px)}
  .mk-split.flip .fig{order:2}
}

/* --- Eén doorlopend raster over de hele pagina -------------------------
   Niet per sectie, want dan begint en stopt elke lijn bij een sectiegrens
   en oogt het rommelig. Dit is één raster dat van de eerste tot de laatste
   sectie doorloopt en achter de foto's verdwijnt, zoals bij K&K.
   Daarom draagt main ook één doorlopend kleurverloop: geen naden mogelijk. */
main{position:relative;
  background:linear-gradient(180deg,#f6f2ea 0%,#f2e9d9 56%,#efe2cb 100%)}
main > *{position:relative;z-index:1}
/* De secties zelf worden doorzichtig: het verloop zit nu op main. */
main .t0,main .t0b,main .t1,main .t1b,main .t2,main .t3{background:none}
/* De ruggengraat: één lijn langs de linkerrand die de hele pagina meeloopt,
   met een klein bordeaux stipje dat met je meescrolt. Geen net, één spoor. */
.rasterlijnen{
  position:absolute;top:0;bottom:0;left:50%;
  width:var(--C);transform:translateX(-50%);pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-size:1px 100%;
  background-image:linear-gradient(180deg,transparent 0,var(--lijn-raster) 6%,
    var(--lijn-raster) 94%,transparent 100%);
  background-position:left 0 top 0;
}
@media(max-width:860px){.rasterlijnen{display:none}}

/* Speelse accentlijnen: elke sectie krijgt er één, maar nooit dezelfde.
   Ze reiken naar de tekst toe in plaats van een raster te vormen. */
.reik{position:relative}
.reik::before{content:"";position:absolute;top:.62em;height:1px;
  background:var(--lijn-accent);transform:scaleX(0);transition:transform 1.1s var(--ease) .15s}
.reik.in::before{transform:scaleX(1)}
/* naar links reikend, vanaf de tekst het wit in */
.reik-l::before{right:calc(100% + 18px);width:clamp(40px,9vw,132px);transform-origin:right}
.reik-l.in::before{transform:scaleX(1)}
/* naar rechts reikend, korter */
.reik-r::before{left:calc(100% + 18px);width:clamp(28px,5vw,74px);transform-origin:left}
/* Een lijn die een hoek omgaat: langs de tekst omlaag, dan naar rechts.
   Tot de onderrand van het blok, zodat het voetje nooit door de tekst valt. */
.hoeklijn{position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--lijn-raster);transform:scaleY(0);transform-origin:top;
  transition:transform 1.3s var(--ease)}
.hoeklijn::after{content:"";position:absolute;left:0;bottom:0;width:clamp(30px,6vw,88px);
  height:1px;background:var(--lijn-raster);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) 1.1s}
.in > .hoeklijn,.hoeklijn.in{transform:scaleY(1)}
.in > .hoeklijn::after,.hoeklijn.in::after{transform:scaleX(1)}
/* Hoekhaakje bij een foto: twee streepjes die de hoek markeren. */
.haakje{position:relative}
.haakje::before,.haakje::after{content:"";position:absolute;background:var(--lijn-accent);
  opacity:0;transition:opacity .8s var(--ease) .5s}
.haakje::before{left:-14px;bottom:-14px;width:clamp(26px,4vw,54px);height:1px}
.haakje::after{left:-14px;bottom:-14px;width:1px;height:clamp(26px,4vw,54px)}
.haakje.in::before,.haakje.in::after{opacity:1}
/* --- Horizontale scheiding die een hoofdstuk afsluit --- */
.scheiding{width:var(--C);height:1px;margin-inline:auto;background:var(--lijn-scheid);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.scheiding.in{transform:scaleX(1)}

/* --- Het foto-effect van Akaneya, in drie lagen -----------------------
   1. het kader opent zich   : clip-path inset(14px) -> inset(0)
   2. de foto zoomt uit      : scale(1.26) -> scale(1.10)
   3. de foto drijft door    : translate op basis van de scrollpositie
   Laag 1 en 2 gebeuren één keer bij binnenkomst, laag 3 loopt door.
   De scale zit op het picture-element en de drift op de afbeelding zelf, zodat de doorlopende
   beweging niet vecht met de eenmalige overgang. --- */
.foto{position:relative;overflow:hidden;background:var(--paper);
  clip-path:inset(14px);transition:clip-path 1.25s var(--ease)}
.foto.in{clip-path:inset(0)}
.foto picture{display:block;width:100%;height:100%;
  transform:scale(1.26);transition:transform 1.6s var(--ease)}
.foto.in picture{transform:scale(1.1)}
.foto img{width:100%;height:100%;object-fit:cover;display:block;
  translate:0 var(--drift,0px);will-change:translate}
@media(prefers-reduced-motion:reduce){
  .foto{clip-path:inset(0);transition:none}
  .foto picture{transform:none;transition:none}
  .foto img{translate:0 0 !important}
}

/* --- Het tweeluik van de avond, rustig gezet: twee staande beelden
   binnen de contentbreedte, met lucht ertussen en nergens overlap.
   Het rechter beeld staat iets lager voor ritme. De tekst ligt op de
   foto en schuift er bij het scrollen overheen, naar het tweeluik van
   Akaneya: de foto drijft omlaag, de tekst beweegt er licht tegenin.
   Een zachte sluier onderin houdt hem leesbaar. --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);
  max-width:var(--C);margin-inline:auto;align-items:start;text-align:left;
  margin-top:var(--air-s)}
.duo .helft:nth-child(2){margin-top:clamp(36px,4.5vw,76px)}
.duo .beeld{aspect-ratio:4/5}
.duo .beeld::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(62,40,22,0) 46%,rgba(48,30,16,.14) 66%,
    rgba(40,24,12,.56) 100%)}
.duo .overtekst{position:absolute;z-index:2;left:clamp(18px,2.2vw,34px);
  right:clamp(18px,2.2vw,34px);bottom:clamp(18px,2.4vw,36px);text-align:left;
  color:var(--cream);text-shadow:0 2px 18px rgba(24,14,6,.5);
  /* De tekst rolt vlot tegen de foto in en komt halverwege het beeld
     tot stilstand: de clamp kapt de klim af op het midden. */
  translate:0 clamp(-260px, calc(var(--drift,0px) * -11), 420px);will-change:translate}
.duo .overtekst h3{font-family:var(--display);font-weight:600;
  font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.1;letter-spacing:-.012em;
  margin:0 0 .25em}
.duo .overtekst p{font-family:var(--serif);font-style:italic;
  font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.45;margin:0;opacity:.94}
@media(prefers-reduced-motion:reduce){.duo .overtekst{translate:0 0 !important}}
@media(max-width:700px){
  /* Het tweeluik blijft een paar: een swipebare strook met een
     gluurrandje van het tweede beeld, in plaats van twee losse foto's. */
  .duo{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;
    max-width:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
  .duo::-webkit-scrollbar{display:none}
  .duo .helft{scroll-snap-align:center}
  .duo .helft:nth-child(2){margin-top:0}
  /* Kleinere foto's en een gehalveerde drift op mobiel: fors hogere
     factor, de clamp parkeert de tekst alsnog op het midden. */
  .duo .overtekst{translate:0 clamp(-115px, calc(var(--drift,0px) * -24), 420px)}
}

/* --- Mobiele ronde: maten, ruimte en raakvlakken --- */
@media(max-width:700px){
  .topic{padding:var(--air-m) var(--gutter) var(--air-s)}
  .topic-kort{padding:var(--air-s) var(--gutter)}
  .h1{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .mk-split h2{font-size:clamp(1.55rem,6.6vw,2rem)}
  /* De schaalsprong van de lead blijft ook op mobiel voelbaar. */
  .lead,.mk-split .lead{font-size:1.14rem;line-height:1.58}
  .topic.center .lead,.wrap-n .lead{max-width:36ch}
  .center .h1,.wrap-n .h1{max-width:17ch}
  .mk-split .txt{padding-top:0}
  .label{font-size:11.5px;letter-spacing:.2em}
  /* raakvlakken ruim genoeg */
  .tlink{display:inline-block;padding:11px 0;min-height:44px}
  .btn{padding:16px 30px;min-height:52px}
  .info .l a,.info .sm a,.f-bottom .socials a{
    display:inline-block;padding:11px 0;min-height:44px}
  /* Footerlinks onder elkaar; inline-block liet ze aan elkaar plakken. */
  .f-col a{display:block;width:-moz-fit-content;width:fit-content;padding:11px 0;min-height:44px}
  nav .n-links.right a.cta{padding:13px 18px;min-height:46px}
  /* de reikende lijntjes hebben op smal scherm geen ruimte */
  .reik::before{display:none}
  .hoeklijn{display:none}
  .haakje::before,.haakje::after{display:none}
  .scheiding{width:calc(100% - 2 * var(--gutter))}
}

/* --- Beelden mogen groter: 60% van de contentbreedte in de splits --- */
:root{--img-m:calc(var(--C) * .56)}

/* --- Het poppetje groot en vaag in de achtergrond, als watermerk.
   Nooit over een foto, alleen in de crème. Zo licht dat je hem pas ziet
   als je erop let. --- */
/* Eén figuur die met je meeloopt: hij zakt mee naar beneden terwijl je
   scrolt, wiegt licht heen en weer als een wandelpas, en blijft achter
   alle inhoud. Nooit over een foto, want de secties liggen erboven. */
.volger{position:fixed;z-index:0;pointer-events:none;color:var(--bordeaux);
  width:clamp(104px,13vw,196px);opacity:0;filter:blur(.4px);
  transition:opacity 1.8s var(--ease)}
.volger.zichtbaar{opacity:.032}
.volger .solo{width:100%;animation:wieg 6s ease-in-out infinite}
@keyframes wieg{0%,100%{transform:rotate(-1.4deg) translateY(0)}
  50%{transform:rotate(1.4deg) translateY(-4px)}}
/* Op mobiel blijft hij erbij: kleiner dan op desktop, maar duidelijk
   genoeg aanwezig om hem te ontdekken. */
@media(max-width:860px){
  .volger{width:clamp(76px,24vw,130px)}
  .volger.zichtbaar{opacity:.07}
}
@media(prefers-reduced-motion:reduce){.volger .solo{animation:none}}

/* --- De solo-figuur: alleen nog als vaag watermerk (de volger).
   De wandelende optredens zijn geschrapt, dat werd te kinderlijk. --- */
.solo{display:block;aspect-ratio:461/520;
  -webkit-mask:url(logo/goos-solo.png) center/contain no-repeat;
  mask:url(logo/goos-solo.png) center/contain no-repeat;
  background-color:currentColor}

/* --- Strip en infokolommen liggen exact op het raster --- */
.strip,.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
.topic.center .btn-row{justify-content:flex-start}
@media(max-width:820px){.topic.center .btn-row{justify-content:center}}
.strip .beeld{aspect-ratio:4/5}
@media(max-width:820px){.info-grid{grid-template-columns:1fr;gap:var(--air-s)}}
@media(max-width:640px){.strip{grid-template-columns:1fr 1fr}.strip>:last-child{display:none}}
@media(max-width:400px){.strip{grid-template-columns:1fr}}

/* --- Kom langs: label, kop, kolommen en knop op één linkerlijn.
   Geen scheidingsstreepjes tussen de kolommen; die maakten er een tabel van. --- */
.komlangs .wrap{max-width:var(--C);margin-inline:auto}
.komlangs .info-grid{border-top:1px solid var(--lijn-scheid);padding-top:var(--air-s)}
.komlangs .info + .info::before{display:none}
.komlangs .btn-row{justify-content:flex-start}
@media(max-width:820px){
  .komlangs .info-grid{grid-template-columns:1fr;gap:var(--air-s)}
  .komlangs .btn-row{justify-content:flex-start}
}

/* --- Accentlijnen in bordeaux --- */
.label.under::after{width:34px;background:var(--lijn-accent)}
.label.rule::before{width:30px;background:var(--lijn-accent);opacity:1}
.tlink{border-bottom:1px solid rgba(86,9,21,.35)}
.info-grid{border-top:1px solid var(--lijn-scheid);padding-top:var(--air-s)}
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){
  .scheiding{height:.5px}.rasterlijnen{background-size:.5px 100%}
}
@media(prefers-reduced-motion:reduce){.scheiding{transform:scaleX(1);transition:none}}

/* mockup-lint bovenaan, verdwijnt in de echte pagina */

/* --- Subpagina's: paginakop, tekstblokken, personen --- */
.paginakop{padding:calc(var(--air-l) + 44px) var(--gutter) var(--air-s);position:relative}
/* Kaart en galerij tonen geen kop meer; alleen de ruimte onder de nav blijft. */
.paginakop.leeg{padding:calc(var(--air-s) + 44px) var(--gutter) 0}
.paginakop>*{position:relative;z-index:1}
.paginakop .wrap{max-width:var(--C);margin-inline:auto}
.paginakop h1{font-family:var(--display);font-weight:600;line-height:1.04;
  letter-spacing:-.016em;color:var(--ink);font-size:clamp(2.2rem,4.8vw,3.8rem);
  margin:.4em 0 .3em;max-width:17ch;text-wrap:balance}
.paginakop .lead{max-width:52ch}
.blokken{padding:var(--air-s) var(--gutter) var(--air-m);position:relative}
.blokken>*{position:relative;z-index:1}
.blokken .wrap{max-width:var(--C);margin-inline:auto}
.blok{max-width:56ch;padding:var(--air-s) 0 0}
.blok h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.1;letter-spacing:-.012em;color:var(--ink);margin:0 0 .5em}
.blok p{color:var(--ink-soft);line-height:1.62;margin:0}
.blok .tlink{margin-top:22px;display:inline-block}
.blok--uitgelicht{border-top:1px solid var(--lijn-scheid);border-bottom:1px solid var(--lijn-scheid);
  padding:var(--air-s) 0;max-width:none}
.blok--uitgelicht h2{color:var(--bordeaux);font-size:clamp(1.8rem,3.4vw,2.7rem)}
.personen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);padding-top:var(--air-s)}
.persoon{border-top:1px solid var(--lijn-scheid);padding-top:20px}
.persoon h2,.persoon h3{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2vw,1.6rem);
  margin:0 0 2px;color:var(--ink)}
.persoon .rol{font-family:var(--serif);text-transform:uppercase;letter-spacing:.18em;
  font-size:11.5px;color:var(--taupe);display:block;margin-bottom:12px}
.persoon p{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin:0}
@media(max-width:820px){.personen{grid-template-columns:1fr;gap:var(--air-s)}}
.galerijgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
.galerijgrid .foto{aspect-ratio:4/5}
@media(max-width:700px){.galerijgrid{grid-template-columns:1fr 1fr;gap:12px}}

/* --- De hero als moment (PLAN-WOW stap 2) ------------------------------
   Het gevelbord ademt: één trage zoom die tot rust komt, geen video nodig.
   De kopregels komen woord voor woord tot rust in Cormorant; de eindstand
   is de statische stand, dus zonder animatie (reduced motion, oude
   browsers) staat alles er gewoon. --- */
@keyframes hero-adem{from{transform:scale(1.075)}to{transform:scale(1)}}
.hero .bg img{transform-origin:50% 36%;animation:hero-adem 16s var(--ease) both}
/* Het to-keyframe noemt opacity bewust niet: elk element komt zo tot rust
   op zijn eigen statische waarde (de edition op .82, de woorden op 1). */
@keyframes woord{from{opacity:0;transform:translateY(.4em)}to{transform:none}}
.hero .edition{animation:woord 1.1s var(--ease) .25s both}
.hero .wrd{display:inline-block;animation:woord .95s var(--ease) both}
.hero .l1 .wrd:nth-child(1){animation-delay:.65s}
.hero .l1 .wrd:nth-child(2){animation-delay:.82s}
.hero .l1 .wrd:nth-child(3){animation-delay:.99s}
.hero .l2 .wrd:nth-child(1){animation-delay:1.62s}
.hero .l2 .wrd:nth-child(2){animation-delay:1.74s}
.hero .l2 .wrd:nth-child(3){animation-delay:1.86s}
.hero .l2 .wrd:nth-child(4){animation-delay:1.98s}
/* De scrollcue wacht tot de woorden staan; backwards-fill houdt hem
   tijdens het wachten echt onzichtbaar in plaats van statisch in beeld. */
.scrollcue{animation-delay:3.1s;animation-fill-mode:backwards}
@media(prefers-reduced-motion:reduce){
  .hero .bg img,.hero .edition,.hero .wrd{animation:none}}

/* ==========================================================================
   De kaart als pronkstuk
   Het driegangenmenu krijgt een eigen blad: papiertoon, een gedrukte binnenrand
   en de prijs als monument. De barkaart eronder in kolommen met hairlines,
   zoals bij Caron. Alle vormtaal komt uit het bestaande systeem; hier staat
   alleen wat de kaartpagina extra nodig heeft.
   ========================================================================== */
.menusectie{padding:var(--air-s) var(--gutter) 0}
.barsectie{padding:var(--air-m) var(--gutter) 0}
.menusectie .wrap,.barsectie .wrap{max-width:var(--C);margin-inline:auto}

.blad{background:var(--paper);max-width:920px;margin-inline:auto;position:relative;
  padding:clamp(38px,5.5vw,72px) clamp(26px,4.5vw,64px);
  box-shadow:0 1px 2px rgba(42,35,32,.04),0 14px 40px -22px rgba(42,35,32,.28)}
/* De binnenrand is de drukregel van een echte menukaart, geen kader om de inhoud. */
.blad::before{content:"";position:absolute;inset:clamp(9px,1.3vw,15px);
  border:1px solid var(--lijn-scheid);pointer-events:none}
.blad>*{position:relative}

.blad-kop{text-align:center;max-width:44ch;margin-inline:auto}
.blad-kop .prijs{justify-content:center;margin:clamp(6px,1.2vw,14px) 0 0}
.blad-note{color:var(--taupe-2);margin:clamp(10px,1.6vw,18px) 0 0}

.gangen{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.6vw,48px);margin-top:clamp(34px,4.6vw,58px)}
.gang .col-h{font-family:var(--serif);text-transform:uppercase;letter-spacing:.22em;
  font-size:12px;color:var(--taupe);padding-bottom:9px;margin-bottom:8px;
  border-bottom:1px solid var(--lijn-scheid)}
.gang .dish{padding:10px 0}

.bar{max-width:920px;margin-inline:auto}
.bar-h{font-family:var(--display);font-weight:600;color:var(--bordeaux);
  font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;margin:0}
.bar-lead{color:var(--taupe-2);max-width:52ch;margin:14px 0 clamp(26px,3.4vw,40px)}
.bar-lijst{columns:2;column-gap:clamp(32px,4.6vw,68px)}
.bar-lijst .dish{break-inside:avoid;padding:13px 0;border-bottom:1px solid var(--line-soft)}

/* ==========================================================================
   De kaart, gezet zoals de drukker hem zet
   Gedeeld door beide weergaven: de tabs (smal) en het boek (breed).
   Gerecht op een regel, streep, omschrijving cursief erachter, prijs klein,
   alles onderkast, kopjes gecentreerd in gespatieerde kapitalen.
   ========================================================================== */
.k-binnen{max-width:48ch;margin-inline:auto;margin-top:clamp(24px,3.4vw,42px);
  font-variant-numeric:oldstyle-nums}
/* De ondertitel op het blad volgt de drukker: onderkast. */
.blad-kop .kaart-sub{text-transform:lowercase}
.k-sectie+.k-sectie{margin-top:clamp(32px,4.4vw,50px)}
.k-sectiekop{font-family:var(--serif);font-weight:400;text-transform:uppercase;
  letter-spacing:.28em;font-size:12.5px;color:var(--taupe-2);text-align:center;
  margin:0 0 .9em .28em}
.k-kopprijs{text-transform:none;letter-spacing:.05em;font-size:1.05em;margin-left:.9em}
.k-sub{text-align:center;font-style:italic;color:var(--taupe);font-size:.95em;
  margin:-.5em 0 1em;text-transform:lowercase}
.k-gang-kop{font-family:var(--serif);font-weight:400;text-transform:uppercase;
  letter-spacing:.28em;font-size:11.5px;color:var(--taupe-2);text-align:center;
  margin:1.7em 0 .8em .28em}
.k-gang-kop .k-los{text-transform:none;font-style:italic;letter-spacing:.05em;font-size:1.05em;margin-left:.5em}
.k-gang-kop .k-kopprijs{margin-left:.25em}
.k-sup{margin:.05em 0 0;padding-left:1.1em;font-style:italic;color:var(--taupe);font-size:.92em;text-transform:lowercase}
.k-dish{margin-bottom:.6em}
.k-regel{margin:0;padding-left:1.1em;text-indent:-1.1em;text-transform:lowercase}
/* Streep en omschrijving allebei in taupe, precies als op de gedrukte kaart. */
.k-streep{color:var(--taupe);font-style:normal}
.k-desc{font-style:italic;color:var(--taupe)}
.k-kap{text-transform:none}
.k-prijs{font-size:.8em;color:var(--taupe);letter-spacing:.03em;white-space:nowrap}
.k-subkop{font-style:italic;color:var(--taupe);font-size:.95em;margin:1.4em 0 .55em;
  text-transform:lowercase}
.k-sectie>.k-subkop:first-child{margin-top:0}
.k-note{font-style:italic;color:var(--taupe);font-size:.92em;margin:1.3em 0 0;
  text-transform:lowercase}
.k-wijn{font-style:italic;color:var(--bordeaux);font-size:.92em;margin:.12em 0 .55em;
  padding-left:19px;position:relative;text-transform:lowercase}
.k-wijn::before,.k-glasje::before{content:"";position:absolute;left:2px;top:.1em;
  width:9px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22240 110 520 1050%22%3E%3Cg fill=%22none%22 stroke=%22%23560915%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath stroke-width=%2242%22 d=%22M338 132 C330 147 320 178 309 211 C291 265 272 320 262 376 C250 445 248 509 272 557 C298 609 340 636 391 651 C426 662 459 668 480 686 C496 700 501 725 501 756 L501 1000 C501 1027 495 1042 477 1050 C453 1061 409 1062 369 1070 C337 1077 320 1088 320 1101 C320 1123 397 1134 500 1134 C603 1134 680 1123 680 1101 C680 1088 663 1077 631 1070 C591 1062 547 1061 523 1050 C505 1042 499 1027 499 1000 L499 756 C499 725 504 700 520 686 C541 668 574 662 609 651 C660 636 702 609 728 557 C752 509 750 445 738 376 C728 320 709 265 691 211 C680 178 670 147 662 132 C621 128 379 128 338 132 Z%22/%3E%3Cpath stroke-width=%2226%22 d=%22M278 462 C283 519 306 568 349 601 C389 632 441 644 500 644 C559 644 611 632 651 601 C694 568 717 519 722 462%22/%3E%3C/g%3E%3C/svg%3E")}
.k-wijnkop{font-family:var(--serif);font-weight:400;text-align:center;font-style:italic;
  color:var(--bordeaux);font-size:1em;margin:0 0 .9em}
.k-glasje{display:inline-block;position:relative;width:13px;height:18px;
  margin-right:6px;vertical-align:-4px}

/* ==========================================================================
   Het boek: de kaart zoals hij op tafel ligt
   Alleen op brede schermen; op smalle schermen doen de tabs het werk.
   De omslag draait open als een echte kaart, de achterkant door het hele
   vel om te draaien. boek.js stuurt de standen en de hoogte.
   ========================================================================== */
.kaart-boek{display:none}
@media(min-width:761px){
  .kaart-tabs{display:none}
  .kaart-boek{display:flex;justify-content:center;perspective:2200px;
    padding-top:clamp(18px,3vw,42px)}
  .boek{position:relative;width:var(--kb-paneel,clamp(300px,38vw,430px));
    transition:width .95s var(--ease),height .95s var(--ease)}
  .boek.open,.boek.achter{width:calc(var(--kb-paneel,clamp(300px,38vw,430px))*2)}
  .boek .spread{position:absolute;inset:0;transform-style:preserve-3d;
    transition:transform .95s var(--ease)}
  .boek.achter .spread{transform:rotateY(180deg)}
  .boek .pagina{position:absolute;top:0;bottom:0;right:0;width:100%;
    transform-style:preserve-3d;transition:transform .95s var(--ease),width .95s var(--ease)}
  .boek.open .pagina,.boek.achter .pagina{width:50%}
  .boek .omslag{transform-origin:left center;z-index:2}
  .boek.open .omslag,.boek.achter .omslag{transform:rotateY(-180deg)}
  .boek .zijde{position:absolute;inset:0;backface-visibility:hidden;
    -webkit-backface-visibility:hidden;background:var(--paper);overflow:hidden;
    box-shadow:0 1px 2px rgba(42,35,32,.05),0 16px 44px -22px rgba(42,35,32,.32)}
  .boek .zijde::before{content:"";position:absolute;inset:clamp(9px,1.2vw,14px);
    border:1px solid var(--lijn-scheid);pointer-events:none;z-index:1}
  .boek .keerzijde{transform:rotateY(180deg)}
  .boek .vul{position:relative;padding:clamp(30px,4vw,50px) clamp(24px,3.2vw,42px);
    font-variant-numeric:oldstyle-nums}
  .boek .k-sectie{scroll-margin-top:90px}
  .boek.dicht{cursor:pointer}
  .boek.dicht .omslag .zijde{box-shadow:0 2px 3px rgba(42,35,32,.07),
    0 24px 60px -26px rgba(42,35,32,.42)}
  /* de voorkant: alleen het logo, gecentreerd, zoals de gedrukte kaart */
  .b-voorkant .vul{display:flex;flex-direction:column;align-items:center;
    justify-content:center;min-height:calc(var(--kb-paneel,clamp(300px,38vw,430px))*1.35);
    text-align:center}
  .b-logo{width:min(74%,250px);color:var(--bordeaux)}
  .b-hint{margin-top:clamp(34px,5vw,56px);font-size:11.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--taupe)}
  .boek:not(.dicht) .b-hint{visibility:hidden}
  /* de wijnkaart draagt zijn naam onder het logo, zoals gedrukt */
  .b-titel{margin:clamp(22px,3vw,30px) 0 0;font-size:12px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--taupe)}
  .b-titel+.b-hint{margin-top:clamp(22px,3vw,34px)}
  /* er ligt steeds één boek op tafel: de menukaart of de wijnkaart */
  .kaart-boek[hidden]{display:none}
  /* de kaartvoet onderaan de drankenkant, zoals gedrukt: klein, links */
  .b-voet{margin-top:clamp(40px,5.6vw,64px)}
  .b-adres{margin:0;font-size:.85em;color:var(--taupe-2);line-height:1.7}
  .b-zin{font-style:italic;color:var(--bordeaux);margin:7px 0 0;font-size:.92em}
}
@media(prefers-reduced-motion:reduce){
  .boek,.boek .spread,.boek .pagina{transition:none!important}
}

/* Een gerecht aanwijzen zet er een klein streepje voor, in dezelfde taal als
   .label.rule. Alleen op apparaten die echt hoveren, anders blijft het plakken. */
.gang .dish,.bar-lijst .dish{position:relative}
.gang .dish::before,.bar-lijst .dish::before{content:"";position:absolute;
  left:-15px;top:1.35em;width:0;height:1px;background:var(--lijn-accent);
  transition:width .42s var(--ease)}
@media(hover:hover){
  .gang .dish:hover::before,.bar-lijst .dish:hover::before{width:9px}
}

@media(max-width:760px){
  .gangen{grid-template-columns:1fr;gap:28px}
  .bar-lijst{columns:1}
  .gang .dish::before,.bar-lijst .dish::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .gang .dish::before,.bar-lijst .dish::before{transition:none}
}

/* Het streepje van .label.rule staat links; gecentreerd op het blad oogt dat
   scheef, dus daar krijgt hij een tegenhanger rechts. */
.blad-kop .label.rule::after{content:"";width:26px;height:1px;
  background:var(--lijn-accent);opacity:1}

/* ==========================================================================
   De kaartenbalk en de losse kaarten
   Zonder JS is de balk een inhoudsopgave en staan alle kaarten onder elkaar;
   kaarten.js maakt er tabs van. De balk leent het onderstreep-idioom van de nav.
   ========================================================================== */
.kaartsectie{padding:var(--air-s) var(--gutter) 0}
.kaartsectie .wrap{max-width:var(--C);margin-inline:auto}

.kaartbalk{display:flex;gap:clamp(4px,1vw,10px);overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  border-bottom:1px solid var(--lijn-scheid);margin-bottom:clamp(30px,4vw,52px);
  /* geen zichtbare schuifbalk op de balk zelf: het taupe duimpje van de
     site-schuifbalken hing er als een verdwaald streepje naast */
  scrollbar-width:none}
.kaartbalk::-webkit-scrollbar{display:none}
.kaartbalk a{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;
  font-size:12.5px;color:var(--taupe);white-space:nowrap;scroll-snap-align:center;
  padding:13px 16px;min-height:46px;display:inline-flex;align-items:center;position:relative}
.kaartbalk a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;
  background:var(--bordeaux);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.kaartbalk a:hover{color:var(--ink)}
.kaartbalk a:hover::after{transform:scaleX(1)}
.kaartbalk a[aria-selected="true"]{color:var(--bordeaux)}
.kaartbalk a[aria-selected="true"]::after{transform:scaleX(1)}

/* Zonder JS: kaarten gestapeld met lucht ertussen, elk met zichtbare kop. */
.kaartpaneel{padding-bottom:var(--air-m)}
.kaartpaneel[hidden]{display:none}
.kaart-h{margin:0 0 6px}
/* Met tabs toont de balk de naam al; de kop van het paneel zelf is dan dubbel.
   Het blad houdt zijn eigen titel: die hoort bij het gedrukte-kaart-gevoel. */
.kaarten-js .kaartpaneel>.kaart-h{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.kaart-sub{font-family:var(--serif);font-style:italic;color:var(--taupe);margin:0 0 4px}
.kaart-lead{color:var(--taupe-2);max-width:52ch;margin:10px 0 clamp(22px,3vw,34px)}
.kaart-leeg{font-family:var(--serif);font-style:italic;color:var(--taupe);
  border-top:1px solid var(--line-soft);padding-top:18px;max-width:44ch}

/* Groepenkaarten (wijnen, gin & tonics, dranken): kolommen naast elkaar zodra
   het past, met dezelfde hairline-koppen als de gangen. */
.groepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(24px,3.4vw,44px);margin-top:clamp(18px,2.4vw,28px)}
.groep .col-h{font-family:var(--serif);text-transform:uppercase;letter-spacing:.22em;
  font-size:12px;color:var(--taupe);padding-bottom:9px;margin-bottom:8px;
  border-bottom:1px solid var(--lijn-scheid)}
.groep .dish{padding:10px 0;border-bottom:1px solid var(--line-soft)}

/* Twee prijzen naast elkaar; de schuine streep blijft stil op de achtergrond. */
.d-prijs--twee{display:inline-flex;gap:7px;align-items:baseline}
.d-prijs--twee .p-sep{color:var(--taupe);font-weight:400;font-size:.9em}

/* ==========================================================================
   Werken bij: vacatures en sollicitatieformulier
   ========================================================================== */
.vacaturesectie{padding:var(--air-s) var(--gutter) 0}
.formsectie{padding:var(--air-m) var(--gutter) 0}
.vacaturesectie .wrap,.formsectie .wrap{max-width:var(--C);margin-inline:auto}
.vacatures{max-width:820px;margin-top:clamp(20px,2.6vw,30px)}

.vacature{border-top:1px solid var(--lijn-scheid)}
.vacature:last-child{border-bottom:1px solid var(--lijn-scheid)}
.vacature summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  min-height:44px;padding:clamp(16px,2.2vw,24px) 2px}
.vacature summary::-webkit-details-marker{display:none}
.vacature .v-titel{font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.1}
.vacature .v-note{font-family:var(--serif);text-transform:uppercase;letter-spacing:.2em;
  font-size:11.5px;color:var(--taupe)}
.vacature .v-teken{margin-left:auto;position:relative;width:15px;height:15px;flex:none}
.vacature .v-teken::before,.vacature .v-teken::after{content:"";position:absolute;
  background:var(--bordeaux);transition:transform .35s var(--ease)}
.vacature .v-teken::before{left:0;right:0;top:7px;height:1px}
.vacature .v-teken::after{top:0;bottom:0;left:7px;width:1px}
.vacature[open] .v-teken::after{transform:scaleY(0)}
.vacature summary:hover .v-titel{color:var(--bordeaux)}
.vacature .v-body{padding:0 2px clamp(22px,3vw,34px);max-width:62ch}
.vacature .v-body .col-h{font-family:var(--serif);text-transform:uppercase;
  letter-spacing:.22em;font-size:12px;color:var(--taupe);margin:22px 0 6px}
.vacature .v-body .col-h:first-child{margin-top:4px}
.vacature .v-body p{margin:0 0 10px}
.vacature .v-cta{margin-top:18px}

/* Het formulier: velden in de taal van de kaart, hairlines en crème. */
.formkolom{max-width:640px}
.formkolom h2{font-family:var(--display);font-weight:600;color:var(--bordeaux);
  font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;margin:0 0 8px}
.form{margin-top:clamp(22px,3vw,34px)}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:640px){.veldrij{grid-template-columns:1fr}}
.veld{margin-bottom:18px}
.veld label{display:block;font-family:var(--serif);text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;color:var(--taupe);margin-bottom:7px}
.veld input,.veld select,.veld textarea{width:100%;min-height:46px;padding:11px 13px;
  font-family:var(--serif);font-size:16px;color:var(--ink);
  background:var(--cream-2);border:1px solid var(--line);border-radius:1px}
.veld textarea{resize:vertical;min-height:120px}
.veld select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236b5f53' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.veld input[type=file]{padding:9px 10px;background:transparent;border-style:dashed}
.veld input[type=file]::file-selector-button{font-family:var(--serif);font-size:13.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--bordeaux);
  background:transparent;border:1px solid var(--bordeaux);border-radius:1px;
  padding:8px 13px;margin-right:13px;cursor:pointer}
.veld [aria-invalid="true"]{border-color:var(--bordeaux)}
.veldfout{color:var(--bordeaux);font-size:.92rem;margin:5px 0 0;min-height:0}
.veldfout:empty{display:none}
.veldnoot{color:var(--taupe);font-size:.92rem;margin:10px 0 0}
.formstatus,.formfout{margin:14px 0 0}
.formfout{color:var(--bordeaux)}
.formstatus:empty,.formfout:empty{display:none}
/* De onderruimte hoort bij het blok zelf. Zonder padding valt de marge van de
   laatste alinea door de sectie en door main heen naar buiten, en verschijnt
   er tussen main en de footer een streep in de lichtere kleur van de body. */
.formklaar{border-top:1px solid var(--lijn-scheid);padding:18px 0 var(--air-m);max-width:52ch}
.formklaar p:last-child{margin-bottom:0}

@media(prefers-reduced-motion:reduce){
  .kaartbalk a::after,.vacature .v-teken::before,.vacature .v-teken::after{transition:none}
}

/* ==========================================================================
   Woordreveal voor grote koppen: de scroll-variant van het hero-idioom.
   site.js splitst h2.h1 in .wrd-spans; de bestaande .in-trigger start de
   cascade. De delay staat per woord inline.
   De containerbeweging wordt onderdrukt: alleen de woorden cascaderen.
   ========================================================================== */
.w-rv .wrd{display:inline-block;opacity:0;transform:translateY(.32em);
  transition:opacity .7s var(--ease),transform .95s var(--ease)}
.w-rv.in .wrd{opacity:1;transform:none}
/* Onderdruk de containerbeweging zodat alleen de woorden animeren. */
h2.h1.w-rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  .w-rv .wrd{opacity:1;transform:none;transition:none}
}

/* Socials in de footer tekenen hun onderstreep, zelfde taal als .tlink. */
.socials a{position:relative}
.socials a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:var(--bordeaux);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.socials a:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.socials a::after{transition:none}}

/* ==========================================================================
   Papierkorrel: één vaste laag fractal noise over alles, ook de foto's.
   Nauwelijks zichtbaar, maar het scherm voelt minder glad. Statisch element,
   dus scrollen kost dit niets. Onder de nav (9999) en de progress (10000).
   ========================================================================== */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}


/* ==========================================================================
   Alle kaarten op hetzelfde blad (wens eigenaar, 3 aug 2026). De kop is
   gecentreerd; de inhoud krijgt dezelfde lucht als de gangen van het menu.
   ========================================================================== */
.blad-kop .kaart-sub{margin:8px 0 0}
.blad .bar-lijst,.blad .groepen{margin-top:clamp(30px,4.2vw,50px)}
/* Smallere minimumkolom dan de losse .groepen-regel: op het blad passen zo
   drie wijngroepen naast elkaar, zoals Voor/Hoofd/Na. */
.blad .groepen{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:clamp(26px,3.6vw,48px)}
/* Op het blad staat de binnenkort-regel gecentreerd; de linkse hairline van de
   losse variant misstaat daar, dus die gaat uit. */
.blad .kaart-leeg{text-align:center;margin:clamp(26px,3.6vw,44px) auto 0;
  border-top:0;padding-top:0}

/* ==========================================================================
   Entree: een crème sluier met het logo, één keer per sessie op de home.
   Het logo licht op, de sluier tilt op, de hero neemt het over. Totaal .9s.
   ========================================================================== */
.entree{position:fixed;inset:0;z-index:10020;background:#f6f2ea;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:entree-lift .4s var(--ease) .5s forwards}
.entree .goos{width:74px;color:var(--bordeaux);opacity:0;
  animation:entree-logo .45s var(--ease) .05s forwards}
@keyframes entree-logo{to{opacity:1}}
@keyframes entree-lift{to{transform:translateY(-101%);visibility:hidden}}
.geen-entree .entree{display:none}
@media(prefers-reduced-motion:reduce){.entree{display:none}}

/* Cursor-accent: een bordeaux stip op de knoppen. Alleen op fijne pointers;
   touch heeft geen cursor. Smaakgevoelig — makkelijk te schrappen blok. */
@media(pointer:fine){
  .btn,.cta{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='4.5' fill='%23560915'/%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='%23560915' stroke-opacity='.3'/%3E%3C/svg%3E") 9 9, pointer}
}

/* ---------------------------------------------- twee tekstblokken naast elkaar

   .blok is 56ch breed, wat prettig leest maar een lege rechterhelft oplevert
   zodra er twee blokken onder elkaar staan. Naast elkaar vullen ze de breedte
   en scheelt het een halve schermlengte scrollen. Onder 860px weer onder elkaar,
   want twee kolommen van 28ch leest niemand. */
.blok-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);align-items:start}
/* De eigen bovenmarge van .blok is er voor blokken die op elkaar volgen.
   Naast elkaar duwt hij alleen maar de sectie omlaag. */
.blok-duo .blok{max-width:none;padding-top:0}
/* Bij vier blokken in een raster is er wel lucht tussen de rijen nodig. */
.blok-duo{row-gap:var(--air-s)}
/* Staan de blokken onder een gezamenlijke h2, dan dragen ze zelf een h3.
   Zelfde letter als de h2, een maat kleiner, zodat de rangorde klopt. */
.blok h3{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 .45em}
/* Vraag na antwoord, zoals op veelgestelde-vragen: zonder lucht ertussen plakt
   de volgende vraag aan het vorige antwoord en zie je niet wat bij wat hoort. */
.blok p+h3{margin-top:1.5em}
@media(max-width:860px){.blok-duo{grid-template-columns:1fr;gap:0}}

/* ------------------------------------------- pagina's met veel beeldsecties

   .topic is gemaakt voor home, waar tussen de secties een hele sfeerwissel zit
   en de lucht die rust geeft. Staan er vier vergelijkbare beeldblokken achter
   elkaar, zoals op eten-voor-de-gashouder, dan wordt diezelfde lucht een gat:
   de pagina groeit naar zes schermen zonder dat er meer in staat. Hier dus een
   maat minder, en de eerste sectie sluit strak aan op de paginakop. */
.dicht-op-elkaar .topic{padding-top:var(--air-m);padding-bottom:var(--air-s)}
.dicht-op-elkaar .topic:first-of-type{padding-top:var(--air-s)}
.dicht-op-elkaar .blokken{padding-top:var(--air-s);padding-bottom:var(--air-s)}

/* Wanneer een podium speelt, boven de naam. Geen decoratie: dit is precies
   waarvoor iemand op deze pagina is, en het maakt de vier blokken scanbaar
   zonder dat je ze alle vier hoeft te lezen. Zelfde zetsel als .label. */
.blok .wanneer{display:block;font-family:var(--serif);text-transform:uppercase;
  letter-spacing:.2em;font-size:11.5px;color:var(--bordeaux);margin:0 0 10px}

/* --- Paginabeeld: foto direct onder de kop van een subpagina. Eén liggend
   beeld over de contentbreedte, of twee (.twee): liggend plus staand, even
   hoog, zodat het niet twee keer hetzelfde soort beeld naast elkaar is. --- */
.paginabeeld{padding:0 var(--gutter);position:relative}
.paginabeeld>.wrap{max-width:var(--C);margin-inline:auto;display:grid;
  grid-template-columns:1fr;gap:var(--col-gap)}
.paginabeeld .beeld{aspect-ratio:16/9}
.paginabeeld.twee>.wrap{grid-template-columns:1.9fr 1fr}
.paginabeeld.twee .beeld:first-child{aspect-ratio:3/2}
.paginabeeld.twee .beeld:last-child{aspect-ratio:auto}
/* Het staande beeld volgt de hoogte van het liggende in plaats van die op te rekken. */
.paginabeeld.twee .beeld:last-child picture{position:absolute;inset:0}
@media(max-width:700px){
  .paginabeeld .beeld{aspect-ratio:3/2}
  .paginabeeld.twee>.wrap{grid-template-columns:1fr 1fr;gap:12px}
  .paginabeeld.twee .beeld:first-child,.paginabeeld.twee .beeld:last-child{aspect-ratio:4/5}
}
/* Portret boven elke bio op Over ons. */
.persoon .portret{margin-bottom:20px}
@media(max-width:820px){.persoon .portret{max-width:420px}}

/* Een tekstlink midden in een zin. De gewone .tlink is een losse regel in
   kapitaaltjes met ruimte eronder; midden in een alinea duwt dat de regels
   uit elkaar. Deze variant leest als de tekst eromheen. */
.tlink.tl-in,.blok .tlink.tl-in{display:inline;margin:0;min-height:0;font:inherit;text-transform:none;letter-spacing:normal;padding:0;border:0;text-decoration:underline;text-decoration-color:var(--taupe);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
.tlink.tl-in::after{display:none}
.tlink.tl-in:hover{color:var(--bordeaux);text-decoration-color:var(--bordeaux)}