/* Ferelith dining room & bar · ESSENTIAL tier ($800), restaurant vertical.
   The brand of the Immersive demo (/immersive/restaurant): the Ferelith wordmark in Fraunces,
   Fraunces 300 + Inter Tight, espresso-black / bone / brass. Photography instead of 3D.
   Built on the Halvenne Essential template (essential/beauty): same structure, restyled.
   Restrained motion: one fade-up on scroll, nothing else.

   Two themes. The page is dark (espresso-black, bone type, brass accents); a section with
   .light is bone with espresso type. Components only use the --fg / --accent / --line ...
   tokens, so they work on either. Contrast (WCAG 2.x, computed 01-10-2026):
     dark:  bone #ece4d6 15.7:1, soft #c9bfae 10.9:1, mute #a39784 6.9:1, brass #c9a46c 8.5:1
     light: espresso #1a1410 14.4:1, soft #5b4f44 6.3:1, mute #6b5e50 5.0:1, brass-ink #7a5a26 5.0:1
   Brass #c9a46c on bone is only 1.85:1: it never sets text on a light section. */

:root {
  --black: #0c0a08;           /* espresso-black, the page */
  --espresso: #1a1410;
  --bone: #ece4d6;            /* type on dark */
  --paper: #ebe4d8;           /* the light sections */
  --paper-card: #f4efe6;
  --brass: #c9a46c;
  --brass-ink: #7a5a26;       /* brass as text and as the map pin on light: 5.0:1 on paper */

  /* dark theme tokens (the default) */
  --bg: var(--black);
  --fg: var(--bone);
  --fg-soft: #c9bfae;
  --fg-mute: #a39784;
  --accent: var(--brass);
  --surface: #15110e;
  --line: rgba(236, 228, 214, .12);
  --line-strong: rgba(236, 228, 214, .26);
  --btn-bg: var(--bone);
  --btn-fg: var(--espresso);
  --btn-hover: var(--brass);
  --open: #9fb07a;
  --soon: var(--brass);
  --shut: #8a7f70;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --r: 3px;
  --gut: clamp(20px, 5vw, 48px);
  --head-h: 72px;
  color-scheme: dark;
}
.light {
  --bg: var(--paper);
  --fg: var(--espresso);
  --fg-soft: #5b4f44;
  --fg-mute: #6b5e50;
  --accent: var(--brass-ink);
  --surface: var(--paper-card);
  --line: rgba(26, 20, 16, .13);
  --line-strong: rgba(26, 20, 16, .28);
  --btn-bg: var(--espresso);
  --btn-fg: var(--bone);
  --btn-hover: #3a2e25;
  --open: #5d6e3e;
  --soon: var(--brass-ink);
  --shut: #8a7f70;
  color-scheme: light;
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); background: var(--black); }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
p, h1, h2, h3, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.016em; line-height: 1.04; }
h1, h2 { text-wrap: balance; font-variation-settings: "opsz" 120; }
h1 em, h2 em { font-style: italic; }
p { text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--bone); color: var(--espresso); padding: 12px 16px; border-radius: var(--r);
  font-size: 14px; text-decoration: none; transition: top .2s ease;
}
.skip:focus { top: 12px; }

