/* Ferelith dining room & bar · SIGNATURE tier ($1,500), restaurant vertical.
   The same restaurant, palette, type and photo grade as the Essential site (essential/restaurant,
   built on its stylesheet), one level up: a layered parallax hero, scroll reveals and counters, a
   filterable gallery with a lightbox, a reviews slider, an FAQ accordion, a reservation request form,
   a custom cursor and reading-progress navigation. Still below Immersive: photography and motion
   only, no WebGL, no 3D, no video.

   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.
   Every movement stops for prefers-reduced-motion (bottom of this file). */

/* Georgia, sized to Fraunces, for the moment before the web font arrives: the headlines then break
   into the same lines and nothing below them jumps when Fraunces swaps in. Measured in Chrome on
   01-10-2026 (Fraunces 300 vs Georgia, same size): display cuts (opsz 120-144) are 0.80 as wide
   upright and 0.725 italic; the text cut (opsz 40) 0.99. Ascent 0.98 em, descent 0.26 em in
   Fraunces; the overrides are divided by size-adjust because the browser multiplies them back. */
@font-face { font-family: "Fraunces Display Fallback"; src: local("Georgia"); size-adjust: 80%; ascent-override: 122.5%; descent-override: 32.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Display Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 72.5%; ascent-override: 135%; descent-override: 36%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 99%; ascent-override: 99%; descent-override: 26.3%; line-gap-override: 0%; }
/* Arial, sized to Inter Tight (body 0.955 as wide; the 500 weight in capitals 0.905). */
@font-face { font-family: "Inter Tight Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 95.5%; ascent-override: 101.6%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 90.5%; ascent-override: 107.2%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 92%; ascent-override: 106.5%; descent-override: 28.3%; line-gap-override: 0%; }

: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 */
  --error-dark: #e8a08a;      /* error text on dark: 8.1:1 */
  --error-light: #9b2f1c;     /* error text on bone: 6.6:1 */

  /* 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;
  --err: var(--error-dark);
  --field-bg: #15110e;

  --serif: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --serif-display: "Fraunces", "Fraunces Display Fallback", Georgia, serif;   /* h1, h2, the big numbers */
  --sans: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, sans-serif;
  --r: 3px;
  --gut: clamp(20px, 5vw, 48px);
  --head-h: 72px;
  --tabs-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  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;
  --err: var(--error-light);
  --field-bg: #f7f3ec;
  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) + var(--tabs-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;
}
body[data-page="menu"] { --tabs-h: 58px; }
p, h1, h2, h3, figure, ul, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { 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 { font-family: var(--serif-display); 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: a fill that sweeps in from the left on hover ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  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: color .35s var(--ease), border-color .35s var(--ease), transform .15s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.98); }
.btn-fill { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-fill::before { background: var(--btn-hover); }
.btn-fill:hover { border-color: var(--btn-hover); }
.light .btn-fill:hover { color: var(--bone); }
.btn-ghost:hover { 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); }
.tl-a { display: inline-block; transition: transform .35s var(--ease); }
.text-link:hover .tl-a { transform: translateX(4px); }

/* ---------- 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);
  transition: background-color .4s ease, border-color .4s ease;
}
/* on the home page the header floats over the hero until the page moves */
body[data-page="home"] .site-header:not(.scrolled) {
  background: linear-gradient(rgba(12, 10, 8, .55), rgba(12, 10, 8, 0));
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
.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: 28px; }
.nav > a:not(.btn) {
  position: relative;
  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 */
  transition: color .2s ease;
}
/* the line under a link grows from the left on hover, and stays for the page or section you are in */
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease);
}
.nav > a:not(.btn):hover, .nav > a[aria-current]:not(.btn), .nav > a.is-active { color: var(--fg); }
.nav > a:not(.btn):hover::after, .nav > a[aria-current]:not(.btn)::after, .nav > a.is-active::after { transform: scaleX(1); }
.nav .btn { margin-left: 4px; }

/* reading progress: a slim brass line along the bottom edge of the header */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; }

.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); }
.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); animation: breathe 2.6s ease-in-out infinite; }
.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); }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(159, 176, 122, .06); } }
.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: four layers ================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--black);
  display: flex; align-items: flex-end;
  min-height: clamp(640px, 100svh, 940px);
  margin-top: calc(-1 * var(--head-h)); padding-top: var(--head-h);   /* runs under the floating header */
}
.hero-layers { position: absolute; inset: 0; z-index: -1; }
.hl { position: absolute; will-change: transform; }
/* 1 the room, slowest. Wider than the screen and pinned left, so the candle sits just right of the copy */
.hl-back { inset: -9% 0; overflow: hidden; }
.hl-back img {
  position: absolute; top: 0; left: 0; width: 132%; max-width: none; height: 100%;
  object-fit: cover; object-position: 0 50%;
}
/* 2 candlelight: out-of-focus lights, screened over the room, drifting. It fades out over the lower
   half, so its big soft lights stay up in the room and never sit as grey blots near the copy. */
.hl-glow {
  inset: -12% -6%; mix-blend-mode: screen; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, .35) 50%, transparent 66%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, .35) 50%, transparent 66%);
}
.hl-glow img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, .92) 0%, rgba(12, 10, 8, .78) 28%, rgba(12, 10, 8, .28) 52%, rgba(12, 10, 8, 0) 70%),
    linear-gradient(0deg, var(--black) 0%, rgba(12, 10, 8, .55) 22%, rgba(12, 10, 8, 0) 46%);
}
/* 3 and 4: two framed photos, the fastest layers */
.hl-card { margin: 0; border-radius: var(--r); }
.hl-card img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); box-shadow: 0 34px 70px rgba(0, 0, 0, .55); }
.hl-card::after {   /* a thin brass frame a few pixels off the photo */
  content: ""; position: absolute; inset: -9px; border: 1px solid rgba(201, 164, 108, .38); border-radius: 4px; pointer-events: none;
}
.hl-glass {
  right: max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut)));
  top: calc(var(--head-h) + 7%); width: clamp(190px, 18.5vw, 290px); aspect-ratio: 4 / 5;
}
.hl-plate {
  right: calc(max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut))) + clamp(150px, 15vw, 240px));
  bottom: 9%; width: clamp(150px, 14vw, 220px); aspect-ratio: 4 / 5;
}

