/* Mayfair, Luikstraat 9 op de hoek van de Waalse Kaai.
   Verbeterde versie van het huidige ontwerp: groen marmer en goud blijven, net als
   de fotografie, de merken en de art-deco gevel. Wat verandert is de typografie en
   de opbouw. De koppen stonden in een vet schreefloos in hoofdletters, en dat leest
   als startup in plaats van als cocktailbar in Londense stijl. */

:root{
  --groen-diep:#09160f;
  --groen:#0f2418;
  --groen-op:#16311f;
  --goud:#d4af5f;
  --goud-licht:#e9d4a0;
  --creme:#f4ece0;
  --creme-zacht:rgba(244,236,224,.72);
  --lijn:rgba(212,175,95,.22);
  --lijn-zacht:rgba(244,236,224,.14);
  --maat:clamp(1.02rem,.7rem + .8vw,1.24rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;color:var(--creme);
  background-color:var(--groen-diep);
  font:300 .96rem/1.72 Jost,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Het marmer ligt in EEN vaste laag over het venster, niet als herhalend patroon.
   De textuur is namelijk niet naadloos: gemeten verschil tussen de linker- en
   rechterrand is 17,4 per kanaal en tussen boven en onder 11,0, allebei ruim
   boven wat het oog ziet. Met background-repeat op 760px zag je dus om de 760px
   een streep door de hele site lopen.

   position:fixed in plaats van background-attachment:fixed, want dat laatste
   wordt op iOS Safari genegeerd en geeft daar schokkerig scrollen.

   De sluier van 72% blijft: het marmer heeft aders tot rgb(224,220,208), bijna
   wit. Een gouden letter haalde daarop 1,52:1 en een crème letter 1,17:1, dus
   onleesbaar. Met de sluier is dat 7,44:1 voor goud en 13,21:1 voor crème. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--groen-diep);
  background-image:linear-gradient(rgba(9,22,15,.72),rgba(9,22,15,.72)),
                   url("/wp-content/uploads/2025/02/green-marble2.png");
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:cover,cover;
}
/* height:auto is niet optioneel: zonder die regel winnen de width- en
   height-attributen op de img van elke aspect-ratio in de CSS, en dan staat een
   foto van 1951 px hoog in een vak dat 424 px hoog hoort te zijn. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,.display{
  font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:400;
  font-variant-numeric:lining-nums;line-height:1.02;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,1rem + 6.2vw,6rem)}
h2{font-size:clamp(2rem,1rem + 3.2vw,3.5rem)}
h3{font-size:clamp(1.25rem,1rem + .9vw,1.6rem)}
em{font-style:italic;color:var(--goud)}

.label{
  font-family:Jost,sans-serif;font-weight:400;font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--goud);
}
.omhulsel{width:min(1200px,92vw);margin-inline:auto}
.sectie{padding:clamp(4.5rem,2rem + 7vw,9rem) 0}

/* ── kop ───────────────────────────────────────────────────────────── */
.kop{position:sticky;top:0;z-index:60;background:rgba(9,22,15,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--lijn)}
.kop__rij{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:.9rem 0}
.kop__logo{justify-self:start}
.kop__logo img{height:40px;width:auto}
.kop__nav{justify-self:center;display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.kop__nav a{
  text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--creme-zacht);padding-block:.35rem;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.kop__nav a:hover,.kop__nav a:focus-visible{color:var(--goud);border-bottom-color:var(--goud)}
.kop__cta{justify-self:end}

/* ── knoppen ───────────────────────────────────────────────────────── */
.knop{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;cursor:pointer;
  font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.85rem 1.5rem;border:1px solid var(--goud);color:var(--groen-diep);background:var(--goud);
  border-radius:2px;transition:background .28s,color .28s,box-shadow .28s,transform .28s;
}
.knop:hover{background:var(--goud-licht);border-color:var(--goud-licht);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(212,175,95,.6)}
.knop--rand{background:transparent;color:var(--creme);border-color:var(--lijn-zacht)}
.knop--rand:hover{background:transparent;border-color:var(--goud);color:var(--goud)}
.knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(88svh,820px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero__beeld{position:absolute;inset:0;z-index:-2}
.hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,22,15,.88) 0%,rgba(9,22,15,.62) 40%,rgba(9,22,15,.14) 78%),
             linear-gradient(0deg,rgba(9,22,15,.92),transparent 52%);
}
.hero__inhoud{
  width:min(1200px,92vw);margin-inline:auto;padding:clamp(5rem,10svh,8rem) 0 3.4rem;
  display:grid;gap:2.6rem;grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:end;
}
.hero__lead{max-width:36ch;color:var(--creme-zacht);font-size:var(--maat);margin:1.4rem 0 0}
.hero__kaart{
  background:rgba(9,22,15,.66);backdrop-filter:blur(12px);
  border:1px solid var(--lijn);border-radius:3px;padding:1.6rem;
}
.hero__kaart dl{margin:0;display:grid;gap:1rem}
.hero__kaart dt{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
.hero__kaart dd{margin:.25rem 0 0;font-size:.98rem;line-height:1.5}
.hero__kaart a{text-decoration:none;border-bottom:1px solid var(--lijn)}

/* ── feitenband ────────────────────────────────────────────────────── */
.feiten{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.feiten>div{padding:2.2rem 1.6rem;border-left:1px solid var(--lijn)}
.feiten>div:first-child{border-left:0}
.feiten dt{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud);margin-bottom:.6rem}
.feiten dd{margin:0;font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:1.6rem;line-height:1.2}
.feiten small{display:block;font-family:Jost,sans-serif;font-size:.82rem;color:var(--creme-zacht);margin-top:.5rem;line-height:1.6}

/* ── sectiekop ─────────────────────────────────────────────────────── */
.sectiekop{display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:flex-end;justify-content:space-between;margin-bottom:3.2rem}
.sectiekop p{margin:1rem 0 0;color:var(--creme-zacht);max-width:50ch}

/* ── verhaal ───────────────────────────────────────────────────────── */
.verhaal{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.verhaal p{color:var(--creme-zacht);max-width:48ch}
.verhaal p+p{margin-top:1.1rem}
.verhaal__beeld{position:relative;border:1px solid var(--lijn);border-radius:3px;overflow:hidden}
.verhaal__beeld img{width:100%;aspect-ratio:5/4;object-fit:cover}
.troeven{margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem}
.troeven li{display:flex;gap:.9rem;align-items:baseline;font-size:.95rem}
.troeven li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--goud);transform:translateY(-2px)}