.eyebrow {
  font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: none; color: var(--fg); cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-fill { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-fill:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 11.5px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.text-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 500 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding: 21px 0 4px;   /* 44px tall to tap */
  transition: border-color .2s ease, color .2s ease;
}
.text-link:hover { border-color: var(--fg); color: var(--accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(12, 10, 8, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; gap: 12px; min-height: var(--head-h); }
/* the wordmark, as on the Immersive site */
.brand {
  font: 400 24px/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "opsz" 40;
  color: var(--fg); text-decoration: none; white-space: nowrap; margin-right: auto;
  padding: 11px 0;   /* 44px tall to tap (at the 22px phone size too) */
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft); text-decoration: none; padding: 16px 0; white-space: nowrap;   /* 44px tall to tap */
  min-width: 44px; text-align: center;   /* and never narrower: "Menu" is a short word */
  text-decoration-thickness: 1px; text-underline-offset: 7px; transition: color .2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--accent); }
.nav .btn { margin-left: 4px; }

.lang { display: flex; gap: 2px; margin-left: 18px; }
.lang button {
  font: 500 11.5px/1 var(--sans); letter-spacing: .1em;
  color: var(--fg-mute); background: none; border: 0; border-radius: var(--r);
  min-width: 44px; min-height: 44px; padding: 0 8px; cursor: pointer;   /* a 44px tap area */
  transition: background-color .2s ease, color .2s ease;
}
.lang button:hover { color: var(--fg); }
.lang button[aria-pressed="true"] { background: rgba(236, 228, 214, .1); color: var(--fg); }
/* the copy of the language switch inside the phone menu, and the "Reserve a table" button that
   stays in the header bar once the nav's own button no longer fits */
.lang--menu, .head-book { display: none; }
.head-book { min-height: 44px; padding: 0 16px; font-size: 11.5px; letter-spacing: .12em; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0 11px; margin-right: -11px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); transition: transform .25s ease; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- live open / closed status ---------- */
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.35; color: var(--fg); }
.status i {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--shut); box-shadow: 0 0 0 4px rgba(138, 127, 112, .2);
}
.status[data-state="open"] i { background: var(--open); box-shadow: 0 0 0 4px rgba(159, 176, 122, .2); }
.status[data-state="soon"] i { background: var(--soon); box-shadow: 0 0 0 4px rgba(201, 164, 108, .22); }
.light .status[data-state="open"] i { box-shadow: 0 0 0 4px rgba(93, 110, 62, .18); }
.light .status[data-state="soon"] i { box-shadow: 0 0 0 4px rgba(122, 90, 38, .18); }
.status .tz { color: var(--fg-mute); font-size: 12.5px; }
/* times and prices: Inter Tight with lining, tabular figures, so columns of prices line up */
.num, .price { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; }
.status--card .num { font-size: .8em; font-weight: 500; }

/* ---------- hero ---------- */
.hero .wrap { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero h1 {
  font-size: clamp(46px, 5.4vw, 74px); line-height: .98; letter-spacing: -.028em;   /* max 74px: "aan het Rapenburg." stays one line */
  font-variation-settings: "opsz" 144; margin: 22px 0 26px;
}
.hero h1 em { display: block; color: var(--fg); }
.lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: var(--fg-soft); max-width: 44ch; }
.hero .lead { margin-bottom: 34px; }
.hero-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-addr { font-size: 14px; color: var(--fg-soft); }
.hero-media { position: relative; }
.hero-photo {
  width: 100%; height: clamp(520px, 74vh, 720px); object-fit: cover; object-position: 50% 40%;
  border-radius: var(--r); background: var(--espresso);
}
/* on load the copy rises once; the photo just appears (no parallax: that is Signature) */
html.js .hero-copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.js .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.js .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.pad { padding: clamp(72px, 9vw, 128px) 0; }
.pad-b { padding-bottom: clamp(72px, 9vw, 128px); }
.section-head { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head h2, .split-copy h2, .know-side h2, .private-copy h2 { font-size: clamp(36px, 4.3vw, 58px); margin: 16px 0 18px; }
.section-head p:not(.eyebrow) { color: var(--fg-soft); max-width: 56ch; }

/* intro: one statement, one small photo */
.intro { padding-top: clamp(40px, 5vw, 72px); }
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 7vw, 120px); align-items: end;
}
.statement { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.02; letter-spacing: -.024em; margin-bottom: 30px; max-width: 13ch; }
.intro-copy p { color: var(--fg-soft); font-size: 18px; max-width: 54ch; }
.intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--espresso); }

