/* ==========================================================================
   SABOR wine & cuisine - demo site
   Coastal Mediterranean. Vanilla CSS, no dependencies.
   ========================================================================== */

:root{
  --shell:#F7F3EA;
  --shell-2:#F0EADD;
  --sand:#E6DCC7;
  --sand-dk:#D6C9AE;
  --olive:#6B7355;
  --olive-dk:#4A5240;
  --olive-lt:#8C9472;
  --ink:#22261F;
  --ink-soft:#4C5347;
  --sea:#35566A;
  --terra:#B4674A;
  --line:rgba(34,38,31,.14);

  --f-display:"EB Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(72px,10vw,140px);
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* fallback only; main.js measures the real height and overwrites it */
  --navh:66px;
  --anchor-off:calc(var(--navh) + 30px);
}
/* the nav grows once the "Book a table" CTA is shown again */
@media (min-width:561px){:root{--navh:75px}}
/* superseded: --navh and --railh are measured at runtime, see the mobile
   fixes block at the end of this file */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

::selection{background:var(--olive);color:var(--shell)}

/* keep in-page anchors clear of the fixed nav */
section[id],.menu-sec{scroll-margin-top:var(--anchor-off)}

/* visible keyboard focus - the browser default is invisible on the dark bands */
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.on-dark :focus-visible,.hero :focus-visible,.pagehead :focus-visible,
.offer :focus-visible,.cta :focus-visible,.foot :focus-visible,
.mobile :focus-visible,.scene :focus-visible,.menu-callout :focus-visible{outline-color:var(--sand)}

.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  background:var(--olive-dk);color:var(--shell);
  padding:.75em 1.3em;border-radius:999px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transform:translateY(-200%);transition:transform .25s var(--ease);
}
.skip:focus{transform:none}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.06;margin:0;letter-spacing:-.01em}

.display{font-size:clamp(3rem,9vw,7rem)}
.h2{font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.04}
.h3{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.15}
em{font-style:italic}

.eyebrow{
  font-family:var(--f-body);
  font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--olive);margin:0;
}
.eyebrow.on-dark{color:var(--sand-dk)}

.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.7;color:var(--ink-soft);margin:0}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.9em;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.btn-solid{background:var(--olive);color:var(--shell)}
.btn-solid:hover{background:var(--olive-dk)}

.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--olive);color:var(--olive)}

.btn-light{background:var(--shell);color:var(--ink)}
.btn-light:hover{background:#fff}

.btn-outline-light{border:1px solid rgba(247,243,234,.4);color:var(--shell)}
.btn-outline-light:hover{border-color:var(--shell);background:rgba(247,243,234,.08)}

.link-u{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:.35em;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.link-u:hover{border-color:var(--olive);color:var(--olive)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(247,243,234,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding-block:12px;border-bottom-color:var(--line);
}
.nav.on-dark:not(.solid){color:var(--shell)}
/* Over the open menu the header is always the dark treatment. Otherwise it
   depended on how far you had scrolled before you opened it: a cream bar
   sitting on the olive panel, cutting it in half. */
body.menu-open .nav,
body.menu-open .nav.solid{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;color:var(--shell);
}
.nav.on-dark:not(.solid) .brand small{color:rgba(247,243,234,.7)}
.nav.on-dark:not(.solid) .nav-links a::after{background:var(--shell)}
.nav.on-dark:not(.solid) .lang{border-color:rgba(247,243,234,.35);color:var(--shell)}
.nav.on-dark:not(.solid) .lang button.on{background:rgba(247,243,234,.92);color:var(--ink)}
.nav.on-dark:not(.solid) .burger i{background:var(--shell)}

/* .btn-outline-light is cream on cream once the nav goes solid - the CTA was
   invisible on every scrolled state. Swap it for the solid olive pill. */
.nav.solid .nav-cta{background:var(--olive);border-color:var(--olive);color:var(--shell)}
.nav.solid .nav-cta:hover{background:var(--olive-dk);border-color:var(--olive-dk)}

.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand .brand-mark{width:40px;height:40px;flex:0 0 auto;display:block}
.brand b{display:block;font-family:var(--f-display);font-size:1.28rem;font-weight:400;letter-spacing:.16em;line-height:1}
.brand small{display:block;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}

.nav-links{display:flex;gap:clamp(18px,2.4vw,34px)}
.nav-links a{white-space:nowrap}
.nav-links a{
  position:relative;font-size:.76rem;font-weight:450;letter-spacing:.15em;text-transform:uppercase;padding-block:4px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--olive);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.lang{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;padding:3px;
  font-size:.62rem;letter-spacing:.1em;font-weight:500;
}
.lang button{
  display:flex;align-items:center;justify-content:center;
  min-height:28px;padding:.5em .85em;border-radius:999px;font-weight:500;
  font-size:inherit;letter-spacing:inherit;line-height:1;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.lang button.on{background:var(--olive);color:var(--shell)}

.burger{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.burger i{display:block;height:1.5px;width:22px;background:var(--ink);transition:transform .4s var(--ease),width .4s var(--ease),background .5s var(--ease)}
.burger i:last-child{width:14px}
body.menu-open .burger i{background:var(--shell)}
body.menu-open .burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
body.menu-open .burger i:last-child{width:22px;transform:translateY(-3.75px) rotate(-45deg)}

/* The panel sits under the fixed header, not behind it. Without the top
   padding the first item was clipped by the bar, and with seven items plus
   the footer the centred column pushed its own top off the screen. */
.mobile{
  position:fixed;inset:0;z-index:70;background:var(--olive-dk);color:var(--shell);
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:calc(var(--navh,73px) + 26px) var(--pad)
          calc(26px + env(safe-area-inset-bottom,0px));
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  visibility:hidden;
  overflow-y:auto;overscroll-behavior:contain;
}
body.menu-open .mobile{clip-path:inset(0 0 0 0);visibility:visible}
.mobile>a{
  font-family:var(--f-display);font-size:clamp(1.7rem,6vw,2.5rem);
  padding-block:.52em;line-height:1.04;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
}
/* a hairline between the sections, and nothing under the last one */
.mobile>a:not(:last-of-type){border-bottom:1px solid rgba(247,243,234,.13)}
.mobile>a[aria-current="page"]{color:var(--sand-dk)}

/* the booking link is the one action here, so it looks like one */
.mobile>a:last-of-type{
  align-self:flex-start;margin-top:26px;
  font-family:var(--f-body);font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  background:var(--shell);color:var(--ink);
  border-radius:999px;padding:1.45em 2.3em;
}
body.menu-open .mobile>a{opacity:1;transform:none}
body.menu-open .mobile>a:nth-of-type(1){transition-delay:.18s}
body.menu-open .mobile>a:nth-of-type(2){transition-delay:.24s}
body.menu-open .mobile>a:nth-of-type(3){transition-delay:.3s}
body.menu-open .mobile>a:nth-of-type(4){transition-delay:.36s}
body.menu-open .mobile>a:nth-of-type(5){transition-delay:.42s}
body.menu-open .mobile>a:nth-of-type(6){transition-delay:.48s}
body.menu-open .mobile>a:nth-of-type(7){transition-delay:.54s}
.mobile .m-foot{margin-top:30px;font-size:.9rem;letter-spacing:.04em;color:rgba(247,243,234,.72);opacity:0;transition:opacity .5s var(--ease) .5s;line-height:1.9}
.mobile .m-foot a{border-bottom:1px solid rgba(247,243,234,.35)}
body.menu-open .mobile .m-foot{opacity:1}
/* short phones: the same seven items, sized so the panel still does not scroll */
@media (max-height:680px){
  .mobile{padding-top:calc(var(--navh,73px) + 14px);padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .mobile>a{font-size:clamp(1.3rem,4.6vw,1.7rem);padding-block:.66em}
  .mobile>a:last-of-type{margin-top:16px;padding:1.35em 2em}
  .mobile .m-foot{margin-top:16px;font-size:.82rem;line-height:1.7}
}

/* 6 nav items + lang + CTA stop fitting a little earlier than they used to.
   The links are nowrap, so the burger has to take over before they collide. */
@media (max-width:1140px){
  .nav-links{display:none}
  .burger{display:flex}
}
/* the CTA is duplicated inside the mobile menu - drop it before it squeezes the brand */
@media (max-width:560px){
  .nav-cta{display:none}
  .nav{gap:12px}
}

/* ---------- reveal ---------- */
[data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-r="fade"]{transform:none}
[data-r].in{opacity:1;transform:none}
/* set by main.js when the page arrived through a view transition: the page
   itself has just animated in, so these must not animate in again */
.vt-set,.vt-set .w>i{transition:none!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){
  [data-r]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:150px var(--pad) clamp(40px,6vw,70px);
  color:var(--shell);overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroZoom 16s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,30,.5) 0%,rgba(20,26,30,.1) 32%,rgba(20,26,30,.42) 64%,rgba(16,22,26,.84) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto}
.hero .display{margin-top:22px;text-shadow:0 2px 40px rgba(0,0,0,.3)}
.hero .display .ln{display:block;overflow:hidden}
.hero .display .ln>span{display:block;transform:translateY(105%);animation:lnUp 1.15s var(--ease) forwards}
.hero .display .ln:nth-child(1)>span{animation-delay:.2s}
.hero .display .ln:nth-child(2)>span{animation-delay:.32s}
@keyframes lnUp{to{transform:none}}

.hero-foot{
  margin-top:clamp(26px,4vw,46px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:end;
}
.hero-foot .lead{color:rgba(247,243,234,.86);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:820px){
  .hero-foot{grid-template-columns:1fr}
  .hero-actions{justify-content:flex-start}
}
/* phones: the hero was carrying three chips, two lines of headline, the lead
   and two buttons over a busy photo. The location is already in the lead and
   the second button only scrolls to the next section, so both go. */
@media (max-width:600px){
  .hero{padding-bottom:clamp(34px,5vw,50px)}
  .hero-chips .chip-loc,.chip .chip-more{display:none}
  .hero .display{margin-top:16px}
  .hero-foot{margin-top:22px}
  .hero-foot .lead{font-size:1rem;line-height:1.62}
  .hero-actions .btn-outline-light{display:none}
}

.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  border:1px solid rgba(247,243,234,.32);border-radius:999px;
  padding:.45em 1em;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.07);
}
.dot{width:6px;height:6px;border-radius:50%;background:#7CC08A;box-shadow:0 0 0 3px rgba(124,192,138,.22);flex:0 0 auto}
.dot.shut{background:#C98A6B;box-shadow:0 0 0 3px rgba(201,138,107,.22)}

.scroll-hint{
  position:absolute;right:var(--pad);bottom:clamp(40px,6vw,70px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,243,234,.65);
  writing-mode:vertical-rl;
}
.scroll-hint .track{width:1px;height:60px;background:rgba(247,243,234,.28);position:relative;overflow:hidden}
.scroll-hint .track i{position:absolute;inset:0 0 auto 0;height:40%;width:100%;background:var(--shell);animation:trackRun 2.2s var(--ease) infinite}
@keyframes trackRun{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}
@media (max-width:820px){.scroll-hint{display:none}}

/* page header (contact) */
.pagehead{
  position:relative;min-height:min(64svh,560px);display:flex;align-items:flex-end;
  padding:150px var(--pad) clamp(40px,5vw,64px);color:var(--shell);overflow:hidden;
}
.pagehead .hero-media::after{background:linear-gradient(180deg,rgba(20,26,30,.58) 0%,rgba(20,26,30,.2) 40%,rgba(16,22,26,.8) 100%)}
.pagehead-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto}
.pagehead .display{font-size:clamp(2.6rem,7vw,5.2rem)}

/* ---------- marquee ---------- */
.marquee{
  background:var(--olive-dk);color:var(--sand);
  padding-block:16px;overflow:hidden;white-space:nowrap;
}
.mq-track{display:inline-flex;animation:mq 46s linear infinite;will-change:transform}
.mq-track span{
  padding-inline:0 26px;margin-left:26px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:26px;
}
.mq-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--olive-lt);flex:0 0 auto}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* ---------- story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,86px);align-items:center}
.story-media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.story-media img{width:100%;height:100%;object-fit:cover}
/* the story photo is a 4:5 portrait. Cropping it to 3:2 on phones sliced the
   plate in half, so it keeps its own shape all the way down. */
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.story-media{aspect-ratio:4/5}}

