/* Fonts, self-hosted (latin subset, variable weight). Same origin as the page: no
   third-party connections before first paint. Source: Google Fonts, SIL Open Font License. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/cormorant-garamond-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =============================================================
   TOKENS. The only place a colour value is written.
   ============================================================= */
:root{
  --slate-900:#12140F;
  --slate-850:#1A1D16;
  --slate-800:#20241B;
  --slate-700:#2A2F22;
  --slate-600:#3B412F;

  --white-50:#F7F1E6;
  --white-200:#E3D7C2;
  --muted:#C4BAA8;

  --gold-300:#F0B357;
  --gold-400:#E29B33;
  --leaf-400:#6FA982;

  --ink:var(--white-50);
  --accent:var(--gold-300);

  --step--1:0.875rem;
  --step-0:1rem;
  --step-1:1.125rem;
  --step-2:1.5rem;
  --step-3:2rem;
  --step-4:2.6rem;
  --step-5:4rem;

  --s-1:0.5rem;  --s-2:0.75rem; --s-3:1rem;
  --s-4:1.5rem;  --s-5:2rem;    --s-6:3rem;  --s-7:4.5rem;

  --wrap:1120px;
  --radius:12px;
  --tap:44px;
  --bar:60px;

  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-mode="day"]{--accent:var(--leaf-400)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--slate-900);color:var(--ink);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;
  overflow-x:hidden;padding-bottom:var(--bar);-webkit-font-smoothing:antialiased;
}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.1;margin:0}
p{margin:0}
address{font-style:normal}
a{color:var(--gold-300)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-4)}
.section{padding-block:var(--s-6);scroll-margin-top:32px}
@media(min-width:768px){.section{padding-block:var(--s-7);scroll-margin-top:12px}}

.eyebrow{
  font-size:0.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-3);font-weight:600;
}
.h-sec{font-size:var(--step-3);letter-spacing:.005em}
@media(min-width:768px){.h-sec{font-size:2.6rem}}
.lede{color:var(--muted);font-size:var(--step-1);max-width:58ch;line-height:1.7}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold-300);color:var(--slate-900);padding:var(--s-2) var(--s-3);z-index:100;font-weight:600}
.skip:focus{left:var(--s-3);top:var(--s-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:var(--s-2) var(--s-5);border-radius:2px;
  text-decoration:none;font-weight:600;font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold-300);color:var(--slate-900)}
.btn-primary:hover{background:var(--gold-400)}
.btn-ghost{border-color:var(--slate-600);color:var(--ink);background:rgba(18,20,15,.4)}
.btn-ghost:hover{border-color:var(--gold-300);color:var(--gold-300)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.site-header.stuck{background:rgba(18,20,15,.94);backdrop-filter:blur(12px);border-bottom-color:var(--slate-700)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:var(--s-2)}
@media(min-width:768px){.site-header .wrap{min-height:76px}}

.brand{display:flex;align-items:center;gap:10px;min-height:var(--tap);text-decoration:none;color:var(--ink)}
.brand .mark{width:32px;height:32px;flex:none}
@media(min-width:768px){.brand .mark{width:38px;height:38px}}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-type .n1{font-family:var(--font-display);font-size:1.15rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.brand-type .n2{font-size:.5rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media(min-width:768px){.brand-type .n1{font-size:1.35rem}.brand-type .n2{font-size:.55rem}}

.nav{display:none;gap:var(--s-5);align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;min-height:var(--tap);display:inline-flex;align-items:center;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:1px;background:var(--gold-300);transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
@media(min-width:900px){.nav{display:flex}}

/* Day/night toggle. Unused while DAY_PHOTO is false, kept for the day photo. */
.mode{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);
  padding:0 var(--s-3);border-radius:2px;border:1px solid var(--slate-600);
  background:rgba(18,20,15,.45);color:var(--ink);cursor:pointer;font:inherit;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;margin-top:-64px;padding-top:64px}
@media(min-width:768px){.hero{min-height:94svh;margin-top:-76px;padding-top:76px}}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media picture{position:absolute;inset:0}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  opacity:0;transition:opacity 1.1s var(--ease);animation:kb 30s ease-out both;
}
html[data-mode="night"] .hero-media .n{opacity:1}
html[data-mode="day"]   .hero-media .d{opacity:1}
@keyframes kb{from{transform:scale(1.001)}to{transform:scale(1.08)}}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(18,20,15,.55) 0%,rgba(18,20,15,.10) 28%,rgba(18,20,15,.80) 66%,var(--slate-900) 100%),
    linear-gradient(90deg,rgba(18,20,15,.62) 0%,transparent 62%);
}
.lantern{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(340px 340px at var(--lx,50%) var(--ly,40%),rgba(240,179,87,.20),transparent 70%)}
@media(pointer:fine){.hero:hover .lantern{opacity:1}}

