/* ============================================================
   Oh!Mumbai — MINIMAL
   One considered layer. Replaces the 10 polish-* stacks.
   Brand tokens + fonts come from styles.css (compiled base).
   Direction: calm, editorial, confident. Two actions: Меню + Забронировать.
   ============================================================ */

:root{
  --ink:        var(--color-biege, #ede2d1);   /* text on dark */
  --bg:         var(--color-chocolate, #4d362e);
  --bg-soft:    #573e35;                        /* raised panels on chocolate */
  --line:       color-mix(in srgb, var(--color-biege) 18%, transparent);
  --accent:     var(--color-terracotta, #b25b37);
  --accent-hov: var(--color-terracotta-hover, #9c4b2c);
  --accent-lt:  #d2835c;                        /* labels/links on chocolate — AA contrast */
  --olive:      var(--color-green, #848a4d);
  /* one text colour only — hierarchy comes from size and weight, never a second grey.
     The single accent is terracotta (--accent-lt) for labels and links. */
  --muted:      var(--ink);
  --measure:    62ch;                           /* one line-length rule for all body copy */

  --wrap: 76rem;                 /* 1216px — generous, not sprawling */
  --pad:  clamp(1.25rem, 5vw, 3rem);
  --sec:  clamp(4.5rem, 9vw, 8.5rem);
  --radius: 6px;

  --f-display: "TT Gertika", Georgia, serif;
  --f-body:    "Geometria", system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
:root{ color-scheme:dark; }   /* macOS Safari needs this to tint its toolbar dark */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:500;
  line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.sec{ padding-block:var(--sec); }
.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; }
/* keyboard skip link — hidden until focused */
.skip-link{ position:fixed; top:-100px; left:1rem; z-index:200; background:var(--accent); color:#fff;
  padding:.75rem 1.1rem; border-radius:var(--radius); font-size:.95rem; transition:top .2s var(--ease); }
.skip-link:focus{ top:1rem; }

/* ---- Type scale ----
   Deliberate steps so the page has an obvious top: hero 64 → h2 40 → h3 26 → body 17. */
h1,h2,h3{ font-family:var(--f-display); font-weight:700; margin:0; line-height:1.06; letter-spacing:-.02em; }
h1{ font-size:clamp(1.9rem, 5vw, 3rem); }          /* 30 → 48 */
h2{ font-size:clamp(1.5rem, 2.8vw, 2rem); }        /* 24 → 32 */
h3{ font-size:clamp(1.125rem, 1.6vw, 1.25rem); font-weight:400; letter-spacing:-.01em; }
p{ margin:0; }
body{ font-size:1rem; }                 /* 16px — floor for body copy */
/* cap line length on running copy only (not footer rows / meta lines) */
.lead, .stack p, .macc-note, .sec-head p{ max-width:var(--measure); }
.lead{ font-size:clamp(1.0625rem, 1.2vw, 1.125rem); line-height:1.55; }
/* small caps labels: readable size, restrained tracking, AA contrast */
.eyebrow{ font-family:var(--f-body); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.75rem; color:var(--accent-lt); margin:0 0 1rem; }   /* 12px floor */
.muted{ color:var(--ink); }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-body); font-weight:500; font-size:.9375rem; line-height:1;
  padding:.9rem 1.5rem; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hov); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-light{ background:var(--ink); color:var(--bg); }
.btn-light:hover{ background:#fff; }

/* link with animated underline */
.link{ display:inline-flex; align-items:center; gap:.4rem; position:relative; }
.link::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.link:hover{ color:var(--accent); }
.link:hover::after{ transform:scaleX(1); }
.link svg{ transition:transform .3s var(--ease); }
.link:hover svg{ transform:translateX(4px); }

/* ============================================================
   HEADER — minimal, obvious. No mega-panel.
   ============================================================ */
.mh{ position:sticky; top:0; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease); }

/* On pages with a full-bleed hero, the header floats transparent over the image
   and solidifies once scrolled — a calmer, more cinematic entrance. */
.has-hero .mh{ position:fixed; inset:0 0 auto; background:transparent; border-color:transparent; }
/* the blur lives on a pseudo-layer: a backdrop-filter on .mh itself would become the
   containing block for the fixed mobile menu and collapse its background to 0px */
.has-hero .mh.is-scrolled{ background:transparent; border-color:var(--line); }
/* layer always exists, so the blur + tint can fade in instead of snapping */
.has-hero .mh::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .45s var(--ease); pointer-events:none; }
.has-hero .mh.is-scrolled::before{ opacity:1; }
/* home: the hero already has its own button — the header one slides in once you scroll */
.has-hero .mh-cta{ opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s; }
.has-hero .mh.is-past-hero .mh-cta{ opacity:1; visibility:visible; transform:none; }
/* burger open: header is solid so it reads as one surface with the panel */
.mh.is-open, .has-hero .mh.is-open{ background:var(--bg); }
.mh-in{ display:flex; align-items:center; gap:2rem; height:76px; }
.mh-logo{ display:flex; align-items:center; }
.mh-logo img{ width:118px; height:auto; }
.mh-nav{ display:flex; gap:1.75rem; margin-left:.5rem; }
.mh-nav a{ position:relative; padding:.4rem 0; font-size:.9375rem; color:var(--ink); transition:color .2s; }
.mh-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent-lt); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.mh-nav a:hover{ color:var(--accent-lt); }
.mh-nav a:hover::after,.mh-nav a[aria-current="page"]::after{ transform:scaleX(1); }
/* current page: readable ink + a clear rule, not dim terracotta text */
.mh-nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.mh-cta{ margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.mh-cta .btn{ padding:.65rem 1.15rem; font-size:.875rem; }
.mh-burger{ display:none; margin-left:auto; width:44px; height:44px; background:none; border:0;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.mh-burger span{ display:block; width:24px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.mh-mobile{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; }
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* scrim: deep at the bottom so the title and buttons always sit on calm tone */
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(31,21,17,.58) 0%, rgba(31,21,17,.22) 28%, rgba(31,21,17,.45) 62%, rgba(31,21,17,.88) 100%); }
.hero-in{ position:relative; z-index:2; text-align:center; max-width:50rem; margin-inline:auto; padding-block:6rem; }
.hero .kicker{ text-transform:uppercase; letter-spacing:.28em; font-size:.8rem; font-weight:500;
  color:var(--ink); margin:0 0 1.4rem; opacity:.9; }
.hero h1{ color:#fff; margin:0; font-size:clamp(1.95rem, 4.4vw, 3rem); line-height:1.04; max-width:18ch; margin-inline:auto; }
.hero-sub{ color:#f3ece1; max-width:36rem; margin:1.25rem auto 0; font-size:clamp(1rem,1.1vw,1.0625rem);
  line-height:1.5; opacity:.94; }
/* breathing room between headline and actions */
.hero-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.hero-actions .btn{ min-width:210px; }

/* ============================================================
   EDITORIAL SECTIONS
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.split-narrow{ grid-template-columns:.9fr 1.1fr; }
/* optical alignment: body text starts on the heading's cap height, not above it */
.split > .stack, .split > .lead{ padding-top:.4rem; }
@media (max-width:900px){ .split > .stack, .split > .lead{ padding-top:0; } }
.stack > * + *{ margin-top:1.25rem; }
.stack > .quote + p{ margin-top:1.75rem; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3.25rem); }
.sec-head .eyebrow{ margin-bottom:.6rem; }
.sec-head h2{ max-width:22ch; }

.figure{ overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure-wide{ aspect-ratio:16/7; }
.figure-tall{ aspect-ratio:4/5; }

/* pull quote: the opening « hangs into the margin so the text block stays flush */
.quote{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.0625rem,1.6vw,1.3rem);
  line-height:1.4; letter-spacing:-.01em; text-indent:-.5em; hanging-punctuation:first; }
@supports (hanging-punctuation:first){ .quote{ text-indent:0; } }

/* ---- Dishes preview (home) ---- */
.dishes{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem); }
.dish{ display:flex; flex-direction:column; gap:.85rem; }
.dish .ph{ aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); position:relative; }
.dish .ph img{ width:100%; height:100%; object-fit:cover; }
.dish .name{ font-size:1rem; }

