.menu-page-body { background: #120b07; }
.menu-hero { min-height: 58svh; display:grid; align-items:end; position:relative; overflow:hidden; padding:150px 0 72px; background:#160f0b; }
.menu-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,8,5,.96),rgba(13,8,5,.72) 48%,rgba(13,8,5,.52)), url("../images/harong-hero.webp") center 43%/cover no-repeat; }
.menu-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#120b07 0%,transparent 45%); }
.menu-hero-inner { position:relative; z-index:2; max-width:780px; }
.menu-hero h1 { margin:0; font:700 clamp(54px,7vw,92px)/.95 var(--serif); letter-spacing:-.04em; }
.menu-hero p:not(.eyebrow) { color:var(--muted); font-size:17px; line-height:1.75; max-width:650px; }
.menu-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.menu-meta span { border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--cream); border-radius:999px; padding:9px 13px; font-size:11px; }
.category-nav-wrap { position:sticky; top:74px; z-index:70; background:rgba(13,8,5,.96); backdrop-filter:blur(14px); border-block:1px solid var(--line); }
.category-nav { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:13px 0; scroll-snap-type:x proximity; }
.category-nav::-webkit-scrollbar { display:none; }
.category-nav a { flex:0 0 auto; scroll-snap-align:start; padding:9px 13px; border:1px solid rgba(226,173,97,.23); border-radius:999px; color:rgba(255,255,255,.72); font-size:11px; font-weight:750; white-space:nowrap; transition:.2s ease; }
.category-nav a:hover, .category-nav a.active { color:#21150d; background:var(--gold); border-color:var(--gold); }
.menu-directory { padding:72px 0 110px; }
.menu-category { scroll-margin-top:145px; padding:32px 0 54px; border-bottom:1px solid rgba(255,255,255,.07); }
.menu-category:last-child { border-bottom:0; }
.category-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:26px; }
.category-head .eyebrow { margin-bottom:10px; }
.category-head h2 { font-size:clamp(34px,4vw,54px); }
.category-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.menu-grid-full { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.menu-card { margin:0; position:relative; overflow:hidden; border:1px solid rgba(226,173,97,.22); background:#1b110b; box-shadow:0 16px 38px rgba(0,0,0,.20); cursor:zoom-in; }
.menu-card-button { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:zoom-in; }
.menu-card-media { background:#0e0906; overflow:hidden; }
.menu-card img { width:100%; aspect-ratio:4/5; object-fit:contain; background:#0e0906; transition:transform .45s ease; }
.menu-card:hover img { transform:scale(1.018); }
.menu-card figcaption { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:13px 14px 15px; border-top:1px solid rgba(255,255,255,.06); }
.menu-card figcaption strong { font:700 16px/1.25 var(--serif); color:var(--cream); }
.menu-card figcaption span { color:var(--gold); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.menu-backtop { display:flex; justify-content:center; margin-top:32px; }
.menu-lightbox { position:fixed; inset:0; z-index:500; background:rgba(5,3,2,.96); display:none; align-items:center; justify-content:center; padding:78px 72px 28px; }
.menu-lightbox.open { display:flex; }
.menu-lightbox-stage { max-width:min(92vw,980px); max-height:calc(100svh - 120px); display:grid; justify-items:center; gap:12px; }
.menu-lightbox img { max-width:100%; max-height:calc(100svh - 165px); object-fit:contain; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.menu-lightbox-title { color:var(--cream); font:700 17px/1.2 var(--serif); text-align:center; }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; border:1px solid rgba(226,173,97,.35); color:var(--cream); background:rgba(22,15,11,.88); backdrop-filter:blur(10px); width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:24px; }
.lightbox-close { top:18px; right:18px; }
.lightbox-prev { left:16px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:16px; top:50%; transform:translateY(-50%); }
.menu-lightbox-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); color:rgba(255,255,255,.42); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.no-scroll { overflow:hidden; }
@media(max-width:980px){
  .category-nav-wrap{top:66px}.menu-grid-full{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.menu-hero{min-height:52svh;padding-top:122px}.menu-lightbox{padding:68px 56px 24px}
}
@media(max-width:600px){
  .menu-hero{min-height:48svh;padding:108px 0 48px}.menu-hero h1{font-size:clamp(46px,14vw,62px)}.menu-hero p:not(.eyebrow){font-size:14px}.category-nav-wrap{top:66px}.category-nav{padding:10px 0}.category-nav a{padding:8px 11px;font-size:10px}.menu-directory{padding:42px 0 80px}.menu-category{scroll-margin-top:128px;padding:26px 0 42px}.category-head{align-items:start;margin-bottom:18px}.category-head h2{font-size:34px}.category-count{padding-top:9px}.menu-grid-full{grid-template-columns:1fr;gap:16px}.menu-card img{aspect-ratio:auto;max-height:none}.menu-card figcaption{padding:12px 13px 14px}.menu-card figcaption strong{font-size:17px}.menu-lightbox{padding:64px 10px 44px}.menu-lightbox-stage{max-width:100%;max-height:calc(100svh - 100px)}.menu-lightbox img{max-height:calc(100svh - 145px);width:auto}.lightbox-close{top:10px;right:10px}.lightbox-prev,.lightbox-next{width:42px;height:42px;top:auto;bottom:8px;transform:none}.lightbox-prev{left:12px}.lightbox-next{right:12px}.menu-lightbox-hint{bottom:18px;white-space:nowrap}
}

/* Homepage menu gateway deep-link targets. They preserve the visible 18-category menu structure. */
.menu-group-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 145px;
}
@media (max-width: 680px) {
  .menu-group-anchor { scroll-margin-top: 128px; }
}