.hero-inner { position: relative; width: 100%; padding-top: 40px; padding-bottom: clamp(56px, 9vh, 104px); }
.hero-copy { max-width: 600px; }
.hero h1 {
  font-size: clamp(48px, 5.8vw, 82px); line-height: .98; letter-spacing: -.03em;
  font-variation-settings: "opsz" 144; margin: 22px 0 26px;
}
.hero h1 em { display: block; color: var(--fg); }
/* measures in em, not ch: ch follows the font, so the fallback face would wrap the lines differently */
.lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: var(--fg-soft); max-width: 25.4em; }
.hero .lead { margin-bottom: 34px; color: #d6cdbd; }
.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-strong);
}
.hero-addr { font-size: 14px; color: var(--fg-soft); }

/* the headline arrives word by word (the script wraps the words; without it the line just shows) */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.hero.ready h1 .w > span { transform: none; }

/* the rest of the copy rises after it; the room settles; the photos come in last */
html.js .hero-copy > :not(h1) { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s var(--ease); }
html.js .hero.ready .hero-copy > :not(h1) { opacity: 1; transform: none; }
html.js .hero.ready .hero-copy > .eyebrow { transition-delay: 0s; }
html.js .hero.ready .hero-copy > .lead { transition-delay: .45s; }
html.js .hero.ready .hero-copy > .actions { transition-delay: .58s; }
html.js .hero.ready .hero-copy > .hero-note { transition-delay: .7s; }
html.js .hl-back img { transform: scale(1.08); transition: transform 2.8s cubic-bezier(.2, .6, .2, 1); }
html.js .hero.ready .hl-back img { transform: none; }
html.js .hl-glow img { opacity: 0; transition: opacity 2.4s ease .4s; }
html.js .hero.ready .hl-glow img { opacity: 1; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, -2%, 0) scale(1.02); }
}
html.js .hl-card img { opacity: 0; transform: translateY(40px); transition: opacity 1.2s ease, transform 1.4s var(--ease); }
html.js .hl-card::after { opacity: 0; transition: opacity 1.2s ease .3s; }
html.js .hero.ready .hl-glass img { opacity: 1; transform: none; transition-delay: .55s; }
html.js .hero.ready .hl-plate img { opacity: 1; transform: none; transition-delay: .8s; }
html.js .hero.ready .hl-card::after { opacity: 1; transition-delay: 1.3s; }
/* failsafe: if the script never runs, the hero still shows after a moment */
html.js .hero-copy > :not(h1), html.js .hl-card img, html.js .hl-glow img { animation-name: failsafe; animation-duration: .6s; animation-delay: 3s; animation-fill-mode: forwards; }
html.js .hl-glow img { animation: failsafe .6s 3s forwards, drift 22s ease-in-out 3.6s infinite alternate; }
html.js .hero.ready .hl-glow img { animation: drift 22s ease-in-out infinite alternate; }
html.js .hero.ready .hero-copy > :not(h1), html.js .hero.ready .hl-card img { animation: none; }
@keyframes failsafe { to { opacity: 1; transform: none; } }

.scroll-cue {
  position: absolute; z-index: 1; bottom: 30px; right: max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut)));
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-mute); text-decoration: none;
}
.scroll-cue i { position: relative; display: block; width: 1px; height: 44px; background: var(--line-strong); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--brass); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-16px); } to { transform: translateY(44px); } }
.scroll-cue:hover { color: var(--fg); }

/* ---------- 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, the text, then the restaurant in numbers */
.intro { padding-top: clamp(48px, 6vw, 88px); }
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px clamp(36px, 7vw, 112px); align-items: end;
}
.statement { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.02; letter-spacing: -.024em; max-width: 13ch; }
.intro-text { color: var(--fg-soft); font-size: 18px; max-width: 46ch; }
.counters { margin-top: clamp(56px, 7vw, 96px); }
.counters > .eyebrow { margin-bottom: 18px; }
.count-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.count-list li { padding: 26px 20px 4px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.count-list li + li { padding-left: 22px; }
.count-list li:last-child { border-right: 0; }
.count { font: 300 clamp(52px, 6vw, 84px)/.9 var(--serif-display); font-variation-settings: "opsz" 144; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--fg); }
.count-l { font-size: 14.5px; line-height: 1.4; color: var(--fg-soft); }
.count-one .count { color: var(--accent); }

/* the menus at a glance */
.menus-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8px clamp(36px, 6vw, 96px);
  align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px);
}
.menus-head .section-head { margin-bottom: 0; }
.menus-head .section-head h2 { margin-bottom: 0; }
.menus-side > p:first-child { color: var(--fg-soft); max-width: 50ch; }
.menus-side .more { margin-top: 4px; }
.mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.mcard {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mcard:hover, html.js .mcards.done > .mcard:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(26, 20, 16, .16); }
.mcard-media { overflow: hidden; background: var(--espresso); }
.mcard-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.1s var(--ease); }
.mcard:hover .mcard-photo { transform: scale(1.045); }
.mcard:nth-child(1) .mcard-photo { object-position: 50% 64%; }
.mcard:nth-child(2) .mcard-photo { object-position: 50% 52%; }
.mcard-body { position: relative; 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; }
/* the whole card is the link to that part of the menu */
.mcard-link { color: inherit; text-decoration: none; }
.mcard-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mcard-link:focus-visible { outline: 0; }
.mcard:has(.mcard-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.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; padding-right: 36px; }
.mcard-arrow {
  position: absolute; right: clamp(22px, 2.6vw, 34px); bottom: clamp(24px, 2.8vw, 34px);
  font-size: 20px; color: var(--accent); transition: transform .45s var(--ease);
}
.mcard:hover .mcard-arrow { transform: translateX(6px); }
.more { margin-top: clamp(14px, 2.6vw, 30px); }

/* photos in a frame that drift a little slower than the page (the script moves the img) */
.pframe, .private-media, .band, .g-photo-frame, .know-frame { overflow: hidden; border-radius: var(--r); background: var(--espresso); }
html.js [data-pspeed] { transform: scale(1.14); will-change: transform; }

/* the room */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.split-photo .pframe img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.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 */
.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-media { border-radius: 0; min-height: 460px; position: relative; }
.private-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.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; }

