@charset "utf-8";
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/JosefinSans.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Miniver";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Miniver-400.woff2) format("woff2")}

:root{--paper:#f3ece1;--ink:#1a1410;--bg:#0e0b09;--bg2:#16110d;--gold:#c9ab81;--gold-dark:#9c7c57;--cream:#ece3d3;--text:#e9e4dc;--muted:#b3aa9e;--line:rgba(201,171,129,.3);--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:300 17px/1.75 "Josefin Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:#fff}

/* header */
.site-header{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:30px;padding:20px 3.4vw;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))}
.site-header.solid{position:relative;background:var(--bg);border-bottom:1px solid var(--line)}
.logo{flex:none}
.logo img{height:clamp(96px,11vw,150px);width:auto}
.nav{display:flex;gap:clamp(22px,3.2vw,52px);margin:0 auto}
.nav a{color:var(--cream);font-size:13px;letter-spacing:.28em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--gold)}
.nav a[aria-current]{color:#fff;border-bottom-color:var(--cream)}
.head-cta{flex:none;display:inline-flex;align-items:center;gap:16px;padding:14px 28px;border-color:var(--cream);color:var(--cream)}
.ico{flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:28px;height:1px;background:#fff;margin:7px 0}

/* hero */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;display:grid;place-items:center;text-align:center}
.hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.4) 45%,rgba(0,0,0,.45) 80%,var(--bg))}
.hero-content{position:relative;z-index:2;padding:100px 6vw 0;max-width:980px}
.hero .kicker{font-size:clamp(17px,2vw,22px);color:var(--gold);margin:0 0 .3em}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(42px,8vw,108px);line-height:1;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .35em;color:#fff}
.hero p{max-width:620px;margin:0 auto 2em;font-size:clamp(16px,1.6vw,19px)}
.page-hero{height:48vh;min-height:380px;max-height:560px}
.page-hero h1{font-size:clamp(40px,6vw,76px)}