.hero-inner{padding-block:var(--s-6) calc(var(--s-5) + var(--bar));position:relative}
@media(min-width:900px){.hero-inner{padding-bottom:var(--s-7)}}
.hero-logo{width:180px;height:auto;margin-bottom:var(--s-4)}
@media(min-width:768px){.hero-logo{width:240px}}
.hero h1{font-size:var(--step-4);max-width:16ch;font-weight:400;letter-spacing:.01em}
@media(min-width:768px){.hero h1{font-size:var(--step-5)}}
.hero .lede{margin-top:var(--s-3);font-size:var(--step-0);color:var(--white-200)}
@media(min-width:768px){.hero .lede{font-size:var(--step-1)}}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.hero-actions .btn{flex:1 1 auto;min-width:150px}
@media(min-width:520px){.hero-actions .btn{flex:0 0 auto}}

.badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  border:1px solid var(--gold-400);color:var(--gold-300);background:rgba(240,179,87,.13);
  padding:7px var(--s-3);font-size:.75rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:var(--s-4);border-radius:2px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold-300);flex:none;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}

/* ---------- venue ---------- */
.split{display:grid;gap:var(--s-5)}
@media(min-width:900px){.split{grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--s-7)}}
.zones{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.zone{background:var(--slate-850);border:1px solid var(--slate-700);border-radius:var(--radius);padding:var(--s-4)}
.zone h3{font-size:1.4rem;margin-bottom:2px}
.zone p{color:var(--muted)}
.frame{border-radius:var(--radius);overflow:hidden;position:relative;background:var(--slate-800)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s var(--ease)}
@media(pointer:fine){.frame:hover img{transform:scale(1.04)}}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);margin-top:var(--s-5)}
@media(min-width:768px){.gallery{grid-template-columns:repeat(4,1fr);gap:var(--s-3)}}
.gallery .frame img{aspect-ratio:3/4}

/* ---------- menu. Styles for the MENU SLOT, ready before the content. ---------- */
.menu-nav{
  position:sticky;top:64px;z-index:20;display:flex;gap:var(--s-2);overflow-x:auto;
  padding:var(--s-3) 0;margin-bottom:var(--s-4);scrollbar-width:none;
  background:linear-gradient(180deg,var(--slate-850) 74%,transparent);
}
@media(min-width:768px){.menu-nav{top:76px}}
.menu-nav::-webkit-scrollbar{display:none}
.menu-nav a{
  flex:none;min-height:var(--tap);display:inline-flex;align-items:center;padding:0 var(--s-3);
  border:1px solid var(--slate-600);border-radius:2px;color:var(--ink);text-decoration:none;
  font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.menu-nav a.active{background:var(--gold-300);border-color:var(--gold-300);color:var(--slate-900)}
.menu-grid{display:grid;gap:var(--s-6)}
@media(min-width:768px){.menu-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-7) var(--s-6)}}
.course{scroll-margin-top:130px}
.course-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);border-bottom:1px solid var(--slate-700);padding-bottom:var(--s-2);margin-bottom:var(--s-2)}
.course-head h3{font-size:1.65rem;letter-spacing:.02em}
.portions{display:flex;gap:var(--s-3);font-size:.75rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;flex:none}
.portions span{width:60px;text-align:right}
.dish{display:grid;grid-template-columns:1fr auto;gap:2px var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--slate-700)}
.dish:last-child{border-bottom:0}
.dish-name{font-weight:500}
.dish-desc{grid-column:1/2;color:var(--muted);font-size:var(--step-0);line-height:1.5}
.dish-prices{display:flex;gap:var(--s-3);align-items:baseline}
.price{width:60px;text-align:right;color:var(--gold-300);font-variant-numeric:lining-nums tabular-nums;font-weight:500}
.dishes{list-style:none;margin:0;padding:0}
.dish-desc{display:block}
.course-note{color:var(--muted);font-size:var(--step-0);margin-bottom:var(--s-1)}