/* ---- Menu highlights (home): one feature photo + real menu leaders ---- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.feature-media{ aspect-ratio:4/5; }
.feature-media img{ width:100%; height:100%; object-fit:cover; }
.hl{ list-style:none; margin:0; padding:0; }
.hl li{ display:flex; align-items:baseline; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.hl li:first-child{ padding-top:0; }
.hl-name{ font-family:var(--f-display); font-size:clamp(1.2rem,1.8vw,1.5rem); font-weight:400; }
.hl-price{ margin-left:auto; color:var(--ink); font-weight:500; white-space:nowrap; }
.hl-note{ display:block; border-bottom:0; color:var(--muted); font-size:.875rem; padding-bottom:0; }

/* ============================================================
   INTERIOR — curated carousel (2-4 hero photos)
   ============================================================ */
.carousel{ position:relative; }
.car-viewport{ overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); }
.car-track{ display:flex; transition:transform .6s var(--ease); }
.car-slide{ min-width:100%; }
.car-slide img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.car-ctrl{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; }
.car-dots{ display:flex; gap:.55rem; }
.car-dot{ width:9px; height:9px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:var(--line); transition:background .25s, transform .25s; }
.car-dot.is-active{ background:var(--accent); transform:scale(1.25); }
.car-arrows{ display:flex; gap:.6rem; }
.car-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s, background .2s; }
.car-arrow:hover{ border-color:var(--ink); background:var(--bg-soft); }

/* ============================================================
   MENU PAGE  (menu.js renders into #menu-app)
   ============================================================ */