/* ================= gallery ================= */
.gal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); }
.gal-head .section-head { margin-bottom: 0; }
.gal-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  min-height: 44px; padding: 0 18px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--line-strong); background: none; color: var(--fg-soft);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.filter:hover { color: var(--fg); border-color: var(--fg); }
.filter[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--bone); }
.gal-count { font-size: 13.5px; color: var(--fg-mute); }
.gal-count .gc-n { font-variant-numeric: tabular-nums; }
.gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.gal-grid > li[hidden] { display: none; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--espresso); aspect-ratio: 4 / 5; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s ease; }
.tile::after {   /* a soft vignette and a small "open" mark on hover and focus */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(12, 10, 8, 0) 50%, rgba(12, 10, 8, .5) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.tile-mark {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(236, 228, 214, .92); color: var(--espresso);
  opacity: 0; transform: scale(.8); transition: opacity .35s ease, transform .45s var(--ease);
}
.tile-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile:hover .tile-mark, .tile:focus-visible .tile-mark { opacity: 1; transform: none; }
html.cursor-on .tile .tile-mark { display: none; }   /* the cursor says "View" instead */
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* filtering: tiles fade out, the rest glide to their new place (the script does the gliding) */
.gal-grid > li.out { opacity: 0; transform: scale(.94); transition: opacity .28s ease, transform .28s ease; }

/* ---------- lightbox ---------- */
.lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(8, 6, 5, .96); color: var(--bone); overflow: hidden;
}
.lb::backdrop { background: rgba(8, 6, 5, .7); }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lbIn .35s ease; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-stage { position: relative; display: grid; place-items: center; padding: 64px clamp(16px, 6vw, 96px) 12px; min-height: 0; touch-action: pan-y; user-select: none; }
.lb-fig { display: grid; justify-items: center; gap: 14px; max-height: 100%; min-height: 0; }
.lb-img {
  max-width: min(100%, 1100px); max-height: calc(100dvh - 236px); width: auto; height: auto; object-fit: contain;
  border-radius: var(--r); background: #15110e; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transition: opacity .35s ease, filter .5s ease, transform .35s var(--ease);
}
.lb-img.loading { filter: blur(8px); }
.lb-img.swap { opacity: 0; }
.lb-cap { font: 300 19px/1.35 var(--serif); font-variation-settings: "opsz" 40; color: #d6cdbd; text-align: center; max-width: 72ch; }
.lb-bar { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 6px 16px 22px; }
.lb-count { font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--fg-mute); min-width: 8ch; text-align: center; font-variant-numeric: tabular-nums; }
.lb-nav { display: flex; gap: 8px; }
.lb-btn, .lb-close {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(236, 228, 214, .3); background: rgba(12, 10, 8, .5); color: var(--bone);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.lb-btn:hover, .lb-close:hover { background: var(--bone); color: var(--espresso); border-color: var(--bone); }
.lb-btn svg, .lb-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.lb .lb-bar { order: 2; }
html:has(.lb[open]) { overflow: hidden; }

/* ================= reviews ================= */
.reviews { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
/* the photo at the back (-2), the espresso wash over it (-1), the copy on top. The photo is only the
   lower half of the room (the bright lamp is cropped out), so the wash can stay light enough to see it */
.reviews-bg { position: absolute; inset: -10% 0; z-index: -2; }
.reviews-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.reviews::before {   /* the espresso wash: a little deeper behind the quotes, lighter at the sides */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 10, 8, .82), rgba(12, 10, 8, .66) 46%, rgba(12, 10, 8, .86)),
    linear-gradient(90deg, rgba(12, 10, 8, 0) 30%, rgba(12, 10, 8, .4) 62%, rgba(12, 10, 8, .2));
}
.reviews-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(36px, 6vw, 96px); align-items: start; }
.reviews-head h2 { font-size: clamp(36px, 4.3vw, 58px); margin: 16px 0 22px; }
.demo-tag {
  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: 7px 9px 6px;
}
.reviews-note { grid-column: 2; font-size: 13.5px; color: var(--fg-mute); margin-top: -4px; }
.slider { position: relative; min-width: 0; border-radius: var(--r); }
.slider:focus-visible { outline-offset: 8px; }
.slides-view { overflow: hidden; touch-action: pan-y; cursor: grab; }
.slides-view.dragging { cursor: grabbing; }
.slides { display: flex; transition: transform .7s var(--ease); }
.slides.dragging { transition: none; }
.slide { flex: 0 0 100%; min-width: 0; padding-right: 2px; user-select: none; }
.slide blockquote { margin: 0; }
.slide blockquote p {
  font: 300 clamp(25px, 2.7vw, 37px)/1.28 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.012em; color: var(--bone);
}
.slide blockquote p::before { content: "“"; color: var(--brass); }
.slide blockquote p::after { content: "”"; color: var(--brass); }
.slide figcaption { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.initials {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(201, 164, 108, .5); color: var(--brass); font: 500 12px/1 var(--sans); letter-spacing: .1em;
}
.who { display: flex; flex-direction: column; gap: 2px; }
.who b { font: 400 17px/1.3 var(--sans); color: var(--bone); }
.ctx { font-size: 14px; color: var(--fg-mute); }
.slide:not(.is-on) { opacity: .25; transition: opacity .6s ease; }
.slide.is-on { opacity: 1; transition: opacity .6s ease; }
.slider-ui { display: flex; align-items: center; gap: 14px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
.sl-btn {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: none; color: var(--bone);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.sl-btn:hover { background: var(--bone); color: var(--espresso); border-color: var(--bone); }
.sl-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sl-dots { display: flex; gap: 0; }
.sl-dot { width: 32px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.sl-dot::before { content: ""; position: absolute; left: 6px; right: 6px; top: 21px; height: 2px; background: rgba(236, 228, 214, .25); transition: background-color .3s ease; }
.sl-dot[aria-current="true"]::before { background: var(--brass); }
.sl-dot:hover::before { background: rgba(236, 228, 214, .6); }
.sl-pos { margin-left: auto; font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--fg-mute); }

/* ================= 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;
}
.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); }
.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); }

/* the map, with this demo's own card floating over it */
.map-box { position: relative; display: grid; min-height: 480px; border-radius: var(--r); overflow: hidden; }
/* 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 (see the Essential notes). */
.visit-map { position: relative; z-index: 0; min-height: 480px; contain: size; background: #ded5c6; }
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; }
.leaflet-container { font-family: var(--sans); background: #ded5c6; }
.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; }
.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; }
.map-card {
  --bg: var(--black); --fg: var(--bone); --fg-soft: #c9bfae; --fg-mute: #a39784; --accent: var(--brass); --line: rgba(236, 228, 214, .14);
  --line-strong: rgba(236, 228, 214, .28); --open: #9fb07a; --soon: var(--brass);
  position: absolute; z-index: 2; left: 16px; bottom: 16px; width: min(300px, calc(100% - 32px));
  background: rgba(16, 13, 10, .94); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 22px 16px; box-shadow: 0 20px 50px rgba(12, 10, 8, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .35s ease, transform .45s var(--ease);
}
.map-card.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.mc-name { font: 300 30px/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.mc-addr { font-size: 14px; color: var(--fg-soft); margin: 6px 0 14px; }
.mc-status { font-size: 13.5px; }
.mc-hours { font-size: 13px; color: var(--fg-mute); margin-top: 6px; font-variant-numeric: tabular-nums; }
.mc-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.mc-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 11.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.mc-link:hover { color: var(--accent); }
.mc-hide {
  position: absolute; top: 10px; right: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r); cursor: pointer;
  border: 0; background: none; color: var(--fg-mute); font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.mc-hide:hover { color: var(--fg); background: rgba(236, 228, 214, .08); }
.mc-show {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; min-height: 44px; padding: 0 16px; border-radius: var(--r); cursor: pointer;
  border: 0; background: var(--espresso); color: var(--bone); font: 500 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(12, 10, 8, .3);
}
.mc-show[hidden] { 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; }
.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; }
.contact-line a { display: inline-block; padding: 13px 0 4px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color .2s ease; }
.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(40px, 5vw, 72px); }
.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: 30em; font-size: 17px; }
.band { position: relative; aspect-ratio: 16 / 6; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* the tab bar: sticks under the header, and its brass line follows the part you are reading */
.tabs {
  position: sticky; top: var(--head-h); z-index: 20;
  background: rgba(12, 10, 8, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.tabs-row { position: relative; display: flex; gap: 6px; min-height: var(--tabs-h); align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.tabs-row::-webkit-scrollbar { display: none; }
.tabs a {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; white-space: nowrap;
  font: 500 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); text-decoration: none;
  transition: color .25s ease;
}
.tabs a:hover, .tabs a.is-active { color: var(--fg); }
.tabs-ink {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brass);
  transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s ease; opacity: 0;
}
.tabs-ink.on { opacity: 1; }

.menu-sec { padding: clamp(64px, 8vw, 112px) 0; }
.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;
}
.group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); }
.g-head { align-self: start; position: sticky; top: calc(var(--head-h) + var(--tabs-h) + 32px); }
.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-frame { max-width: 340px; margin-top: 28px; aspect-ratio: 4 / 3; }
.g-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.g-photo-frame:hover .g-photo { transform: scale(1.05); }