.story-body>*+*{margin-top:22px}
.story-points{list-style:none;padding:0;margin-top:30px;display:grid;border-top:1px solid var(--line)}
.story-points li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.story-points b{font-family:var(--f-body);font-size:.68rem;letter-spacing:.16em;color:var(--olive);flex:0 0 30px;font-weight:500}
.story-points p{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* ---------- section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,62px)}
.sec-head .h2{max-width:16ch}
.sec-head .lead{max-width:40ch}

/* ---------- menu ---------- */
.menu-cover{
  display:flex;gap:clamp(16px,3vw,40px);align-items:baseline;flex-wrap:wrap;
  padding:22px 0 26px;border-block:1px solid var(--line);
  margin-bottom:clamp(34px,5vw,58px);
}
.menu-cover b{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--olive);
  font-weight:500;flex:0 1 auto;min-width:0;
}
.menu-cover p{margin:0;font-family:var(--f-display);font-size:clamp(1.05rem,1.9vw,1.4rem);color:var(--ink)}

.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px)}
@media (max-width:820px){.menu-cols{grid-template-columns:1fr;gap:clamp(34px,6vw,54px)}}

.menu-cat{
  font-family:var(--f-body);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive);font-weight:500;margin:0 0 6px;
}

.menu-list{list-style:none;padding:0;margin:0}
.menu-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.menu-list li:first-child{border-top:1px solid var(--line)}

.mi-head{display:flex;align-items:baseline;gap:14px}
.mi-name{font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.2;flex:0 1 auto;min-width:0}
.mi-lead{flex:1 1 auto;height:1px;background:var(--line);transform:translateY(-4px);min-width:16px}
.mi-tag{
  flex:0 0 auto;color:var(--olive);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--line);border-radius:999px;padding:.32em .8em;
}
/* "Vegan" states what a dish is; "Can be vegan" is an offer, so the outline
   goes dashed and the ink softens. Same pill, plainly a different claim. */
.mi-tag-soft{border-style:dashed;color:var(--ink-soft)}
.mi-sub{margin:8px 0 0;font-size:.92rem;color:var(--ink-soft);line-height:1.55;max-width:46ch}

/* ---------- menu.html / wine.html ---------- */
.menu-page{padding-top:clamp(46px,6vw,80px)}

.menu-intro{max-width:68ch;display:grid;gap:14px;margin-bottom:clamp(36px,6vw,64px)}
.menu-intro p{margin:0;font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.75;color:var(--ink-soft)}

