/* 't Braboke. Bistro op de Grote Markt in Antwerpen.
   Identiteit uit het logo: zwart met bordeaux. De kleur komt verder uit de
   fotografie, de interface blijft crème. Display in Cormorant Garamond 300,
   want een bold grotesque in caps leest als startup en niet als brasserie. */

:root{
  --papier:#f6f1e8;
  --papier-diep:#efe7d9;
  --inkt:#15100e;
  --inkt-zacht:#4a403a;
  --bordeaux:#7a0e0e;
  --messing:#a8894e;
  --lijn:#e0d5c2;
  --lijn-diep:#cdbfa6;
  --maat:clamp(1.15rem,.6rem + 1.4vw,1.6rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font:300 .95rem/1.75 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* height:auto: anders winnen de width- en height-attributen op de img van
   elke aspect-ratio in de CSS. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Cormorant zet standaard oudstijlcijfers: dan leest €14.90 scheef. */
.display,h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-variant-numeric:lining-nums;letter-spacing:.004em;
  line-height:1.06;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,1.1rem + 6.4vw,6.2rem)}
h2{font-size:clamp(2.1rem,1rem + 3.4vw,3.6rem)}
h3{font-size:clamp(1.35rem,1rem + 1.1vw,1.7rem)}
em{font-style:italic;color:var(--bordeaux)}

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

/* ── kop ───────────────────────────────────────────────────────────── */
.kop{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,232,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lijn);
}
.kop__rij{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
.kop__logo img{height:72px;width:auto}
.kop__nav{display:flex;gap:1.9rem;align-items:center}
.kop__nav a{
  text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-zacht);padding-block:.3rem;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.kop__nav a:hover,.kop__nav a:focus-visible{color:var(--bordeaux);border-bottom-color:var(--bordeaux)}
.kop__tel{font-size:.8rem;letter-spacing:.06em;white-space:nowrap;text-decoration:none}
.kop__tel b{font-weight:500}

/* loopbalk: drie feiten die anders in een doos zouden belanden */
.balk{
  background:var(--inkt);color:var(--papier);font-size:.7rem;
  border-top:1px solid rgba(240,225,200,.1);
  letter-spacing:.16em;text-transform:uppercase;
}
.balk__rij{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;padding:.62rem 0;justify-content:center}
.balk__rij span{display:inline-flex;align-items:center;gap:.55rem;color:#d9cfbe}
.balk__rij span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--messing)}