/* four or six courses */
.length { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.length-l { font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); }
.length-btns { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 4px; }
.len-btn {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: none; cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft);
  transition: background-color .3s ease, color .3s ease;
}
.len-btn:hover { color: var(--fg); }
.len-btn[aria-pressed="true"] { background: var(--espresso); color: var(--bone); }
.length-live { flex-basis: 100%; font-size: 14px; color: var(--fg-soft); }

/* the ticket: what the chosen length costs, with its pairings. The toggle drives it and the numbers
   roll to their new value */
.ticket {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px 32px; align-items: center;
  margin: 4px 0 30px; padding: 24px 28px; border-radius: var(--r);
  background: var(--paper-card); border: 1px solid var(--line); position: relative; overflow: hidden;
}
.ticket::before {   /* a brass rule that sweeps across on every change */
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--brass);
  transform: scaleX(0); transform-origin: 0 50%;
}
.ticket.swept::before { animation: sweep .9s var(--ease); }
@keyframes sweep { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.tk-name { font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tk-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.tk-price .price { font: 300 58px/1 var(--serif-display); font-variation-settings: "opsz" 144; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--fg); }
.tk-pp { font-size: 14.5px; color: var(--fg-soft); }
.tk-pairs { border-left: 1px solid var(--line-strong); padding-left: 28px; display: grid; gap: 10px; }
.tk-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; }
.tk-pn { font: 300 21px/1.2 var(--serif); font-variation-settings: "opsz" 40; }
.tk-pair dd { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 14px; color: var(--fg-soft); }
.tk-pair .price { font-size: 20px; color: var(--fg); min-width: 2.6ch; text-align: right; }
.price-roll { display: inline-block; transition: opacity .3s ease; }

.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);
  transition: opacity .5s ease;
}
.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; transition: color .5s ease; }
.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;
}
/* with four courses chosen, 2 and 4 step back (still readable: 5.0:1 at this opacity on bone) */
html.js .courses[data-len="four"] > .course--six, .courses[data-len="four"] > .course--six { opacity: .62; }
.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); position: relative; isolation: isolate;
}
.sp-row::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: var(--r); background: rgba(122, 90, 38, .09); opacity: 0; transition: opacity .45s ease; }
.sp-row.is-picked::before { opacity: 1; }
.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; }
.book-len { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.book-len .btn { gap: 12px; }
.bk-p { font-size: 13px; letter-spacing: .02em; opacity: .8; padding-left: 12px; border-left: 1px solid currentColor; line-height: 1.1; }
.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); --line-strong: rgba(236, 228, 214, .26);
  --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 .btn-fill:hover { color: var(--espresso); }
.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; }

.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); }
.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; }

.know-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.know-frame { max-width: 340px; margin-top: 30px; aspect-ratio: 4 / 4.6; }
.know-photo { width: 100%; height: 100%; object-fit: cover; }
.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 */
.closing { padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
.closing--rule .closing-inner { 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; }
.closing--rule { padding-top: 0; }
.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; }
.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);
}

/* ================= reserve page ================= */
/* a compact header (about 200 px): title and intro on the left, the live status and the phone for
   tonight on the right, so the first screen already holds the form */
.page-head--reserve { padding: clamp(28px, 3.4vw, 46px) 0 clamp(26px, 2.8vw, 38px); border-bottom: 1px solid var(--line); }
.rh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px clamp(32px, 5vw, 80px); align-items: end; }
.page-head--reserve h1 { font-size: clamp(40px, 4.4vw, 62px); margin: 12px 0 12px; }
.page-head--reserve .lead { max-width: 34.7em; font-size: 16.5px; }
.rh-side { display: grid; justify-items: end; gap: 6px; text-align: right; }
.rh-side .status { font-size: 14px; }
.rh-call a {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px;
  min-height: 44px; padding: 10px 0 6px; color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); transition: border-color .2s ease;
}
.rh-call a:hover { border-color: var(--fg); }
.rh-call-l { font-size: 14px; color: var(--fg-soft); }
.rh-call .num { font: 300 25px/1.1 var(--serif); font-variation-settings: "opsz" 40; letter-spacing: -.01em; }
.req { padding: clamp(28px, 3.4vw, 48px) 0 clamp(72px, 9vw, 120px); }

/* what a "Book this" link filled in */
.prefill { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.prefill[hidden] { display: none; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 14px 7px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper-card);
  font-size: 14.5px; line-height: 1.3; color: var(--fg); animation: rise .6s var(--ease);
}
.pf-chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-ink); }