/* the menus at a glance: a heading beside the kitchen photo, then two cards */
.menus-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(36px, 6vw, 96px);
  align-items: center; margin-bottom: clamp(36px, 4.5vw, 56px);
}
.menus-head .section-head { margin-bottom: 0; }
.menus-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.mcard { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.mcard-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--espresso); }
/* keep the food in frame: the bowl sits low in its photo, the glass in the middle */
.mcard:nth-child(1) .mcard-photo { object-position: 50% 64%; }
.mcard:nth-child(2) .mcard-photo { object-position: 50% 52%; }
.mcard-body { padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px) clamp(26px, 2.8vw, 36px); }
.mcard-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.mcard h3 { font-size: clamp(28px, 2.5vw, 34px); line-height: 1.05; }
.mcard-price { font-size: 13.5px; line-height: 1.2; color: var(--fg-soft); white-space: nowrap; }
.mcard-price .price, .mcard-price .num { font-size: 27px; line-height: 1; color: var(--fg); letter-spacing: -.012em; margin: 0 2px; }
.mcard-meta {
  font: 500 12px/1.55 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin: 12px 0 14px;
}
.mcard-meta .num { letter-spacing: .02em; }
.mcard-text { font-size: 15.5px; color: var(--fg-soft); line-height: 1.6; }
.more { margin-top: clamp(14px, 2.6vw, 30px); }

/* the room */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--espresso); }
.split-copy > p:not(.eyebrow) { color: var(--fg-soft); max-width: 54ch; }
.split-copy > p + p { margin-top: 16px; }
.team { margin-top: 36px; border-top: 1px solid var(--line); max-width: 54ch; }
.team li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.team b { font: 300 28px/1.1 var(--serif); }
.team span { font-size: 14.5px; color: var(--fg-soft); text-align: right; }

/* the private room: one card in espresso, the photo on the right (the room above has it on the left) */
.private {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch;
  background: var(--espresso); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.private-photo { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 50% 50%; background: var(--black); }
.private-copy { padding: clamp(32px, 5vw, 72px); align-self: center; }
.private-copy > p:not(.eyebrow) { color: var(--fg-soft); max-width: 52ch; }
.private-small { margin-top: 18px; font-size: 14.5px; color: var(--fg-mute) !important; }
.private-copy .btn { margin-top: 28px; }

/* visit */
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.hours-card { background: var(--surface); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); }
.hours-card h3, .info-block h3 {
  font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute);
  margin-bottom: 16px;
}
/* a grid, not a wrapping row: a long status line wraps under itself and the dot stays on line one */
.status--card {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 11px; row-gap: 3px;
  font: 300 24px/1.2 var(--serif); font-variation-settings: "opsz" 40; margin-bottom: 22px;
}
.status--card i { align-self: start; margin-top: .48em; }
.status--card .tz { grid-column: 2; font-family: var(--sans); }
/* the hours: a real table, day / bar / kitchen; a closed day spans both time columns */
.hours-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hours-table th, .hours-table td { padding: 10px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: baseline; }
.hours-table tbody tr:last-child th, .hours-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.hours-table thead th {
  font: 500 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mute);
  border-top: 0; padding-top: 0;
}
.hours-table td { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; padding-left: 14px; }
.hours-table thead th + th { padding-left: 14px; }
.hours-table tbody th { color: var(--fg-soft); width: 46%; }
.hours-table .t-closed { color: var(--fg-mute); }
.hours-table .is-today th, .hours-table .is-today td { color: var(--fg); font-weight: 500; }
.today-tag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font: 500 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal;
  color: var(--accent); border: 1px solid currentColor; border-radius: 2px; padding: 4px 5px 3px;
}
.hours-note { margin-top: 18px; font-size: 14.5px; color: var(--fg-soft); }

/* position + z-index 0 = its own stacking context, or Leaflet's panes (z 200-1000) climb over the sticky header.
   contain: size = the box never takes its height from what is inside it. Leaflet's script can arrive
   before its stylesheet; for that moment the tiles sit in the normal flow and stretch the box to some
   3000px, Leaflet centres the pin in that tall box, and once the CSS lands the visible part shows
   another street instead of the pin. (js/ferelith.js re-centres on every size change of the box.) */
