/* ============================================================
   Menu — Option F: Immersive Masonry
   Source design: concepts/menu.html (Claude Cowork), direction F.
   All rules scoped under #menu-masonry so the design's dark theme
   and resets cannot leak into the site header/footer. The menu
   area is self-contained dark; no prices anywhere.
   ============================================================ */
#menu-masonry{
  --gold:#c9a227;--gold-bright:#e8c34a;--bg:#0e1311;--bg-2:#131a17;--card:#161d1a;
  --line:rgba(255,255,255,.09);--cream:#f4efe4;--muted:#9aa49e;--red:#b5482f;
  --veg:#3f9d5a;--gf:#c9892a;--serif:'Inter',sans-serif;--sans:'Inter',sans-serif;
  background:var(--bg);color:var(--cream);font-family:var(--sans);
}
/* scoped reset — the source design assumed a global reset; this neutralises
   inherited site margins/padding without affecting anything outside the menu */
#menu-masonry *{margin:0;padding:0;box-sizing:border-box}
#menu-masonry a{color:inherit;text-decoration:none}
#menu-masonry img{display:block}

/* ---- filter chips bar ---- */
#menu-masonry .filters{
  background:rgba(14,19,17,.96);border-bottom:1px solid var(--line);
}
#menu-masonry .filters-inner{max-width:1320px;margin:0 auto;padding:14px 28px}
#menu-masonry .chips{display:flex;gap:8px;flex-wrap:wrap}
#menu-masonry .chips.diet{margin-top:8px}
#menu-masonry .chip{
  font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--muted);background:none;
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;white-space:nowrap;transition:all .18s;
  font-family:var(--sans);
}
#menu-masonry .chip:hover{color:var(--cream);border-color:rgba(255,255,255,.3)}
#menu-masonry .chip[aria-pressed="true"]{color:var(--bg);background:var(--gold-bright);border-color:var(--gold-bright)}
#menu-masonry .chips.diet .chip[aria-pressed="true"]{background:var(--veg);border-color:var(--veg);color:#fff}
#menu-masonry .chip:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

/* compact emoji attribute badges (tiles) */
#menu-masonry .tag{font-size:13px;line-height:1;border:none;border-radius:999px;padding:4px 7px;background:rgba(8,11,10,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#menu-masonry .empty{display:none;text-align:center;color:var(--muted);padding:90px 0;font-size:15px}
#menu-masonry .empty.show{display:block}

/* ---- F: immersive masonry ---- */
#menu-masonry .F{max-width:1320px;margin:0 auto;padding:10px 28px 90px}
#menu-masonry .secHead{padding-top:60px;margin-bottom:20px;scroll-margin-top:150px}
#menu-masonry .secHead h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,42px)}
#menu-masonry .secHead p{color:var(--muted);font-size:13.5px;margin-top:4px}
#menu-masonry .masonry{columns:4;column-gap:18px}
@media(max-width:1100px){#menu-masonry .masonry{columns:3}}
@media(max-width:760px){#menu-masonry .masonry{columns:2}}
@media(max-width:430px){#menu-masonry .masonry{columns:1}}
#menu-masonry .tile{break-inside:avoid;margin-bottom:18px;position:relative;border-radius:14px;overflow:hidden;display:block;background:var(--card)}
#menu-masonry .tile img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
#menu-masonry .tile:hover img{transform:scale(1.05)}
#menu-masonry .tile:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
/* no overlay at rest — the photo shows full-brightness; the dark backdrop
   only fades in on hover, behind the dish name + description */
#menu-masonry .tile .ov{position:absolute;inset:0;background:none;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;transition:background .3s ease}
#menu-masonry .tile:hover .ov,#menu-masonry .tile:focus-visible .ov{background:linear-gradient(rgba(10,13,12,.2) 0%,rgba(10,13,12,.62) 38%,rgba(10,13,12,.96) 70%)}
#menu-masonry .tile .nm{font-family:var(--serif);font-size:20px;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.7)}
#menu-masonry .tile:hover .nm,#menu-masonry .tile:focus-visible .nm{text-shadow:none}
#menu-masonry .tile .ds{color:#c9d0cb;font-size:12px;line-height:1.5;margin-top:5px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease,margin .3s}
#menu-masonry .tile:hover .ds,#menu-masonry .tile:focus-visible .ds{max-height:120px;opacity:1;margin-top:7px}
#menu-masonry .tile .tg{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
#menu-masonry .tile .flag{position:absolute;top:12px;left:12px;background:var(--gold-bright);color:var(--bg);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
#menu-masonry .tile .flag.spicy{background:var(--red);color:#fff}

@media (prefers-reduced-motion: reduce){
  #menu-masonry *{transition:none !important}
}

/* ============================================================
   Dish detail modal (tap a tile) — white background, bigger photo,
   full attributes + description. Appended to <body>, so these rules
   are intentionally NOT scoped under #menu-masonry.
   ============================================================ */
body.mm-modal-open{overflow:hidden}
.mm-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px;font-family:'Inter',sans-serif}
.mm-modal[hidden]{display:none}
.mm-modal .dm-backdrop{position:absolute;inset:0;background:rgba(8,11,10,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mm-modal .dm-card{position:relative;z-index:1;background:#fff;color:#1f1b14;width:100%;max-width:440px;max-height:92vh;overflow-y:auto;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.mm-modal .dm-img{width:100%;height:auto;max-height:56vh;object-fit:cover;display:block}
.mm-modal .dm-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:#1f1b14;font-size:24px;line-height:38px;text-align:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.mm-modal .dm-body{padding:20px 22px 26px}
.mm-modal .dm-name{font-size:25px;font-weight:600;color:#14110b;margin:0 0 12px;line-height:1.15}
.mm-modal .dm-attrs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mm-modal .dm-attrs:empty{display:none}
.mm-modal .dm-attr{font-size:13px;font-weight:500;color:#3a342a;background:#f2ede2;border-radius:999px;padding:6px 12px}
.mm-modal .dm-flag{background:#FFCE1C;color:#1a1408;font-weight:700}
.mm-modal .dm-desc{font-size:15px;line-height:1.65;color:#544e44;margin:0}