/* the date: one button per open day, the calendar for anything further out */
.field.f-days, .field.f-slots { display: block; }   /* not the paired-field grid: these run full width */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.days:empty { min-height: 140px; }   /* two rows, held before the script writes the buttons */
html:not(.js) .days, html:not(.js) .more-date { display: none; }
html.js .date-more:not(.is-open) { display: none; }   /* the calendar waits behind "Another date" */
.days.has-tonight { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.day, .slot { position: relative; display: block; cursor: pointer; min-width: 0; }
.day input, .slot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.day-box, .slot-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--field-bg); color: var(--fg);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--ease);
}
.day-box { min-height: 66px; padding: 8px 4px; text-align: center; }
.day.is-tonight { grid-column: span 2; }
.d-w { font: 500 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); white-space: nowrap; }
.d-d { font: 300 19px/1.1 var(--serif); font-variation-settings: "opsz" 40; white-space: nowrap; }
.is-tonight .d-w { color: var(--accent); }
.day:hover .day-box, .slot:hover .slot-box { border-color: rgba(26, 20, 16, .5); }
.day:active .day-box, .slot:active .slot-box { transform: scale(.96); }
.day input:checked + .day-box, .slot input:checked + .slot-box { background: var(--espresso); border-color: var(--espresso); color: var(--bone); }
.day input:checked + .day-box .d-w { color: #c9bfae; }
.day input:focus-visible + .day-box, .slot input:focus-visible + .slot-box { outline: 2px solid var(--accent); outline-offset: 3px; }
.day input:disabled + .day-box, .slot input:disabled + .slot-box { opacity: .42; background: transparent; border-style: dashed; cursor: not-allowed; }
.slot input:disabled + .slot-box { text-decoration: line-through; text-decoration-thickness: 1px; }
.day:has(input:disabled), .slot:has(input:disabled) { cursor: not-allowed; }
.hint-private { margin: 12px 0 0; color: var(--fg); }
.hint-private::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--brass-ink); vertical-align: 1px; }
.hint-private[hidden] { display: none; }
.more-date {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--fg);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.more-date .lbl { border-bottom: 1px solid var(--line-strong); padding: 6px 0 5px; transition: border-color .2s ease; }
.more-date:hover .lbl { border-color: var(--fg); }
.more-date[hidden] { display: none; }
.md-i { position: relative; width: 9px; height: 9px; }
.md-i::before, .md-i::after { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.md-i::after { transform: rotate(90deg); }
.more-date[aria-expanded="true"] .md-i::after { transform: rotate(0deg); }
.date-more { margin-top: 10px; max-width: calc(50% - 12px); }
.date-more[hidden] { display: none; }
.date-more label { display: block; font-size: 14px; color: var(--fg-soft); margin-bottom: 6px; }
.field .date-more input { min-height: 50px; }
/* an error on a group: a red rule down its left side (the message itself is under the group) */
.f-days.has-err, .f-slots.has-err { border-left: 3px solid var(--err); padding-left: 14px; margin-left: -17px; }

/* the time: seven radio buttons in a row */
.slots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.slot-box { min-height: 50px; padding: 0 4px; font-size: 16px; font-variant-numeric: tabular-nums lining-nums; }
.req-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.req-main { min-width: 0; }

.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; }
.f-wide { grid-column: 1 / -1; }
.field { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; min-width: 0; margin-bottom: 26px; }
.field > label { grid-row: 1; align-self: end; }
.field > .hint { grid-row: 2; }
.field > input, .field > .sel, .field > textarea { grid-row: 3; }
.field > .f-after { grid-row: 4; }
.f-menu { display: block; }
.field > label, .field > legend {
  font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: 6px; padding: 0;
}
.opt { color: var(--fg-mute); letter-spacing: .06em; text-transform: none; font-weight: 400; font-size: 13px; }
.hint { font-size: 14px; line-height: 1.45; color: var(--fg-soft); margin-bottom: 10px; }
.f-after .hint-today { margin: 10px 0 0; color: var(--fg); }
.hint-today a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--field-bg); color: var(--fg);
  font-size: 16px; line-height: 1.4;   /* 16px: phones do not zoom into the field */
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field textarea { resize: vertical; min-height: 116px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(26, 20, 16, .5); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--espresso); box-shadow: 0 0 0 3px rgba(122, 90, 38, .28); }
.field input[type="date"] { min-height: 50px; }
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.sel::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.5px solid var(--fg-soft); border-bottom: 1.5px solid var(--fg-soft); transform: rotate(45deg);
}
.sel--half { max-width: calc(50% - 12px); }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.err { font-size: 14px; line-height: 1.4; color: var(--err); font-weight: 500; }
.err:not(:empty) { margin-top: 8px; display: flex; gap: 8px; }
.err:not(:empty)::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--err); color: #fff; font: 500 12px/18px var(--sans); text-align: center; }

.radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.radio { position: relative; cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.r-box {
  display: flex; flex-direction: column; gap: 3px; height: 100%; min-height: 64px; padding: 13px 14px 12px 44px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--field-bg);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; position: relative;
}
.r-box::before {   /* the radio dot */
  content: ""; position: absolute; left: 15px; top: 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--fg-soft); background: var(--field-bg); transition: box-shadow .2s ease, border-color .2s ease;
}
.r-name { font: 300 20px/1.2 var(--serif); font-variation-settings: "opsz" 40; color: var(--fg); }
.r-price { font-size: 13.5px; color: var(--fg-soft); }
.r-price .price { font-size: 13.5px; }
.radio:hover .r-box { border-color: rgba(26, 20, 16, .5); }
.radio input:checked + .r-box { border-color: var(--espresso); box-shadow: 0 0 0 1px var(--espresso); background: var(--paper-card); }
.radio input:checked + .r-box::before { border-color: var(--espresso); box-shadow: inset 0 0 0 4px var(--field-bg), inset 0 0 0 9px var(--espresso); }
.radio input:focus-visible + .r-box { outline: 2px solid var(--accent); outline-offset: 3px; }
.radio input.flash + .r-box { animation: flash 1.2s ease; }
@keyframes flash { 0%, 100% { background: var(--paper-card); } 30% { background: rgba(201, 164, 108, .32); } }

.f-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.f-send { min-width: 220px; }
.f-demo { font-size: 14px; color: var(--fg-mute); }

.err-sum {
  margin-bottom: 30px; padding: 20px 22px; border: 1px solid var(--err); border-left-width: 4px; border-radius: var(--r);
  background: rgba(155, 47, 28, .05);
}
.err-sum:focus { outline: 2px solid var(--err); outline-offset: 3px; }
.es-title { font: 400 22px/1.25 var(--serif); font-variation-settings: "opsz" 40; color: var(--fg); margin-bottom: 8px; }
.es-list li { margin-top: 0; }
.es-list a { display: inline-block; padding: 9px 0;   /* 44 px tall to tap */ color: var(--err); font-weight: 500; text-underline-offset: 3px; }