/* ── hero: het beeld is het scherm ─────────────────────────────────── */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;isolation:isolate}
.hero__beeld{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Twee schermen: verticaal voor de leesbaarheid onderaan, horizontaal omdat de
   kop links staat en het stadhuis daar fel in de zon ligt. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg,rgba(10,7,6,.78) 0%,rgba(10,7,6,.55) 38%,rgba(10,7,6,.12) 72%),
    linear-gradient(180deg,rgba(10,7,6,.42) 0%,rgba(10,7,6,.1) 30%,rgba(10,7,6,.66) 100%);
}
.hero__inhoud{
  width:min(1200px,92vw);margin-inline:auto;color:#fbf7f0;
  padding:5.5rem 0 3.2rem;display:grid;gap:2.6rem;
  grid-template-columns:minmax(0,1fr) minmax(0,310px);align-items:end;
}
.hero__inhoud .label{color:#e3c98f}
.hero h1{color:#fff;margin-block:.5rem .9rem}
.hero h1 em{color:#f0c98a}
.hero__lead{max-width:34ch;color:#efe6da;font-size:var(--maat);line-height:1.55;font-weight:300}
.hero__kaart{
  background:rgba(21,16,14,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(240,225,200,.22);padding:1.5rem 1.6rem;
}
.hero__kaart dl{margin:0;display:grid;gap:.85rem}
.hero__kaart dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#e3c98f}
.hero__kaart dd{margin:.15rem 0 0;font-size:.98rem;color:#f6efe4;line-height:1.5}

/* ── knoppen: ghost vaker dan gevuld, met een lange pijl ───────────── */
.knoppen{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.knop{
  --kleur:var(--inkt);
  display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.95rem 1.5rem;border:1px solid var(--kleur);color:var(--kleur);
  background:transparent;transition:background .25s,color .25s;cursor:pointer;
}
.knop::after{
  content:"";width:1.9rem;height:1px;background:currentColor;
  transition:width .25s;flex:none;
}
.knop:hover::after,.knop:focus-visible::after{width:2.9rem}
.knop--vol{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff7ee}
.knop--vol:hover{background:#8f1414;border-color:#8f1414}
.knop--licht{--kleur:#f3ebe0}
.knop--licht:hover{background:#f3ebe0;color:var(--inkt)}

/* ── feitenband met haarlijnen, geen dozen ─────────────────────────── */
.feiten{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lijn)}
.feiten>div{padding:2.2rem 1.6rem;border-bottom:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.feiten>div:first-child{border-left:0}
.feiten dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--messing);margin-bottom:.55rem}
.feiten dd{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55rem;line-height:1.2;font-variant-numeric:lining-nums}
.feiten small{display:block;font-family:Inter,sans-serif;font-size:.82rem;color:var(--inkt-zacht);margin-top:.4rem;line-height:1.6}

/* ── verhaal ───────────────────────────────────────────────────────── */
.verhaal{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.verhaal__tekst p{color:var(--inkt-zacht);max-width:46ch}
.verhaal__tekst p+p{margin-top:1.1rem}
.verhaal__beeld{position:relative}
.verhaal__beeld img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* één blok dat over de onderrand van het beeld valt */
.verhaal__blok{
  position:absolute;right:-1.4rem;bottom:-1.6rem;max-width:16rem;
  background:var(--inkt);color:var(--papier);padding:1.35rem 1.5rem;
  box-shadow:0 24px 60px rgba(21,16,14,.24);
}
.verhaal__blok .label{color:#e3c98f}
.verhaal__blok p{margin:.5rem 0 0;font-size:.88rem;line-height:1.65;color:#ddd2c2}

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

/* ── menukaart: een echte kaart, met puntjes tot aan de prijs ──────── */
.kaart{display:grid;gap:clamp(2.4rem,1rem + 3vw,4rem);grid-template-columns:repeat(2,minmax(0,1fr))}
.kaart__groep h3{
  padding-bottom:.7rem;margin-bottom:1.4rem;border-bottom:1px solid var(--lijn-diep);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.kaart__groep h3 span{font-family:Inter,sans-serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--messing);font-weight:500}
.gerecht{padding:.72rem 0;border-bottom:1px solid var(--lijn)}
.gerecht:last-child{border-bottom:0}
.gerecht__rij{display:flex;align-items:baseline;gap:.6rem}
.gerecht__naam{font-size:.98rem;font-weight:400;color:var(--inkt)}
.gerecht__punten{flex:1;border-bottom:1px dotted var(--lijn-diep);transform:translateY(-.28em)}
.gerecht__prijs{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.18rem;
  font-variant-numeric:lining-nums;color:var(--bordeaux);white-space:nowrap;
}
.gerecht__en{margin:.2rem 0 0;font-size:.8rem;color:var(--inkt-zacht);font-style:italic}

/* ── donkere ritmebreker: de bieren ────────────────────────────────── */
.donker{background:var(--inkt);color:var(--papier)}
.donker h2{color:#fbf7f0}
.donker .label{color:#e3c98f}
.donker p{color:#c9bdad}
/* Bordeaux op bijna-zwart haalt geen enkel contrast. Op donker wordt het accent messing. */
.donker em{color:#e3c98f}
.bier{display:grid;gap:clamp(2rem,1rem + 3vw,4rem);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.bier__beeld img{width:100%;aspect-ratio:5/4;object-fit:cover}
.bier__lijst{margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:0}
.bier__lijst li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid rgba(240,225,200,.16);font-size:.92rem;color:#ded3c3;
}
.bier__lijst li span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--messing)}

/* ── sfeerband ─────────────────────────────────────────────────────── */
/* Twee brede scènes in plaats van drie smalle uitsnedes: bij drie kolommen
   werd elke tegel een portret en sneed hij door het gezicht van een gast. */
.sfeer{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn)}
.sfeer img{width:100%;height:clamp(260px,27vw,420px);object-fit:cover;object-position:center 45%}
.sfeer img.sfeer--avond{object-position:center 40%}
.sfeer img.sfeer--bar{object-position:center 55%}

/* ── contact in drie kolommen, alleen onderstreepte velden ─────────── */
.contact{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.8fr);align-items:start}
.veld{display:block;margin-bottom:1.6rem}
.veld span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--messing);margin-bottom:.5rem}
.veld input,.veld textarea,.veld select{
  width:100%;border:0;border-bottom:1px solid var(--lijn-diep);
  background:transparent;padding:.55rem 0;font:300 .95rem/1.6 Inter,sans-serif;color:var(--inkt);
}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:0;border-bottom-color:var(--bordeaux)}
.veld textarea{resize:vertical;min-height:5.5rem}
.gegevens{margin:0;display:grid;gap:1.5rem}
.gegevens dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--messing)}
.gegevens dd{margin:.3rem 0 0}
.gegevens a{text-decoration:none;border-bottom:1px solid var(--lijn-diep)}
.gegevens a:hover{border-bottom-color:var(--bordeaux);color:var(--bordeaux)}
.ch-melding{font-size:.9rem}

/* ── voet: smalle donkere balk onderaan ────────────────────────────── */
.voet{background:var(--inkt);color:#c9bdad;padding-top:clamp(3.5rem,2rem + 4vw,5.5rem)}
.voet__rooster{display:grid;gap:2.5rem;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:3rem}
.voet__rooster img{height:52px;width:auto;margin-bottom:1.1rem}
.voet h4{font-family:Inter,sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#e3c98f;margin:0 0 .9rem;font-weight:500}
.voet a{color:#ded3c3;text-decoration:none}
.voet a:hover{color:#fff}
.voet ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem;font-size:.9rem}
.voet__onder{border-top:1px solid rgba(240,225,200,.14);padding:1.1rem 0;font-size:.76rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between}

@media (max-width:960px){
  .hero__inhoud{grid-template-columns:1fr;padding-top:4rem}
  .balk__rij{justify-content:center}
  .hero__kaart{max-width:26rem}
  .feiten,.sfeer,.voet__rooster{grid-template-columns:1fr}
  .feiten>div{border-left:0}
  .verhaal,.bier,.kaart,.contact{grid-template-columns:1fr}
  .verhaal__blok{position:static;max-width:none;margin-top:1rem;box-shadow:none}
  .kop__nav{display:none}
  .sfeer img{height:240px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}