/* buttons */
button.btn{font-family:inherit;line-height:inherit;cursor:pointer;background:transparent}
.btn{display:inline-block;padding:14px 34px;border:1px solid var(--gold);color:#fff;font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:.25s}
.btn:hover{background:var(--gold);color:var(--bg)}
.btn.solid{background:var(--gold);color:var(--bg);font-weight:600}
.btn.solid:hover{background:transparent;color:#fff}
.btn.light{background:var(--cream);border-color:var(--cream);color:#1a1410;font-weight:600}
.btn.light:hover{background:transparent;color:var(--cream)}

/* sections */
section{padding:110px 6vw}
.hero+section{padding-top:60px}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:50px}
.center{text-align:center}
.script{font-family:"Miniver",cursive;color:var(--gold);font-size:22px;margin:0}
h2{font-family:var(--serif);font-weight:500;color:var(--gold);font-size:clamp(34px,4.8vw,58px);letter-spacing:.1em;text-transform:uppercase;line-height:1.2;margin:.2em 0 .6em}
.lead{max-width:760px;margin:0 auto;color:var(--muted)}
.lead p{margin:0 0 1.1em}
.banner{height:46vh;min-height:280px;background:center/cover no-repeat}

/* menu */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 70px;max-width:1100px;margin:50px auto 0;text-align:left}
.dish{padding:14px 0}
.dish-head{display:flex;align-items:center;gap:14px}
.dish h3{margin:0;font-weight:400;font-size:15px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);max-width:75%}
.dish-head::after{content:"";flex:1;order:1;border-top:3px double var(--line);min-width:20px}
.dish .price{order:2;color:var(--gold);font-size:16px;white-space:nowrap}
.dish p{margin:4px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
.cat{max-width:1100px;margin:0 auto 90px;scroll-margin-top:80px}
.cat:last-child{margin-bottom:0}
.menu-intro{padding-bottom:60px}
.cat-head{text-align:center}
.cat-note{max-width:760px;margin:0 auto;color:var(--muted);font-size:15px;text-align:center}
.cat-note p{margin:0 0 .4em}
.cat-nav{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:8px 28px;padding:16px 4vw;background:rgba(14,11,9,.97);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:#fff;white-space:nowrap;flex:none}
.cat-nav a:hover{color:var(--gold)}

/* contact / footer */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;max-width:1100px;margin:50px auto 0;text-align:center}
.contact-grid h3{font-weight:400;color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:16px;margin:0 0 .8em}
.contact-grid p{margin:0;color:var(--muted)}
.map{width:100%;height:380px;border:0;filter:grayscale(1) invert(.9) contrast(.9);margin-top:70px}
footer{border-top:1px solid var(--line);padding:60px 6vw 40px;text-align:center;color:var(--muted);font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:0 0 24px}
.foot-nav a{font-size:12px;letter-spacing:.25em;text-transform:uppercase}
footer img{height:120px;width:auto;margin:0 auto 22px}
footer p{margin:.2em 0}
footer .small{margin-top:28px;font-size:13px;opacity:.7}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:34px;transform:translateX(100%);transition:transform .3s}
  .nav.open{transform:none}
  .nav a{font-size:16px}
  .nav-toggle{position:relative;z-index:20}
  .logo img{height:72px}
  .head-cta{display:none}
  .site-header{justify-content:space-between;padding:14px 5vw}
  section{padding:80px 6vw}
  .hero+section{padding-top:40px}
  h2{font-size:clamp(26px,7.5vw,40px);letter-spacing:.12em}
  .hero h1{letter-spacing:.08em}
  .hero-content{padding-top:70px}
  .cat-nav{justify-content:flex-start;padding:14px 6vw}
  .actions .btn{width:100%;max-width:320px;text-align:center}
  footer{padding-bottom:110px}
  .menu-grid,.contact-grid{grid-template-columns:1fr;gap:0 0}
  .contact-grid{gap:40px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* faq */
.hero h1 .kicker{display:block;font-family:"Miniver",cursive;text-transform:none;letter-spacing:0;line-height:1.3;font-weight:400}
.faq-list{max-width:820px;margin:40px auto 0;text-align:left}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;color:#fff;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:10px 0 0;color:var(--muted)}
a[href^="tel:"]{white-space:nowrap}
#reserveren{padding-bottom:40px}
#reserveren+.faq{padding-top:60px}
.sister{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1200px;margin:34px auto 0}
.gallery a{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.gallery a:hover img{transform:scale(1.04);opacity:.9}
.teaser .gallery a{aspect-ratio:1}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr);gap:8px}}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(5,10,12,.94)}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox button{position:absolute;background:none;border:0;color:var(--gold);font-size:46px;line-height:1;cursor:pointer;padding:10px 16px}
.lb-close{top:10px;right:14px}.lb-prev{left:6px;top:50%;transform:translateY(-50%)}.lb-next{right:6px;top:50%;transform:translateY(-50%)}

