/* ============================================================
   LONGO RISTORANTE & PIZZERIA
   rich black · warm ivory · muted gray · deep burgundy
   Playfair Display (editorial serif) + Mulish (clean body)
   ============================================================ */
:root{
  --black:#0a0a0b;
  --black-2:#0f0f11;
  --char:#141416;
  --panel:#191a1c;
  --ivory:#ECECEE;
  --ivory-2:#CBCBD1;
  --gray:#8a8a91;
  --gray-2:#7c7c85;   /* AA-compliant (~4.7:1 on near-black) for de-emphasized text */
  --burgundy:#1c1c20;
  --burgundy-2:#141416;
  --gold:#C4C8CE;      /* silver accent */
  --line:rgba(236,236,238,.16);
  --line-2:rgba(236,236,238,.09);
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans); color:var(--ivory);
  background:var(--black);
  line-height:1.7; font-size:clamp(1rem,.95rem+.2vw,1.075rem); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.locked{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:#3a3b42; color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* dark page texture: warm charcoal gradient wash */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #1b1b1e 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0b, #101012 40%, #0a0a0b 100%);
}

/* ---------- shared ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* hidden container that holds the real Resy widget button (clicks are forwarded to it) */
.resy-hidden{ position:absolute !important; left:0; top:0; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; pointer-events:none; }
.eyebrow{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  letter-spacing:.32em; font-size:.7rem; color:var(--gold);
}
.h-serif{ font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.01em; color:var(--ivory); }
.section-title{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.01em;
  font-size:clamp(2.3rem,1.5rem+3.2vw,3.9rem); color:var(--ivory); }