.visit-map { position: relative; z-index: 0; min-height: 440px; contain: size; border-radius: var(--r); overflow: hidden; background: #ded5c6; }
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
.leaflet-container { font-family: var(--sans); background: #ded5c6; }
/* warm the OpenStreetMap tiles a little so the map sits in the bone palette */
.leaflet-tile-pane { filter: sepia(.24) saturate(.6) brightness(1.01); }
.leaflet-bar { border: 0 !important; border-radius: var(--r); box-shadow: 0 6px 18px rgba(12, 10, 8, .2); overflow: hidden; }
.leaflet-bar a { color: var(--espresso); }
.leaflet-control-attribution { font-size: 11px; }
.map-pin { background: none; border: 0; }
.map-pin svg { display: block; width: 34px; height: 44px; filter: drop-shadow(0 5px 7px rgba(12, 10, 8, .38)); }
.map-pop .leaflet-popup-content-wrapper { border-radius: var(--r); }
.map-pop .leaflet-popup-content { margin: 10px 14px; font: 400 19px/1.25 var(--serif); font-variation-settings: "opsz" 40; color: var(--espresso); }
.map-pop .leaflet-popup-content span { font: 400 13px/1.4 var(--sans); color: #5b4f44; }
/* "Use Ctrl + scroll to zoom the map": shown for a moment when someone scrolls over the map */
.map-hint {
  position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; text-align: center;
  background: rgba(12, 10, 8, .58); color: #fff; font: 300 24px/1.2 var(--serif);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.map-hint.show { opacity: 1; }
.map-guard {
  position: absolute; inset: 0; z-index: 2; border: 0; cursor: pointer; padding: 20px;
  background: rgba(12, 10, 8, .32); color: #fff; font: 300 22px var(--serif);
}
.map-live .map-guard { display: none; }

.visit-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--line-strong);
}
.info-stack { display: grid; gap: 40px; align-content: start; }
.info-block > p + p { margin-top: 0; }
.res-text, .getting, .contact-intro { font-size: 15px; color: var(--fg-soft); margin-bottom: 18px; }
.addr { font: 300 26px/1.2 var(--serif); font-variation-settings: "opsz" 40; margin-bottom: 14px; }
.contact-line { font-size: 16px; margin-bottom: 2px; }
/* 44px tall to tap; the border is the underline, so the extra room goes above the text */
.contact-line a { display: inline-block; padding: 13px 0 4px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-line a:hover { border-color: var(--fg); }
.contact-line .soft { color: var(--fg-mute); font-size: 13.5px; margin-left: 6px; }
.socials { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.socials a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 14.5px; color: var(--fg); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.socials a:hover { background: var(--surface); border-color: var(--fg); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.handle { margin-top: 12px; font-size: 14px; color: var(--fg-soft); }

/* ---------- menu page ---------- */
.page-head { padding: clamp(36px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); }
.page-head + .menu-sec.light { padding-top: clamp(64px, 8vw, 112px); }
.page-head-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px);
}
.page-head h1 { font-size: clamp(44px, 5.8vw, 82px); line-height: .98; letter-spacing: -.028em; font-variation-settings: "opsz" 144; margin-top: 18px; }
.page-head .lead { max-width: 52ch; font-size: 17px; }
.jump { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jump a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 14.5px; line-height: 1.25; color: var(--fg); text-decoration: none; transition: background-color .2s ease, border-color .2s ease;
}
.jump a:hover { background: var(--surface); border-color: var(--fg); }
.j-a { flex: none; color: var(--accent); font-size: 15px; }
.band img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; object-position: 50% 55%; border-radius: var(--r); background: var(--espresso); }

.menu-sec { padding: clamp(64px, 8vw, 112px) 0; }
/* two dark menu sections in a row share one band, split by a rule that stops where the text does */
.menu-sec:not(.light) + .menu-sec:not(.light) { padding-top: 0; }
.menu-sec:not(.light) + .menu-sec:not(.light) .group {
  padding-top: clamp(56px, 7vw, 96px);
  background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 50% 0 / calc(100% - 2 * var(--gut)) 1px;
}
.page-head + .menu-sec { padding-top: clamp(56px, 7vw, 96px); }
.group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); }
.g-head h2 { font-size: clamp(34px, 3.8vw, 52px); margin: 14px 0 16px; }
.g-intro { color: var(--fg-soft); font-size: 15.5px; max-width: 40ch; }
.g-photo { width: 100%; max-width: 340px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-top: 28px; background: var(--surface); }