.confirm {
  padding: clamp(28px, 4vw, 48px); background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--r);
  animation: rise .7s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.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;
}
.cf-title { font-size: clamp(34px, 4vw, 50px); margin: 18px 0 14px; }
.cf-title:focus { outline: none; }
.cf-p1 { color: var(--fg-soft); max-width: 58ch; }
.cf-box { margin: 26px 0; padding: 20px 0 6px; border-top: 1px solid var(--line-strong); }
.cf-h { font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 8px; }
.cf-sum { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); }
.cf-sum dt, .cf-sum dd { padding: 11px 0; border-bottom: 1px solid var(--line); }
.cf-sum dt { font-size: 14px; color: var(--fg-mute); padding-right: 20px; }
.cf-sum dd { font-size: 16px; color: var(--fg); overflow-wrap: anywhere; white-space: pre-line; }
.cf-demo { font-weight: 500; color: var(--fg); }
.cf-upsell { color: var(--fg-soft); margin-top: 8px; max-width: 58ch; }
.confirm .actions { margin-top: 26px; }
.confirm .actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }

.req-side { display: grid; gap: 30px; position: sticky; top: calc(var(--head-h) + 28px); }
.side-photo { aspect-ratio: 4 / 4.2; }
.side-photo img { width: 100%; height: 100%; object-fit: cover; }
.side-h { font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.steps { counter-reset: step; border-top: 1px solid var(--line-strong); }
.steps li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg-soft);
}
.steps li::before { content: counter(step, decimal-leading-zero); counter-increment: step; font: 500 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--accent); }
.call-line a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0 8px; min-height: 44px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.call-line a:hover { border-color: var(--fg); }
.call-line .num { font: 300 26px/1.2 var(--serif); font-variation-settings: "opsz" 40; }
.call-line .soft { font-size: 13.5px; color: var(--fg-mute); }
.side-note { margin-top: 12px; font-size: 14.5px; color: var(--fg-soft); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(32px, 5vw, 80px); align-items: start; }
.faq-grid .section-head { position: sticky; top: calc(var(--head-h) + 32px); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { font: inherit; }
.faq-q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left;
  min-height: 64px; padding: 18px 0; border: 0; background: none; cursor: pointer; color: var(--fg);
  font: 300 clamp(21px, 2vw, 25px)/1.25 var(--serif); font-variation-settings: "opsz" 40;
  transition: color .25s ease;
}
.faq-q button:hover { color: var(--accent); }
.fq-i { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform .45s var(--ease), border-color .25s ease, background-color .25s ease; }
.fq-i::before, .fq-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: currentColor; transition: transform .45s var(--ease); }
.fq-i::after { transform: rotate(90deg); }
.faq-q button[aria-expanded="true"] .fq-i { transform: rotate(180deg); border-color: var(--accent); }
.faq-q button[aria-expanded="true"] .fq-i::after { transform: rotate(0deg); }
html.js .faq-a { display: none; overflow: hidden; }
html.js .faq-a.is-open { display: block; }
.faq-a.is-moving { transition: height .45s var(--ease); }
.faq-in { padding: 0 52px 24px 0; }
.faq-p { color: var(--fg-soft); max-width: 62ch; }
.faq-more .text-link { padding-top: 14px; }

/* ================= 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-status { margin-top: 12px; font-size: 13.5px; }
.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; }
.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); }
.foot-small::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(236, 228, 214, .12); }
.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, and on hover a brighter one grows in
   from the left over it; 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 { position: relative; display: inline-block; min-width: 44px; padding: 12px 0; line-height: 20px; }
.site-footer .xtier a { color: rgba(236, 228, 214, .86); border-bottom: 0; transition: color .2s ease; }
.site-footer .xtier a:hover { color: var(--bone); }
.site-footer .xtier a::before, .site-footer .xtier a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: rgba(236, 228, 214, .3);
}
.site-footer .xtier a::after { background: rgba(236, 228, 214, .75); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.site-footer .xtier a:hover::after { transform: scaleX(1); }
.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; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .xtier a::after { transition: none; }
}
@media print {
  .xtier-row { display: none !important; }
}

/* demo toast: says what a placeholder link would do on a real site */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 1200; 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);
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--brass); font-weight: 500; }

/* ---------- custom cursor (mouse only; the script switches it on) ----------
   A ring that trails the normal arrow and grows over links and buttons. The arrow itself stays
   everywhere, except over the gallery tiles and the reviews, where the ring turns into a label
   ("View", "Drag") that takes its place. On the light sections the ring turns espresso. */
.cursor { position: fixed; top: 0; left: 0; z-index: 1300; pointer-events: none; opacity: 0; display: none; }
html.cursor-on .cursor { display: block; }
.cursor {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid rgba(201, 164, 108, .9);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s ease, border-color .35s ease, opacity .3s ease;
}
html.cursor-on.cursor-live .cursor { opacity: 1; }
.cursor.grow { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(201, 164, 108, .16); }
.cursor.on-light { border-color: rgba(26, 20, 16, .62); }
.cursor.on-light.grow { background: rgba(122, 90, 38, .14); border-color: var(--brass-ink); }
.cursor-l { position: absolute; inset: 0; display: grid; place-items: center; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--espresso); opacity: 0; transition: opacity .25s ease; }
.cursor.label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--bone); border-color: var(--bone); box-shadow: 0 8px 24px rgba(12, 10, 8, .3); }
.cursor.label .cursor-l { opacity: 1; }
html.cursor-on.cursor-off .cursor { opacity: 0; }
/* the label takes the arrow's place only where it says what a click does */
html.cursor-on .slides-view, html.cursor-on .slides-view *, html.cursor-on .tile, html.cursor-on .tile * { cursor: none; }

/* a Dutch or Spanish visitor never sees the English first: the page waits for the script to put in the
   language (the head script sets .i18n-wait; at most 2.5 s, then it shows whatever is there) */
html.i18n-wait main, html.i18n-wait .site-header .wrap, html.i18n-wait .site-footer { visibility: hidden; animation: i18n-show 0s 2.5s forwards; }
@keyframes i18n-show { to { visibility: visible; } }

/* ---------- scroll reveals ---------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
/* a list whose items arrive one after another (the script sets --i on each item) */
html.js .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .stagger.in > * { opacity: 1; transform: none; }
html.js .stagger.done > * { transition-delay: 0s; }
html.js .courses.stagger.done > *, html.js .gal-grid.stagger.done > * { transition: opacity .5s ease; }
/* failsafe: if the script never runs (blocked, failed to load), everything shows after a moment. The
   script marks <html> with .js-ready as its very first step, which switches this off. */