/* ornamental divider: hairline — diamond — hairline */
.ornament{ display:flex; align-items:center; gap:1rem; }
.ornament .l{ height:1px; width:clamp(48px,10vw,120px); background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament .l.r{ background:linear-gradient(270deg,transparent,var(--gold)); }
.ornament .d{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex:none; box-shadow:0 0 0 3px rgba(196,200,206,.14); }
.ornament.center{ justify-content:center; }

/* buttons */
.btn{
  --bg:transparent; --fg:var(--ivory); --bd:rgba(242,233,218,.5);
  font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; line-height:1; display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 1.9em; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  cursor:pointer; transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn .a{ transition:transform .45s var(--ease); }
.btn:hover .a{ transform:translateX(3px); }
.btn.solid{ --bg:var(--ivory); --fg:#17171b; --bd:var(--ivory); }
.btn.solid:hover{ --bg:var(--gold); --bd:var(--gold); box-shadow:0 14px 34px -14px rgba(196,200,206,.5); }
.btn.gold{ --bg:transparent; --fg:var(--gold); --bd:rgba(196,200,206,.55); }
.btn.gold:hover{ --bg:var(--gold); --fg:#17171b; --bd:var(--gold); }
.btn.ghost:hover{ --bg:var(--ivory); --fg:#17171b; --bd:var(--ivory); }
.btn.wine{ --bg:var(--burgundy); --fg:var(--ivory); --bd:var(--burgundy); }
.btn.wine:hover{ --bg:var(--burgundy-2); --bd:var(--burgundy-2); }

/* =====================================================
   NAV
   ===================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem var(--pad);
  background:rgba(10,10,12,.72); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid transparent; transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.nav.scrolled{ background:rgba(10,10,12,.94); border-bottom-color:var(--line-2); }
.nav__brand{ display:flex; align-items:center; flex:none; }
/* uses the supplied "longo sign.png" unmodified; a real <img> (crisp downscale)
   inside a frame that crops the transparent margins — file itself untouched */
.nav__logo{ display:block; height:42px; aspect-ratio:2.3005 / 1; position:relative; overflow:hidden; }
.nav__logo img{ position:absolute; left:50%; top:50%; height:365%; width:auto; max-width:none; transform:translate(-48.88%,-50%); }
@media (max-width:880px){ .nav__logo{ height:37px; } }
.nav__links{ display:flex; align-items:center; gap:2.1rem; list-style:none; }
.nav__links a{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; color:var(--ivory-2); position:relative; padding:.4rem 0; transition:color .35s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .4s var(--ease); }
.nav__links a:hover{ color:#fff; } .nav__links a:hover::after{ width:100%; }
.nav__cta.btn{ padding:.75em 1.5em; }
.nav__right{ display:flex; align-items:center; gap:1.8rem; }
.burger{ display:none; width:46px; height:46px; border:0; background:none; cursor:pointer; position:relative; z-index:90; }
.burger span{ position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:var(--ivory); transition:opacity .3s, transform .3s; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
body.menu-open .burger{ opacity:0; pointer-events:none; }

.drawer{
  position:fixed; inset:0; z-index:95; background:linear-gradient(180deg,#141416,#08080a);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--pad) + .5rem) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom,0px));
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer__close{ position:absolute; top:1.05rem; right:1.05rem; width:48px; height:48px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.03); cursor:pointer; display:grid; place-items:center; transition:background .3s, border-color .3s; }
.drawer__close::before, .drawer__close::after{ content:""; position:absolute; width:19px; height:2px; border-radius:2px; background:var(--ivory); transition:background .3s; }
.drawer__close::before{ transform:rotate(45deg); } .drawer__close::after{ transform:rotate(-45deg); }
.drawer__close:hover{ background:var(--gold); border-color:var(--gold); }
.drawer__close:hover::before, .drawer__close:hover::after{ background:#111; }
.drawer nav{ width:100%; }
.drawer ul{ list-style:none; display:flex; flex-direction:column; align-items:center; gap:1.15rem; }
.drawer a.dlink{ font-family:var(--serif); font-size:clamp(1.55rem,6.4vw,2rem); line-height:1; color:var(--ivory); letter-spacing:.01em; transition:color .3s; }
.drawer a.dlink:hover, .drawer a.dlink:active{ color:var(--gold); }
.drawer__rule{ width:46px; height:1px; background:var(--line); margin:2rem 0; }
.drawer .dfoot{ display:flex; flex-direction:column; gap:.75rem; width:min(300px,82vw); }
.drawer .dfoot .btn{ width:100%; justify-content:center; letter-spacing:.12em; padding:1.05em 1.5em; font-size:.7rem; }
.drawer .dmeta{ margin-top:1.9rem; color:var(--gray); line-height:1.85; font-size:.92rem; letter-spacing:.02em; }
.drawer .dmeta a{ color:var(--ivory-2); } .drawer .dmeta a:hover{ color:var(--gold); }

/* =====================================================
   HERO
   ===================================================== */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-start; justify-content:center; text-align:center; overflow:hidden; }
/* nudge content lower on larger screens so it fills more of the screen;
   Discover cue is in flow (never overlaps) */
@media (min-width:900px){ .hero__inner{ padding-top:calc(6.75rem + 5vh); } }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.08); animation:kb 20s var(--ease) forwards; }
@keyframes kb{ to{ transform:scale(1); } }
.hero__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.15) 20%, rgba(10,10,12,.12) 55%, rgba(10,10,12,.72) 88%, rgba(10,10,12,.95) 100%),
    radial-gradient(90% 70% at 50% 46%, transparent 40%, rgba(10,10,12,.55) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:9rem var(--pad) 5.25rem; width:100%; }
/* crops the round logo's transparent top/bottom padding so its box hugs the circle */
.hero__logo{ display:block; width:min(clamp(300px,46vw,500px), 80vw); height:auto; aspect-ratio:1.15 / 1; object-fit:cover; object-position:center; margin:0 auto; background:none; border:0; box-shadow:none; }
.hero__tagline{ margin-top:1.9rem; }
.hero__tagline .eyebrow{ color:var(--ivory-2); letter-spacing:.4em; }
.hero__cta{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero__scroll{ margin-top:clamp(1.9rem,4.5vh,3rem); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem; font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gray); }
.hero__scroll .l{ width:1px; height:56px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll .l::after{ content:""; position:absolute; inset:0; width:100%; height:40%; background:var(--gold); animation:drop 2.6s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(230%);} }

/* =====================================================
   DINE WITH US
   ===================================================== */
.dine{ padding-top:clamp(2.9rem,6vh,4.75rem); padding-bottom:clamp(3.4rem,7vh,6rem); }
.dine__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
@media(min-width:900px){ .dine__grid{ grid-template-columns:1.02fr .98fr; } }
.dine__body .eyebrow{ display:block; margin-bottom:1rem; }
.dine__body .ornament{ margin:1.4rem 0 1.8rem; }
.dine__orn > .l:first-child{ display:none; }
.dine__body p{ color:var(--ivory-2); font-size:clamp(1.05rem,1rem+.35vw,1.2rem); line-height:1.95; font-weight:300; max-width:40ch; }
.dine__body p .lead-in{ font-family:var(--serif); font-style:italic; color:var(--gold); }
.dine__body .dine__cta{ margin-top:2rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.dine__figure{ position:relative; }
.dine__figure .img{ position:relative; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.85); }
.dine__figure .img::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line); }
.dine__figure img{ width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; transition:transform 1.2s var(--ease); }
.dine__figure:hover img{ transform:scale(1.04); }
.dine__figure .cap{ position:absolute; left:0; bottom:22px; background:rgba(18,18,20,.9); color:var(--ivory);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:inset 3px 0 0 var(--gold), inset 0 0 0 1px var(--line);
  font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.58rem; padding:.8em 1.3em; }

/* =====================================================
   GALLERY
   ===================================================== */
.gallery{ padding-top:clamp(2.9rem,6vh,4.75rem); padding-bottom:clamp(3.4rem,7vh,6rem); border-top:1px solid var(--line-2); }
.gallery__head{ text-align:center; margin-bottom:clamp(2.5rem,5vh,4rem); }
.gallery__head .ornament{ margin-top:1.2rem; }
/* masonry: JS sets each tile's row-span; grid-auto-rows:auto is a safe no-JS fallback */
.gallery__grid{ display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; gap:10px; grid-auto-flow:row dense; align-items:start; }
@media(min-width:680px){ .gallery__grid{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media(min-width:1024px){ .gallery__grid{ grid-template-columns:repeat(4,1fr); } }
.gtile{ position:relative; overflow:hidden; margin:0; }
.gtile img{ display:block; width:100%; height:auto; transition:transform 1.1s var(--ease), filter .6s; filter:saturate(1) brightness(.97); }
.gtile::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-2); pointer-events:none; }
.gtile:hover img{ transform:scale(1.05); filter:saturate(1.04) brightness(1.03); }
.gtile.feature{ grid-column:span 2; }

/* home teaser: 4 uniform tiles + a link to the full gallery page */
.gallery__preview{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:760px){ .gallery__preview{ grid-template-columns:repeat(4,1fr); gap:12px; } }
.gpv{ position:relative; overflow:hidden; margin:0; }
.gpv img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform 1.1s var(--ease), filter .6s; filter:saturate(1) brightness(.97); }
.gpv::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-2); pointer-events:none; }
.gpv:hover img{ transform:scale(1.05); filter:saturate(1.04) brightness(1.03); }
.gallery__more{ text-align:center; margin-top:clamp(1.9rem,4.5vh,3rem); }