/* ── signature cocktails ────────────────────────────────────────────
   Vijf kaarten met naam, ingrediënten en prijs. Geen foto per cocktail: die
   bestaat niet, en er een sfeerbeeld bij zetten zou de gast misleiden. */
.serves{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.serve{
  /* 1fr auto: de prijsregel staat bij elke kaart onderaan, ook als de ene
     twee regels ingrediënten heeft en de andere één. */
  display:grid;grid-template-rows:auto 1fr auto;gap:.5rem;padding:1.5rem 1.5rem 1.3rem;
  border:1px solid var(--lijn);border-radius:3px;
  background:linear-gradient(180deg,var(--groen),var(--groen-diep));
  transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .4s ease,box-shadow .4s ease;
}
.serve:hover{transform:translateY(-6px);border-color:var(--goud);
  box-shadow:0 24px 54px -22px rgba(212,175,95,.5)}
.serve h3{font-size:1.35rem}
.serve p{margin:0;color:var(--creme-zacht);font-size:.86rem}
.serve__prijs{margin-top:1rem;align-self:end;display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--lijn);padding-top:.85rem;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--creme-zacht)}
.serve__prijs b{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:1.3rem;
  letter-spacing:0;text-transform:none;color:var(--goud)}

/* Drie sfeerbeelden, gelijk formaat, zonder bijschrift. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.trio figure{margin:0;overflow:hidden;border:1px solid var(--lijn);border-radius:3px}
.trio img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.trio figure:hover img{transform:scale(1.05)}

/* ── crème ritmebreker met de kaart ────────────────────────────────── */
.licht{background:var(--creme);color:#17201a}
.licht h2,.licht h3{color:#17201a}
.licht .label{color:#8a6d2b}
.licht .sectiekop p{color:rgba(23,32,26,.68)}
.kaart{display:grid;gap:clamp(2rem,1rem + 3vw,3.4rem);grid-template-columns:repeat(2,minmax(0,1fr))}
.kaart__groep h3{
  padding-bottom:.7rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(23,32,26,.2);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;text-transform:capitalize;
}
.kaart__groep h3 span{font-family:Jost,sans-serif;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#8a6d2b}
.regel{padding:.62rem 0;border-bottom:1px solid rgba(23,32,26,.09)}
.regel:last-child{border-bottom:0}
.regel__rij{display:flex;align-items:baseline;gap:.6rem}
.regel__naam{font-size:.95rem}
.regel__punten{flex:1;border-bottom:1px dotted rgba(23,32,26,.28);transform:translateY(-.28em)}
.regel__prijs{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:1.1rem;color:#8a6d2b;white-space:nowrap}
/* De flesprijs staat rechts van de glasprijs, in een vaste kolombreedte zodat
   alle bedragen onder elkaar uitlijnen. */
.regel__fles{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:1.1rem;color:rgba(23,32,26,.5);
  white-space:nowrap;min-width:4.2rem;text-align:right}
.regel__prijs{min-width:3.4rem;text-align:right}
.regel__sub{margin:.16rem 0 0;font-size:.78rem;color:rgba(23,32,26,.6)}

/* ── volle band met de dakvisual ───────────────────────────────────── */
.band{position:relative;min-height:min(56svh,460px);display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.band__beeld{position:absolute;inset:0;z-index:-2}
.band__beeld img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,22,15,.72)}
.band .omhulsel{max-width:62ch}
.band p{color:var(--creme-zacht);margin:1.2rem auto 0}

/* ── bites ─────────────────────────────────────────────────────────── */
.bites{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.bites__beeld{border:1px solid var(--lijn);border-radius:3px;overflow:hidden}
.bites__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2rem}
.duo h3{font-family:Jost,sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--goud);margin-bottom:.5rem}
.duo p{margin:0;font-size:.88rem;color:var(--creme-zacht)}

/* ── merken ────────────────────────────────────────────────────────── */
.merken{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem 3rem;
  padding:2.6rem 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.merken a{opacity:.62;transition:opacity .3s ease,transform .3s ease}
.merken a:hover{opacity:1;transform:translateY(-2px)}
.merken svg{height:clamp(24px,3vw,34px);width:auto;display:block}

/* ── galerij ───────────────────────────────────────────────────────── */
.galerij{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.galerij figure{margin:0;overflow:hidden;border:1px solid var(--lijn);border-radius:3px}
.galerij img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.galerij figure:hover img{transform:scale(1.05)}
/* Het ritme herhaalt per vijf: een breed beeld, een smaller ernaast, dan drie
   gelijke. Met nth-child(1) tot (5) klopte het raster alleen bij precies vijf
   foto's en liet elke zesde een gat vallen. Dat is dezelfde fout als het
   4-6-6-ritme op Soho, dat voor zes kaarten was gemaakt en er vier kreeg. */
/* aspect-ratio in plaats van min-height: met min-height rekt elke rij zich naar
   het hoogste beeld erin, en dan kreeg een liggende foto van 2000x1059 een vak
   van 392x561 en werd hij hard doormidden gesneden. */
.galerij figure:nth-child(5n+1){grid-column:span 7;aspect-ratio:7/5}
.galerij figure:nth-child(5n+2){grid-column:span 5;aspect-ratio:69/70}
.galerij figure:nth-child(5n+3),
.galerij figure:nth-child(5n+4),
.galerij figure:nth-child(5n+5){grid-column:span 4;aspect-ratio:4/3}
/* De verrijkingslaag maakt van elk figuur een kaart met binnenmarge. In een
   galerij hoort het beeld tot de rand te lopen, dus die marge gaat er hier af. */
.galerij figure.ch-kaart{padding:0;border-radius:3px}
@media (max-width:760px){
  .galerij figure:nth-child(5n+1),.galerij figure:nth-child(5n+2){grid-column:span 12;min-height:240px}
  .galerij figure:nth-child(5n+3),.galerij figure:nth-child(5n+4),
  .galerij figure:nth-child(5n+5){grid-column:span 6;min-height:170px}
}

/* ── contact ───────────────────────────────────────────────────────── */
.contact{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) minmax(0,.8fr);align-items:start}
.veld{display:block;margin-bottom:1.5rem}
.veld span{display:block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud);margin-bottom:.5rem}
.veld input,.veld textarea{
  width:100%;border:0;border-bottom:1px solid var(--lijn-zacht);background:transparent;
  padding:.55rem 0;font:300 .95rem/1.6 Jost,sans-serif;color:var(--creme);
}
.veld input:focus,.veld textarea:focus{outline:0;border-bottom-color:var(--goud)}
.veld textarea{resize:vertical;min-height:5rem}
.gegevens{margin:0;display:grid;gap:1.4rem}
.gegevens dt{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
.gegevens dd{margin:.3rem 0 0}
.gegevens a{text-decoration:none;border-bottom:1px solid var(--lijn)}
.gegevens a:hover{color:var(--goud)}
.ch-melding{font-size:.9rem}

/* ── voet, met de gevel als sluitstuk ──────────────────────────────── */
.voet{border-top:1px solid var(--lijn);padding-top:clamp(3.4rem,2rem + 4vw,5rem)}
.voet__rooster{display:grid;gap:2.4rem;grid-template-columns:1.1fr .8fr .8fr auto;align-items:start;padding-bottom:2.6rem}
.voet img.merk{height:38px;width:auto;margin-bottom:1rem}
.voet img.gevel{width:118px;opacity:.5;justify-self:end}
.voet h4{font-family:Jost,sans-serif;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud);margin:0 0 .9rem;font-weight:400}
.voet ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.9rem}
.voet a{color:var(--creme-zacht);text-decoration:none}
.voet a:hover{color:var(--goud)}
.voet__onder{border-top:1px solid var(--lijn);padding:1.1rem 0;font-size:.74rem;color:var(--creme-zacht);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between}

@media (max-width:980px){
  .hero__inhoud{grid-template-columns:1fr;padding-top:clamp(3.4rem,8svh,6rem)}
  .hero__kaart{max-width:26rem}
  .feiten,.kaart,.verhaal,.bites,.contact,.duo,.trio{grid-template-columns:1fr}
  .feiten>div{border-left:0;border-top:1px solid var(--lijn)}
  .feiten>div:first-child{border-top:0}
  .kop__nav{display:none}
  .kop__rij{grid-template-columns:1fr auto}
  .galerij{grid-template-columns:1fr}
  .galerij figure{grid-column:auto!important;min-height:240px!important}
  .voet__rooster{grid-template-columns:1fr}
  .voet img.gevel{justify-self:start}
  .merken{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}