:root { --ink:#1d1c1a; --paper:#f4f0e8; --red:#a32822; --wine:#5c1d19; --moss:#4d5a34; --gold:#d9a94b; --line:rgba(29,28,26,.18); --sans:"DM Sans",Arial,sans-serif; --serif:"Playfair Display",Georgia,serif; }
.card-kitchen .card-copy { display:block; }.card-kitchen .card-copy span { margin:0 0 12px; }.card-kitchen .card-copy h3 { position:static !important; display:block; margin:0 0 10px; line-height:.97; }.card-kitchen .card-copy p { position:static !important; display:block; margin:0; line-height:1.45; }
.card-bar .card-copy { display:block; }.card-bar .card-copy span { margin:0 0 12px; }.card-bar .card-copy h3 { position:static !important; display:block; margin:0 0 10px; line-height:.97; }.card-bar .card-copy p { position:static !important; display:block; margin:0; line-height:1.45; }
.card-linger { padding:0; display:block; background:none; }.card-linger .card-image-fill { inset:0; transform:none; }.card-linger .card-copy { position:absolute; z-index:2; right:20px; bottom:20px; left:20px; padding:16px 18px 18px; background:rgba(29,28,26,.88); border-left:2px solid var(--gold); color:var(--paper); }.card-linger .card-copy span { display:block; margin:0 0 12px; color:var(--gold); font-size:10px; letter-spacing:1.5px; }.card-linger .card-copy h3 { position:static !important; display:block; margin:0 0 8px; color:var(--paper); }.card-linger .card-copy p { position:static !important; display:block; max-width:260px; margin:0; color:#fff4df; font-size:14px; line-height:1.45; }
.card-bar { padding:0; display:block; background:url("Afbeeldingen/476584271_17992061894773285_2948838930155537977_n.jpg") center 44% / cover no-repeat; }.card-bar .card-copy { position:absolute; z-index:2; right:20px; bottom:20px; left:20px; padding:16px 18px 18px; background:rgba(29,28,26,.88); border-left:2px solid var(--gold); color:var(--paper); }.card-bar .card-copy span { display:block; margin:0 0 12px; color:var(--gold); font-size:10px; letter-spacing:1.5px; }.card-bar h3 { position:static; margin:0 0 8px; color:var(--paper); }.card-bar p { max-width:260px; margin:0; color:#fff4df; font-size:14px; line-height:1.45; }
.card-kitchen { padding:0; display:block; background:url("Afbeeldingen/488921067_682744827622271_3524390580376075067_n.jpg") center 48% / cover no-repeat; }.card-kitchen .card-copy { position:absolute; z-index:2; right:20px; bottom:20px; left:20px; padding:16px 18px 18px; background:rgba(29,28,26,.88); border-left:2px solid var(--gold); color:var(--paper); }.card-kitchen .card-copy span { display:block; margin:0 0 12px; color:var(--gold); font-size:10px; letter-spacing:1.5px; }.card-kitchen h3 { position:static; margin:0 0 8px; color:var(--paper); }.card-kitchen p { max-width:260px; margin:0; color:#fff4df; font-size:14px; line-height:1.45; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.5; overflow-x:hidden; }
@supports (overflow-x:clip) { body { overflow-x:clip; } }
a { color:inherit; text-decoration:none; }
.site-header { height:88px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:0 4vw; background:var(--paper); position:relative; z-index:5; }
.wordmark { display:flex; flex-direction:column; width:max-content; font-family:var(--serif); font-size:25px; line-height:.72; letter-spacing:-1.4px; }
.wordmark small { margin-top:9px; padding-left:2px; font-family:var(--sans); font-size:8px; font-weight:600; letter-spacing:3px; }
.site-nav { display:flex; gap:26px; font-size:12px; }
.site-nav a { border-bottom:1px solid transparent; padding-bottom:3px; }
.site-nav a:hover { border-color:var(--ink); }
.header-cta { justify-self:end; font-size:12px; font-weight:600; }.header-cta span { color:var(--red); font-size:18px; margin-left:4px; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:20px; }
.lang-toggle { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid rgba(29,26,21,.22); border-radius:999px; }
.lang-btn { border:0; background:transparent; padding:5px 11px; border-radius:999px; font:600 10px var(--sans); letter-spacing:1.2px; color:var(--ink); opacity:.55; cursor:pointer; transition:background .18s ease, color .18s ease, opacity .18s ease; }
.lang-btn:hover { opacity:1; }
.lang-btn.active { background:var(--ink); color:var(--paper); opacity:1; }
.lang-btn:focus-visible { outline:2px solid rgba(163,40,34,.45); outline-offset:2px; }
.menu-toggle { display:none; }
.hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:minmax(300px, .9fr) 1.1fr; position:relative; background:var(--wine); color:var(--paper); overflow:hidden; }
.hero-copy { align-self:center; padding:8vw 4vw 9vw; position:relative; z-index:2; }.eyebrow,.section-kicker { margin:0 0 20px; text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:1.8px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:.97; letter-spacing:-2.5px; } h1 { margin-bottom:28px; font-size:clamp(58px,8vw,128px); } h2 { font-size:clamp(42px,5.5vw,82px); } h3 { font-size:31px; } em { font-weight:500; } .hero-intro { max-width:350px; color:#f6e9d4; font-size:17px; }
.button { display:inline-flex; align-items:center; gap:30px; margin-top:18px; padding:14px 17px; text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:1.3px; }.button span { font-size:19px; line-height:10px; }.button-light { background:var(--paper); color:var(--ink); }.button-dark { background:var(--ink); color:var(--paper); }
.hero-art { position:relative; min-height:580px; background:#291913; overflow:hidden; }.hero-photo { position:absolute; background-repeat:no-repeat; background-size:cover; background-position:center; filter:saturate(1.04); }.photo-food { inset:0 47% 38% 0; background-image:url("assets/lamb.jpg"); background-position:58% center; }.photo-drink { inset:0 0 38% 53%; background-image:url("Afbeeldingen/unnamed (1).webp"); background-position:center 54%; }.photo-bar { inset:66% 0 0 0; background-image:url("assets/cocktail-service.jpg"); background-position:center 36%; }
.image-note { position:absolute; right:28px; bottom:18px; margin:0; padding:6px 12px; background:rgba(29,28,26,.18); border-left:2px solid rgba(217,169,75,.9); color:#fffaf3; font-family:var(--sans); font-size:12px; font-style:normal; line-height:1.4; letter-spacing:1.1px; font-weight:600; text-transform:uppercase; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }.hero-scroll { position:absolute; bottom:26px; left:4vw; z-index:3; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; }.hero-scroll span { display:inline-block; width:36px; border-top:1px solid currentColor; vertical-align:middle; margin-left:10px; }
.section-wrap { padding-left:8vw; padding-right:8vw; }.intro { padding-top:135px; padding-bottom:135px; }.intro-grid { display:grid; grid-template-columns:1.25fr .55fr; gap:10vw; align-items:end; }.intro h2 { margin:0; }.intro-copy { max-width:330px; }.intro-copy p { font-size:18px; }.text-link { display:inline-block; font-size:12px; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:4px; }.text-link span { margin-left:15px; color:var(--red); font-size:17px; }
.history { padding-top:130px; padding-bottom:130px; background:var(--wine); color:var(--paper); }.history-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:8vw; align-items:start; }.history-art { position:sticky; top:96px; }.history-frame { margin:0; }.history-img { height:auto; aspect-ratio:1.36; min-height:260px; background:#2e1714 center / cover no-repeat; }.history-frame figcaption { margin-top:9px; font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(244,240,232,.62); }.history-copy h2 { margin-bottom:22px; }.history-copy h2 em { color:var(--gold); }.history-copy > p { max-width:420px; margin-bottom:16px; font-size:17px; line-height:1.6; color:#e8ddcd; }.history-facts { list-style:none; margin:26px 0 0; padding:0; }.history-facts li { display:flex; align-items:baseline; gap:16px; padding:11px 0; border-top:1px dotted rgba(244,240,232,.28); font-size:13.5px; line-height:1.5; color:#e8ddcd; }.history-facts span { flex:0 0 58px; font-family:var(--serif); font-size:22px; line-height:1; color:var(--gold); }.history-quote { margin:28px 0 0; padding-left:18px; border-left:2px solid var(--gold); font-family:var(--serif); font-size:19px; font-style:italic; line-height:1.4; color:#f6e9d4; }.history-quote cite { display:block; margin-top:8px; font-family:var(--sans); font-size:10px; font-style:normal; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:rgba(244,240,232,.62); }
.flavours { padding:100px 0; background:#ded2bd; }.flavours-top { display:flex; justify-content:space-between; gap:50px; align-items:flex-start; }.flavours-top > p:last-child { max-width:380px; font-family:var(--serif); font-size:23px; line-height:1.2; }.flavour-cards { display:grid; grid-template-columns:1fr 1.25fr 1fr; min-height:430px; margin-top:45px; }.flavour-card { padding:30px; display:flex; flex-direction:column; justify-content:flex-end; }.flavour-card h3 { margin-bottom:10px; }.flavour-card p { margin:0; max-width:180px; font-size:14px; }.flavour-card span { margin-bottom:auto; font-size:11px; }.card-red { background:var(--red); color:#fcebd0; }.card-dark { background:var(--ink); color:var(--paper); }.card-image { position:relative; padding:0; overflow:hidden; color:white; }.card-image h3 { position:absolute; z-index:1; bottom:20px; left:27px; margin:0; }.card-image-fill { position:absolute; inset:0; background:url("assets/table.jpg") center 58% / cover no-repeat; transform:scale(1.02); }
.occasions { display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; padding-top:150px; padding-bottom:150px; }.occasion-image { position:relative; width:100%; max-width:483px; height:570px; min-height:570px; overflow:hidden; background:#d8d0c4; } .occasion-slide { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.2s ease-in-out; } .occasion-slide.active { opacity:1; } .occasion-copy { align-self:center; }.occasion-copy h2 { margin-bottom:30px; }.occasion-copy > p:not(.section-kicker) { max-width:370px; font-size:18px; }
.reservation { display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; padding-top:130px; padding-bottom:110px; align-items:start; background:linear-gradient(180deg, rgba(29,28,26,.02), rgba(29,28,26,.04)); } .reservation-intro h2 { margin-bottom:18px; } .reservation-intro p:last-child { max-width:420px; font-size:18px; color:var(--ink); } .reservation-form { display:flex; flex-direction:column; gap:20px; padding:28px; background:var(--paper); border:1px solid var(--line); box-shadow:0 18px 50px rgba(29,28,26,.06); } .field-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; } .reservation-form label { display:flex; flex-direction:column; gap:9px; font-size:11px; font-weight:600; letter-spacing:1.3px; text-transform:uppercase; color:var(--ink); } .reservation-form input,.reservation-form select,.reservation-form textarea { width:100%; padding:14px 16px; border:1px solid rgba(29,28,26,.2); background:#fff; color:var(--ink); font:500 15px var(--sans); } .reservation-form textarea { min-height:100px; resize:vertical; } .reservation-form input:focus,.reservation-form select:focus,.reservation-form textarea:focus { outline:2px solid rgba(163,40,34,.35); border-color:var(--red); } .reservation-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; } .form-status { min-height:24px; margin:0; font-size:14px; color:var(--moss); } .form-status.error { color:var(--red); }
.visit { position:relative; background:var(--moss); color:var(--paper); padding:125px 8vw 90px; display:flex; justify-content:space-between; align-items:flex-end; min-height:530px; overflow:hidden; }.visit::before { content:""; position:absolute; inset:0; background:url("Afbeeldingen/De_Waag_(15976032282).jpg") center 38% / cover no-repeat; opacity:.46; filter:saturate(.7) contrast(1.1) brightness(.72); transform:scale(1.08); }.visit::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(31,41,25,.82) 0%, rgba(31,41,25,.62) 35%, rgba(31,41,25,.35) 100%), radial-gradient(circle at center, transparent 40%, rgba(8,10,7,.38) 100%); box-shadow:inset 0 0 80px rgba(10,11,8,.18); }.visit > * { position:relative; z-index:1; }.visit h2 { margin-bottom:25px; }.visit-copy > p:not(.section-kicker) { color:#e1d8c8; font-size:17px; }.visit-actions { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }.light-link span { color:var(--gold); }.visit-side { margin:0; max-width:150px; font-family:var(--serif); font-size:26px; font-style:italic; line-height:1.05; }.site-footer { display:grid; grid-template-columns:1fr minmax(280px, .8fr) auto; align-items:center; gap:28px; padding:42px 4vw 38px; background:var(--ink); color:var(--paper); border-top:1px solid rgba(217,169,75,.38); }.footer-mark { font-size:24px; transition:color .2s ease, transform .2s ease; }.footer-mark:hover { color:var(--gold); transform:translateY(-2px); }.site-footer p { justify-self:center; margin:0; max-width:320px; font-size:12px; line-height:1.5; text-align:center; color:#c7c0b3; }.site-footer > .text-link { justify-self:end; color:#f4f0e8; }.site-footer > .text-link span { color:var(--gold); }
.menu { padding:115px 0 125px; background:linear-gradient(180deg,#23201c 0%,#1d1c1a 55%,#181613 100%); color:var(--paper); position:relative; overflow:hidden; border-top:1px solid rgba(217,169,75,.34); }
.menu::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 18%, rgba(92,29,25,.35), transparent 42%), radial-gradient(circle at 14% 88%, rgba(77,90,52,.28), transparent 46%); pointer-events:none; }
.menu .section-kicker { color:var(--gold); }
.menu-head h2 { margin-bottom:8px; } .menu-head h2 em { color:var(--gold); }
.menu-head { position:relative; } .menu-head > * { position:relative; z-index:1; }
.menu-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:52px 0 0; position:relative; z-index:1; }
.menu-tab { appearance:none; cursor:pointer; padding:11px 17px; border:1px solid rgba(217,169,75,.42); background:transparent; color:#e8e1d3; font:600 11px var(--sans); text-transform:uppercase; letter-spacing:1.3px; border-radius:999px; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.menu-tab:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-1px); }
.menu-tab[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:#24201c; font-weight:600; }
.menu-panels { margin:0 auto; padding:58px 8vw 60px; max-width:1180px; position:relative; z-index:1; }
.menu-panel.hidden { display:none; }
.menu-panel.fade-in { animation:menuFade .32s ease both; }
@keyframes menuFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.menu-group { margin-bottom:34px; }
.menu-group-title { margin:40px 0 14px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:2.2px; text-transform:uppercase; color:var(--gold); }
.menu-group-note { margin:0 0 10px; font-size:13.5px; line-height:1.55; color:#cfc8bb; max-width:640px; }
.menu-list { list-style:none; margin:14px 0 0; padding:0; columns:2; column-gap:52px; column-rule:1px dotted rgba(217,169,75,.4); }
.menu-item { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 13px; }
.menu-item-row { display:flex; align-items:center; gap:8px; }
.menu-item-name { flex:0 1 auto; font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.15; color:var(--paper); letter-spacing:-.4px; }
.menu-item-dots { flex:1 1 auto; min-width:18px; border-top:1px dotted rgba(217,169,75,.75); }
.menu-item-price { flex:0 0 auto; white-space:nowrap; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--gold); }
.menu-item-desc { margin:3px 0 8px; font-size:13px; line-height:1.5; color:#cfc8bb; }
.menu-foot { margin:74px 0 0; font-size:12px; letter-spacing:.3px; color:#c9c2b5; position:relative; z-index:1; }
@media (max-width:760px) {
  .site-header { height:72px; grid-template-columns:1fr auto auto; gap:16px; padding:0 6vw; }
  .site-nav, .header-cta { display:none; }
  .header-actions { gap:0; }
  .menu-toggle { display:block; border:0; background:none; color:var(--ink); font:600 11px var(--sans); text-transform:uppercase; letter-spacing:1px; }
  .site-nav.open { display:flex; position:absolute; top:72px; left:0; right:0; padding:25px 6vw; flex-direction:column; gap:16px; background:var(--paper); }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:490px; padding:80px 7vw; }
  .hero-art { min-height:440px; }
  .hero-scroll { display:none; }
  .section-wrap { padding-left:7vw; padding-right:7vw; }
  .intro { padding-top:90px; padding-bottom:90px; }
  .intro-grid, .occasions, .reservation, .history-grid { grid-template-columns:1fr; gap:40px; }
  .flavours { padding:70px 0; }
  .flavours-top { display:block; }
  .flavour-cards { grid-template-columns:1fr; gap:26px; min-height:0; }
  .flavour-card { min-height:255px; }
  .card-image { min-height:350px; }
  .history { padding-top:90px; padding-bottom:90px; }
  .history-art { position:static; }
  .occasions { padding-top:90px; padding-bottom:90px; }
  .occasion-image { min-height:400px; }
  .reservation { padding-top:90px; padding-bottom:70px; }
  .field-row { grid-template-columns:1fr; }
  .reservation-actions { align-items:flex-start; flex-direction:column; }
  .visit { padding:85px 7vw 55px; min-height:0; }
  .visit-side { display:none; }
  .site-footer { grid-template-columns:1fr; gap:18px; padding-top:32px; padding-bottom:28px; }
  .site-footer p { display:block; max-width:280px; }
  .site-footer > .text-link { justify-self:start; }

  /* Menu tweaks on small screens */
  .menu { padding:75px 0 85px; }
  .menu-tabs { gap:9px; margin:36px 0 0; }
  .menu-tab { padding:9px 13px; font-size:10px; letter-spacing:1px; }
  .menu-panels { padding:42px 7vw 46px; max-width:none; }
  .menu-list { columns:1; }
  .menu-item-name { font-size:18px; }
  .menu-group { margin-bottom:26px; }
  .menu-group-title { margin:30px 0 12px; }
  .menu-foot { margin:50px 0 0; }
}

/* History image timeline: stacked frames cross-fade as the copy scrolls past. */
.history-art { display: grid; }
.history-art .history-frame { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s ease-in-out, visibility 0s linear .9s; }
.history-art .history-frame.active { opacity: 1; visibility: visible; transition: opacity .9s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .history-art .history-frame, .history-art .history-frame.active { transition: none; } }