/* =====================================================
   VISIT / LOCATION
   ===================================================== */
.visit{ padding-top:clamp(2.9rem,6vh,4.75rem); padding-bottom:clamp(3.4rem,7vh,6rem); border-top:1px solid var(--line-2); }
.visit__head{ text-align:center; margin-bottom:clamp(2.6rem,5vh,4rem); }
.visit__head .eyebrow{ display:block; margin-bottom:1rem; }
.visit__head .ornament{ margin-top:1.3rem; }
.visit__map{ position:relative; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 90px -50px rgba(0,0,0,.9); background:#0f0d0b; }
.visit__map iframe{ display:block; width:100%; height:clamp(320px,46vh,460px); border:0; filter:grayscale(.92) contrast(1.04) brightness(.9); }
.visit__actions{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:1.8rem; }

.info{ display:grid; grid-template-columns:1fr; gap:2.6rem; margin-top:clamp(2.6rem,5vh,3.6rem); }
@media(min-width:760px){ .info{ grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem); } }
.info__col h3{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.24em; font-size:.7rem; color:var(--gold); margin-bottom:1.3rem; padding-bottom:1.3rem; border-bottom:1px solid var(--line); }
.info__col.addr .place{ font-family:var(--serif); font-size:1.5rem; line-height:1.4; color:var(--ivory); }
.info__col.addr .place span{ display:block; }
.info__col.addr a.tel{ display:inline-block; margin-top:1rem; font-size:1.15rem; color:var(--ivory-2); letter-spacing:.02em; transition:color .35s; }
.info__col.addr a.tel:hover{ color:var(--gold); }
.info__col.addr .mini{ margin-top:1.4rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.info__col.addr .mini a{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; color:var(--ivory-2); border:1px solid var(--line); padding:.7em 1em; transition:all .35s; }
.info__col.addr .mini a:hover{ color:#17171b; background:var(--gold); border-color:var(--gold); }
.hrow{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.5rem 0; border-bottom:1px solid var(--line-2); }
.hrow .d{ font-family:var(--serif); font-size:1.06rem; color:var(--ivory); }
.hrow .t{ color:var(--gray); font-size:.92rem; letter-spacing:.02em; text-align:right; white-space:nowrap; }
.hrow.closed .t{ color:var(--gray-2); font-style:italic; }

/* =====================================================
   FOOTER
   ===================================================== */
.footer{ background:linear-gradient(180deg,#0a0a0b,#000); border-top:1px solid var(--line); padding-block:clamp(3rem,6vh,4.75rem); text-align:center; }
.footer__inner{ max-width:640px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.footer__logo{ width:78px; height:78px; margin-bottom:1rem; }
.footer .fname{ font-family:var(--serif); font-size:1.35rem; letter-spacing:.05em; color:var(--ivory); }
.footer address{ font-style:normal; color:var(--gray); margin-top:.55rem; line-height:1.85; font-size:.94rem; letter-spacing:.02em; }
.footer address a{ color:var(--gray); transition:color .3s; } .footer address a:hover{ color:var(--gold); }
.footer__nav{ margin-top:1.7rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.5rem; }
.footer__nav a{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; color:var(--ivory-2); padding:.25rem 0; transition:color .3s; }
.footer__nav a:hover{ color:var(--gold); }
.footer__actions{ margin-top:.9rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem; }
.footer__actions a{ font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; color:var(--gold); transition:opacity .3s; }
.footer__actions a:hover{ opacity:.68; }
.social{ display:flex; gap:.7rem; justify-content:center; margin-top:1.8rem; }
.social a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ivory-2); transition:all .35s var(--ease); }
.social a:hover{ background:var(--gold); border-color:var(--gold); color:#17171b; transform:translateY(-2px); }
.social svg{ width:17px; height:17px; }
.footer__base{ margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--line-2); width:100%;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--gray-2); font-size:.8rem; letter-spacing:.03em; }
.footer__base .made{ font-family:var(--serif); font-style:italic; color:var(--gray); font-size:.92rem; }
.footer__credit{ margin-top:1.1rem; font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.24em; font-size:.62rem; color:var(--gray-2); }
.footer__credit b{ color:var(--gold); font-weight:700; letter-spacing:.3em; }

/* address + legal links */
.info__col.addr a.place{ transition:color .35s; }
.info__col.addr a.place:hover{ color:var(--gold); }
.footer__base a{ color:var(--gray); text-decoration:underline; text-underline-offset:2px; transition:color .3s; }
.footer__base a:hover{ color:var(--gold); }

/* =====================================================
   reveal animations
   ===================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__media img{ animation:none !important; transform:none !important; }
  .hero__scroll .l::after{ animation:none; }
}

/* =====================================================
   responsive
   ===================================================== */
@media (max-width:880px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:block; }
  .nav{ padding-block:.65rem; }
}
/* center content on smaller screens */
@media (max-width:899px){
  .dine__grid{ text-align:center; }
  .dine__body .ornament{ justify-content:center; }
  .dine__orn > .l:first-child{ display:block; }
  .dine__body p{ margin-inline:auto; }
  .dine__body .dine__cta{ justify-content:center; }
}
@media (max-width:759px){
  .info__col{ text-align:center; }
  .info__col h3{ letter-spacing:.22em; }
  .info__col.addr .mini{ justify-content:center; }
  .hero__tagline .eyebrow{ font-size:.58rem; letter-spacing:.12em; white-space:nowrap; }
  .hero__cta .btn, .dine__cta .btn, .visit__actions .btn{ flex:1 1 auto; justify-content:center; }
  .hero__scroll{ gap:.5rem; margin-top:1.7rem; }
  .hero__scroll .l{ height:46px; }
}
@media print{
  .nav,.burger,.hero__scroll,.drawer{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  body::before{ display:none; } body{ background:#fff; color:#111; }
}

/* =====================================================
   LIGHTBOX (gallery photo viewer)
   ===================================================== */
.gtile, .gpv{ cursor:zoom-in; }
.gtile:focus-visible, .gpv:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.lightbox{ position:fixed; inset:0; z-index:130; display:none; }
.lightbox.open{ display:block; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(6,6,8,.94); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s var(--ease); }
.lightbox.open .lightbox__backdrop{ opacity:1; }
.lightbox__fig{ position:absolute; inset:0; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3.75rem 1rem 3rem; opacity:0; transform:scale(.985); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.lightbox.open .lightbox__fig{ opacity:1; transform:none; }
.lightbox__img{ display:block; max-width:min(1100px,92vw); max-height:80vh; width:auto; height:auto; object-fit:contain; box-shadow:0 40px 120px -30px #000; border:1px solid var(--line); background:#0d0d0f; }
.lightbox__cap{ margin-top:1.1rem; color:var(--ivory-2); font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; line-height:1.7; text-align:center; max-width:52ch; }
.lightbox__btn{ position:fixed; z-index:2; width:52px; height:52px; border:1px solid var(--line); border-radius:50%; background:rgba(20,20,22,.6); color:var(--ivory); cursor:pointer; display:grid; place-items:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .3s, border-color .3s, color .3s, transform .3s; }
.lightbox__btn:hover{ background:var(--gold); border-color:var(--gold); color:#111; }
.lightbox__btn span{ font-family:var(--serif); font-size:1.9rem; line-height:1; margin-top:-4px; }
.lightbox__close{ top:1.1rem; right:1.1rem; }
.lightbox__close::before,.lightbox__close::after{ content:""; position:absolute; width:18px; height:2px; background:currentColor; }
.lightbox__close::before{ transform:rotate(45deg); } .lightbox__close::after{ transform:rotate(-45deg); }
.lb-prev{ left:1.1rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.1rem; top:50%; transform:translateY(-50%); }
.lb-prev:hover{ transform:translateY(-50%) scale(1.05); }
.lb-next:hover{ transform:translateY(-50%) scale(1.05); }
.lightbox__count{ position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:2; color:var(--gray); font-family:var(--sans); font-weight:600; text-transform:uppercase; font-size:.7rem; letter-spacing:.24em; }
@media (max-width:600px){ .lightbox__btn{ width:44px; height:44px; } .lb-prev{ left:.5rem; } .lb-next{ right:.5rem; } .lightbox__fig{ padding:3.25rem .5rem 2.5rem; } }
@media (prefers-reduced-motion: reduce){ .lightbox__backdrop,.lightbox__fig{ transition:none; } }

/* =====================================================
   MENU PAGE (browse-only)
   ===================================================== */
.menu-head{ text-align:center; padding-top:clamp(6.5rem,12vh,9rem); padding-bottom:clamp(1.8rem,4vh,2.8rem); padding-inline:var(--pad); }
.menu-head .eyebrow{ display:inline-block; }
.menu-head .ornament{ margin-top:1.2rem; }
.menu-intro{ max-width:56ch; margin:1.6rem auto 0; color:var(--ivory-2); font-weight:300; font-size:clamp(1rem,.96rem+.3vw,1.15rem); line-height:1.8; }
.menu-head__cta{ margin-top:2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.menu-notice{ margin-top:1.5rem; color:var(--gray); font-size:.82rem; line-height:1.6; max-width:52ch; margin-inline:auto; }

/* sticky category nav — sits exactly under the fixed site nav */
.menu-catnav{ position:sticky; top:var(--navh,60px); z-index:40; background:rgba(10,10,12,.94); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.menu-catnav__inner{ display:flex; gap:.2rem; max-width:var(--maxw); margin-inline:auto; padding-inline:calc(var(--pad) - .6rem); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.menu-catnav__inner::-webkit-scrollbar{ display:none; }
.menu-catnav a{ flex:none; white-space:nowrap; font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; color:var(--ivory-2); padding:.95rem .7rem; border-bottom:2px solid transparent; transition:color .3s, border-color .3s; }
.menu-catnav a:hover{ color:var(--ivory); }
.menu-catnav a.active{ color:var(--gold); border-bottom-color:var(--gold); }

.menu-sections{ padding-top:clamp(1rem,3vh,2.2rem); padding-bottom:1rem; }
.mcat{ padding-block:clamp(2.3rem,5vh,3.6rem); scroll-margin-top:calc(var(--navh,62px) + 3.6rem); }
.mcat + .mcat{ border-top:1px solid var(--line-2); }
.mcat__head{ text-align:center; margin-bottom:clamp(1.6rem,3.5vh,2.4rem); }
.mcat__title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.75rem,1.3rem+1.7vw,2.5rem); color:var(--ivory); letter-spacing:-.01em; }
.mcat__orn{ display:block; width:46px; height:1px; margin:.9rem auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.mcat__items{ display:grid; grid-template-columns:1fr; gap:0 clamp(2.5rem,5vw,4.5rem); }
@media(min-width:840px){ .mcat__items{ grid-template-columns:1fr 1fr; } }

.mi{ padding:1.05rem 0; border-bottom:1px solid var(--line-2); }
.mi__row{ display:flex; align-items:baseline; gap:.5rem; }
.mi__name{ font-family:var(--serif); font-weight:500; font-size:1.14rem; color:var(--ivory); line-height:1.3; }
.mi__lead{ flex:1 1 auto; min-width:1.1rem; align-self:flex-end; margin-bottom:.36em; border-bottom:1px dotted rgba(236,236,238,.24); }
.mi__price{ flex:none; font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.02em; color:var(--gold); white-space:nowrap; }
.mi__plus{ font-size:.68em; margin-left:.02em; opacity:.85; }
.mi__desc{ font-family:var(--sans); font-weight:300; font-size:.9rem; line-height:1.55; color:var(--gray); margin-top:.35rem; max-width:54ch; }
.menu-plusnote{ text-align:center; color:var(--gray); font-size:.8rem; letter-spacing:.02em; margin-top:2.4rem; }

/* closing CTA */
.menu-cta{ text-align:center; padding-block:clamp(3.5rem,8vh,6rem); border-top:1px solid var(--line); margin-top:clamp(1.5rem,3vh,2.5rem); }
.menu-cta__title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,1.4rem+2vw,2.8rem); color:var(--ivory); margin-top:.6rem; }
.menu-cta__row{ margin-top:1.8rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.menu-cta .menu-notice{ margin-top:2rem; }

/* floating order button */
.menu-fab{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:calc(1.1rem + env(safe-area-inset-bottom,0px)); z-index:50;
  display:inline-flex; align-items:center; gap:.5em; padding:1.05em 1.6em; background:var(--gold); color:#17171b;
  font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; line-height:1;
  border:1px solid var(--gold); box-shadow:0 16px 42px -14px rgba(0,0,0,.75);
  transition:transform .45s var(--ease), background .45s var(--ease), opacity .4s var(--ease), box-shadow .45s var(--ease); }
.menu-fab:hover{ transform:translateY(-2px); background:var(--ivory); box-shadow:0 20px 50px -16px rgba(0,0,0,.8); }
.menu-fab--hide{ opacity:0; transform:translateY(20px); pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .menu-fab{ transition:opacity .3s; } }