.menu-layout{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);gap:clamp(26px,5vw,76px)}
.menu-index-in{position:sticky;top:calc(var(--navh) + 26px)}
.menu-index-t{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.menu-index-rail{display:grid}
.mi-chip{
  display:flex;align-items:center;min-height:40px;
  padding:.35em 0 .35em 14px;border-left:2px solid var(--line);
  font-size:.79rem;line-height:1.3;color:var(--ink-soft);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.mi-chip:hover{color:var(--ink);border-color:var(--olive-lt)}
.mi-chip.on{color:var(--olive);border-color:var(--olive);font-weight:500}

.menu-body{max-width:760px}
.menu-sec+.menu-sec,
.menu-callout+.menu-sec{margin-top:clamp(44px,7vw,78px)}
.menu-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(12px,2vw,20px)}
.menu-num{
  flex:0 0 auto;font-size:.68rem;font-weight:500;letter-spacing:.16em;
  color:var(--olive);font-variant-numeric:tabular-nums;
}
.menu-sec-t{font-family:var(--f-display);font-size:clamp(1.55rem,3.6vw,2.35rem);line-height:1.1}

.mi-price{
  flex:0 0 auto;font-family:var(--f-display);
  font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.2;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.menu-list li.mi-slim{padding:14px 0}

.menu-add{
  display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;
  margin:18px 0 0;padding:14px 18px;background:var(--shell-2);border-radius:var(--r);
  font-size:.92rem;color:var(--ink-soft);
}
.menu-add b{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-weight:500}
.menu-add span{flex:1 1 auto}
.menu-add em{font-style:normal;font-family:var(--f-display);font-size:1.08rem;color:var(--ink)}

/* The callout is a sibling BETWEEN two .menu-sec blocks, so `.menu-sec +
   .menu-sec` never matched across it and the next category heading sat hard
   against the bottom of the box. It carries the section rhythm on both sides
   now; the parent is block flow, so these collapse with the neighbours rather
   than adding up. */
.menu-callout{
  margin-block:clamp(44px,7vw,78px);padding:clamp(24px,3.5vw,36px);
  background:var(--olive-dk);color:var(--shell);border-radius:var(--r);
}
/* The copy used to be capped at 34ch inside a full-width olive box, which left
   the right half of every callout empty. The text now takes the left column and
   the action sits in the right one, bottom aligned. */
.menu-callout{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  column-gap:clamp(18px,3vw,44px);row-gap:0;align-items:end;
}
.menu-callout b{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand-dk);font-weight:500}
.menu-callout>b{grid-column:1/-1}
.menu-callout p{margin:14px 0 0;font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.35;max-width:42ch}
.menu-callout .link-u{margin-top:0;color:var(--sand);border-color:rgba(247,243,234,.32);justify-self:start}
.menu-callout .link-u:hover{color:#fff;border-color:var(--shell)}

/* two independent points side by side, no CTA (the wine page) */
.menu-callout.callout-split{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.menu-callout.callout-split>div>b{margin-bottom:0}
.menu-callout.callout-split p{max-width:34ch;font-size:clamp(1.02rem,1.8vw,1.24rem)}

@media (max-width:820px){
  .menu-callout,.menu-callout.callout-split{grid-template-columns:1fr;align-items:start}
  .menu-callout p{max-width:none}
  .menu-callout .link-u{margin-top:18px}
}

.menu-foot{
  margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.menu-foot p{margin:0}

/* --- menu pages: tablet & phone --- */
@media (max-width:940px){
  /* block flow, so the rail's sticky range is the whole menu rather than one grid row */
  .menu-layout{display:block}
  .menu-index{
    position:sticky;top:var(--navh);z-index:40;
    margin-inline:calc(var(--pad) * -1);
    margin-bottom:clamp(26px,5vw,38px);
    padding:9px var(--pad);
    background:rgba(247,243,234,.94);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .menu-index-in{position:static}
  .menu-index-t{display:none}
  .menu-index-rail{
    display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .menu-index-rail::-webkit-scrollbar{display:none}
  .mi-chip{
    flex:0 0 auto;white-space:nowrap;
    border:1px solid var(--line);border-left-width:1px;border-radius:999px;
    padding:0 1.05em;min-height:42px;background:var(--shell);
    font-size:.76rem;
  }
  .mi-chip.on{background:var(--olive);border-color:var(--olive);color:var(--shell)}
  .menu-body{max-width:none}
}

@media (max-width:620px){
  /* no room for a leader line - name wraps, price stays pinned top-right */
  .mi-head{flex-wrap:wrap;align-items:flex-start;gap:10px}
  .mi-lead{display:none}
  .mi-name{flex:1 1 auto;font-size:1.12rem;line-height:1.32}
  .mi-price{order:2;margin-left:auto;font-size:1.06rem;line-height:1.38}
  .mi-head::after{content:"";order:2;flex:0 0 100%;height:0}  /* forces the tag onto its own line */
  .mi-price{order:1}
  .mi-tag{order:3;flex:0 0 auto;margin-top:2px}
  .menu-list li{padding:15px 0}
  .menu-list li.mi-slim{padding:12px 0}
  .mi-sub{margin-top:6px;font-size:.88rem;max-width:none}
  .menu-sec-head{gap:10px}
  .menu-foot{flex-direction:column;align-items:flex-start}
}

/* ---------- events.html ---------- */
.events-page .menu-cover{margin-bottom:clamp(30px,5vw,48px)}
/* the "Every week" label sits directly on top of the Wines & Bites band, so
   this section gives back its bottom padding rather than leaving a gap */
.events-page{padding-bottom:clamp(16px,2.4vw,28px)}

.event{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,5vw,64px);align-items:start;
}
/* The poster is a 3:4 portrait print. The frame holds that ratio itself so the
   page never reflows while it loads, and so a missing poster still leaves a
   placeholder with a shape rather than collapsing the row to nothing. */
.event-poster{
  position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/4;
  background:var(--shell-2);box-shadow:0 30px 60px -44px rgba(28,32,26,.5);
}
.event-poster picture{width:100%;height:100%}
.event-poster img{display:block;width:100%;height:100%;object-fit:cover}
.event-body{min-width:0}
.event-body .lead{max-width:56ch}

.event-facts{
  margin:clamp(26px,4vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px);
  border-top:1px solid var(--line);
}
.event-facts>div{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.event-facts dt{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive);font-weight:500;
}
.event-facts dd{margin:0;font-size:.96rem;line-height:1.5;color:var(--ink)}
.event-facts dd a{border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.event-facts dd a:hover{border-color:var(--olive)}

.event-cta{display:flex;align-items:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap;margin-top:clamp(24px,4vw,34px)}

@media (max-width:940px){
  .event{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  /* the poster carries the date and the whole offer, so it leads on phones */
  .event-poster{max-width:440px}
  .event-facts{grid-template-columns:1fr}
  .event-facts>div{grid-template-columns:88px minmax(0,1fr);padding:13px 0}
  .event-cta .btn{width:100%;justify-content:center}
}

/* the tail block after the Wines & Bites band closes the events page */
.events-tail{padding-top:clamp(40px,6vw,68px)}

/* ---------- reserve.html ---------- */
/* The booking band is the whole page here, so it clears the fixed nav itself:
   there is no pagehead above it to do that. */
.reserve-page{padding-top:calc(var(--sec) + 74px)}
@media (max-width:940px){.reserve-page{padding-top:calc(var(--sec) + 54px)}}

/* ---------- offer band ---------- */
.offer{position:relative;color:var(--shell);overflow:hidden;isolation:isolate}
.offer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.offer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(28,18,20,.88) 0%,rgba(28,18,20,.62) 55%,rgba(28,18,20,.42) 100%);z-index:-1}
.offer-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:860px){.offer-grid{grid-template-columns:1fr}}
.offer .lead{color:rgba(247,243,234,.82)}
.offer-price{
  border:1px solid rgba(247,243,234,.3);border-radius:var(--r);
  padding:clamp(26px,4vw,40px);text-align:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(255,255,255,.05);
}
.offer-price b{display:block;font-family:var(--f-display);font-size:clamp(3.4rem,8vw,5.2rem);line-height:1}
.offer-price .what{font-size:.85rem;color:rgba(247,243,234,.8);margin-top:12px;line-height:1.6}
.offer-price .when{margin-top:18px;padding-top:16px;border-top:1px solid rgba(247,243,234,.22);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,234,.72)}

/* ---------- dishes of the day ---------- */
.daily-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media (max-width:860px){.daily-grid{grid-template-columns:1fr}}
.daily-media{aspect-ratio:5/4;overflow:hidden;border-radius:var(--r)}
.daily-media img{width:100%;height:100%;object-fit:cover}
.daily-body>*+*{margin-top:20px}
.phones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.phone-pill{
  display:inline-flex;align-items:center;gap:.6em;
  border:1px solid var(--line);border-radius:999px;padding:.7em 1.2em;
  font-size:.85rem;letter-spacing:.03em;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.phone-pill:hover{border-color:var(--olive);background:var(--shell-2)}
.phone-pill svg{width:14px;height:14px;stroke:var(--olive);fill:none;stroke-width:1.6;flex:0 0 auto}

/* ---------- gallery ---------- */
/* fixed row height so every arrangement tiles into a clean rectangle */
.gallery{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17vw,240px);
  gap:clamp(10px,1.4vw,18px);
}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--sand);height:100%}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,38vw,220px)}
  .g-tall{grid-row:span 1}
  .g-wide{grid-column:span 1}
}

/* ---------- reviews ---------- */
.reviews{background:var(--shell-2)}
.rev-top{display:flex;align-items:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap;margin-bottom:clamp(34px,5vw,56px)}
.rev-score{display:flex;align-items:baseline;gap:14px}
.rev-score b{font-family:var(--f-display);font-size:clamp(3.4rem,7vw,5rem);line-height:1;color:var(--olive)}
.stars{display:flex;gap:3px}
.stars svg{width:16px;height:16px;fill:var(--olive)}
/* Five reviews on a six-column grid: three cards of two columns, then two of
   three. Both rows fill exactly, so the block still reads as a rectangle. */
.rev-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,24px)}
.rev-grid>*{grid-column:span 2}
.rev-grid>*:nth-last-child(-n+2){grid-column:span 3}
@media (max-width:1100px){
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .rev-grid>*,.rev-grid>*:nth-last-child(-n+2){grid-column:span 1}
  .rev-grid>*:last-child{grid-column:span 2}
}
@media (max-width:860px){
  .rev-grid{grid-template-columns:1fr}
  .rev-grid>*,.rev-grid>*:nth-last-child(-n+2),.rev-grid>*:last-child{grid-column:span 1}
}
.rev-card{background:var(--shell);padding:clamp(24px,3vw,34px);border-radius:var(--r);display:flex;flex-direction:column;gap:18px}
.rev-card p{margin:0;font-family:var(--f-display);font-size:1.24rem;line-height:1.45}
.rev-card .who{margin-top:auto;display:grid;gap:4px}
.rev-card .who b{font-size:.9rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink)}
.rev-card .who span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- hours ---------- */
.hours-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
@media (max-width:860px){.hours-grid{grid-template-columns:1fr}}
.hours-table{width:100%;border-collapse:collapse;margin-top:26px}
.hours-table th,.hours-table td{text-align:left;padding:15px 0;border-bottom:1px solid var(--line);font-weight:400;font-size:.95rem}
.hours-table th{font-weight:450}
.hours-table td{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hours-table tr.today th,.hours-table tr.today td{color:var(--olive)}
.hours-table tr.today th::after{content:"•";margin-left:.5em}

.info-list{list-style:none;padding:0;margin:26px 0 0;display:grid;border-top:1px solid var(--line)}
.info-list li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.info-list b{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-weight:500}
.info-list span,.info-list a{font-size:.98rem;color:var(--ink-soft)}
.info-list a{border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease)}
.info-list a:hover{color:var(--olive);border-color:var(--olive)}
@media (max-width:520px){.info-list li{grid-template-columns:1fr;gap:4px}}