/* the set menu: six numbered courses, then the prices */
.courses { counter-reset: course; border-top: 1px solid var(--line-strong); }
.course {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 8px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.course::before {
  content: counter(course, decimal-leading-zero); counter-increment: course;
  font: 500 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.c-name { font: 300 27px/1.12 var(--serif); font-variation-settings: "opsz" 48; }
.c-desc { color: var(--fg-soft); font-size: 15px; margin-top: 4px; }
.c-tag {
  display: inline-block; margin-top: 10px;
  font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: 2px; padding: 5px 7px 4px;
}
.set-prices { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-strong); }
.sp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.sp-name { font: 300 23px/1.15 var(--serif); font-variation-settings: "opsz" 40; }
.sp-sub { display: block; font: 400 14.5px/1.5 var(--sans); color: var(--fg-soft); margin-top: 3px; }
.sp-prices { display: grid; justify-items: end; gap: 2px; text-align: right; font-size: 14.5px; color: var(--fg-soft); }
.sp-line { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.sp-prices .price { font-size: 20px; color: var(--fg); min-width: 3.2ch; text-align: right; }
.veg-note {
  margin-top: 28px; padding: 18px 22px; border-left: 2px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0; color: var(--fg-soft); font-size: 15.5px;
}
.veg-note b { color: var(--fg); font-weight: 500; }
.list-cta {
  --fg: var(--bone); --fg-soft: #c9bfae; --accent: var(--brass);
  --btn-bg: var(--bone); --btn-fg: var(--espresso); --btn-hover: var(--brass);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  margin-top: clamp(28px, 3.5vw, 40px); padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 34px);
  background: var(--espresso); color: var(--fg); border-radius: var(--r);
}
.list-cta p { flex: 1 1 300px; color: var(--fg-soft); font-size: 15.5px; }
.list-cta p b { display: block; font: 300 27px/1.15 var(--serif); font-variation-settings: "opsz" 40; color: var(--fg); margin-bottom: 6px; }

/* the bar menu and the wines: name (and region) left, price right */
.p-list { border-top: 1px solid var(--line-strong); }
.p-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.t-name { font: 300 24px/1.15 var(--serif); font-variation-settings: "opsz" 40; }
.t-desc { color: var(--fg-soft); font-size: 14.5px; margin-top: 3px; }
.p-meta { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 14px; color: var(--fg-soft); }
.p-meta .price { font-size: 20px; line-height: 1.1; color: var(--fg); }
/* a price with a unit ("each", "three"): the unit goes under the price, so the column of prices stays aligned
   in every language (Spanish writes "4 € la unidad" but "tres unidades 11 €") */
.p-meta--unit { flex-direction: column; align-items: flex-end; gap: 1px; }
.p-meta--unit .price { order: -1; }
.p-meta--unit .unit { font-size: 12.5px; }
.wine-group + .wine-group { margin-top: clamp(32px, 4vw, 44px); }
.sub-group + .sub-group { margin-top: clamp(40px, 5vw, 56px); }
.wine-group h3, .sub-group h3 {
  font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}
.wine-group .t-name { font-size: 22px; }

/* allergies and good to know */
.know-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.know-photo { width: 100%; max-width: 340px; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--r); margin-top: 30px; background: var(--surface); }
.know-text > p { color: var(--fg-soft); max-width: 62ch; }
.know-text > p + p { margin-top: 16px; }
.know-text > p:first-child { font: 300 24px/1.35 var(--serif); font-variation-settings: "opsz" 40; color: var(--fg); max-width: 34ch; }
.gtk { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid var(--line-strong); }
.gtk .eyebrow { margin-bottom: 4px; }
.know-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.know-list > div { padding: 20px 0 0; }
.know-list dt { font: 300 24px/1.15 var(--serif); font-variation-settings: "opsz" 40; margin-bottom: 8px; }
.know-list dd { color: var(--fg-soft); font-size: 15px; }