/* homepage hero */
.home-hero{height:100vh;min-height:680px;max-height:1100px;display:block;text-align:left;background:var(--bg)}
.home-hero picture{left:auto;right:0;top:50%;bottom:auto;width:min(76vw,1560px);height:auto;transform:translateY(-44%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(transparent,#000 14%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(transparent,#000 14%,#000 78%,transparent);mask-composite:intersect}
.home-hero img.bg{position:static;height:auto}
.home-hero::after{background:linear-gradient(90deg,rgba(14,11,9,.6) 30%,rgba(14,11,9,0) 55%)}
.home-hero .hero-content{position:absolute;left:4.7vw;top:27%;padding:0;max-width:640px;text-align:left}
.eyebrow{margin:0 0 26px;color:var(--muted);font-size:12px;letter-spacing:.38em;text-transform:uppercase;white-space:nowrap}
.eyebrow span{margin:0 1.6em;font-size:11px;letter-spacing:0}
.home-hero h1{font-size:clamp(56px,8vw,124px);line-height:.92;letter-spacing:.015em;color:var(--cream);margin:0 0 .3em}
.home-hero .hero-content p:not(.eyebrow){margin:0 0 50px;max-width:430px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:18px}
.hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:15px 26px;font-size:11px;min-width:220px}
.hero-actions .btn:not(.light){border-color:var(--cream);color:var(--cream)}
.hero-actions .btn:not(.light):hover{background:var(--cream);color:#1a1410}
.scroll-hint{position:absolute;z-index:2;left:5vw;bottom:9%;display:flex;flex-direction:column;gap:6px;padding-left:22px;border-left:1px solid var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream)}
.scroll-hint span+span{color:var(--muted)}
.scroll-hint::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--cream);transform:translateY(-50%)}
.features{position:absolute;z-index:2;left:24%;right:14%;bottom:7%;display:flex;justify-content:space-around;gap:30px;margin:0;padding:0;list-style:none;text-align:center}
.features li{display:flex;flex-direction:column;align-items:center;color:var(--cream)}
.features .ico{color:var(--cream);margin-bottom:14px}
.features strong{font-weight:400;font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.features span{color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:860px){
  .home-hero{height:auto;min-height:0;max-height:none;padding:0}
  .home-hero picture{position:relative;display:block;width:100%;overflow:hidden;transform:none;padding-top:110px;-webkit-mask-image:linear-gradient(transparent 18%,#000 45%,#000 70%,transparent);mask-image:linear-gradient(transparent 18%,#000 45%,#000 70%,transparent)}
  .home-hero img.bg{width:100%;height:clamp(300px,58vw,520px);object-fit:cover;object-position:52% 50%}
  .home-hero::after{display:none}
  .home-hero .hero-content{position:relative;z-index:2;left:0;top:0;margin-top:-40px;padding:0 6vw}
  .eyebrow{font-size:11px;letter-spacing:.24em;margin-bottom:18px;white-space:normal}
  .eyebrow span{margin:0 .8em}
  .hero-actions .btn{width:100%}
  .scroll-hint{display:none}
  .features{position:relative;left:0;right:0;bottom:0;margin:56px 4vw 10px;gap:12px}
  .features strong{font-size:11px;letter-spacing:.18em}
  .features span{font-size:10px;letter-spacing:.12em}
}

/* lichte kopbalk met het originele logo */
.site-header,.site-header.solid{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--gold-dark);padding:8px 3.4vw;box-shadow:0 2px 18px rgba(0,0,0,.35)}
.site-header .logo img{height:clamp(78px,7.5vw,104px)}
.site-header .nav a{color:var(--ink);font-weight:400}
.site-header .nav a:hover{color:var(--gold-dark)}
.site-header .nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.site-header .head-cta{border-color:var(--ink);color:var(--ink);font-weight:600}
.site-header .head-cta:hover{background:var(--ink);color:var(--paper)}
.site-header .nav-toggle span{background:var(--ink)}
.hero-content{padding-top:0}
.home-hero{height:calc(100vh - 121px);min-height:620px}
.home-hero .hero-content{top:16%}
@media (max-width:860px){
  .site-header,.site-header.solid{padding:6px 5vw}
  .site-header .logo img{height:64px}
  .site-header .nav{background:var(--paper)}
  .home-hero{height:auto;min-height:0}
  .home-hero picture{padding-top:0}
}
/* hero-foto vult het hele beeld; tekst links op het donkere deel */
.home-hero picture{inset:0;left:0;right:0;top:0;bottom:0;width:100%;height:100%;transform:none;-webkit-mask-image:none;mask-image:none}
.home-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 60%}
.home-hero::after{background:linear-gradient(90deg,rgba(14,11,9,.88) 0%,rgba(14,11,9,.65) 30%,rgba(14,11,9,.1) 55%,rgba(14,11,9,0) 70%),linear-gradient(rgba(14,11,9,0) 60%,rgba(14,11,9,.85) 100%)}
@media (max-width:860px){
  .home-hero picture{position:relative;display:block;height:auto;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .home-hero img.bg{position:static;height:clamp(300px,75vw,560px);object-position:72% 60%}
  .home-hero::after{display:none}
}
/* kopbalk staat altijd vast bovenin */
:root{--head-h:calc(clamp(78px,7.5vw,104px) + 17px)}
.site-header,.site-header.solid{position:fixed;top:0;left:0;right:0}
body{padding-top:var(--head-h)}
html{scroll-padding-top:var(--head-h)}
@media (max-width:860px){:root{--head-h:77px}}
.home-hero{height:calc(100vh - var(--head-h))}@media (max-width:860px){.home-hero{height:auto}}
.cat-nav{top:var(--head-h)}
/* instagram-blokje rechtsboven */
.head-ig{flex:none;display:inline-flex;align-items:center;gap:10px;margin-right:18px;color:var(--ink);text-decoration:none;line-height:1.15}
.head-ig:hover{color:var(--gold-dark)}
.head-ig .ig-txt{display:flex;flex-direction:column}
.head-ig b{font-weight:600;font-size:15px;letter-spacing:.04em}
.head-ig small{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.site-header .nav a{white-space:nowrap}
@media (max-width:1360px){.head-ig{gap:7px;margin-right:6px}.head-ig small{display:none}.head-ig b{font-size:13px}}
@media (max-width:860px){.head-ig{margin:0 14px 0 auto}}
@media (min-width:861px) and (max-width:1200px){
  .site-header .nav{gap:clamp(12px,1.8vw,26px)}
  .site-header .nav a{font-size:12px;letter-spacing:.14em}
  .site-header .head-cta{padding:11px 16px;gap:10px;font-size:11px}
  .site-header .logo img{height:72px}
  :root{--head-h:89px}
}
@media (min-width:861px) and (max-width:1200px){
  .site-header .btn.head-cta{padding:10px 14px;gap:8px;font-size:11px;letter-spacing:.18em}
  .site-header{gap:18px}
}
@media (min-width:861px) and (max-width:1000px){
  .site-header .nav{gap:12px}
  .site-header .nav a{letter-spacing:.08em}
  .site-header .btn.head-cta .ico{display:none}
}
/* reserveer-knop: tekst en icoon verticaal gecentreerd */
.btn.head-cta{display:inline-flex;align-items:center;line-height:1}
.btn.head-cta .ico{display:block;margin-left:-.3em}
/* reserveer-knop: tekst even hoog als het icoon */
.site-header .btn.head-cta{font-size:16px;letter-spacing:.2em;padding:12px 24px;gap:14px}
.btn.head-cta .ico{margin-left:-.2em}
@media (min-width:861px) and (max-width:1200px){.site-header .btn.head-cta{font-size:13px;letter-spacing:.14em;padding:10px 14px;gap:10px}.site-header .btn.head-cta .ico{width:15px;height:15px}}
.site-header .btn.head-cta .ico{width:20px;height:20px}
@media (min-width:1201px) and (max-width:1360px){.site-header .btn.head-cta{font-size:14px;letter-spacing:.16em;padding:11px 18px;gap:12px}.site-header .btn.head-cta .ico{width:18px;height:18px}}
@media (min-width:861px) and (max-width:1200px){.site-header .btn.head-cta .ico{width:16px;height:16px}}
@media (min-width:1201px) and (max-width:1260px){.site-header .btn.head-cta{font-size:13px;letter-spacing:.14em;padding:10px 14px;gap:10px}.site-header .btn.head-cta .ico{width:16px;height:16px}}
/* hero-knoppen beter leesbaar */
.hero-actions .btn{font-size:13px;letter-spacing:.24em;font-weight:600}
.hero-actions .btn:not(.light){background:rgba(18,13,10,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-actions .btn:not(.light):hover{background:var(--cream);color:#1a1410}
/* hero-tekst verankerd boven de icoontjes, schaalt mee met schermhoogte */
@media (min-width:861px){
  .home-hero .hero-content{top:auto;bottom:calc(7% + 128px)}
  .home-hero h1{font-size:clamp(46px,min(8vw,11.5vh),124px)}
  .home-hero .hero-content p:not(.eyebrow){margin-bottom:clamp(22px,4.5vh,50px)}
}
@media (min-width:861px) and (max-width:1260px){.home-hero .hero-content{bottom:calc(7% + 172px)}}
@media (max-width:860px){.site-header .btn.head-cta{display:none}}
/* kopbalk licht transparant */
.site-header,.site-header.solid{background:rgba(243,236,225,.8);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}