/* ---------- cta band ---------- */
.cta{position:relative;color:var(--shell);overflow:hidden;isolation:isolate;text-align:center}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,26,32,.58),rgba(16,26,32,.8));z-index:-1}
.cta .h2{margin-inline:auto;max-width:18ch}
.cta .lead{color:rgba(247,243,234,.82);margin:22px auto 0;max-width:52ch}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--sand);padding-block:clamp(56px,7vw,88px) 34px}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(30px,5vw,60px)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr;gap:0}
  .foot-grid>div{padding-block:22px}
  .foot-grid>div+div{border-top:1px solid rgba(230,220,199,.14)}
  .foot-grid>div:first-child{padding-top:0}
}
.foot .brand b{color:var(--shell)}
.foot .brand small{color:rgba(230,220,199,.6)}
.foot h4{font-family:var(--f-body);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(230,220,199,.62);font-weight:500;margin:0 0 16px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:.92rem;color:rgba(230,220,199,.85)}
.foot ul a{display:inline-block;padding-block:4px;color:rgba(230,220,199,.85);
  transition:color .3s var(--ease)}
.foot ul a:hover{color:var(--shell)}
.foot .tagline{margin-top:22px;max-width:34ch;font-size:.92rem;color:rgba(230,220,199,.7);line-height:1.7}
.foot-bottom{
  margin-top:clamp(40px,6vw,66px);padding-top:22px;border-top:1px solid rgba(230,220,199,.16);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.74rem;color:rgba(230,220,199,.62);letter-spacing:.04em;
}
.foot-bottom a{color:var(--sand);border-bottom:1px solid rgba(230,220,199,.35);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.foot-bottom a:hover{color:var(--shell);border-color:var(--shell)}

/* ---------- contact / form ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:start}
@media (max-width:940px){.contact-grid{grid-template-columns:1fr}}

.form-card{background:var(--shell-2);padding:clamp(26px,4vw,46px);border-radius:var(--r)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:8px;position:relative}
.field.full{grid-column:1/-1}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}

.field>label,.field .lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--shell);border:1px solid var(--line);border-radius:var(--r);
  padding:.85em 1em;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(107,115,85,.14);
}
.field .err{font-size:.74rem;color:var(--terra);display:none;line-height:1.4}
.field.invalid input,.field.invalid select{border-color:var(--terra)}
.field.invalid .err{display:block}

.guests{display:flex;flex-wrap:wrap;gap:8px}
.guests input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.guests label{
  cursor:pointer;border:1px solid var(--line);border-radius:999px;
  padding:.6em 1.05em;font-size:.85rem;color:var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.guests label:hover{border-color:var(--olive)}
.guests input:checked+label{background:var(--olive);border-color:var(--olive);color:var(--shell)}
.guests input:focus-visible+label{box-shadow:0 0 0 3px rgba(107,115,85,.2)}

.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.form-note{font-size:.78rem;color:var(--ink-soft);line-height:1.55}

.form-done{display:none;text-align:center;padding:clamp(30px,5vw,60px) 6px}
.form-done svg{width:52px;height:52px;stroke:var(--olive);fill:none;stroke-width:1.3;margin:0 auto}
.form-done h3{margin-top:22px}
.form-done p{margin:14px auto 0;max-width:42ch;color:var(--ink-soft)}
.form-done .btn{margin-top:26px}
.form-card.done>form{display:none}
.form-card.done .form-done{display:block}

.map{
  width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r);
  background:var(--sand);display:block;filter:grayscale(.3) contrast(1.02);
}
@media (max-width:560px){.map{aspect-ratio:1/1}}

.demo-flag{
  display:inline-flex;align-items:center;gap:.6em;
  background:rgba(180,103,74,.1);color:var(--terra);
  border-radius:999px;padding:.5em 1em;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}

/* ---------- utilities ---------- */
.stack-lg>*+*{margin-top:clamp(20px,3vw,30px)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* graceful styling if an image asset is missing */
[data-ph]{position:relative;background:var(--olive-dk)}
[data-ph]::after{
  content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(247,243,234,.5);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;text-align:center;padding:20px;
}

/* ==========================================================================
   SCROLL TABLE - the pinned "table sets itself" sequence
   ========================================================================== */

.scene{
  --steps:6;
  --step-h:60vh;
  position:relative;
  background:var(--olive-dk);
  color:var(--shell);
  isolation:isolate;
}
.scene-sticky::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(247,243,234,.10), transparent 70%),
    radial-gradient(90% 70% at 50% 110%, rgba(0,0,0,.45), transparent 70%);
}

.scene-track{height:calc(100vh + (var(--steps) + .6) * var(--step-h));height:calc(100svh + (var(--steps) + .6) * var(--step-h))}

.scene-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
}

.scene-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(84px,11vh,120px) var(--pad) clamp(28px,5vh,56px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,4vw,64px);align-items:center;
}

/* ---------- copy column ---------- */
.scene-copy{max-width:40ch}
.scene-copy .eyebrow{color:var(--sand-dk)}

.caps{position:relative;display:grid;margin-top:20px}
.cap{
  grid-area:1/1;align-self:start;
  opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .7s var(--ease);
  pointer-events:none;
}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cap .num{
  display:block;font-family:var(--f-body);font-size:.66rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sand-dk);margin-bottom:14px;
}
.cap h3{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.08}
.cap p{margin:14px 0 0;color:rgba(247,243,234,.74);font-size:clamp(.95rem,1.3vw,1.06rem);line-height:1.68;max-width:36ch}
.cap .tag{
  display:inline-flex;align-items:center;gap:.5em;margin-top:18px;
  border:1px solid rgba(247,243,234,.28);border-radius:999px;padding:.42em 1em;
  font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,234,.8);
}