/* closing band (dark, after the light allergies section) */
.closing { padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(40px, 5.4vw, 72px); max-width: 15ch; }
.closing-text { color: var(--fg-soft); margin: 18px 0 32px; max-width: 46ch; }
.closing .actions { justify-content: center; }
.closing-strip .strip-hours { font-variant-numeric: tabular-nums; }
html:not(.js) .strip-hours { display: none; }   /* without the script the status line already says it */
.closing-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-strong);
  font-size: 14px; color: var(--fg-soft);
}

/* ---------- footer ---------- */
.site-footer { background: var(--espresso); color: rgba(236, 228, 214, .76); padding: clamp(56px, 6vw, 80px) 0 32px; font-size: 14.5px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 36px; padding-bottom: 40px; }
.site-footer .brand { display: inline-block; margin: -10px 0 4px; font-size: 26px; }
.foot-tag { color: var(--bone); max-width: 38ch; }
.foot-hours { margin-top: 4px; font-variant-numeric: tabular-nums; }
.foot-nav, .foot-contact { display: flex; flex-direction: column; gap: 0; align-items: flex-start; margin-top: -10px; }
.foot-nav a, .foot-contact a { padding: 10px 0; min-width: 44px; }   /* 44px tall to tap, and never narrower ("Menu") */
.site-footer a { color: rgba(236, 228, 214, .86); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.site-footer a:hover { color: var(--bone); border-bottom-color: rgba(236, 228, 214, .5); }
.site-footer .foot-nav a:hover, .site-footer .foot-contact a:hover { border-bottom-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(236, 228, 214, .5); }
.foot-small { position: relative; padding-top: 24px; display: grid; gap: 10px; font-size: 13px; color: rgba(236, 228, 214, .64); }
/* the rule stops where the text does, not at the wrap's padding */
.foot-small::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(236, 228, 214, .12); }
/* the two small links ("Unsplash", "back to the tier comparison"): 44px tall to tap without making
   their line taller. An inline-block with padding, cancelled by the same negative margin, so the
   line box stays as it is; the underline is a text decoration, so it stays under the words */
.foot-small a {
  display: inline-block; padding: 14px 0 13px; margin: -14px 0 -13px;
  color: rgba(236, 228, 214, .82); border-bottom: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(236, 228, 214, .3);
}
.site-footer .foot-small a:hover { text-decoration-color: rgba(236, 228, 214, .7); }
.foot-small p > span + span::before { content: "·"; margin: 0 8px; }

/* ---------- the same restaurant in the other packages: the footer's first row ----------
   A slim strip just under the footer's top edge, closed by a hairline inset like the one above the
   small print. On a wide screen the label sits in the brand's column and the packages start in the
   footer nav's column. The two links carry a faint underline that firms up on hover; the current
   package is no link and has none, it is set in brass (as the current page in the phone menu and on
   the Immersive demo). Every link is 44 px tall to tap. */