.menu-hero{ padding-block:clamp(3rem,6vw,5rem) clamp(1rem,3vw,2rem); }
.mn-controls{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:1.25rem; margin-bottom:clamp(2rem,4vw,3rem); }
.mn-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.mn-tab{ font-family:var(--f-body); font-weight:500; font-size:.9375rem; color:var(--muted);
  background:none; border:0; cursor:pointer; padding:.55rem .9rem; border-radius:100px; transition:color .2s, background .2s; }
.mn-tab:hover{ color:var(--ink); }
.mn-tab.is-active{ color:#fff; background:var(--accent); }
.mn-view{ position:relative; display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:100px; }
.mn-view button{ position:relative; z-index:2; font-family:var(--f-body); font-size:.875rem; color:var(--muted);
  background:none; border:0; cursor:pointer; padding:.45rem 1rem; border-radius:100px; transition:color .2s; }
.mn-view button.is-active{ color:var(--bg); }
.mn-view-ind{ position:absolute; z-index:1; top:4px; bottom:4px; left:0; background:var(--ink);
  border-radius:100px; transition:transform .35s var(--ease), width .35s var(--ease); }
.mn-body{ transition:opacity .22s var(--ease), transform .22s var(--ease); }
.mn-body.is-out{ opacity:0; transform:translateY(8px); }
.mn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.5vw,2rem) clamp(1rem,2vw,1.5rem); }
.mn-card{ display:flex; flex-direction:column; gap:.5rem; }
.mn-img{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); }
.mn-img img{ width:100%; height:100%; object-fit:cover; }
.mn-name{ font-family:var(--f-display); font-weight:400; font-size:1.0625rem; margin-top:.35rem; }
.mn-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size:.875rem; color:var(--muted); }
.mn-meta span:last-child{ color:var(--ink); font-weight:500; }
.mn-desc{ font-size:.875rem; color:var(--muted); line-height:1.45; }
.mn-pill{ position:absolute; top:.6rem; left:.6rem; font-size:.72rem; padding:.3rem .6rem;
  border-radius:100px; background:rgba(31,21,17,.72); color:var(--ink); backdrop-filter:blur(4px); }
.mn-pdf{ grid-column:1/-1; }
.mn-pdf-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; }
.mn-pdf-page{ border:1px solid var(--line); border-radius:var(--radius); }
.ph-slot{ aspect-ratio:3/4; max-width:520px; margin-inline:auto; display:grid; place-items:center;
  color:var(--muted); text-align:center; padding:2rem; }