/* progress rail */
.rail{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,3vh,32px)}
.rail-bars{display:flex;gap:6px;flex:1;max-width:260px}
.rail-bars i{
  flex:1;height:2px;background:rgba(247,243,234,.2);border-radius:2px;overflow:hidden;position:relative;
}
.rail-bars i::after{
  content:"";position:absolute;inset:0;background:var(--sand);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.rail-bars i.on::after{transform:scaleX(1)}
.rail .count{font-size:.66rem;letter-spacing:.2em;color:rgba(247,243,234,.78);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ---------- the table ---------- */
.stage{
  position:relative;flex:0 0 auto;
  width:min(66vh,42vw,660px);width:min(66svh,42vw,660px);
  aspect-ratio:1;
  transform:rotate(calc(var(--tp,0) * 8deg));
  transition:transform .35s linear;
}

.tabletop{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 55%, #EFE7D6 0%, #E6DCC7 52%, #D2C4A6 100%);
  box-shadow:
    0 50px 90px -34px rgba(0,0,0,.75),
    0 0 0 1px rgba(247,243,234,.14),
    inset 0 -18px 40px -20px rgba(90,72,42,.45);
  opacity:0;transform:scale(.92);
  transition:opacity .9s var(--ease),transform 1.3s var(--ease);
}
.tabletop::after{ /* linen weave */
  content:"";position:absolute;inset:0;border-radius:50%;opacity:.5;
  background:
    repeating-linear-gradient(0deg,rgba(140,120,84,.09) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(140,120,84,.09) 0 1px,transparent 1px 5px);
  mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 92%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 92%);
}
.tabletop-rim{
  position:absolute;inset:3.5%;border-radius:50%;
  border:1px solid rgba(90,72,42,.16);
  opacity:0;transition:opacity 1s var(--ease) .25s;
}
.scene.lit .tabletop{opacity:1;transform:none}
.scene.lit .tabletop-rim{opacity:1}

/* props: the bottle, the glasses and the candle.
   Each prop carries its own --d settling delay. (The old
   `.prop:nth-of-type(n)` delays never matched anything: the plates are divs
   too, so type-counting ran past them. Do not bring that pattern back.) */
.prop{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:transform .8s var(--ease),opacity .6s var(--ease);
}
.scene.lit .prop{transform:translate(-50%,-50%) scale(1);opacity:1;transition-delay:var(--d,0s)}

/* ---- the wine glasses, seen from above ----
   The wine is a disc that grows as the courses arrive: --fill is set on the
   stage by the scroll controller, so the glasses top up with every plate. */
.prop.glass{width:var(--s);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.96),rgba(255,255,255,.62) 58%,rgba(178,163,128,.55) 100%);
  box-shadow:
    6px 9px 12px -7px rgba(60,48,24,.55),
    inset 0 0 0 1.5px rgba(255,255,255,.9),
    0 0 0 1px rgba(120,104,66,.16);
}
.prop.glass::after{
  content:"";position:absolute;inset:13%;border-radius:50%;
  background:var(--wine,rgba(120,32,52,.72));
  transform:scale(var(--fill,0));
  transition:transform 1.1s cubic-bezier(.25,.9,.3,1);
}
.prop.glass.red{--wine:radial-gradient(circle at 38% 34%,#A8394E,#701E33 70%,#4E1220 100%)}
.prop.glass.white{--wine:radial-gradient(circle at 38% 34%,#F2E3AC,#D9C079 68%,#B79E58 100%)}
/* the white glass runs a beat behind the red one */
.prop.glass.white::after{transition-delay:.14s}

/* ---- the bottle in the middle, seen from above ----
   The whole scene is top-down, so the bottle is three rings: the shoulder,
   the neck and the capsule. The offset shadow is what gives it height. */
.prop.bottle{width:var(--s);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#1A3419 0%,#162D16 64%,#091609 100%);
  box-shadow:
    /* a long shadow is what says "this one is tall" next to flat plates */
    24px 28px 26px -12px rgba(30,24,10,.5),
    0 5px 9px -4px rgba(30,24,10,.45),
    inset 0 0 0 1.5px rgba(206,226,196,.34);
}
.prop.bottle i,.prop.bottle b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;aspect-ratio:1;
}
.prop.bottle i{ /* the neck, stepped down from the shoulder */
  width:44%;
  background:radial-gradient(circle at 34% 28%,#496B44,#0E1C0D 80%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    3px 4px 6px -3px rgba(10,16,8,.7);
}
.prop.bottle b{ /* the capsule, and the cork inside it */
  width:28%;
  background:radial-gradient(circle at 38% 32%,#8E2338,#5C1524 78%);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.prop.bottle b::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#E0BE7C,#A67F3C 80%);
}
.prop.bottle::after{ /* one specular streak on the shoulder, near the rim */
  content:"";position:absolute;left:14%;top:20%;width:20%;height:9%;
  border-radius:50%;background:rgba(232,244,224,.55);
  transform:rotate(-38deg);filter:blur(.5px);
}

/* ---- the tealight ---- */
.prop.candle{width:var(--s);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#FFFFFF,#F2ECDE 62%,#DCD2BC 100%);
  box-shadow:5px 7px 9px -6px rgba(60,48,24,.5),inset 0 0 0 1px rgba(255,255,255,.8);
}
.prop.candle::after{
  content:"";position:absolute;inset:22%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#FFFBEC 0%,#FFD98A 34%,#F0A93F 66%,rgba(240,169,63,.35) 100%);
  box-shadow:0 0 16px 7px rgba(255,196,102,.42);
  animation:flicker 3.4s ease-in-out infinite;
}
@keyframes flicker{0%,100%{opacity:.86;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* ---------- plates ---------- */
/* Each plate is a cut-out photograph with a transparent background, not a drawn
   disc with a photo pasted into it. The box below is only a square slot: the
   image is `object-fit:contain` inside it, so the whole plate is always held,
   nothing is cropped, and the oval soutzoukakia platter stays oval. Anything
   that draws a circle here (background, border-radius, ring) would show through
   around a plate that is not round, so the box itself is invisible. */
.plate{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);aspect-ratio:1;
  opacity:0;
  transform:translate(-50%,-50%) scale(.28) translateY(-46px);
  transition:transform .85s cubic-bezier(.2,.86,.3,1.14),opacity .45s var(--ease);
  will-change:transform,opacity;
}
.plate.on{opacity:1;transform:translate(-50%,-50%) scale(var(--hover,1))}

.food{position:absolute;inset:0;display:block}
.food picture{display:block;width:100%;height:100%}
.food img{
  width:100%;height:100%;object-fit:contain;display:block;
  /* drop-shadow follows the alpha, so the shadow is the plate's own shape */
  filter:drop-shadow(0 12px 15px rgba(40,32,14,.5));
  opacity:0;transform:scale(1.12);
  transition:opacity .55s var(--ease) .14s,
             transform .9s cubic-bezier(.2,.86,.3,1.05) .14s,
             filter .35s var(--ease);
}
.plate.on .food img{opacity:1;transform:scale(1)}
.plate.active .food img{filter:drop-shadow(0 16px 20px rgba(40,32,14,.6)) drop-shadow(0 0 10px rgba(247,243,234,.18))}

/* hover: lift the plate a little and deepen its shadow. Pointer devices only,
   so a tap on a phone does not leave a plate stuck in the hovered state. */
@media (hover:hover) and (pointer:fine){
  .plate.on:hover{
    --hover:1.1;
    z-index:4;
    transition:transform .4s cubic-bezier(.2,.86,.3,1.1);
    cursor:pointer;
  }
  .plate.on:hover .food img{
    filter:drop-shadow(0 22px 26px rgba(40,32,14,.62)) drop-shadow(0 0 12px rgba(247,243,234,.2));
  }
}

/* little price/label flag that rides with the active plate */
/* the slot is bigger than the plate inside it (object-fit:contain), so the pin
   hugs the box far more tightly than it did against the old full-bleed disc */
.plate .pin{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%) translateY(6px);
  background:var(--shell);color:var(--ink);
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:.42em .85em;border-radius:999px;white-space:nowrap;
  opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
}
.plate.active .pin{opacity:1;transform:translateX(-50%)}
.plate .pin.up{bottom:auto;top:-4%;transform:translateX(-50%) translateY(-6px)}
.plate.active .pin.up{transform:translateX(-50%)}

.scene-hint{
  position:absolute;left:50%;bottom:clamp(14px,3vh,26px);transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:10px;
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,243,234,.68);
  transition:opacity .5s var(--ease);
}
.scene-hint.gone{opacity:0}
.scene-hint span.arrow{animation:hintBob 1.9s var(--ease) infinite}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- mobile ---------- */
@media (max-width:960px){
  .scene{--step-h:74vh;--step-h:74svh}
  /* rows are auto/auto, not auto/1fr: a 1fr caption row left a dead band of
     empty olive under the text and made the table look smaller than it is */
  .scene-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
    gap:clamp(14px,3vh,26px);
    /* The side padding sits on the copy, not on the grid. On the grid it made
       the column narrower than the stage, and an over-wide grid item aligns
       to the START rather than the centre - the served dish sat 15px right
       of centre. Do not move this back. */
    padding:clamp(76px,10vh,100px) 0 clamp(46px,7vh,64px);
    align-content:center;
  }
  .scene-copy{padding-inline:var(--pad)}
  .stage{order:1;width:min(58svh,90vw)}
  .scene-copy{order:2;width:100%;max-width:100%;text-align:center}
  .cap p{margin-inline:auto}
  .caps{margin-top:8px}
  .cap h3{font-size:clamp(1.5rem,6.4vw,2rem)}
  .cap p{font-size:.94rem}
  .rail{justify-content:center}
  .rail-bars{max-width:190px}
  .plate .pin{font-size:.5rem;padding:.36em .7em}
}
/* the thumb dock is on screen for the whole of this section, so the copy
   has to stop above it rather than slide under it */
@media (max-width:860px){
  .scene-inner{
    padding-bottom:calc(clamp(30px,5vh,48px) + 68px + env(safe-area-inset-bottom,0px));
  }
}
@media (max-width:600px){
  .scene{--step-h:70vh;--step-h:70svh}
  .plate .pin{display:none}
  /* the table is the point of this section, so it takes the width it needs
     and the caption is sized to fit under it */
  .stage{width:min(52svh,96vw)}
  .cap h3{font-size:clamp(1.35rem,5.6vw,1.8rem)}
  .cap p{font-size:.88rem;max-width:30ch;line-height:1.6}
  .cap .num{margin-bottom:10px}
  .cap .tag{margin-top:12px}
  .rail{margin-top:14px}
}
/* short phones (and landscape) - drop the tag rather than clip the description */
@media (max-height:700px) and (max-width:960px){
  .stage{width:min(44svh,84vw)}
  .cap .tag{display:none}
  .cap h3{font-size:clamp(1.3rem,5.2vw,1.65rem)}
  .cap p{font-size:.85rem}
}
/* landscape phones: no height to stack in, but plenty of width - go back to
   two columns rather than squeeze a full-screen stack into 390px of height */
@media (max-height:560px) and (min-width:600px){
  .scene-inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto;
    justify-items:stretch;align-items:center;
    gap:clamp(20px,3vw,40px);
    padding:clamp(58px,9vh,72px) var(--pad) 18px;
  }
  .stage{order:2;width:min(60svh,34vw)}
  .scene-copy{order:1;width:auto;max-width:46ch;text-align:left}
  .cap p{margin-inline:0;max-width:44ch}
  .caps{margin-top:6px}
  .rail{justify-content:flex-start;margin-top:14px}
}

/* ---------- no-JS / reduced motion fallback ---------- */
@media (prefers-reduced-motion:reduce){
  .scene-track{height:auto}
  .scene-sticky{position:relative;height:auto;min-height:0;padding-block:var(--sec)}
  .stage{transform:none}
  .plate,.tabletop,.tabletop-rim,.prop,.food img{opacity:1!important;transition:none!important}
  .prop.glass::after{transition:none!important}
  .plate{transform:translate(-50%,-50%) scale(1)!important}
  .prop{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)!important}
  .tabletop{transform:none!important}
  .food img{transform:none!important}
  .caps{display:grid;gap:26px}
  .cap{grid-area:auto;opacity:1;transform:none}
  .scene-hint{display:none}
  .prop.candle::after{animation:none}
}
html.no-js .scene-track{height:auto}
html.no-js .scene-sticky{position:relative;height:auto;padding-block:var(--sec)}
html.no-js .plate,html.no-js .tabletop,html.no-js .prop{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* --fill is normally set by the scroll controller; without JS, pour anyway */
html.no-js .stage{--fill:.9}
html.no-js .food img{opacity:1;transform:none}
html.no-js .tabletop{transform:none}
html.no-js .cap{grid-area:auto;opacity:1;transform:none}
html.no-js .caps{display:grid;gap:24px}



/* ==========================================================================
   ELEVATION LAYER - motion system, mobile-first chrome, reservation form
   Added 2026-08-15. Everything below degrades to the previous design if
   JS is off, and is neutralised by prefers-reduced-motion at the bottom.
   ========================================================================== */

/* ---------- cross-document page transitions (progressive enhancement) ----- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .32s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .42s var(--ease) both}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
.nav{view-transition-name:sabor-nav}
.foot{view-transition-name:sabor-foot}

/* ---------- film grain on the dark bands ---------------------------------
   Flat colour reads as a screenshot; a little tooth reads as paper.       */
.scene,.offer,.cta,.foot,.marquee,.pagehead{position:relative}
.scene::after,.offer .grain,.cta .grain,.foot::after,.pagehead .grain{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene::after{z-index:3}
.foot::after{opacity:.04}

/* ---------- word-level heading reveal - the site's signature move -------- */
/* when a heading is both a reveal target and word-split, [data-r] is only
   the trigger - the words do the moving, so the block itself stays put */
[data-split][data-r]{opacity:1;transform:none;transition:none}
[data-split] .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em;
}
[data-split] .w>i{
  display:inline-block;font-style:inherit;
  transform:translateY(112%);
  transition:transform .95s var(--ease);
}
[data-split].in .w>i{transform:none}

/* ---------- image wipe reveal ------------------------------------------- */
.rv-img{clip-path:inset(0 0 101% 0);transition:clip-path 1.15s var(--ease)}
.rv-img.in{clip-path:inset(0 0 0 0)}
.rv-img>img,.rv-img>picture>img{
  transform:scale(1.1);transition:transform 1.7s var(--ease);
}
.rv-img.in>img,.rv-img.in>picture>img{transform:none}

/* ---------- scroll parallax on the full-bleed bands ---------------------- */
/* NB: no position here. .hero-media is already position:absolute;inset:0 and
   a later single-class rule would override it, collapsing the hero to nothing.
   Anything that needs a containing block declares it for itself. */
.px-host{overflow:hidden}
.daily-media,.story-media{position:relative}
.px-host>picture{position:absolute;inset:0;display:block;overflow:hidden}
/* the layer is oversized so an 8% shift can never expose an edge */
.px-host>img,.px-host>picture>img{
  position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;
  will-change:transform;transform:translate3d(0,var(--py,0px),0);
}
/* picture wrappers everywhere else simply behave like the img used to */
picture{display:block}
.gallery picture,.story-media picture,.daily-media picture{width:100%;height:100%}
.offer>picture,.cta>picture,.reserve>picture{z-index:-2}

/* the one-shot hero zoom moves to the wrapper so the img is free to parallax */
.hero-media{transform:scale(1.07);animation:heroZoom 18s var(--ease) forwards}
.hero-media>picture>img,.hero-media>img{animation:none;transform:translate3d(0,var(--py,0px),0)}

/* ---------- buttons: fill sweeps up from the baseline -------------------- */
.btn{
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0%;
  transition:background-color .4s var(--ease),background-size .55s var(--ease),
             color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.btn-solid{background-image:linear-gradient(var(--olive-dk),var(--olive-dk))}
.btn-light{background-image:linear-gradient(#fff,#fff)}
.btn-ghost{background-image:linear-gradient(var(--shell-2),var(--shell-2))}
.btn-outline-light{background-image:linear-gradient(rgba(247,243,234,.14),rgba(247,243,234,.14))}
.btn:hover,.btn:focus-visible{background-size:100% 100%}
.btn-solid:hover{background-color:var(--olive)}
.btn-light:hover{background-color:var(--shell)}
.btn-outline-light:hover{background-color:transparent}

/* ---------- nav: retreats on the way down, returns on the way up --------- */
.nav{transform:translateY(0);transition:background .5s var(--ease),padding .5s var(--ease),
     border-color .5s var(--ease),color .5s var(--ease),transform .45s var(--ease)}
body.nav-up .nav{transform:translateY(-102%)}
body.menu-open .nav{transform:none}

.nav-prog{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--olive);transform:scaleX(var(--sp,0));transform-origin:0 50%;
  opacity:0;transition:opacity .4s var(--ease);
}
.nav.solid .nav-prog{opacity:.85}
/* the scroll-progress hairline has nothing to report over the open menu */
body.menu-open .nav-prog{opacity:0}

/* language switch: the pill slides rather than jumps */
.lang{position:relative;isolation:isolate}
.lang::before{
  content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);border-radius:999px;background:var(--olive);
  transform:translateX(var(--lx,0));
  transition:transform .42s var(--ease),background .35s var(--ease);
}
.lang button.on{background:transparent!important}
.lang button[data-set-lang="el"].on~*,.lang:has(button[data-set-lang="el"].on)::before{--lx:100%}
.nav.on-dark:not(.solid) .lang::before,body.menu-open .lang::before{background:rgba(247,243,234,.92)}
.nav.on-dark:not(.solid) .lang button.on,body.menu-open .lang button.on{color:var(--ink)}

/* ---------- thumb-zone dock (phones) ------------------------------------ */
.dock{
  position:fixed;z-index:75;left:0;right:0;bottom:0;
  display:none;gap:10px;align-items:center;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(34,38,31,.92),rgba(34,38,31,.72) 62%,rgba(34,38,31,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:translateY(130%);transition:transform .5s var(--ease),opacity .3s var(--ease);
  pointer-events:none;opacity:0;
}
body.docked .dock{transform:none;pointer-events:auto;opacity:1}
body.menu-open .dock,body.at-form .dock,body.lb-open .dock{transform:translateY(130%);opacity:0;pointer-events:none}
.dock a{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:50px;border-radius:999px;
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.dock .d-book{flex:1 1 auto;background:var(--shell);color:var(--ink)}
.dock .d-call{flex:0 0 50px;width:50px;border:1px solid rgba(247,243,234,.42);color:var(--shell)}
.dock .d-call svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
@media (max-width:860px){.dock{display:flex}}
@media (max-width:860px){.foot{padding-bottom:110px}}

/* ---------- gallery: a snap rail on phones, the mosaic on desktop -------- */
.gal-wrap{position:relative}
.gal-prog{display:none}
@media (max-width:900px){
  .gallery{
    display:flex;grid-template-columns:none;grid-auto-rows:auto;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    gap:10px;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{
    flex:0 0 min(78%,320px);scroll-snap-align:start;
    aspect-ratio:4/5;height:auto;
  }
  .gallery figure:last-child{margin-right:var(--pad)}
  .gal-prog{
    display:block;height:2px;margin-top:18px;background:var(--line);border-radius:2px;overflow:hidden;
  }
  .gal-prog i{
    display:block;height:100%;width:var(--gw,30%);background:var(--olive);border-radius:2px;
    transform:translateX(var(--gx,0));transition:transform .12s linear;
  }
}
.gallery figure{cursor:zoom-in}

/* ---------- lightbox ----------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(16,18,14,.96);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 12px calc(env(safe-area-inset-bottom,0px) + 58px);
}
body.lb-open{overflow:hidden}
body.lb-open .lb{display:flex}
.lb-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lb-fig img{
  max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;object-fit:contain;
  margin-inline:auto;border-radius:var(--r);
  opacity:0;transform:scale(.985);transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.lb.ready .lb-fig img{opacity:1;transform:none}
.lb-cap{
  color:rgba(247,243,234,.72);font-size:.8rem;line-height:1.5;text-align:center;
  max-width:56ch;margin-inline:auto;
}
.lb-close,.lb-nav{
  position:absolute;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;color:var(--shell);
  border:1px solid rgba(247,243,234,.28);background:rgba(247,243,234,.06);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.lb-close:hover,.lb-nav:hover{background:rgba(247,243,234,.16);border-color:rgba(247,243,234,.5)}
.lb-close{top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;font-size:1.2rem;line-height:1}
.lb-nav.prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-nav.next{right:12px;top:50%;transform:translateY(-50%)}
.lb-count{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  font-size:.66rem;letter-spacing:.22em;color:rgba(247,243,234,.6);font-variant-numeric:tabular-nums;
}
@media (max-width:620px){.lb-nav{display:none}}

/* ---------- eat & drink band (the bridge to menu.html / wine.html) ------- */
.pages-band{background:var(--shell-2)}
.pages-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
@media (max-width:760px){.pages-grid{grid-template-columns:1fr}}
.page-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  background:var(--shell);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3.4vw,42px);
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.page-card:hover{border-color:var(--olive-lt);transform:translateY(-3px);box-shadow:0 26px 50px -34px rgba(34,38,31,.5)}
.page-card .pc-n{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);font-weight:500}
.page-card h3{font-family:var(--f-display);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1}
.page-card .pc-tastes{list-style:none;padding:0;margin:0;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:16px}
.page-card .pc-tastes li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:.93rem;color:var(--ink-soft)}
.page-card .pc-tastes b{font-family:var(--f-display);font-size:1.02rem;font-weight:400;color:var(--ink)}
.page-card .pc-tastes span{font-variant-numeric:tabular-nums;flex:0 0 auto}
.page-card .link-u{margin-top:auto;align-self:flex-start}
.page-card .pc-count{
  position:absolute;top:clamp(26px,3.4vw,42px);right:clamp(26px,3.4vw,42px);
  font-family:var(--f-display);font-size:2.4rem;line-height:1;color:var(--sand-dk);
}
@media (max-width:520px){.page-card .pc-count{display:none}}

/* ---------- find us: the drawn map -------------------------------------- */
.map-card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#EAF0EE;
}
.map-frame{position:relative;aspect-ratio:4/3;background:var(--shell-2);overflow:hidden}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* shows through only if the embed is blocked or still loading */
.map-fallback{
  position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:26px;
  color:var(--ink-soft);font-size:.9rem;line-height:1.6;
}
.map-fallback b{font-family:var(--f-display);font-size:1.3rem;font-weight:400;color:var(--ink)}
@media (max-width:940px){.map-frame{aspect-ratio:3/2}}
@media (max-width:560px){.map-frame{aspect-ratio:1/1}}
.map-foot{
  display:flex;gap:10px;flex-wrap:wrap;padding:16px;border-top:1px solid var(--line);background:var(--shell);
}
.map-foot a{
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;
  border:1px solid var(--line);border-radius:999px;padding:.55em 1.1em;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.map-foot a:hover{border-color:var(--olive);color:var(--olive);background:var(--shell-2)}

/* ---------- reservation band -------------------------------------------- */
.reserve{position:relative;color:var(--shell);overflow:hidden;isolation:isolate}
.reserve::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,rgba(20,26,22,.9) 0%,rgba(20,26,22,.74) 46%,rgba(20,26,22,.5) 100%)}
.reserve-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:940px){.reserve-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}}
.reserve .lead{color:rgba(247,243,234,.84)}
.reserve-aside{display:grid;gap:22px;align-content:start}
.reserve-alt{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid rgba(247,243,234,.2)}
.reserve-alt li{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(247,243,234,.2)}
.reserve-alt b{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dk);font-weight:500}
.reserve-alt a,.reserve-alt span{font-size:.96rem;color:rgba(247,243,234,.88)}
.reserve-alt a{border-bottom:1px solid rgba(247,243,234,.32);transition:border-color .3s var(--ease)}
.reserve-alt a:hover{border-color:var(--shell)}