.xtier-row { position: relative; margin: calc(26px - clamp(56px, 6vw, 80px)) auto clamp(44px, 5vw, 60px); padding-bottom: 16px; }
.xtier-row::after { content: ""; position: absolute; bottom: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(236, 228, 214, .12); }
.xtier { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); column-gap: 36px; align-items: center; }
.xtier-label { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(236, 228, 214, .64); }
.xtier-list { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; }
.xtier-list li { display: flex; align-items: center; }
.xtier-list li + li::before { content: "\00B7"; content: "\00B7" / ""; margin: 0 14px; color: rgba(236, 228, 214, .34); }
.site-footer .xtier a, .xtier-cur { display: inline-block; min-width: 44px; padding: 12px 0; line-height: 20px; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-footer .xtier a { color: rgba(236, 228, 214, .86); border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(236, 228, 214, .3); transition: color .2s ease, text-decoration-color .2s ease; }
.site-footer .xtier a:hover { color: var(--bone); text-decoration-color: rgba(236, 228, 214, .7); }
.xtier-cur { color: var(--brass); }
@media (max-width: 900px) {
  .xtier { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .xtier-row { margin-top: calc(20px - clamp(56px, 6vw, 80px)); margin-bottom: 40px; padding-bottom: 10px; }
  .xtier { display: block; }
  .xtier-label { padding-top: 4px; }
}

/* ---------- "Reserve a table" demo notice (bone, over the dark page) ---------- */
.res-note {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.res-note::backdrop { background: rgba(12, 10, 8, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.res-note[open] { animation: pop .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rn-inner { position: relative; padding: 34px clamp(24px, 5vw, 40px) 32px; }
.rn-chip {
  display: inline-block; font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: 2px; padding: 6px 8px 5px;
}
.res-note h2 { font-size: clamp(30px, 6vw, 38px); margin: 16px 0 14px; padding-right: 24px; }
.res-note h2:focus { outline: none; }   /* it takes the focus on open, so a screen reader starts at the title */
.res-note p { color: var(--fg-soft); font-size: 15.5px; }
.rn-lines { margin: 20px 0 18px; border-top: 1px solid var(--line); }
.rn-lines li { border-bottom: 1px solid var(--line); }
.rn-lines a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; min-height: 44px; color: var(--fg); text-decoration: none; font-size: 16px; }
.rn-lines a:hover .rn-main { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.rn-lines .rn-soft { font-size: 13.5px; color: var(--fg-mute); }
.res-note .rn-own, .res-note .rn-upsell { color: var(--fg); }
.res-note .rn-upsell { margin-top: 10px; }
.rn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.rn-actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
.rn-x {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r); cursor: pointer; color: var(--fg-soft);
}
.rn-x:hover { background: rgba(26, 20, 16, .07); color: var(--fg); }
.rn-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html:has(.res-note[open]) { overflow: hidden; }

/* demo toast: says what a placeholder link would do on a real site */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 60; width: max-content; max-width: min(calc(100vw - 32px), 460px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--espresso); color: var(--bone); font: 400 14.5px/1.5 var(--sans); text-align: left;
  padding: 13px 18px; border-radius: var(--r); box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  border: 1px solid rgba(236, 228, 214, .18);   /* still reads over the espresso card and the footer */
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--brass); font-weight: 500; }

/* ---------- the one scroll animation ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ================= tablet ================= */
@media (max-width: 1100px) {
  .nav { gap: 22px; }
  .nav .btn { display: none; }
  .head-book { display: inline-flex; }   /* "Reserve a table" stays one tap away at every width */
  .lang { margin-left: 6px; }
}

/* the nav folds into the menu a little before the content goes single-column: below ~1020px
   the Dutch and Spanish menu items no longer fit on one line next to the languages and the button */
@media (max-width: 1020px) {
  :root { --head-h: 64px; }
  .site-header .wrap { position: relative; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line); padding: 4px var(--gut) 20px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .35);
  }
  .nav.open { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--fg); text-align: left; }
  .nav a:hover, .nav a[aria-current="page"] { text-decoration-line: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav-toggle { display: block; }
  /* the bar keeps the wordmark, "Reserve a table" and the menu button; the languages move into the menu */
  .head-row > .lang { display: none; }
  .lang--menu { display: flex; gap: 6px; margin: 16px 0 0; }
  .lang--menu button { border: 1px solid var(--line-strong); min-width: 52px; font-size: 12px; }
}

@media (max-width: 900px) {
  /* the photo comes first, in a 3:2 crop, so a phone's first screen is not text only */
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { order: -1; }
  .hero-photo { height: auto; aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .intro-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .menus-head { grid-template-columns: 1fr; }
  .menus-photo { max-width: 560px; }
  .mcards { grid-template-columns: 1fr; gap: 20px; }
  .mcard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .mcard-photo { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .mcard-body { align-self: center; }
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .private { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-map, .visit-map iframe { min-height: 380px; }
  .visit-info { grid-template-columns: 1fr 1fr; }
  .group, .know-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-head-grid { grid-template-columns: 1fr; }
  .g-photo { display: none; }
  .know-photo { display: none; }
  .know-list { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero .wrap { padding-top: 16px; padding-bottom: 64px; }
  .hero-grid { gap: 26px; }
  .hero h1 { font-size: clamp(42px, 12.2vw, 56px); margin: 16px 0 18px; }
  .hero .lead { margin-bottom: 26px; }
  .hero-note { margin-top: 26px; padding-top: 18px; gap: 8px 18px; }
  .actions .btn { flex: 1 1 auto; }

  .pad { padding: 72px 0; }
  .pad-b { padding-bottom: 72px; }
  .section-head h2, .split-copy h2, .know-side h2, .private-copy h2 { font-size: clamp(34px, 9.6vw, 42px); }
  .intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .statement { font-size: clamp(36px, 10.4vw, 46px); margin-bottom: 20px; }
  .intro-copy p { font-size: 17px; }
  .intro-photo { width: 62%; justify-self: end; }

  .menus-photo { display: none; }   /* on a phone three photos in a row is one too many: the two cards carry it */
  .mcard { display: flex; flex-direction: column; }
  .mcard-photo { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .mcard-body { padding: 22px 20px 26px; }
  .mcard h3 { font-size: 30px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-photo img { aspect-ratio: 4 / 4.2; }
  .team b { font-size: 25px; }

  .private { grid-template-columns: 1fr; }
  .private-photo { order: -1; min-height: 0; height: auto; aspect-ratio: 4 / 3.4; object-position: 50% 55%; }
  .private-copy { padding: 28px 22px 32px; }

  .status--card { font-size: 22px; }
  .hours-table { font-size: 14px; }
  .hours-table tbody th { width: auto; }
  .hours-table td, .hours-table thead th + th { padding-left: 10px; }
  .visit-map, .visit-map iframe { min-height: 320px; }
  .visit-info { grid-template-columns: 1fr; gap: 36px; }
  .info-stack { gap: 36px; }
  .socials { flex-direction: row; flex-wrap: wrap; }

  .page-head h1 { font-size: clamp(40px, 11.4vw, 54px); }
  .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump a { padding: 8px 14px; font-size: 14px; }
  .mcard-price .price, .mcard-price .num { font-size: 25px; }
  .list-cta .btn { flex: 1 1 auto; }
  .band img { aspect-ratio: 4 / 3; }
  .menu-sec { padding: 56px 0; }
  .menu-sec:not(.light) + .menu-sec:not(.light) .group { padding-top: 56px; }
  .page-head + .menu-sec { padding-top: 48px; }
  .g-head h2 { font-size: 38px; }
  .course { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0; }
  .c-name { font-size: 24px; }
  .sp-row { gap: 6px 16px; }
  .sp-name { font-size: 21px; }
  .sp-prices .price { font-size: 19px; }
  .p-row { gap: 16px; padding: 16px 0; }
  .t-name { font-size: 22px; }
  .wine-group .t-name { font-size: 21px; }
  .t-desc { font-size: 14px; }
  .p-meta { flex-direction: column; align-items: flex-end; gap: 2px; }
  .p-meta .price { order: -1; }
  .know-text > p:first-child { font-size: 21px; }
  .know-list { grid-template-columns: 1fr; }
  .know-list dt { font-size: 22px; }

  .closing h2 { font-size: clamp(36px, 10vw, 46px); }
  .closing .actions { width: 100%; max-width: 380px; }
  .closing-strip { flex-direction: column; align-items: center; gap: 8px; }

  .foot-grid { grid-template-columns: auto auto; justify-content: start; gap: 28px 40px; }
}

/* the narrowest phones: the header holds the wordmark, the longest button label
   ("Tafel reserveren") and the menu button side by side */
@media (max-width: 400px) {
  .brand { font-size: 22px; }
  .head-row { gap: 8px; }
  .head-book { padding: 0 12px; letter-spacing: .08em; font-size: 11px; }
  .today-tag { display: block; width: max-content; margin: 5px 0 0; }
}
@media (max-width: 360px) {
  /* the hours table: three columns of times have to fit a 320px phone */
  .hours-card { padding: 24px 18px; }
  .hours-table { font-size: 13.5px; }
  .hours-table td, .hours-table thead th + th { padding-left: 8px; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 40px; }
  .t-name { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero-copy > * { animation: none; }
  .res-note[open] { animation: none; }
  .toast { transition: none; }
}