/* ============================================================
   DE KAART  —  proefversie, staat los van bold.css
   Een menukaart als eigen voorwerp: een kastanje vlak met een
   gegraveerde haarlijn eromheen. Elke gang opent met een foto en
   de naam van de gang eroverheen, zoals op het moodboard.
   Alles staat links uitgelijnd, ook de kop. Half gecentreerd en
   half links leest als een fout, en de lijstjes moeten sowieso
   links staan, dus dan lijnt de rest zich daarnaar.
   De letters zijn dezelfde als op de rest van de site.
   ============================================================ */

.mk-sec{padding-top:clamp(30px,4vw,60px)}

/* De kaart stond eerst als kastanje vlak. Dat maakte er een blok van
   dat de hele pagina overnam. Nu blijft de achtergrond gewoon wit en is
   alleen de omlijning over: een dubbele haarlijn, zoals bij een gedrukte
   kaart. Het beeld en de letters doen de rest. */
.mk{
  background:transparent;color:var(--zwart);
  border:1px solid rgba(107,58,58,.32);
  padding:clamp(10px,1.1vw,16px);
  margin-top:clamp(30px,4vw,58px);
}
.mk-rand{
  border:1px solid rgba(107,58,58,.32);
  padding:clamp(34px,5.4vw,88px) clamp(24px,4.2vw,70px) clamp(34px,5vw,78px);
}

/* ---------- kop van de kaart ---------- */
.mk-kop{margin-bottom:clamp(40px,5.6vw,84px)}
.mk-merk{
  font-family:var(--label);font-size:10px;letter-spacing:.44em;
  text-transform:uppercase;color:var(--accent);
}
.mk-lijn{
  display:block;width:clamp(40px,5vw,72px);height:1px;
  background:var(--accent);margin:clamp(15px,1.9vw,22px) 0;
}
/* De kop stond in de vette schreefloze van de site. Dat is grafisch en
   niet duur. Newsreader staat al op elke pagina, alleen tot nu toe
   alleen cursief; rechtop en op dit formaat leest hij als een gedrukte
   kaart. Dus geen nieuwe letter, wel een andere toonhoogte. */
.mk-titel{
  font-family:var(--sier);font-weight:400;font-variation-settings:normal;
  font-size:clamp(46px,6.8vw,98px);line-height:.96;letter-spacing:-.012em;
  text-transform:none;color:var(--kastanje);margin:0;
}
.mk-onder{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;
  font-size:clamp(17px,1.7vw,24px);color:var(--accent);
  letter-spacing:-.02em;margin-top:clamp(6px,.8vw,10px);
}

/* ---------- een gang: foto links, inhoud rechts ---------- */
.kgang{
  display:grid;grid-template-columns:.44fr .56fr;
  gap:clamp(24px,3.8vw,64px);align-items:start;
}
@media(max-width:820px){.kgang{grid-template-columns:1fr;gap:20px}}

/* De foto houdt zijn eigen staande verhouding; de naam van de gang
   staat eroverheen, onderin, met een sluier eronder zodat de letters
   ook op een lichte plek in het beeld leesbaar blijven. */
.kgang-beeld{position:relative;margin:0;overflow:hidden;background:var(--zwart)}
.kgang-beeld img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.kgang-beeld::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 26%, rgba(0,0,0,.20) 47%,
    rgba(0,0,0,.56) 72%, rgba(0,0,0,.84) 100%);
}
.kgang-beeld figcaption{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(16px,2vw,26px) clamp(16px,2vw,26px) clamp(14px,1.8vw,22px);
}
.kgang-nr{
  display:block;font-family:var(--label);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--accent-licht);margin-bottom:10px;
}
.kgang-naam{
  display:block;font-family:var(--sier);font-weight:400;
  font-variation-settings:normal;
  font-size:clamp(25px,2.7vw,38px);line-height:1.04;letter-spacing:.15em;
  text-transform:uppercase;color:var(--wit);
}
.kgang-voor{
  display:block;font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(15px,1.4vw,19px);color:var(--accent-licht);margin-top:4px;
}

.kgang-in{padding-top:clamp(0px,.6vw,8px)}
.kgang-tekst{
  max-width:48ch;color:var(--grijs);
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.68;margin:0;
}
.kgang-lijst{
  list-style:none;margin:clamp(18px,2.2vw,28px) 0 clamp(22px,2.8vw,32px);
  max-width:44ch;display:grid;gap:9px;
}
.kgang-lijst li{
  position:relative;padding-left:20px;
  color:var(--grijs);
  font-size:clamp(14.5px,1vw,16px);line-height:1.5;
}
.kgang-lijst li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--accent);
}

.kknop{
  display:inline-block;border:1px solid var(--kastanje);
  padding:15px 30px;color:var(--kastanje);
  font-family:var(--label);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.kknop:hover{background:var(--kastanje);color:var(--creme);border-color:var(--kastanje)}

/* de scheiding tussen twee gangen: een haarlijn met de schuine strepen
   uit het merk erin, links waar alles begint */
.mk-orn{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);
  margin:clamp(44px,5.8vw,86px) 0;
  font-family:var(--label);font-size:11px;letter-spacing:.44em;
  color:var(--accent);
}
.mk-orn::after{content:"";flex:1;height:1px;background:rgba(107,58,58,.26)}