html.js:not(.js-ready) .reveal, html.js:not(.js-ready) .stagger > * { animation: failsafe .6s 3s forwards; }

/* ================= tablet ================= */
@media (max-width: 1180px) {
  .nav { gap: 22px; }
  .nav .btn { display: none; }
  .head-book { display: inline-flex; }
  .lang { margin-left: 6px; }
}
@media (max-width: 1080px) {
  :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:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--fg); text-align: left; }
  .nav > a:not(.btn)::after { display: none; }
  .nav > a[aria-current]:not(.btn), .nav > a.is-active { color: var(--accent); }
  .nav-toggle { display: block; }
  .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; }
  body[data-page="home"] .site-header:has(.nav.open) { background: rgba(12, 10, 8, .96); }
}

@media (max-width: 900px) {
  .hl-glass { width: clamp(150px, 24vw, 220px); }
  .hl-plate { width: clamp(120px, 18vw, 170px); right: calc(var(--gut) + clamp(120px, 20vw, 190px)); bottom: auto; top: calc(var(--head-h) + 28%); }
  .hero-shade {
    background:
      linear-gradient(0deg, var(--black) 0%, rgba(12, 10, 8, .9) 30%, rgba(12, 10, 8, .45) 55%, rgba(12, 10, 8, .1) 75%),
      linear-gradient(90deg, rgba(12, 10, 8, .5), rgba(12, 10, 8, 0) 60%);
  }
  .hl-back { inset: -38% 0 8% 0; }   /* the candle sits high, above the copy, in every language */
  .hl-back img { width: 100%; object-position: 34% 50%; }
  .scroll-cue { display: none; }
  .intro-grid { grid-template-columns: 1fr; }
  .count-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .count-list li:nth-child(3) { border-right: 0; }
  .count-list li:nth-child(4) { padding-left: 0; }
  .count-list li:nth-child(n+4) { border-top: 1px solid var(--line); margin-top: 18px; }
  .menus-head { grid-template-columns: 1fr; }
  .mcards { grid-template-columns: 1fr; gap: 20px; }
  .mcard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .mcard-media { height: 100%; }
  .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); }
  .gal-head { grid-template-columns: 1fr; }
  .gal-tools { align-items: flex-start; }
  .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews-inner { grid-template-columns: minmax(0, 1fr); }
  .reviews-note { grid-column: 1; }
  .visit-grid { grid-template-columns: 1fr; }
  .map-box, .visit-map, .visit-map iframe { min-height: 420px; }
  .visit-info { grid-template-columns: 1fr 1fr; }
  .group, .know-grid { grid-template-columns: 1fr; gap: 24px; }
  .g-head { position: static; }
  .page-head-grid { grid-template-columns: 1fr; }
  .g-photo-frame, .know-frame { display: none; }
  .know-list { grid-template-columns: 1fr 1fr; }
  .req-grid { grid-template-columns: 1fr; }
  .req-side { position: static; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .req-side .side-photo { grid-row: span 2; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .section-head { position: static; margin-bottom: 8px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* tablet portrait: the hero fills the screen, the plate sits under the glass on the right (clear of the
   candle), and the scroll cue fills the corner the copy leaves */
@media (min-width: 761px) and (max-width: 900px) {
  .hero { min-height: max(640px, 100svh); }
  .hero-inner { padding-bottom: 76px; }
  .hl-plate { right: calc(var(--gut) + 34px); top: calc(var(--head-h) + 42%); }
  .scroll-cue { display: flex; bottom: 22px; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  body[data-page="menu"] { --tabs-h: 52px; }
  .hero { min-height: max(620px, 100svh); }
  .hl-glass { top: calc(var(--head-h) + 18px); right: var(--gut); width: 120px; }
  .hl-plate { display: none; }
  .hl-card::after { inset: -6px; }
  .hero-inner { padding-bottom: 40px; }
  .hero h1 { font-size: clamp(42px, 12.2vw, 56px); margin: 14px 0 16px; }
  .hero .lead { margin-bottom: 26px; font-size: 16.5px; }
  .hero-note { margin-top: 24px; padding-top: 16px; gap: 8px 18px; }
  .hero-addr { flex-basis: 100%; }   /* its own line, whatever the status says: no reflow when it changes */
  .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, .reviews-head h2 { font-size: clamp(34px, 9.6vw, 42px); }
  .statement { font-size: clamp(36px, 10.4vw, 46px); }
  .intro-text { font-size: 17px; }
  .counters { margin-top: 48px; }
  .count-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count-list li { padding: 20px 14px 18px 0; border-right: 0; }
  .count-list li + li { padding-left: 0; }
  .count-list li:nth-child(odd):not(.count-one) { border-right: 1px solid var(--line); }
  .count-list li:nth-child(even) { padding-left: 18px; }
  .count-list li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 0; }
  .count-list li.count-one { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; padding-left: 0; }
  .count { font-size: 58px; }
  .count-one .count { font-size: 48px; }

  .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; }
  .mcard-arrow { right: 20px; bottom: 24px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-photo .pframe img { aspect-ratio: 4 / 4.2; }
  .team b { font-size: 25px; }
  .private { grid-template-columns: minmax(0, 1fr); }
  .private-copy .btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
  .private-media { order: -1; min-height: 0; aspect-ratio: 4 / 3.4; }
  .private-copy { padding: 28px 22px 32px; }

  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .gal-tools { width: 100%; }
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-mark { opacity: 1; transform: none; width: 32px; height: 32px; right: 8px; bottom: 8px; background: rgba(236, 228, 214, .82); }
  .lb-stage { padding: 60px 10px 8px; }
  .lb-img { max-height: calc(100dvh - 250px); }
  .lb-cap { font-size: 17px; padding: 0 8px; }
  .lb-bar { padding-bottom: 18px; }

  .reviews { padding: 80px 0; }
  .reviews::before { background: linear-gradient(180deg, rgba(12, 10, 8, .86), rgba(12, 10, 8, .74) 50%, rgba(12, 10, 8, .9)); }
  .slide blockquote p { font-size: 24px; }
  .slider-ui { gap: 8px; margin-top: 28px; }
  .sl-dot { width: 26px; }
  .sl-dot::before { left: 4px; right: 4px; }

  .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; }
  .map-box { min-height: 0; display: block; overflow: visible; }
  .visit-map, .visit-map iframe { min-height: 320px; height: 320px; border-radius: var(--r); overflow: hidden; }
  .map-card { position: static; width: auto; margin-top: 10px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--espresso); }
  .mc-hide, .mc-show { display: none !important; }
  .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); }
  .band { aspect-ratio: 4 / 3; }
  .tabs-row { justify-content: flex-start; gap: 0; padding: 0 8px; }
  .tabs a { flex: 0 0 auto; padding: 0 12px; font-size: 11.5px; }
  .mcard-price .price, .mcard-price .num { font-size: 25px; }
  .list-cta .btn { flex: 1 1 auto; }
  .book-len .btn { flex: 1 1 100%; }
  .menu-sec { padding: 56px 0; }
  .menu-sec:not(.light) + .menu-sec:not(.light) .group { padding-top: 56px; }
  .g-head h2 { font-size: 38px; }
  .course { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0; }
  .c-name { font-size: 24px; }
  .length-btns { width: 100%; }
  .len-btn { flex: 1 1 50%; }
  .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; }

  .rh-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rh-side { justify-items: start; text-align: left; }
  .rh-call a { justify-content: flex-start; }
  .req { padding-top: 28px; }
  /* phones: the days run in one row that scrolls sideways (snapping per day); the times in two rows */
  .days, .days.has-tonight {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gut)); padding: 5px var(--gut) 10px; scroll-padding: 0 var(--gut); scrollbar-width: none;
  }
  .days::-webkit-scrollbar { display: none; }
  .days:empty { min-height: 81px; }
  .day { flex: 0 0 68px; scroll-snap-align: start; }
  .day.is-tonight { flex-basis: 132px; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .date-more { max-width: none; }
  .ticket { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 18px; gap: 14px; }
  .tk-pairs { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-strong); padding-top: 14px; }
  .tk-price .price { font-size: 50px; }
  .tk-pn { font-size: 19px; }
  /* the "Reserve with ..." row sticks to the bottom while you read the set menu, with the chosen length only */
  html.js .book-len {
    position: sticky; bottom: 0; z-index: 12;
    margin: 24px calc(-1 * var(--gut)) 0; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(235, 228, 216, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  html.js .book-len .btn:not(.btn-fill) { display: none; }
  .book-len .btn { justify-content: space-between; white-space: normal; text-align: left; line-height: 1.3; }
  .f-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .sel--half { max-width: none; }
  .radios { grid-template-columns: 1fr; gap: 8px; }
  .r-box { min-height: 54px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .f-submit .btn { flex: 1 1 100%; }
  .cf-sum { grid-template-columns: 1fr; }
  .cf-sum dt { border-bottom: 0; padding-bottom: 0; }
  .cf-sum dd { padding-top: 2px; }
  .req-side { grid-template-columns: 1fr; }
  .req-side .side-photo { display: none; }
  .faq-q button { min-height: 60px; font-size: 21px; }
  .faq-in { padding-right: 0; }

  .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; }
}

@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; }
  .hl-glass { width: 100px; }
}
@media (max-width: 360px) {
  .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; }
  .count { font-size: 50px; }
}