.form-card{background:var(--shell);color:var(--ink);box-shadow:0 40px 80px -50px rgba(0,0,0,.7)}
.form-card>form{display:grid;gap:0}
.form-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.form-head h3{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.12}
.form-head .fh-step{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);font-weight:500}

/* honeypot */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Validation messages used to be display:none until needed, so showing or
   hiding one shifted every control below it - including at the exact moment
   a field blurs and the thumb is already travelling somewhere else. The line
   is now always reserved and only its opacity changes: nothing ever moves. */
.field .err{
  display:block;min-height:1.25em;margin:0;
  font-size:.72rem;line-height:1.25;color:var(--terra);
  opacity:0;transform:translateY(-2px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.field.invalid .err{display:block;opacity:1;transform:none}
.field .err:empty{min-height:0}
.field.invalid .err:empty{min-height:1.25em}

/* quick day chips */
.daypick{display:flex;gap:8px;flex-wrap:wrap}
.day-chip{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;min-width:76px;padding:.5em .9em;
  border:1px solid var(--line);border-radius:14px;background:var(--shell-2);
  line-height:1.2;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.day-chip:hover{border-color:var(--olive-lt);transform:translateY(-1px)}
.day-chip b{font-size:.86rem;font-weight:500;letter-spacing:.01em}
.day-chip span{font-size:.68rem;color:var(--ink-soft);letter-spacing:.04em}
.day-chip.on{background:var(--olive);border-color:var(--olive);color:var(--shell)}
.day-chip.on span{color:rgba(247,243,234,.78)}

.field .hint{font-size:.72rem;color:var(--ink-soft);line-height:1.5}
.field.full{grid-column:1/-1}
.field input[type="date"],.field select{min-height:52px}
.field input,.field textarea{min-height:52px}
.guests label{min-height:46px;display:inline-flex;align-items:center;justify-content:center;min-width:46px}
.guests-more{margin-top:10px;display:none;max-width:140px}
.guests-more.show{display:block}

.r-summary{
  margin:26px 0 0;padding:18px 20px;border-radius:var(--r);
  background:var(--shell-2);border:1px solid var(--line);
  font-family:var(--f-display);font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.4;color:var(--ink);
  display:flex;align-items:center;gap:.7em;min-height:62px;
}
.r-summary{align-items:flex-start}
.r-summary .rs-dot{width:7px;height:7px;border-radius:50%;background:var(--sand-dk);flex:0 0 auto;margin-top:.62em;transition:background .4s var(--ease)}
.r-summary.ready .rs-dot{background:var(--olive)}
.r-summary.ready{border-color:var(--olive-lt)}
.r-summary em{font-style:normal;color:var(--ink-soft)}

.r-submit{width:100%;justify-content:center;margin-top:18px;min-height:58px}
.r-submit.sending{opacity:.6;pointer-events:none}
.form-note{margin-top:16px}

/* shown only when the request failed to send, so a booking that never left the
   browser is never dressed up as a confirmation */
.send-error{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  font-size:.82rem;line-height:1.5;
  color:#7A2B2B;background:rgba(160,54,54,.09);
  border:1px solid rgba(160,54,54,.28);
}
.form-note a{border-bottom:1px solid var(--line)}

.form-done svg{stroke-linecap:round;stroke-linejoin:round}
.form-done .fd-sum{
  display:inline-flex;margin-top:18px;padding:12px 20px;border-radius:999px;
  background:var(--shell-2);font-family:var(--f-display);font-size:1.1rem;
}

/* ---------- print: people do print the menu ------------------------------ */
@media print{
  .nav,.mobile,.dock,.skip,.scroll-hint,.marquee,.scene,.lb,.menu-index,
  .hero,.pagehead,.cta,.reserve,.gal-prog,.foot .foot-grid,.demo-flag{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:0;margin-block:14pt}
  .menu-layout{display:block}
  .menu-sec{break-inside:avoid}
  .menu-list li{break-inside:avoid;padding:6pt 0}
  .mi-name,.mi-price{font-size:11.5pt}
  .mi-sub{font-size:9.5pt}
  a[href]::after{content:""}
  .menu-callout{background:none;color:#000;border:1px solid #999}
}

/* ---------- touch & pointer refinements --------------------------------- */
@media (pointer:coarse){
  .lang button{min-height:40px;padding-inline:1.05em}
  .nav-links a{padding-block:10px}
  .foot ul a{padding-block:8px}
  .btn:hover{transform:none}
  .page-card:hover{transform:none}
}

/* ---------- reduced motion: switch the whole layer off ------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-media{animation:none;transform:none}
  .px-host>img,.px-host>picture>img,.px-host .px-layer{transform:none!important}
  [data-split] .w>i{transform:none!important;transition:none!important}
  .rv-img{clip-path:none!important}
  .rv-img>img,.rv-img>picture>img{transform:none!important;transition:none!important}
  .dock{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .btn{transition:background-color .2s,color .2s,border-color .2s}
}
/* Without JS the IntersectionObserver never fires, so every [data-r] block
   stayed at opacity 0 and most of the page was invisible. The no-JS build has
   to show everything up front. */
html.no-js [data-r]{opacity:1;transform:none;transition:none}
html.no-js [data-split] .w>i{transform:none}
html.no-js .rv-img{clip-path:none}
html.no-js .rv-img>img,html.no-js .rv-img>picture>img{transform:none}
html.no-js .hero-media{animation:none;transform:none}


/* inline links in the info/contact lists were 15–18px tall - below the 24px
   floor the headless pass enforces, and well below a comfortable thumb */
.info-list a,.reserve-alt a,.foot-bottom a,.form-note a,.m-foot a,
.event-facts dd a{display:inline-block;padding-block:7px}
.info-list li,.reserve-alt li{padding-block:12px}


/* ---------- polish pass ------------------------------------------------- */

/* the inactive half of the language pill was cream-on-cream over a dark nav */
.nav.on-dark:not(.solid) .lang button{color:var(--shell)}

/* both cards' dish lists start on the same line even when one title wraps */
@media (min-width:761px){.page-card h3{min-height:2.3em}}

/* form fields lift off the card instead of blending into it */
.form-card .field input,.form-card .field select,.form-card .field textarea{background:#FFFDF7}
.form-card .field input:hover,.form-card .field select:hover,.form-card .field textarea:hover{border-color:var(--sand-dk)}
.form-card .field .hint{margin:0}

/* four day chips do not fit across a 390px card - two rows of two do, and
   they give the thumb a much bigger target than a squeezed single row */
.daypick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:620px){.daypick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.day-chip{min-width:0}

/* the date input reads as a secondary path once the chips are there */
.field .daypick+.hint{margin-top:2px;color:var(--ink-soft);opacity:.9}


/* ---------- round two ---------------------------------------------------- */

/* All six dishes are served on a phone too. The pinned track is shortened
   instead of the menu: 6 x 52svh is about the same scroll as 4 x 70svh was. */
@media (max-width:960px){.scene{--step-h:54vh;--step-h:54svh}}
@media (max-width:600px){.scene{--step-h:46vh;--step-h:46svh}}

/* The left column's first line now starts level with the form's first line.
   (No position:sticky here - .reserve is a parallax host with overflow:hidden,
   which makes it the scroll container and offsets a sticky child at rest.) */
@media (min-width:941px){
  .reserve-aside{padding-top:clamp(26px,4vw,46px)}
}

/* the summary only takes up room once it has something to say */
.r-summary{display:none}
.r-summary.has{display:flex}

/* The copy row was minmax(0,1fr), so it swallowed all the slack and the
   stack sat high with a dead band under the progress rail. Both rows are
   intrinsic now and align-content:center balances the whole thing; the
   caption cell is still the height of the tallest caption, so nothing jumps. */
@media (max-width:960px){
  .scene-inner{grid-template-rows:auto auto}
  .scene-copy{align-self:start}
}


/* ---------- round three ------------------------------------------------- */

/* Email and Occasion are gone, so the card needs less room and the copy
   beside it can breathe. */
.reserve-grid{grid-template-columns:1.08fr .92fr}
@media (max-width:940px){.reserve-grid{grid-template-columns:1fr}}

/* the note under the button sits on one line on any real screen; it was
   capped at 38ch by an older rule, which is what forced it to wrap */
.form-note{font-size:.8rem;max-width:none}
@media (min-width:941px){.form-note{white-space:nowrap}}

/* below ~1100px the card is narrow enough that the note needs a step down
   to keep its single line, rather than clipping */
@media (min-width:941px) and (max-width:1099px){.form-note{font-size:.74rem}}

/* the narrower card broke the guest pills onto three ragged rows;
   a fixed 4-up grid gives two tidy rows that match the time field's height */
.form-card .guests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.form-card .guests label{width:100%}

/* ==========================================================================
   MOBILE FIXES - round four
   ========================================================================== */

/* --navh and --railh are now measured by main.js and written onto :root, so
   this is the single source of truth for how far an anchor must clear the
   chrome. It must come last: the earlier @media override of --anchor-off
   was built for the hard-coded values. */
:root{--railh:0px;--anchor-off:calc(var(--navh) + var(--railh) + 20px)}

/* the rail is opaque enough that list items cannot ghost through it */
@media (max-width:940px){
  .menu-index{background:rgba(247,243,234,.985)}
}

/* ---- the reservation section on a phone ---------------------------------
   Tapping "Book a table" landed on the heading and the fallback contact list,
   with the form itself below the fold. The form now follows the heading and
   the alternatives move underneath it. */
@media (max-width:940px){
  /* align-items on the desktop grid rule is `start`; in a column flexbox
     that is the CROSS axis, so every child shrank to its content width
     and the form card sat left-aligned with a gap down its right side. */
  .reserve-grid{display:flex;flex-direction:column;gap:20px;align-items:stretch}
  .reserve-aside{display:contents}
  .reserve-aside>.eyebrow{order:1}
  .reserve-aside>.h2{order:2}
  .reserve-aside>.lead{order:3}
  .form-card{order:4}
  .reserve-alt{order:5;margin-top:4px}
}

/* ---- form controls must never outgrow their column ----------------------
   A native date input carries an intrinsic width, and a flex/grid child
   defaults to min-width:auto, so it can push out of the card on iOS even
   though width:100% is set. */
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}
.field input[type="date"]{
  -webkit-appearance:none;appearance:none;
  display:block;text-align:left;
}
/* iOS shrinks the native calendar button oddly inside a flex column */
.field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.field input[type="date"]::-webkit-calendar-picker-indicator{margin-inline-start:auto}

/* ==========================================================================
   THE SERVICE, ON A PHONE (860px and below)
   ==========================================================================
   A dish is served before it is seated. It arrives in the middle of the
   table at full size, is held there long enough to be read, and only then
   travels out to its own place while the next one is brought. One
   uninterrupted move each way, and the exact reverse on the way back up.

   The earlier version landed the dish in its seat and then magnified it,
   which read as two separate events - the thing Panayiotis called out.

   --zx / --zy are set per plate by main.js: the distance from that plate's
   seat to the middle of the table, in the plate's own box units. A plate
   that has not been served yet already sits in the middle, invisible and a
   little smaller, so its arrival is a single grow-and-fade rather than a
   flight across the table.
   ========================================================================== */
@media (max-width:860px){
  .plate{
    transform:translate(-50%,-50%) translate(var(--zx,0),var(--zy,0)) scale(2.62);
    opacity:0;
    transition:transform .8s cubic-bezier(.22,.84,.28,1),opacity .5s var(--ease);
  }
  .plate.on{opacity:1}

  /* in the middle, being served */
  .plate.on.fore{
    transform:translate(-50%,-50%) translate(var(--zx,0),var(--zy,0)) scale(3);
    z-index:6;
  }
  /* and then out to its seat: a longer, calmer move, because it travels */
  .plate.on:not(.fore){
    transform:translate(-50%,-50%) scale(1);
    transition:transform .95s cubic-bezier(.3,.78,.26,1),opacity .55s var(--ease);
  }

  /* the plate element does the moving, so the photo inside just sits in it */
  .food img{opacity:1;transform:none;transition:filter .4s var(--ease)}
  .plate.on.fore .food img{filter:drop-shadow(0 16px 22px rgba(18,24,10,.55))}
  .plate.on:not(.fore) .food img{filter:drop-shadow(0 8px 11px rgba(40,32,14,.5))}

  /* while a dish is being served the table sits back, but stays a table */
  .tabletop,.tabletop-rim,.prop,.plate.on:not(.fore){
    transition:transform .8s var(--ease),opacity .55s var(--ease);
  }
  .scene.serving .tabletop,
  .scene.serving .tabletop-rim,
  .scene.serving .prop{opacity:.52}
  .scene.serving .plate.on:not(.fore){opacity:.5}

  /* the pin would be magnified with the plate, so it sits this one out */
  .plate.fore .pin{opacity:0}
}
}