/* keep menu.js CHILI tag legible without the old utility stack */
.mn-img .bg-red{ background:var(--color-red,#600000); }
.mn-img [class*="rounded-full"]{ border-radius:100px; }

/* ============================================================
   BOOKING POPUP  (built by minimal.js)
   ============================================================ */
.bk-overlay{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.5rem;
  background:rgba(20,13,10,.6); backdrop-filter:blur(6px); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s; }
.bk-overlay.is-open{ opacity:1; visibility:visible; }
.bk-card{ position:relative; width:100%; max-width:560px; background:var(--color-seashell,#faf6f1);
  color:var(--bg); border-radius:12px; padding:clamp(2rem,4vw,3rem); transform:translateY(16px) scale(.98);
  transition:transform .35s var(--ease); }
.bk-overlay.is-open .bk-card{ transform:none; }
.bk-close{ position:absolute; top:1rem; right:1rem; width:40px; height:40px; border:0; background:none;
  color:var(--bg); cursor:pointer; border-radius:50%; display:grid; place-items:center; transition:background .2s; }
.bk-close:hover{ background:rgba(77,54,46,.1); }
.bk-title{ font-family:var(--f-display); font-weight:700; font-size:1.375rem; line-height:1.1; margin:0 0 1.75rem; max-width:16ch; }
.bk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
.bk-label{ text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--accent); margin:0 0 .6rem; }
.bk-phone{ font-family:var(--f-display); font-size:1.25rem; color:var(--bg); }
.bk-phone:hover{ color:var(--accent); }
.bk-icons{ display:flex; gap:.75rem; }
.bk-icons a{ display:inline-flex; }
.bk-icons svg{ width:44px; height:44px; }

/* ============================================================
   FOOTER — minimal. Logo + one contact line + socials. No map, no nav.
   ============================================================ */
.mf{ background:var(--olive); color:#fff; }
.mf-in{ display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; padding-block:clamp(2.5rem,5vw,4rem); }
.mf-brand img{ width:150px; height:auto; }
.mf-contact{ text-align:center; }
.mf-contact a{ transition:color .2s; }
.mf-contact a:hover{ color:var(--color-biege); }
.mf-contact .addr{ font-family:var(--f-display); font-size:1rem; }
.mf-contact .row{ margin-top:.35rem; color:#f2efe4; }
.mf-social{ display:flex; gap:.75rem; }
.mf-social a{ display:inline-flex; color:#fff; opacity:.9; transition:opacity .2s, transform .2s; }
.mf-social a:hover{ opacity:1; transform:translateY(-2px); }
.mf-social svg{ width:26px; height:26px; }
.mf-legal{ border-top:1px solid rgba(255,255,255,.22); }
.mf-legal .wrap{ display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap;
  padding-block:1.25rem; font-size:.8125rem; color:#eef0e2; }
.mf-legal a:hover{ color:#fff; }
.mf-legal .copy{ margin-left:auto; }

/* ============================================================
   SCROLL REVEAL (subtle; respects reduced motion)
   ============================================================ */
/* progressive enhancement: content is visible by default; only hidden once
   JS adds .reveal-on to <html>, so no-JS users (and static captures) always see it. */
/* short and early: fast scrolling must never land on an empty screen */
.reveal-on .rv{ opacity:0; transform:translateY(12px); transition:opacity .32s var(--ease), transform .32s var(--ease); transition-delay:var(--d,0ms); }
.reveal-on .rv.rv-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .split,.split-narrow,.feature{ grid-template-columns:1fr; }
  .feature-media{ aspect-ratio:16/10; }
  .dishes{ grid-template-columns:repeat(2,1fr); }
  .mn-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .mh-nav,.mh-cta{ display:none; }
  .mh-burger{ display:flex; }
  .mh.is-open .mh-burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .mh.is-open .mh-burger span:nth-child(2){ opacity:0; }
  .mh.is-open .mh-burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  /* mobile nav panel: animated open AND close (no display:none swap) */
  .mh-mobile{ display:flex; position:fixed; inset:76px 0 0; z-index:49; background:var(--bg);
    padding:2rem var(--pad); flex-direction:column; gap:.5rem;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .38s var(--ease), visibility .3s; }
  .mh.is-open .mh-mobile{ opacity:1; visibility:visible; transform:none; }
  .mh-mobile > a{ font-family:var(--f-display); font-size:1.75rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
  /* staggered reveal of the nav rows once the panel opens */
  .mh-mobile > a, .mh-mobile > .mh-mobile-actions{ opacity:0; transform:translateY(10px);
    transition:opacity .3s var(--ease), transform .35s var(--ease); }
  .mh.is-open .mh-mobile > a, .mh.is-open .mh-mobile > .mh-mobile-actions{ opacity:1; transform:none; }
  .mh.is-open .mh-mobile > *:nth-child(1){ transition-delay:.06s; }
  .mh.is-open .mh-mobile > *:nth-child(2){ transition-delay:.11s; }
  .mh.is-open .mh-mobile > *:nth-child(3){ transition-delay:.16s; }
  .mh.is-open .mh-mobile > *:nth-child(4){ transition-delay:.21s; }
  .mh-mobile-actions{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
  .mh-mobile-actions .btn{ margin-top:0; width:100%; }
  .bk-cols{ grid-template-columns:1fr; gap:1.5rem; }
  .mf-in{ flex-direction:column; text-align:center; }
  .car-ctrl{ flex-direction:row; }
}
@media (max-width:600px){
  /* thumb zone: the headline and actions sit low on the photo, not mid-screen */
  .hero{ align-items:flex-end; }
  .hero-in{ padding-block:7rem 3.5rem; }
  .hero-actions{ flex-direction:column; width:100%; max-width:22rem; margin-inline:auto; }
  .hero-actions .btn{ width:100%; min-width:0; }
}
@media (max-width:520px){
  .dishes,.mn-grid{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .car-track{ transition:none; }
  .macc-panel{ transition:none; }
  .macc-fig img{ transition:none; opacity:1; transform:none; }
  .deck-card{ transition:none; }
  .bk-fab{ transition:opacity .001s; }
  .bk-fab svg{ animation:none !important; }
  .mh::before, .mh-cta{ transition:none !important; }
}

/* ============================================================
   HOME MENU ACCORDION — tap an item, its photo reveals inline
   ============================================================ */
.macc{ max-width:54rem; }
.macc-list{ list-style:none; margin:0; padding:0; }
.macc-item{ border-bottom:1px solid var(--line); }
.macc-item:first-child{ border-top:1px solid var(--line); }
.macc-head{ display:flex; align-items:baseline; gap:1rem; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; color:var(--ink); font-family:var(--f-body);
  padding:1.15rem 0; transition:color .2s var(--ease); }
.macc-head:hover{ color:var(--accent); }
.macc-head .hl-name{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.2rem,1.8vw,1.5rem); }
.macc-head .hl-price{ margin-left:auto; font-weight:500; white-space:nowrap; color:var(--ink); }
.macc-chev{ flex:none; color:var(--muted); transition:transform .35s var(--ease), color .2s; }
.macc-item.is-open .macc-head{ color:var(--accent); }
.macc-item.is-open .macc-head .hl-price{ color:var(--accent); }
.macc-item.is-open .macc-chev{ transform:rotate(180deg); color:var(--accent); }
.macc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.macc-item.is-open .macc-panel{ grid-template-rows:1fr; }
.macc-panel-in{ overflow:hidden; min-height:0; }
.macc-fig{ display:block; margin:.35rem 0 1.3rem; aspect-ratio:16/9; max-height:60vh;
  border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); }
.macc-fig img{ width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04); transition:opacity .5s var(--ease) .08s, transform .7s var(--ease) .08s; }
.macc-item.is-open .macc-fig img{ opacity:1; transform:none; }

/* ============================================================
   INTERIOR DECK — stacked-card carousel, swipeable on touch
   ============================================================ */
.deck{ position:relative; }
.deck-stage{ position:relative; aspect-ratio:16/10; touch-action:pan-y; user-select:none;
  -webkit-user-select:none; }
.deck-card{ position:absolute; inset:0; margin:0; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-soft); box-shadow:0 18px 44px rgba(20,13,10,.38);
  transform:translate(var(--dx,0), var(--dy,0)) scale(var(--sc,1)); opacity:var(--op,1); z-index:var(--z,1);
  transition:transform .5s var(--ease), opacity .5s var(--ease); will-change:transform; }
.deck-stage.is-dragging{ cursor:grabbing; }
.deck-stage.is-dragging .deck-card{ transition:none; }
.deck-card img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.deck-ctrl{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; }
.deck-dots{ display:flex; gap:.5rem; flex-wrap:wrap; }
.deck-dot{ width:9px; height:9px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:var(--line); transition:background .25s, transform .25s; }
.deck-dot.is-active{ background:var(--accent); transform:scale(1.25); }
.deck-arrows{ display:flex; gap:.6rem; }
.deck-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s, background .2s; }
.deck-arrow:hover{ border-color:var(--ink); background:var(--bg-soft); }
/* swipe on touch; arrows are the desktop control */
@media (max-width:768px){ .deck-arrows{ display:none; } }

/* ============================================================
   MOBILE FLOATING BOOKING BUTTON — appears after the hero
   ============================================================ */
.bk-fab{ display:none; }
@media (max-width:768px){
  .bk-fab{ position:fixed; right:1rem; bottom:1rem; z-index:60; min-width:0;
    padding:.85rem 1.3rem; box-shadow:0 10px 26px rgba(20,13,10,.4);
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.95); pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    display:inline-flex; }
  .bk-fab.is-visible{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  /* hide the floating button while the burger menu is open */
  .mh.is-open ~ .bk-fab{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
}

/* ============================================================
   FOOTER — compact, no logo, Yandex.Maps button
   ============================================================ */
.mf-in{ padding-block:clamp(0.85rem,2vw,1.4rem); }
.mf-contact{ text-align:left; }
.mf-map{ border:1px solid rgba(255,255,255,.45); color:#fff; background:transparent;
  gap:.55rem; padding:.72rem 1.15rem; font-size:.875rem; white-space:nowrap; }
.mf-map:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.mf-map svg{ flex:none; }
@media (max-width:768px){
  .mf-in{ flex-direction:column; text-align:center; gap:1.5rem; }
  .mf-contact{ text-align:center; }
}
/* homepage dish preview cards */
.dish-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.dish-row .name{ font-size:1rem; }
.dish-price{ color:var(--muted); white-space:nowrap; }
/* on phones the price drops under the name instead of squeezing it into two lines */
@media (max-width:600px){
  .dish-row{ flex-direction:column; gap:.15rem; }
  .dish-price{ margin-left:0; }
}
.dish:hover .name{ color:var(--accent); }
/* interior in-page photo gallery */
.gallery-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); }
.gallery-2 .figure{ aspect-ratio:4/3; }
@media(max-width:640px){ .gallery-2{ grid-template-columns:1fr; } }

/* ============================================================
   MENU PAGE — sections, sticky controls, one tag style
   ============================================================ */
.mn-controls{ position:sticky; top:76px; z-index:20; background:var(--bg); padding-top:1rem; }
.mn-group + .mn-group{ margin-top:clamp(2.5rem,5vw,4rem); }
.mn-group-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:clamp(1.25rem,2.5vw,1.75rem); }
.mn-group-head h2{ font-size:clamp(1.25rem,2vw,1.5rem); }
.mn-group-head::after{ content:""; flex:1; height:1px; background:var(--line); }
/* name row owns the price; weight sits on its own line, so long names never push it */
.mn-head{ display:flex; align-items:baseline; gap:1rem; margin-top:.35rem; }
.mn-head .mn-name{ margin:0; }
.mn-price{ margin-left:auto; white-space:nowrap; font-weight:500; }
.mn-weight{ color:var(--ink); font-size:.875rem; opacity:.8; }
/* one tag style for every diet/strength marker */
.mn-tag{ position:absolute; top:.6rem; left:.6rem; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; line-height:1; padding:.4rem .65rem; border-radius:100px;
  background:rgba(31,21,17,.78); color:var(--ink); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.mn-tag svg{ width:14px; height:14px; flex:none; }
.mn-tag-spicy{ color:#ffc9b3; }
.mn-tag-veg{ color:#cfe0a8; }

/* ============================================================
   INTERIOR — carousel controls read as one group
   ============================================================ */
.deck-ctrl{ justify-content:flex-start; gap:1.25rem; }
.deck-count{ font-size:.875rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.deck-count b{ color:var(--ink); font-weight:500; }
.deck-dot{ width:8px; height:8px; }
.deck-dot.is-active{ width:26px; border-radius:100px; transform:none; background:var(--accent-lt); }
.deck-arrows{ margin-left:auto; }
@media (max-width:768px){ .deck-ctrl{ gap:1rem; } }

/* ============================================================
   ABOUT — location card + section links with titles on the image
   ============================================================ */
.loc-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); }
.loc-map{ display:block; aspect-ratio:16/9; position:relative; background:var(--bg-soft); }
.loc-map img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.loc-map{ overflow:hidden; }
.loc-map:hover img{ transform:scale(1.03); }
.loc-body{ padding:1.25rem 1.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.loc-body .addr{ font-family:var(--f-display); font-size:1rem; }
.loc-body .metro{ color:var(--muted); font-size:.95rem; margin-top:.25rem; }

.navcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.5rem); }
.navcard{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); }
.navcard img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s var(--ease); }
.navcard:hover img{ transform:scale(1.04); }
.navcard::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(31,21,17,0) 40%, rgba(31,21,17,.78) 100%); }
.navcard-label{ position:absolute; z-index:2; left:1.25rem; right:1.25rem; bottom:1.1rem;
  display:flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-size:1.15rem; color:#fff; }
.navcard-label svg{ transition:transform .3s var(--ease); }
.navcard:hover .navcard-label svg{ transform:translateX(4px); }
@media (max-width:600px){ .navcards{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER — legible tap targets
   ============================================================ */
.mf-social a{ width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; }
.mf-social svg{ width:28px; height:28px; }
.mf-legal .wrap{ gap:1.25rem 1.5rem; }
.mf-legal a{ padding-block:.4rem; }



/* ---- menu on phones: compact sticky bar + one readable card per row ---- */
@media (max-width:600px){
  .mn-controls{ gap:.75rem 1rem; padding-bottom:.85rem; margin-bottom:1.75rem; }
  .mn-tab{ white-space:nowrap; }
  .mn-view{ flex:none; }
  /* card becomes a row: photo left, text right — full line length for descriptions */
  .mn-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .mn-card{ display:grid; grid-template-columns:124px 1fr; grid-template-rows:auto auto auto;
    column-gap:1rem; row-gap:.2rem; align-items:start; }
  .mn-card .mn-img{ grid-row:1 / 4; aspect-ratio:1; }
  .mn-card .mn-head{ margin-top:0; }
  /* tag sits along the bottom of the thumbnail and always fits inside it */
  .mn-tag{ inset:auto .35rem .35rem .35rem; justify-content:center; font-size:.65rem;
    padding:.28rem .4rem; gap:.25rem; }
  .mn-tag svg{ width:11px; height:11px; }
}

/* ============================================================
   FOOTER v2 — icon rows (address · hours · contacts) + socials,
   on the warm raised brown so it reads as part of the page.
   ============================================================ */
.mf{ --mf-bg:var(--bg-soft); background:var(--mf-bg); color:var(--ink); border-top:1px solid var(--line); }
.mf .mf-in{ display:grid; grid-template-columns:1.3fr 1fr 1fr auto; align-items:start; gap:1.5rem 2.5rem;
  padding-block:clamp(2.25rem,4vw,3rem); flex-direction:unset; text-align:left; }
.mf-fact{ display:flex; gap:.85rem; align-items:flex-start; margin:0; color:var(--ink); line-height:1.5; font-size:.9375rem; }
.mf-fact > svg{ flex:none; margin-top:.15rem; color:var(--accent-lt); }
.mf-fact b{ display:block; color:var(--ink); font-weight:500; }
.mf-fact a{ transition:color .2s; }
.mf-fact a:hover, a.mf-fact:hover b{ color:var(--accent-lt); }
.mf-sub{ display:block; }
.mf-maplink{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.mf .mf-social{ justify-self:end; }
.mf .mf-social a{ color:var(--ink); }
.mf .mf-social a:hover{ color:var(--accent-lt); }
.mf-legal{ border-top:1px solid var(--line); }
.mf-legal .wrap{ color:var(--muted); }
.mf-legal a:hover{ color:var(--ink); }
@media (max-width:900px){
  .mf .mf-in{ grid-template-columns:1fr 1fr; }
  .mf .mf-social{ justify-self:start; }
}
@media (max-width:600px){
  .mf .mf-in{ grid-template-columns:1fr; gap:1.25rem; }
  .mf-legal .copy{ margin-left:0; }
  /* leave room so the floating button never covers the legal links */
  .mf-legal .wrap{ padding-bottom:5.5rem; }
}

/* ============================================================
   MOBILE FLOATING BOOK BUTTON — quiet pill, bottom right.
   Appears after the first screen, steps aside over the footer.
   ============================================================ */
.bk-fab{ display:none; }
@media (max-width:768px){
  .bk-fab{ display:inline-flex; align-items:center; gap:.5rem; position:fixed; z-index:60;
    right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    padding:.8rem 1.15rem; border-radius:100px; border:1px solid color-mix(in srgb, #fff 14%, transparent);
    background:var(--accent); color:#fff; font:500 .875rem/1 var(--f-body); cursor:pointer;
    box-shadow:0 8px 24px rgba(20,13,10,.35), 0 1px 2px rgba(20,13,10,.3);
    opacity:1; visibility:hidden; transform:translateY(calc(100% + 2rem));
    transition:transform .45s var(--ease), visibility .45s, background .2s; }
  .bk-fab svg{ width:18px; height:18px; flex:none; }
  .bk-fab.is-visible{ visibility:visible; transform:none; }

  .bk-fab:active{ background:var(--accent-hov); transform:scale(.97); }
  .mh.is-open ~ .bk-fab{ opacity:0; visibility:hidden; }
}

/* ============================================================
   MENU — printable page (the "PDF" view) + print-to-PDF output
   ============================================================ */
.mn-pdf-head{ align-items:center; }
.mn-paper{ --paper:#faf6f1; --ink-p:#3a2822; --mut-p:#7a655b; --rule-p:#e4d8c8;
  max-width:794px; margin-inline:auto; background:var(--paper); color:var(--ink-p);
  border-radius:var(--radius); padding:clamp(1.75rem,6vw,4rem) clamp(1.25rem,6vw,4.25rem);
  box-shadow:0 20px 50px rgba(20,13,10,.35); }
.mn-paper-top{ text-align:center; margin-bottom:2.5rem; }
.mn-paper-top img{ width:120px; margin:0 auto 1.25rem; filter:brightness(0) saturate(100%) invert(18%) sepia(20%) saturate(900%) hue-rotate(330deg); }
.mn-paper-top h2{ font-size:clamp(1.6rem,3vw,2.1rem); color:var(--ink-p); }
.mn-paper-top h2::after{ content:""; display:block; width:48px; height:2px; margin:1rem auto 0; background:var(--accent); }
.mn-paper-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.35rem; }
.mn-paper-list li{ break-inside:avoid; }
.mn-paper-row{ display:flex; align-items:baseline; gap:.5rem; }
.mn-paper-name{ font-family:var(--f-display); font-size:1.0625rem; }
.mn-paper-dots{ flex:1; border-bottom:1px dotted var(--mut-p); opacity:.6; transform:translateY(-.3em); }
.mn-paper-price{ font-weight:600; white-space:nowrap; }
.mn-paper-desc{ margin-top:.3rem; font-size:.875rem; color:var(--mut-p); line-height:1.45; max-width:none; }
.mn-paper-meta{ white-space:nowrap; }
.mn-paper-foot{ margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--rule-p);
  text-align:center; font-size:.8125rem; color:var(--mut-p); }

@media print{
  @page{ size:A4; margin:14mm; }
  html, body{ background:#fff !important; }
  body *{ visibility:hidden; }
  .mn-paper, .mn-paper *{ visibility:visible; }
  .mn-paper{ position:absolute; inset:0 0 auto 0; max-width:none; margin:0; padding:0;
    box-shadow:none; border-radius:0; background:#fff;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .bk-fab, .mh{ display:none !important; }
}

/* ---- menu on phones, pass 2: full-bleed sticky bar, faded tab edges, flat paper ---- */
@media (max-width:600px){
  /* bar spans the whole viewport so nothing peeks out at its sides */
  .mn-controls{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
  /* tabs scroll inside the bar; soft fade at the edges instead of a hard cut */
  /* printable page: edge-to-edge sheet, no floating-card chrome */
  .mn-pdf-head{ margin-bottom:1rem; }
  .mn-paper{ margin-inline:calc(var(--pad) * -1); border-radius:0; box-shadow:none;
    padding:2rem var(--pad) 2.5rem; }
  .mn-paper-top{ margin-bottom:1.75rem; }
  .mn-paper-top img{ width:96px; margin-bottom:1rem; }
  .mn-paper-list{ gap:1.15rem; }
  .mn-paper-name{ font-size:1.05rem; }
}
@media (max-width:600px){
  .mn-pdf-head{ align-items:center; gap:1rem; }
  .mn-pdf-head h3{ font-size:1.05rem; }
  .mn-pdf-dl{ padding:.6rem 1rem; font-size:.9rem; white-space:nowrap; }
}

/* ---- floating pill: handoff state + footer clearance ---- */
@media (max-width:768px){
  /* while morphing, the pill lays out its content centred and never wraps */
  .bk-fab{ justify-content:center; white-space:nowrap; }
  /* footer keeps room for the pill so it never covers the legal row */
  .mf-legal .wrap{ padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width:600px){
  /* wrapped tabs share the left edge with the Фото/PDF pill */
  .mn-tab{ padding:.5rem .85rem; }
}

html, body{ overflow-x:clip; }

/* ============================================================
   iOS SAFE AREAS — content runs edge to edge (viewport-fit=cover);
   only interactive chrome is inset.
   ============================================================ */
html{ background:var(--bg); }
.mh{ padding-top:env(safe-area-inset-top, 0px); }
.mh-in{ padding-left:max(var(--pad), env(safe-area-inset-left, 0px)); padding-right:max(var(--pad), env(safe-area-inset-right, 0px)); }
@media (max-width:768px){
  .mh-mobile{ top:calc(76px + env(safe-area-inset-top, 0px)); padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px)); }
}
/* hero photo fills the whole screen including under the status bar */
.hero{ min-height:100svh; min-height:100lvh; }
/* sticky menu bar clears the taller header */
.mn-controls{ top:calc(76px + env(safe-area-inset-top, 0px)); }
.mf-legal .wrap{ padding-bottom:max(1.25rem, env(safe-area-inset-bottom, 0px)); }

/* mobile book pill: slides in from the right edge, sits above the home indicator */
@media (max-width:768px){
  .bk-fab{ right:calc(1rem + env(safe-area-inset-right, 0px));
    bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    transform:translateX(calc(100% + 1.5rem + env(safe-area-inset-right, 0px))); }
  .bk-fab.is-visible{ transform:none; }
  .mf-legal .wrap{ padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---- menu tabs on phones: horizontal wheel picker ---- */
@media (max-width:600px){
  .mn-controls{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .mn-tabs{ flex-wrap:nowrap; gap:.25rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    align-self:stretch; width:calc(100% + var(--pad) * 2); min-width:0; flex:none;
    margin-inline:calc(var(--pad) * -1); padding-inline:calc(50% - 1px);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
  .mn-tabs::-webkit-scrollbar{ display:none; }
  .mn-tab{ flex:none; scroll-snap-align:center; white-space:nowrap;
    transform:scale(calc(1 - var(--k, 0) * .16)); opacity:calc(1 - var(--k, 0) * .55);
    transition:transform .12s linear, opacity .12s linear, color .2s, background .25s; }
  .mn-view{ align-self:center; margin-inline:auto; }
}

/* Safari samples every position:fixed element near an edge for its bar tint —
   even invisible ones. Closed overlays leave the render tree entirely. */
.bk-overlay{ display:none; transition-behavior:allow-discrete; }
.bk-overlay.is-open{ display:grid; }
@starting-style{ .bk-overlay.is-open{ opacity:0; } .bk-overlay.is-open .bk-card{ transform:translateY(16px) scale(.98); } }
@media (max-width:768px){
  .mh-mobile{ display:none; transition-behavior:allow-discrete; }
  .mh.is-open .mh-mobile{ display:flex; }
  @starting-style{ .mh.is-open .mh-mobile{ opacity:0; transform:translateY(-10px); } }
  .bk-fab{ display:none; transition-behavior:allow-discrete; }
  .bk-fab.is-visible{ display:inline-flex; }
  @starting-style{ .bk-fab.is-visible{ transform:translateX(calc(100% + 1.5rem)); } }
}

/* ============================================================
   iOS 26 SAFARI — hero photo under the status bar.
   Safari treats a position:fixed element at the top edge as a toolbar and paints
   an opaque colour strip behind the status bar for it. So on phones the home
   header is NOT fixed while the hero is on screen — it sits in the page
   (absolute) and the photo runs under the status bar. Once scrolled past the
   hero it becomes fixed and slides down (a brown strip is right by then).
   ============================================================ */
@media (max-width:768px){
  .has-hero .mh{ position:absolute; }
  .has-hero .mh.is-pinned{ position:fixed; animation:mh-drop .4s var(--ease) both; }
  .has-hero .mh.is-pinned::before{ opacity:1; }
  @keyframes mh-drop{ from{ transform:translateY(-100%); } to{ transform:none; } }
}
@media (prefers-reduced-motion:reduce){ .has-hero .mh.is-pinned{ animation:none; } }

/* Safari only composites page pixels behind its bars once scrollY > 0. Phones:
   the hero grows by --runway at the top and the page opens scrolled by exactly that,
   so the photo is under the status bar from the first frame; header sits at the runway. */
:root{ --runway:62px; }
@media (max-width:768px){
  .has-hero .hero{ min-height:calc(100lvh + var(--runway)); }
  .has-hero .mh{ top:var(--runway); }
  .has-hero .mh.is-pinned{ top:0; }
}