/* ============================================================
   /menu — standalone QR / direct-link menu page.
   Self-contained on purpose (own :root, no shared nav/footer chrome):
   this is the first thing a guest sees after scanning a table QR code.
   Structure and values here intentionally mirror a client-approved
   reference build — see the PR description for the source.
   ============================================================ */

:root{
  --wine:#1a0009;
  --wine-soft:#26040f;
  --black:#0f0f0f;
  --cream:#f5f1e8;
  --gold:#c99f42;
  --gold-bright:#e1bc59;
  --gold-line:#c99f4245;
  --muted:#f5f1e882;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--wine)}
body{
  background:var(--wine);color:var(--cream);margin:0;
  font-family:Jost,system-ui,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Lets a responsive <picture>'s <img> participate in its parent's layout
   exactly as if the <picture> wrapper weren't there — needed wherever CSS
   sizes the image via width/height:100% against the direct parent. */
picture{display:contents}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.shell{width:min(1040px, 100% - 52px);margin-inline:auto}

/* ── Top strip (persistent, back to site + reserve) ────── */
.menu-topstrip{
  z-index:30;justify-content:space-between;align-items:center;display:flex;
  position:sticky;top:0;height:46px;padding:0 16px;
  background:rgba(15,15,15,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,159,66,.16);
}
.topstrip-logo{display:flex;align-items:center;gap:9px}
.topstrip-logo img{width:26px;height:auto;opacity:.9}
.topstrip-logo span{display:none;letter-spacing:.16em;color:rgba(245,241,232,.5);font-size:8px;text-transform:uppercase}
.topstrip-reserve{
  letter-spacing:.16em;text-transform:uppercase;color:#0e0805;background:var(--gold-bright);
  padding:8px 14px;font-size:8px;border-radius:1px;display:none;
}

/* ── Hero ───────────────────────────────── */
.menu-hero{
  background:
    radial-gradient(circle at 54% 38%, #68422338, transparent 27%),
    radial-gradient(circle at 18% 14%, #52181633, transparent 28%),
    linear-gradient(140deg, #241410 0%, #15070a 42%, #090709 100%);
  place-items:center;height:58svh;min-height:400px;display:grid;
  position:relative;overflow:hidden;
}
.menu-hero::before{
  content:"";opacity:.7;position:absolute;inset:0;
  background:repeating-linear-gradient(112deg, transparent 0 42px, rgba(255,255,255,.012) 43px, transparent 44px);
}
.hero-frame{border:1px solid var(--gold-line);pointer-events:none;position:absolute;inset:8px}
.texture{
  opacity:.22;mix-blend-mode:soft-light;pointer-events:none;position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.hero-centre{z-index:2;text-align:center;flex-direction:column;align-items:center;display:flex;position:relative;padding:0 20px}
.hero-prelude{color:var(--gold);letter-spacing:.34em;align-items:center;gap:14px;margin:0 0 22px;font-size:8px;display:flex}
.hero-prelude i{background:var(--gold-line);width:36px;height:1px;display:block}
.hero-centre h1{color:var(--cream);letter-spacing:-.01em;margin:0;font:400 44px/1 Cinzel,serif}
.hero-rule{background:linear-gradient(90deg,transparent,var(--gold),transparent);width:150px;height:1px;margin:22px auto}
.hero-tag{color:rgba(245,241,232,.62);margin:0;font:italic 300 18px/1.4 'Cormorant Garamond',serif}
.hours{letter-spacing:.38em;color:rgba(245,241,232,.36);margin:22px 0 0;font-size:6px}

/* ── Tools + sticky controls ───────────────────────── */
.menu-content{background:linear-gradient(#130006 0%,#090506 100%);padding-bottom:120px}
.menu-tools{padding-top:20px;padding-bottom:14px;scroll-margin-top:46px}

.section-toggle{gap:8px;display:flex}
.section-toggle button{
  flex:1;min-height:40px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  color:rgba(245,241,232,.55);background:transparent;border:1px solid rgba(245,241,232,.18);
  font-size:11px;transition:all .25s;
}
.section-toggle button.active{border-color:var(--gold-bright);color:#0e0805;background:var(--gold-bright);font-weight:500}
.section-toggle button:hover:not(.active){border-color:rgba(245,241,232,.4);color:var(--cream)}

/* Search, diet filters and categories all travel together: this is the part
   of the page someone actually needs while their thumb is mid-scroll
   through 150 dishes. The Food/Drinks choice above is a one-time decision,
   so it's left to scroll away.
   The three rows below (search, diet filter, category rail) used to be
   near-identical in size and weight, which read as one dense, undifferentiated
   block once pinned. Diet filters are the least-used control of the three
   (a refinement on top of a scope, not a scope itself), so they're now a
   noticeably smaller, borderless, lighter-weight row than the category
   rail beneath it — visually a sub-filter, not a peer. */
.sticky-controls{
  z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background:rgba(15,15,15,.97);border-top:1px solid rgba(201,159,66,.16);
  border-bottom:1px solid rgba(201,159,66,.16);position:sticky;top:46px;
}
.controls-inner{gap:9px;padding:12px 0 8px;display:flex;flex-direction:column}
.search-field{position:relative;border-bottom:1px solid rgba(245,241,232,.18);align-items:center;gap:12px;height:38px;display:flex}
.search-field>span{color:var(--gold);font:20px 'Cormorant Garamond',serif;transform:rotate(-12deg)}
.search-field input{width:100%;color:var(--cream);letter-spacing:.06em;background:transparent;border:0;outline:0;font:300 14px Jost,sans-serif}
.search-field input::placeholder{color:rgba(245,241,232,.32)}
.search-note{
  color:var(--gold);letter-spacing:.03em;white-space:nowrap;pointer-events:none;
  position:absolute;top:100%;left:0;margin:5px 0 0;font:italic 300 11px 'Cormorant Garamond',serif;
}

.filter-row{align-items:center;gap:3px;display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-row button{
  color:rgba(245,241,232,.4);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:transparent;border:0;padding:5px 11px;height:26px;border-radius:20px;
  font-size:9px;white-space:nowrap;flex:none;transition:all .2s;
}
.filter-row button:hover{color:var(--cream)}
.filter-row button.active{color:#0e0805;background:var(--gold-bright)}

.category-rail{border-top:1px solid rgba(245,241,232,.16);align-items:stretch;gap:4px;display:flex}
.rail-home{
  flex:none;align-items:center;justify-content:center;display:flex;width:34px;
  color:rgba(245,241,232,.4);font-size:19px;border-right:1px solid rgba(245,241,232,.1);
}
.rail-home:hover{color:var(--gold-bright)}
.category-rail>.shell{width:auto;flex:1;min-width:0;margin:0;scrollbar-width:none;gap:0;display:flex;overflow-x:auto}
.category-rail>.shell::-webkit-scrollbar{display:none}
.category-rail button{
  letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.42);
  background:transparent;border:0;border-bottom:2px solid transparent;flex:none;padding:11px 14px 10px;
  font-size:9px;cursor:pointer;transition:all .2s;
}
.category-rail>.shell button:first-child{padding-left:14px}
.category-rail button:hover,.category-rail button.on{color:var(--gold-bright);border-color:var(--gold-bright)}
.category-rail button.on{background:rgba(201,159,66,.08)}
.category-rail button.rail-more{color:var(--gold);font-style:italic}

/* ── Sections + dishes ──────────────────── */
.menu-sections{padding-top:15px}
.menu-group{border-bottom:1px solid rgba(245,241,232,.08);padding:54px 0;scroll-margin-top:70px;display:block}
.menu-group:first-child{padding-top:28px}
.group-heading{grid-template-columns:27px 1fr;align-items:start;gap:12px;display:grid;margin-bottom:33px}
.group-heading>span{letter-spacing:.2em;color:var(--gold);font-size:8px}
.group-heading p{color:rgba(245,241,232,.35);margin:0 0 7px;font:italic 300 15px 'Cormorant Garamond',serif}
.group-heading h3{letter-spacing:.17em;text-transform:uppercase;margin:0;font:400 20px Cinzel,serif}
.group-heading b{letter-spacing:.2em;color:rgba(245,241,232,.23);grid-column:2;margin-top:17px;font-size:8px;font-weight:300}
.dish-list{min-width:0}
.dish{
  border-bottom:1px solid rgba(245,241,232,.07);grid-template-columns:15px 1fr;gap:13px;
  padding:24px 10px;margin:0 -10px;border-radius:2px;display:grid;transition:background .2s;
  position:relative;align-items:start;
}
.dish:first-child{padding-top:0;margin-top:0}
.dish:last-child{border-bottom:0}
.dish.has-photo{cursor:pointer;grid-template-columns:15px 1fr auto}
.dish.has-photo:hover,.dish.has-photo:focus-visible{background:rgba(201,159,66,.05)}
.dish.has-photo:focus-visible{outline:1px solid var(--gold);outline-offset:-1px}
.dish-thumb{
  width:58px;height:58px;overflow:hidden;border:1px solid var(--gold-line);
  align-self:center;background:var(--black);
}
.dish-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.dish.has-photo:hover .dish-thumb img,.dish.has-photo:focus-visible .dish-thumb img{transform:scale(1.1)}
.diet-mark{border:1.5px solid #a76660;place-items:center;width:13px;height:13px;margin-top:7px;display:grid}
.diet-mark.veg{border-color:#69926d}
.diet-mark.drink{border-color:var(--gold)}
.diet-mark i{background:#a76660;border-radius:50%;width:5px;height:5px;display:block}
.diet-mark.veg i{background:#69926d}
.diet-mark.drink i{background:var(--gold)}
.dish-line{align-items:baseline;gap:9px;display:flex}
.dish-line h4{color:rgba(245,241,232,.94);margin:0;font:400 22px/1.28 'Cormorant Garamond',serif}
.dish-line>span{border-bottom:1px dotted rgba(201,159,66,.24);flex:1;min-width:20px}
.dish-line strong{color:var(--gold-bright);white-space:nowrap;font:500 16px 'Cormorant Garamond',serif}
.dish-copy>p{color:rgba(245,241,232,.58);letter-spacing:.015em;max-width:93%;margin:8px 0 0;font:300 13px/1.6 Jost,sans-serif}
.dish-copy small{color:var(--gold);letter-spacing:.16em;margin-top:8px;font-size:9px;display:block}

.no-results{text-align:center;padding:90px 20px}
.no-results>span{color:var(--gold);font-size:20px}
.no-results h3{letter-spacing:.2em;margin:18px 0 10px;font:400 20px Cinzel,serif}
.no-results p{color:var(--muted);margin:0 0 22px;font:italic 17px 'Cormorant Garamond',serif}
.no-results button{
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:transparent;
  border:0;border-bottom:1px solid var(--gold);padding-bottom:3px;cursor:pointer;font-size:11px;
}

/* ── Allergy note ───────────────────────── */
.menu-note{
  border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);
  background:radial-gradient(circle at 50% 0, rgba(201,159,66,.09), transparent 42%), var(--wine-soft);
  text-align:center;align-content:center;place-items:center;gap:25px;min-height:230px;
  padding:20px;display:grid;
}
.menu-note span{color:var(--gold-bright);text-shadow:0 0 16px var(--gold)}
.menu-note p{letter-spacing:.27em;color:rgba(245,241,232,.45);margin:0;font-size:6px;line-height:2.2}

/* ── Footer ─────────────────────────────── */
footer{text-align:center;background:#0a0708;padding:77px 24px 36px}
footer>img{opacity:.88;width:180px;height:auto;margin:0 auto}
footer>p{letter-spacing:.23em;color:rgba(245,241,232,.34);margin:28px 0;font-size:7px;line-height:2}
footer>div{justify-content:center;align-items:center;gap:16px;display:flex}
footer a{letter-spacing:.25em;color:var(--gold);font-size:8px}
footer i{color:rgba(201,159,66,.35);font-size:7px;font-style:normal}
footer small{letter-spacing:.24em;color:rgba(245,241,232,.2);margin-top:45px;font-size:7px;display:block}

/* ── Mobile-only reservation shortcut ──── */
/* A full-width bar ate too much of the screen while browsing dishes — this
   is a small corner FAB instead, out of the way until someone wants it. */
.mobile-reserve{
  z-index:25;display:grid;place-items:center;color:#0e0805;background:var(--gold-bright);
  box-shadow:0 6px 18px #00000077;width:46px;height:46px;border-radius:50%;font-size:19px;
  position:fixed;right:16px;bottom:16px;transition:transform .2s;
}
.mobile-reserve:active{transform:scale(.92)}

/* ── Dish photo lightbox ─────────────────── */
/* Deliberately minimal: the photo, the name, the price, the description —
   nothing to read, nothing to click through. A guest tapped a dish to see
   what it looks like, not to open another screen. */
.dish-lightbox{
  position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:rgba(9,5,4,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dish-lightbox.show{display:grid}
.dish-lightbox-close{
  position:fixed;top:18px;right:18px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(245,241,232,.25);background:rgba(15,15,15,.7);color:var(--cream);
  font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;
}
.dish-lightbox-close:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.dish-lightbox-card{
  width:min(560px,100%);max-height:90vh;overflow-y:auto;background:var(--wine-soft);
  border:1px solid var(--gold-line);
}
.dish-lightbox-media{width:100%;aspect-ratio:4/3;background:var(--black)}
.dish-lightbox-media img{width:100%;height:100%;object-fit:cover;display:block}
.dish-lightbox-info{padding:22px 24px 26px}
.dish-lightbox-info h3{margin:0;font:400 23px Cinzel,serif;letter-spacing:.02em;color:var(--cream)}
.dish-lightbox-price{color:var(--gold-bright);margin:10px 0 0;font:500 17px 'Cormorant Garamond',serif}
.dish-lightbox-price[hidden],.dish-lightbox-desc[hidden]{display:none}
.dish-lightbox-desc{color:rgba(245,241,232,.6);letter-spacing:.015em;margin:12px 0 0;font:300 13.5px/1.6 Jost,sans-serif}

/* ── Larger screens ─────────────────────── */
@media (min-width:581px){
  .shell{width:min(1040px, 100% - 34px)}
  .menu-hero{min-height:400px}
  .hero-frame{inset:14px}
  .topstrip-logo span{display:block}
  .topstrip-reserve{display:block}
  .hero-prelude{margin-bottom:26px}
  .hero-centre h1{font-size:56px}
  .hero-tag{font-size:20px}
  .hours{font-size:8px}
  .menu-tools{padding-top:28px;padding-bottom:16px}
  .section-toggle{max-width:440px}
  .section-toggle button{padding:0 22px}
  .controls-inner{flex-direction:row;align-items:center;gap:22px;padding:14px 0 10px}
  .search-field{flex:1}
  .filter-row{flex:none;overflow-x:visible;padding-bottom:0}
  .filter-row button{padding:5px 15px}
  .category-rail>.shell button:first-child{padding-left:20px}
  .category-rail button{padding:14px 20px 12px}
  .mobile-reserve{display:none}
  .menu-sections{padding-top:48px}
  .menu-group{grid-template-columns:180px 1fr;gap:30px;padding:70px 0;display:grid}
  .menu-group:first-child{padding-top:28px}
  .group-heading{grid-template-columns:32px 1fr;align-self:start;position:sticky;top:167px;margin-bottom:0}
  .group-heading h3{font-size:22px}
  .dish{gap:15px}
  .dish:hover{background:rgba(201,159,66,.045)}
  .dish-line h4{font-size:24px}
  .dish-copy>p{max-width:580px;font-size:14px}
  .dish-thumb{width:76px;height:76px}
  .menu-note{min-height:270px;padding:0}
  .menu-note p{font-size:8px}
  footer>img{width:220px}
  footer>p{line-height:1}
  footer{padding-bottom:36px}
  .dish-lightbox-card{width:min(600px,90vw)}
  .dish-lightbox-info h3{font-size:26px}
}
@media (min-width:821px){
  .menu-group{grid-template-columns:240px 1fr;gap:55px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}