/* ---------- find us ---------- */
.facts{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
@media(min-width:768px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact h3{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-2);font-family:var(--font-body);font-weight:600}
.fact address,.fact p{color:var(--white-200);font-size:var(--step-1);line-height:1.6}
.fact .hero-actions{margin-top:var(--s-3)}

.book{background:var(--slate-850);border:1px solid var(--slate-700);border-radius:var(--radius);padding:var(--s-5);position:relative;overflow:hidden}
@media(min-width:768px){.book{padding:var(--s-7)}}
.book::before{content:"";position:absolute;inset:-45% -12% auto auto;width:400px;height:400px;background:radial-gradient(circle,rgba(240,179,87,.14),transparent 66%);pointer-events:none}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--slate-700);padding-block:var(--s-5);color:var(--muted);font-size:var(--step-0)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:center}
.socials{display:flex;gap:var(--s-4)}
.socials a{min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.socials a:hover{color:var(--gold-300)}

/* ---------- mobile action bar ---------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--slate-700);border-top:1px solid var(--slate-700);padding-bottom:env(safe-area-inset-bottom);}
.actionbar a{min-height:var(--bar);display:flex;align-items:center;justify-content:center;gap:var(--s-1);background:var(--slate-850);color:var(--ink);text-decoration:none;font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.actionbar a.primary{background:var(--gold-300);color:var(--slate-900)}
.actionbar a:focus-visible{outline-offset:-4px}
@media(min-width:900px){.actionbar{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .lantern{display:none}
}

/* ---------- /menu page (rendered by api/menu.js from the Google Sheet) ---------- */
.course-head h2{font-size:1.65rem;letter-spacing:.02em}
.menu-page{padding-block:var(--s-5) var(--s-6)}
.menu-page h1{font-size:var(--step-4);letter-spacing:.01em}
.menu-page .lede{margin-top:var(--s-2)}
.notice{margin-top:var(--s-4);border:1px solid var(--gold-400);background:rgba(240,179,87,.10);color:var(--white-200);padding:var(--s-3) var(--s-4);border-radius:var(--radius)}
.dish-main{min-width:0}
.dish.sold .dish-name,.dish.sold .price{color:var(--muted)}
.dish.sold .price{text-decoration:line-through}
.soldout{display:inline-block;margin-left:var(--s-1);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--white-200);border:1px solid var(--slate-600);border-radius:2px;padding:0 6px;vertical-align:2px;white-space:nowrap}
.menu-foot{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ---------- /menu, phone first: one hand, quick scanning ---------- */
.menu-body .site-header{position:static}             /* only the section bar stays pinned */
.menu-body .menu-page{padding-block:var(--s-3) var(--s-6)}
.menu-body .menu-page h1{font-size:var(--step-3)}
.menu-body .menu-page .lede{font-size:var(--step-0);margin-top:var(--s-1)}
.menu-body .notice{margin-top:var(--s-3)}
.menu-body .menu-nav{top:0;padding-block:var(--s-1);margin-bottom:var(--s-2)}
.menu-body .course{scroll-margin-top:72px}
.menu-body .menu-grid{gap:var(--s-5)}
.menu-body .dish{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name prices" "desc .";column-gap:var(--s-3);align-items:baseline;padding-block:10px}
.menu-body .dish-prices,.menu-body .portions{gap:var(--s-2)}
.menu-body .price,.menu-body .portions span{width:3.4rem}  /* rem: grows with the phone's text size, so prices never spill */
.menu-body .dish-main{grid-area:name;min-width:0;overflow-wrap:anywhere}
.menu-body .course-head h2{min-width:0;overflow-wrap:anywhere}
@media(max-width:767px){.menu-body .menu-grid{grid-template-columns:minmax(0,1fr)}}
.menu-body .dish-prices{grid-area:prices}
.menu-body .dish-desc{grid-area:desc;margin:2px 0 0;line-height:1.45}
@media(min-width:768px){
  .menu-body .menu-page{padding-block:var(--s-5) var(--s-6)}
  .menu-body .menu-page h1{font-size:var(--step-4)}
  .menu-body .menu-grid{gap:var(--s-6) var(--s-6)}
}