/* ---------- reduced motion: everything is simply there ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .stagger > * { opacity: 1; transform: none; transition: none; }
  .hero h1 .w > span { transform: none; transition: none; }
  html.js .hero-copy > :not(h1), html.js .hl-card img, html.js .hl-card::after, html.js .hl-glow img, html.js .hl-back img,
  html.js .hero.ready .hero-copy > :not(h1), html.js .hero.ready .hl-card img, html.js .hero.ready .hl-glow img, html.js .hero.ready .hl-back img { opacity: 1; transform: none; transition: none; animation: none; }
  html.js [data-pspeed] { transform: none; }
  .status[data-state="open"] i { animation: none; }
  .scroll-cue i::after { animation: none; transform: translateY(14px); }
  .btn::before, .mcard, .mcard-photo, .tile img, .g-photo, .slides, .lb-img, .map-card, .tabs-ink, .confirm { transition: none; animation: none; }
  .mcard:hover, .mcard:hover .mcard-photo, .tile:hover img, .g-photo-frame:hover .g-photo { transform: none; }
  .lb[open] { animation: none; }
  .gal-grid > li.out { transition: none; }
  .toast { transition: none; }
  .cursor { display: none !important; }
  .day-box, .slot-box, .price-roll, .bk-bar { transition: none !important; animation: none !important; }
}

/* ---------- print: the menu (or any page) on paper, dark on white, nothing hidden ---------- */
@media print {
  :root, .light, .map-card, .list-cta, .hero, .reviews, .site-footer {
    --bg: #fff; --fg: #1a1410; --fg-soft: #3d342c; --fg-mute: #5b4f44; --accent: #7a5a26;
    --surface: #fff; --line: rgba(26, 20, 16, .18); --line-strong: rgba(26, 20, 16, .4);
    --btn-bg: #fff; --btn-fg: #1a1410; color-scheme: light;
  }
  html, body, .light, .site-footer, .list-cta, .hero, .reviews, .confirm { background: #fff !important; color: #1a1410 !important; }
  body { font-size: 11.5pt; }
  html.js .reveal, html.js .stagger > *, html.js .hero-copy > :not(h1), .hero h1 .w > span { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero { min-height: 0; margin-top: 0; padding-top: 0; }
  .hero-inner { padding: 0 0 12pt; }
  .hero .lead, .slide blockquote p, .who b, .statement, .count, .mc-name, .cf-title { color: #1a1410 !important; }
  .cursor, .progress, .toast, .skip, .nav, .nav-toggle, .lang, .head-book, .tabs, .scroll-cue, .hero-layers,
  .band, .g-photo-frame, .know-frame, .book-len, .list-cta .btn, .closing .actions, .lb, .reviews-bg, .slider-ui,
  .map-box, .length, .ticket, .req-side .side-photo { display: none !important; }
  .site-header { position: static; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .g-head, .req-side, .faq-grid .section-head { position: static !important; }
  .menu-sec, .pad, .closing { padding: 18pt 0 !important; }
  .menu-sec:not(.light) + .menu-sec:not(.light) .group { padding-top: 0; background: none; }
  .group, .know-grid { grid-template-columns: 1fr; gap: 8pt; }
  .course, .sp-row, .p-row, .faq-item { break-inside: avoid; }
  .course--six { opacity: 1 !important; }
  .slide:not(.is-on) { opacity: 1 !important; }
  .slides { transform: none !important; display: block; }
  .site-footer { border-top: 1px solid #ccc; color: #3d342c !important; }
  .site-footer a, .foot-small { color: #3d342c !important; }
  a { text-decoration: none; }
}