/* ---------- voet van de kaart ---------- */
.mk-voet{margin-top:clamp(44px,5.8vw,86px)}
.mk-slot{
  max-width:52ch;margin:0;color:var(--grijs);
  font-size:clamp(14.5px,1vw,16px);line-height:1.62;
}
/* de handgeschreven notitie, alsof iemand hem op de kaart heeft gezet */
.mk-hand{
  font-family:var(--hand);color:var(--accent);
  font-size:clamp(24px,2.6vw,38px);line-height:1;
  margin-top:clamp(14px,1.8vw,22px);
  rotate:-2deg;transform-origin:left center;display:inline-block;
}

@media(max-width:640px){
  .mk{padding:9px}
  .mk-rand{padding:clamp(24px,6vw,38px) clamp(16px,4.4vw,26px)}
}

/* ============================================================
   WE SERVE
   Het grapje uit de horeca, als eigen band tussen twee witte
   stukken. Drie regels: klein, groot, klein. Dat is de opbouw
   van het moodboard en hij werkt hier omdat de grap in het
   grote woord zit en niet in de zin eromheen.
   ============================================================ */
.serveer{
  background:var(--kastanje);color:var(--creme);
  padding:clamp(54px,8vw,120px) 0;
  margin:clamp(46px,6.4vw,100px) 0 0;
  text-align:center;
}
.serveer-boven{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,29px);color:var(--accent-licht);
}
.serveer-groot{
  font-family:var(--display);font-variation-settings:"wght" 900;
  font-size:clamp(52px,10vw,150px);line-height:.9;letter-spacing:-.05em;
  text-transform:lowercase;color:var(--creme);margin:.04em 0 0;
}
.serveer-onder{
  font-family:var(--label);font-size:10.5px;letter-spacing:.36em;
  text-transform:uppercase;color:var(--accent-licht);
  margin-top:clamp(18px,2.4vw,30px);
}

/* ============================================================
   A LA CARTE
   Losse gerechten onder elkaar, met een haarlijn ertussen zoals
   in een kaart. Geen prijzen, wel per regel in een zin wat het is.
   ============================================================ */
.alacarte{
  list-style:none;margin:clamp(30px,4.4vw,64px) 0 0;
  border-top:1px solid var(--rule);
}
.ac-regel{
  display:grid;grid-template-columns:.34fr .66fr;
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding:clamp(20px,2.6vw,32px) 0;
  border-bottom:1px solid var(--rule);
}
@media(max-width:760px){.ac-regel{grid-template-columns:1fr;gap:8px}}
.ac-naam{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(21px,2.2vw,30px);line-height:1.1;letter-spacing:-.028em;
  color:var(--kastanje);display:block;
}
/* Doorklikken naar een eigen pagina stond als streepje achter de naam.
   Dat las niet als iets waar je op kunt klikken. Nu een echte knop
   onder de omschrijving, in dezelfde vorm als de knoppen op de kaart. */
.ac-knop{
  display:inline-block;margin-top:clamp(14px,1.8vw,20px);
  border:1px solid var(--kastanje);padding:12px 24px;
  color:var(--kastanje);text-decoration:none;
  font-family:var(--label);font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.ac-knop:hover{background:var(--kastanje);color:var(--creme)}
.ac-tekst{color:var(--grijs);max-width:52ch;font-size:clamp(15px,1.05vw,16.5px);line-height:1.62}

.ac-slot{margin-top:clamp(28px,3.6vw,46px)}
.ac-vraag{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(22px,2.4vw,33px);line-height:1.2;
  color:var(--kastanje);margin-bottom:12px;
}

/* De regel onder de ondertitel: de lijstjes per gang laten zien wat er
   kan, niet wat je allemaal krijgt. Zonder die zin leest een lijst als
   een vaste inhoud, en dat is het niet. */
.mk-let{
  max-width:44ch;margin-top:clamp(14px,1.8vw,20px);
  color:var(--grijs);font-size:clamp(14px,.98vw,15.5px);line-height:1.6;
}

/* ============================================================
   ZO WERKT HET
   Wat iemand van tevoren wil weten: hoe voelt het om met haar
   te werken. Vier stappen op een kastanje vlak met witte tekst,
   zodat het blok anders staat dan de kaart erboven.
   ============================================================ */
.werkwijze{
  background:var(--kastanje);color:var(--creme);
  padding:clamp(48px,6.4vw,104px) 0;
  margin-top:clamp(46px,6.4vw,100px);
}
.stappen{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.8vw,44px);margin-top:clamp(30px,4vw,56px);
}
@media(max-width:900px){.stappen{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:560px){.stappen{grid-template-columns:1fr}}
.stap{border-top:1px solid rgba(216,185,176,.4);padding-top:clamp(16px,2vw,24px)}
.stap-nr{
  display:block;font-family:var(--label);font-size:10px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--accent-licht);margin-bottom:clamp(10px,1.3vw,16px);
}
.stap h3{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(18px,1.7vw,23px);line-height:1.14;letter-spacing:-.026em;
  color:var(--creme);margin-bottom:9px;
}
.stap p{color:rgba(222,218,208,.86);font-size:clamp(14.5px,1vw,16px);line-height:1.6}
.werkwijze .h-sec{color:var(--creme)}
.werkwijze .h-sec .ital{color:var(--accent-licht)}
.werkwijze .tag-k{color:var(--accent-licht)}
.werkwijze .body{color:rgba(222,218,208,.86)}