/* ============================================================
   Pizza Persé — Site-wide stylesheet
   Shared across index.html / menu.html / reserve.html
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Design tokens ── */
:root {
  /* Casual pizzeria palette: white-on-black with yellow CTA accent */
  --black: #0A0A0A;
  --white: #FFFFFF;
  --bg: #FAFAFA;
  --cream: #FDFBF8;
  --yellow: #F0C030;
  --gold: #F0C030;
  --gold-light: #F8E080;
  --mid-gray: #6B6560;
  --warm-gray: #E8E2D9;
  --error: #b0402a;
  --ink-soft: rgba(10,10,10,0.62);
  --ink-dim: rgba(10,10,10,0.42);
  --line: rgba(10,10,10,0.10);
  /* Mobile-readability body text tokens */
  --ink-body: #1a1a1a;
  --ink-secondary: #525252;
  --ink-on-dark: #e5e5e5;
  --ink-on-dark-secondary: #a3a3a3;

  /* Standardized site-wide font stacks */
  --serif-zh: 'Noto Serif TC', 'PingFang TC', Georgia, serif;
  --sans-zh: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Cinzel', 'Noto Serif TC', Georgia, serif;
  /* Legacy aliases (used by menu.html / reserve.html) */
  --font-display: 'Cinzel', 'Noto Serif TC', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Globals ── */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; font-family: var(--sans-zh); font-weight: 400; color: var(--ink-body); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--black); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }
*:focus:not(:focus-visible) { outline: none; }

/* ── Fade-up entrance (IntersectionObserver-driven) ── */
.fu { opacity: 0; transform: translateY(20px); transition: opacity 900ms ease, transform 900ms ease; }
.fu.vis { opacity: 1; transform: none; }
.fu-d1 { transition-delay: 120ms; }
.fu-d2 { transition-delay: 240ms; }
.fu-d3 { transition-delay: 360ms; }
.fu-d4 { transition-delay: 480ms; }

/* ── Labels & headings ── */
.lbl { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.lbl-zh { font-family: var(--sans-zh); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; color: var(--ink-soft); }
.h-zh { font-family: var(--serif-zh); font-weight: 400; letter-spacing: 0.01em; color: var(--black); line-height: 1.2; }
.h-en { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; color: var(--black); line-height: 1.05; }

/* ── Buttons ── */
.btn { display: inline-block; font-family: var(--sans-zh); font-weight: 700; letter-spacing: 0.1em; font-size: 13px; padding: 16px 32px; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; cursor: pointer; border: 1px solid transparent; border-radius: 999px; }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--yellow); color: var(--black); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.btn-yellow { background: var(--yellow); color: var(--black); }
.btn-yellow:hover { background: var(--white); color: var(--black); }
.btn-link { font-family: var(--sans-zh); font-size: 12px; font-weight: 700; color: var(--black); letter-spacing: 0.14em; border-bottom: 2px solid var(--black); padding-bottom: 5px; transition: color 200ms ease, border-color 200ms ease; }
.btn-link:hover { color: var(--black); border-color: var(--yellow); }

/* ── Site nav (shared across all pages) ── */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 320ms ease, box-shadow 320ms ease, border-color 320ms ease; }
.nav-wrap.transparent { background: transparent; border-bottom-color: transparent; }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px 28px; }
.nav-left { display: flex; align-items: center; gap: 14px; }
.nav-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; }

.nav-link { font-family: var(--sans-zh); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; color: var(--white); display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 10px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.nav-link:hover, .nav-link.active { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.nav-link .en { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: block; margin-top: 3px; transition: color 200ms ease; }
.nav-link:hover .en, .nav-link.active .en { color: rgba(10,10,10,0.6); }

.nav-brand { display: inline-flex; align-items: center; }
.nav-brand img { height: 22px; width: auto; filter: invert(1) brightness(1.15); }

.nav-lang { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.nav-lang a { padding: 4px 8px; color: rgba(255,255,255,0.55); transition: color 200ms ease; }
.nav-lang a.active { color: var(--white); }
.nav-lang a:hover:not(.active) { color: var(--white); }
.nav-lang .sep { color: rgba(255,255,255,0.3); padding: 0 2px; }

.nav-icon-btn { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; color: var(--white); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; cursor: pointer; }
.nav-icon-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.nav-icon-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); background: var(--white); color: var(--black); font-family: var(--sans-zh); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; padding: 6px 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; border-radius: 2px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.nav-icon-btn[data-tooltip]::before { content: ''; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-4px); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--white); opacity: 0; transition: opacity 220ms ease, transform 220ms ease; }
.nav-icon-btn[data-tooltip]:hover::after, .nav-icon-btn[data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }

.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 22px; border: 1px solid var(--yellow); background: var(--yellow); color: var(--black); font-family: var(--sans-zh); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; transition: all 200ms ease; border-radius: 4px; }
.nav-cta:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.nav-cta .arrow { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(10,10,10,0.18); font-size: 11px; transition: background 200ms ease; }
.nav-cta:hover .arrow { background: rgba(10,10,10,0.12); }

@media (max-width: 860px) {
  .nav-inner { grid-template-columns: auto 1fr auto !important; gap: 8px !important; padding: 10px 12px !important; }
  .nav-left { gap: 6px !important; }
  .nav-lang, .nav-icon-btn { display: none !important; }
  .nav-brand img { height: 16px !important; }
  .nav-center { gap: 4px !important; justify-content: center !important; }
  .nav-link { font-size: 11px !important; padding: 7px 10px !important; letter-spacing: 0.1em !important; }
  .nav-link .en { display: none !important; }
  .nav-cta { font-size: 10px !important; padding: 7px 10px !important; letter-spacing: 0.08em !important; gap: 6px !important; }
  .nav-cta .arrow { width: 14px !important; height: 14px !important; font-size: 9px !important; }
}

/* ── SEO + a11y static fallback (visible to crawlers, hidden visually) ── */
.seo-static-content { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-fallback { padding: 24px; max-width: 720px; margin: 0 auto; font-family: var(--sans-zh); font-size: 15px; line-height: 1.7; color: var(--black); text-align: center; background: var(--bg); }
.noscript-fallback a { color: var(--black); text-decoration: underline; }

/* ── Marble texture background ── */
.marble-bg {
  background-color: #f7f6f3;
  background-image:
    linear-gradient(112deg, transparent 18%, rgba(185,175,158,0.07) 50%, transparent 82%),
    linear-gradient(198deg, transparent 14%, rgba(198,190,174,0.06) 56%, transparent 88%),
    linear-gradient(348deg, transparent 28%, rgba(180,172,157,0.05) 64%, transparent 90%);
}

/* ============================================================
   INDEX.HTML — Home page styles
   ============================================================ */

/* ── Hero ── */
.hero-section { position: relative; height: 100svh; min-height: 600px; background: var(--black); overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: 1; }
.hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.30) 32%, rgba(10,10,10,0.55) 68%, rgba(10,10,10,0.85) 100%); }
.hero-noise { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; will-change: opacity; animation: heroNoiseShift 1.2s steps(4) infinite; }
@keyframes heroNoiseShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6px, 4px); }
  50%  { transform: translate(4px, -2px); }
  75%  { transform: translate(-2px, -6px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-noise { animation: none; } }
.hero-frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,0.4); pointer-events: none; z-index: 5; }
@media (max-width: 860px) { .hero-frame { inset: 10px; } }

.hero-content { position: absolute; inset: 0; padding: clamp(80px, 8vw, 120px) clamp(24px, 5vw, 80px); z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* 改造 2: Hero entrance — 1.7s staggered reveal */
.hero-content > * { opacity: 0; will-change: opacity, transform; }
.hero-content.loaded .hero-logo {
  animation: heroLogoIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.hero-content.loaded .hero-title .latin .ch {
  display: inline-block;
  opacity: 0;
  animation: heroCharIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* per-char delay set inline by JS (0.7s + i*0.04s) */
}
.hero-content.loaded .hero-title .zh {
  animation: heroFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 1.0s both;
}
.hero-content.loaded .hero-tagline {
  animation: heroFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
}
.hero-content.loaded .hero-buttons {
  animation: heroFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroCharIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeOnly {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content.loaded .hero-logo,
  .hero-content.loaded .hero-title .latin .ch,
  .hero-content.loaded .hero-title .zh,
  .hero-content.loaded .hero-tagline,
  .hero-content.loaded .hero-buttons {
    animation: heroFadeOnly 0.3s ease forwards !important;
    animation-delay: 0.3s !important;
    transform: none !important;
  }
}

.hero-logo { width: clamp(180px, 18vw, 240px); height: auto; filter: invert(1) brightness(1.15) drop-shadow(0 4px 20px rgba(0,0,0,0.5)); }
@media (max-width: 860px) { .hero-logo { width: clamp(140px, 36vw, 200px); } }

.hero-title { font-family: var(--display); font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; color: var(--white); letter-spacing: 0.06em; line-height: 1.3; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 1px 6px rgba(0,0,0,0.6); margin: 0; }
.hero-title .latin { display: block; text-transform: uppercase; }
.hero-title .zh { display: block; font-family: var(--serif-zh); letter-spacing: 0.04em; font-weight: 400; margin-top: 6px; }
@media (max-width: 720px) { .hero-title { font-size: clamp(22px, 6.2vw, 32px); letter-spacing: 0.04em; } }

.hero-tagline { margin-top: 32px; margin-bottom: 38px; max-width: 720px; }
.hero-tagline p { font-family: var(--sans-zh); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; color: var(--ink-on-dark); letter-spacing: 0.04em; line-height: 1.7; text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5); margin: 0; }
.hero-tagline p + p { margin-top: 4px; }
.hero-tagline .en { font-family: var(--sans); font-size: clamp(14px, 1.2vw, 16px); color: var(--ink-on-dark-secondary); font-weight: 500; letter-spacing: 0.05em; line-height: 1.6; text-shadow: 0 1px 10px rgba(0,0,0,0.7); margin-top: 20px; font-style: normal; }

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ── Section padding wrappers ── */
.section-pad { padding: 140px 0; }
.page-pad { padding: 0 40px; }
.two-col, .two-col-alt { display: grid; gap: 80px; align-items: center; }
.two-col { grid-template-columns: 1fr 1fr; }
.two-col-alt { grid-template-columns: 1fr 1.15fr; }
.three-col { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; }

@media (max-width: 860px) {
  .page-pad { padding: 0 24px !important; }
  .two-col, .two-col-alt { grid-template-columns: 1fr !important; gap: 48px !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .dish-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .h-big-zh { font-size: clamp(32px, 8vw, 48px) !important; }
  .section-pad { padding: 96px 0 !important; }
  .reserve-bar { grid-template-columns: 1fr !important; gap: 20px !important; }
  .reserve-bar > div:last-child { justify-content: flex-start !important; }
}

/* ── About section ── */
.about-section { background: var(--white); color: var(--black); padding: 140px 0; }
.about-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
.about-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.about-h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.35; margin-top: 28px; margin-bottom: 40px; font-weight: 400; letter-spacing: 0.01em; color: var(--black); }
.about-body { font-family: var(--sans-zh); font-size: 16px; font-weight: 400; line-height: 1.95; color: var(--ink-body); letter-spacing: 0.01em; margin-bottom: 22px; }
.about-body.closer { margin-bottom: 0; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Process section (text left, stacked image cards right with auto-entrance) ── */
.process-section { background: var(--black); color: var(--white); padding: 160px 0; position: relative; }
.process-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.process-text { padding-top: 12px; }
.process-text .lbl { color: rgba(255,255,255,0.45); margin-bottom: 24px; display: inline-block; }
.process-title { font-family: var(--serif-zh); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.35; letter-spacing: 0.01em; color: var(--white); margin-bottom: 44px; }
.process-title .accent { color: var(--yellow); font-style: italic; font-family: var(--serif-zh); }
.process-intro p { color: var(--ink-on-dark-secondary); font-size: clamp(16px, 1.1vw, 17px); line-height: 1.85; margin-bottom: 18px; font-family: var(--sans-zh); font-weight: 400; letter-spacing: 0.01em; }
.process-intro p:first-child { font-weight: 500; color: var(--ink-on-dark); font-size: clamp(16px, 1.2vw, 18px); }
.process-intro p:last-child { margin-bottom: 0; }

.process-cards-stack { display: flex; flex-direction: column; gap: 16px; }
.process-card { position: relative; width: 100%; display: grid; grid-template-columns: 35% 65%; background: rgba(20,20,20,0.6); border-radius: 6px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.14); opacity: 0; transform: translateY(40px); transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.process-section.in-view .process-card { opacity: 1; transform: translateY(0); }
.process-card:nth-child(1) { transition-delay: 150ms; }
.process-card:nth-child(2) { transition-delay: 400ms; }
.process-card:nth-child(3) { transition-delay: 650ms; }
.process-card-image { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.process-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-card-content { padding: clamp(20px, 1.8vw, 28px) clamp(22px, 2vw, 30px); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.process-card-meta { display: flex; align-items: baseline; gap: 14px; margin-bottom: 2px; }
.process-num { font-family: var(--serif-zh); color: var(--yellow); font-style: italic; font-size: clamp(20px, 1.7vw, 26px); font-weight: 300; line-height: 1; }
.process-card .step-en { font-family: var(--sans); font-size: clamp(9px, 0.7vw, 11px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.process-card h3 { font-family: var(--serif-zh); font-weight: 400; font-size: clamp(18px, 1.55vw, 24px); color: white; letter-spacing: 0.02em; line-height: 1.25; margin-bottom: 4px; }
.process-card p.lead { font-family: var(--sans-zh); font-size: clamp(15px, 1.05vw, 16px); color: var(--ink-on-dark); font-weight: 500; line-height: 1.6; letter-spacing: 0.01em; margin-bottom: 4px; }
.process-card p.body { font-family: var(--sans-zh); font-size: clamp(14px, 0.95vw, 15px); color: var(--ink-on-dark-secondary); font-weight: 400; line-height: 1.7; letter-spacing: 0.01em; }

@media (max-width: 860px) {
  .process-section { padding: 80px 0; }
  .process-grid { grid-template-columns: 1fr; gap: 56px; padding: 0 24px; }
  .process-card { grid-template-columns: 1fr; }
  .process-card-image { aspect-ratio: 16/9; }
  .process-card-content { padding: 24px; gap: 4px; }
  .process-card:nth-child(1) { transition-delay: 100ms; }
  .process-card:nth-child(2) { transition-delay: 280ms; }
  .process-card:nth-child(3) { transition-delay: 460ms; }
}

/* ── Dishes section ── */
.dishes-section { background: var(--white); padding: 140px 0; }
.dishes-wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.dishes-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; gap: 32px; flex-wrap: wrap; }
.dishes-h2 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.18; color: var(--black); margin-top: 28px; max-width: 18ch; letter-spacing: 0.005em; }
.dish-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dish-card { display: block; }
.dish-card-img-wrap { position: relative; overflow: hidden; margin-bottom: 18px; aspect-ratio: 3/4; background: var(--black); }
.dish-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.dish-card:hover .dish-card-img-wrap img { transform: scale(1.04); }
.dish-card-badge { position: absolute; top: 14px; left: 14px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--black); background: var(--yellow); padding: 5px 10px; }
.dish-card h3 { font-family: var(--serif-zh); font-size: 20px; line-height: 1.3; color: var(--black); letter-spacing: 0.01em; margin-bottom: 4px; font-weight: 700; }
.dish-card-en { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: 0; }
.dish-card-sub { font-family: var(--sans-zh); font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; letter-spacing: 0.01em; line-height: 1.55; }
.dish-card-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); }
.dish-card-price { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--black); letter-spacing: 0; }
.dish-card-cta { font-family: var(--sans); font-size: 10px; font-weight: 700; color: var(--ink-dim); letter-spacing: 0.18em; text-transform: uppercase; }

/* ── Beyond Pizza section ── */
.beyond-section { background: var(--black); color: var(--white); padding: 140px 0; }
.beyond-wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.beyond-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.beyond-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.beyond-img-grid img { width: 100%; object-fit: cover; }
.beyond-img-grid img.full { grid-column: 1 / -1; aspect-ratio: 16/10; }
.beyond-img-grid img.half { aspect-ratio: 1; }
.beyond-h2 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.18; color: var(--white); margin-top: 18px; margin-bottom: 32px; letter-spacing: 0.005em; }
.beyond-body { font-family: var(--sans-zh); font-size: 16px; font-weight: 400; line-height: 1.95; letter-spacing: 0.01em; margin-bottom: 18px; color: var(--ink-on-dark); }
.beyond-body.lead { color: var(--ink-on-dark); font-weight: 500; }
.beyond-body.detail { color: var(--ink-on-dark-secondary); }
.beyond-body.last { margin-bottom: 36px; }

@media (max-width: 860px) {
  .beyond-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Google Reviews section (Featurable widget) ── */
.reviews-section { background: var(--cream); padding: 140px 0; }
.reviews-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.reviews-head { text-align: center; margin-bottom: 56px; }
.reviews-head .lbl { display: inline-block; font-size: 11px; color: var(--black); margin-bottom: 28px; text-transform: uppercase; }
.reviews-sub { font-family: var(--sans-zh); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; color: var(--ink-secondary); margin: 0 0 14px; line-height: 1.6; }
.reviews-h2 { font-size: clamp(48px, 6.2vw, 84px); letter-spacing: 0.04em; line-height: 1.2; margin: 0; color: var(--black); font-weight: 400; }
.reviews-widget-wrap { max-width: 1200px; margin: 0 auto; }

@media (max-width: 860px) {
  .reviews-section { padding: 96px 0; }
  .reviews-wrap { padding: 0 24px; }
  .reviews-head { margin-bottom: 40px; }
}

/* ── Location & Space section ── */
.location-section { padding: 140px 0; }
.location-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.location-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.location-img-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.location-img-grid img.tall { width: 100%; height: 100%; object-fit: cover; object-position: 72% top; aspect-ratio: 3/4; }
.location-img-grid .stack { display: flex; flex-direction: column; gap: 10px; }
.location-img-grid .stack img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.location-h2 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.18; color: var(--black); margin-top: 28px; margin-bottom: 18px; letter-spacing: 0.005em; }
.location-en { font-size: 20px; color: var(--ink-soft); margin-bottom: 30px; letter-spacing: 0; font-weight: 500; }
.location-desc { font-family: var(--sans-zh); font-size: 16px; font-weight: 400; color: var(--ink-body); line-height: 1.95; margin-bottom: 32px; letter-spacing: 0.01em; }
.location-info { padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
.location-info-label { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.location-info-addr { font-family: var(--sans-zh); font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0.01em; line-height: 1.65; }
.location-info-transit { font-family: var(--sans-zh); font-size: 12px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0.01em; line-height: 1.6; margin-top: 8px; }
.location-info-phone { font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--black); letter-spacing: 0; border-bottom: 1px solid var(--black); padding-bottom: 2px; display: inline-block; }
.location-info-seats { font-family: var(--sans-zh); font-size: 14px; font-weight: 500; color: var(--black); letter-spacing: 0.01em; }
.location-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .location-grid { grid-template-columns: 1fr; gap: 48px; }
  .location-info { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Contact footer ── */
.contact-footer { background: var(--black); color: var(--white); padding: 72px 0 40px; }
.contact-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.reserve-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; margin-bottom: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.reserve-bar h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; color: var(--white); margin-top: 12px; font-weight: 700; letter-spacing: 0.01em; }
.reserve-bar h2 .accent { color: var(--yellow); }
.reserve-bar h2 .en { font-family: var(--sans); display: inline-block; font-size: 0.5em; color: rgba(255,255,255,0.5); margin-left: 14px; letter-spacing: 0; vertical-align: middle; font-weight: 500; }
.reserve-bar-desc { font-family: var(--sans-zh); font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.72); margin-top: 18px; max-width: 560px; letter-spacing: 0.01em; }
.reserve-bar-desc .en { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 0; }
.reserve-bar-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; padding-top: 60px; border-top: 1px solid rgba(255,255,255,0.12); }
.footer-brand-img { width: 120px; margin-bottom: 28px; filter: invert(1) brightness(1.05); }
.footer-brand-desc { font-family: var(--sans-zh); font-weight: 400; font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.8; max-width: 340px; letter-spacing: 0.01em; }
.footer-social { display: flex; gap: 10px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: var(--white); transition: all 200ms ease; }
.footer-social a:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.footer-social a.uber { width: auto; height: 38px; padding: 0 14px; border-radius: 19px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-col-label { color: var(--yellow); display: block; margin-bottom: 10px; }
.footer-col-zh { color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer-addr-zh { font-family: var(--sans-zh); font-size: 15px; font-weight: 500; color: var(--white); line-height: 1.8; letter-spacing: 0.01em; }
.footer-addr-en { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.7; margin-top: 6px; letter-spacing: 0; }
.footer-addr-transit { font-family: var(--sans-zh); font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; margin-top: 10px; letter-spacing: 0.02em; }
.footer-phone { margin-top: 22px; display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--white); letter-spacing: 0; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 3px; }
.footer-hours-list { display: flex; flex-direction: column; gap: 14px; }
.footer-hours-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--sans-zh); font-size: 13px; color: var(--white); letter-spacing: 0.01em; }
.footer-hours-days { font-weight: 500; color: rgba(255,255,255,0.7); font-size: 12px; letter-spacing: 0.04em; }
.footer-hours-line { display: flex; justify-content: space-between; align-items: baseline; }
.footer-hours-line .time { font-family: var(--sans); font-weight: 500; opacity: 0.85; }
.footer-hours-line .lo { opacity: 0.55; font-size: 0.85em; margin-left: 6px; }
.footer-copyright { margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--sans); font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; }

@media (max-width: 860px) {
  .footer-cols { grid-template-columns: 1fr; gap: 48px; }
}

/* ── Messenger floating bubble ── */
.msgr-bubble { position: fixed; bottom: 24px; right: 24px; z-index: 400; width: 52px; height: 52px; border-radius: 50%; background: #0084FF; color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,132,255,0.3); cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; text-decoration: none; }
.msgr-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,132,255,0.5); }

/* ============================================================
   MENU.HTML — Menu page styles
   ============================================================ */

body.menu-body { font-family: var(--font-body); background: var(--cream); color: var(--black); }
body.menu-body ::-webkit-scrollbar-track { background: var(--cream); }
body.menu-body ::-webkit-scrollbar-thumb { background: var(--gold); }

.menu-container { max-width: 1200px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 768px) { .menu-container { padding: 0 20px !important; } }

/* Menu page hero (full screen) */
.menu-page-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: #0A0A0A; }
.menu-page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1200ms ease; }
.menu-page-hero-img.is-loaded { opacity: 1; }
.menu-page-hero-overlay-1 { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,3,2,0.84) 0%, rgba(5,3,2,0.52) 55%, rgba(5,3,2,0.18) 100%); }
.menu-page-hero-overlay-2 { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,3,2,0.58) 0%, transparent 50%); }
.menu-page-hero-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.menu-page-hero-content > * { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
.menu-page-hero.loaded .menu-page-hero-label { opacity: 1; transform: none; transition-delay: 200ms; }
.menu-page-hero.loaded .menu-page-hero-h1 { opacity: 1; transform: none; transition-delay: 320ms; }
.menu-page-hero.loaded .menu-page-hero-desc { opacity: 1; transform: none; transition-delay: 500ms; }
.menu-page-hero.loaded .menu-page-hero-tag { opacity: 1; transform: none; transition-delay: 600ms; }
.menu-page-hero.loaded .menu-page-hero-scroll-cue { opacity: 0.65; transform: none; transition-delay: 900ms; }
.menu-page-hero-label { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.menu-page-hero-h1 { font-family: var(--font-display); font-size: clamp(64px, 9vw, 120px); font-weight: 300; line-height: 1.0; letter-spacing: -0.025em; color: var(--cream); margin: 0; }
.menu-page-hero-desc { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink-on-dark); margin-top: 24px; line-height: 1.75; max-width: 420px; letter-spacing: 0.02em; }
.menu-page-hero-tag { margin-top: 36px; display: flex; align-items: center; gap: 20px; }
.menu-page-hero-tag-line { width: 40px; height: 1px; background: rgba(240,192,48,0.35); }
.menu-page-hero-tag-text { font-family: var(--font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(240,192,48,0.5); }
.menu-page-hero-scroll-cue { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1; }
.menu-page-hero-scroll-cue span { font-family: var(--font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cream); }
@media (max-width: 768px) { .menu-page-hero-h1 { font-size: clamp(48px, 12vw, 80px) !important; } }

/* Category nav (sticky horizontal) */
.cat-nav { position: sticky; top: 64px; z-index: 200; background: var(--cream); border-bottom: 1px solid rgba(10,10,10,0.07); transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease; }
.cat-nav.stuck { background: rgba(253,251,248,0.97); border-bottom-color: rgba(10,10,10,0.09); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cat-nav-inner { display: flex; align-items: stretch; max-width: 1200px; margin: 0 auto; padding: 0 56px; }
.cat-nav-item { background: none; border: none; cursor: pointer; padding: 18px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: border-color 250ms ease; font-family: inherit; }
.cat-nav-item.active { border-bottom-color: var(--gold); }
.cat-nav-item-zh { font-family: var(--sans-zh); font-size: 14px; font-weight: 500; color: var(--ink-secondary); transition: all 250ms ease; }
.cat-nav-item.active .cat-nav-item-zh { font-weight: 600; color: var(--ink-body); }
.cat-nav-item-en { font-family: var(--font-display); font-size: 10px; font-style: italic; color: rgba(107,101,96,0.4); transition: color 250ms ease; }
.cat-nav-item.active .cat-nav-item-en { color: var(--gold); }
@media (max-width: 768px) {
  .cat-nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 20px; }
  .cat-nav-inner::-webkit-scrollbar { display: none; }
  .cat-nav-item { min-width: max-content; }
}

/* Menu sections (alternating cream/black) */
.menu-section { background: var(--cream); }
.menu-section.inverted { background: var(--black); }
.menu-section-inner { padding: 100px 0 60px; }
.menu-section-head { border-bottom: 1px solid rgba(10,10,10,0.09); padding-bottom: 40px; margin-bottom: 56px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.menu-section.inverted .menu-section-head { border-bottom-color: rgba(253,251,248,0.07); }
.menu-section-label { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.menu-section-title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px); font-weight: 300; line-height: 1.0; letter-spacing: -0.02em; color: var(--black); margin: 0; }
.menu-section.inverted .menu-section-title { color: var(--cream); }
.menu-section-note { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink-secondary); line-height: 1.7; max-width: 360px; text-align: right; margin: 0; }
.menu-section.inverted .menu-section-note { color: var(--ink-on-dark-secondary); }

/* Featured cards */
.menu-card-grid { display: grid; gap: 2px; margin-bottom: 56px; }
.menu-card-grid.cols-1 { grid-template-columns: 1fr; }
.menu-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.menu-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .menu-card-grid.cols-2, .menu-card-grid.cols-3 { grid-template-columns: 1fr !important; } }
.menu-card { transition: transform 250ms ease; }
.menu-card:hover { transform: translateY(-4px); }
.menu-card-img-wrap { width: 100%; aspect-ratio: 4/3; background: #141414; position: relative; overflow: hidden; }
.menu-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 600ms ease; }
.menu-card:hover .menu-card-img-wrap img { transform: scale(1.06); }
.menu-card-tag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; background: var(--gold); font-family: var(--font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); z-index: 1; }
.menu-card-info { padding: 20px 0 24px; border-bottom: 1px solid rgba(10,10,10,0.08); }
.menu-section.inverted .menu-card-info { border-bottom-color: rgba(253,251,248,0.07); }
.menu-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.menu-card-zh { font-family: var(--font-display); font-size: 24px; font-weight: 300; color: var(--black); line-height: 1.1; }
.menu-section.inverted .menu-card-zh { color: var(--cream); }
.menu-card-en { font-family: var(--font-display); font-size: 13px; font-weight: 300; font-style: italic; color: var(--mid-gray); margin-top: 3px; }
.menu-section.inverted .menu-card-en { color: rgba(253,251,248,0.42); }
.menu-card-price { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--black); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-top: 2px; transition: color 250ms ease; }
.menu-section.inverted .menu-card-price { color: var(--cream); }
.menu-card:hover .menu-card-price { color: var(--gold); }
.menu-card-desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--ink-body); margin-top: 10px; line-height: 1.7; }
.menu-section.inverted .menu-card-desc { color: var(--ink-on-dark); }
.menu-card-flavor { font-family: var(--font-display); font-size: 14px; font-weight: 400; font-style: italic; color: var(--gold); margin-top: 8px; line-height: 1.6; opacity: 0.9; }
.menu-section.inverted .menu-card-flavor { color: rgba(184,147,90,0.75); }

/* Inline divider */
.menu-list-divider { display: flex; align-items: center; gap: 16px; }
.menu-list-divider hr { flex: 1; height: 1px; background: rgba(10,10,10,0.09); border: 0; }
.menu-section.inverted .menu-list-divider hr { background: rgba(253,251,248,0.07); }
.menu-list-divider span { font-family: var(--font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(10,10,10,0.22); }
.menu-section.inverted .menu-list-divider span { color: rgba(253,251,248,0.2); }

/* Row items */
.menu-row-list { padding-top: 20px; }
.menu-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(10,10,10,0.07); transition: opacity 250ms ease; opacity: 0.84; }
.menu-section.inverted .menu-row { border-bottom-color: rgba(253,251,248,0.06); }
.menu-row:hover { opacity: 1; }
.menu-row-info { flex: 1; min-width: 0; }
.menu-row-titleline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.menu-row-zh { font-family: var(--font-display); font-size: 19px; font-weight: 300; color: var(--black); line-height: 1.2; }
.menu-section.inverted .menu-row-zh { color: var(--cream); }
.menu-row-en { font-family: var(--font-display); font-size: 13px; font-weight: 300; font-style: italic; color: var(--mid-gray); }
.menu-section.inverted .menu-row-en { color: rgba(253,251,248,0.42); }
.menu-row-desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--ink-body); margin-top: 6px; line-height: 1.65; }
.menu-section.inverted .menu-row-desc { color: var(--ink-on-dark); }
.menu-row-flavor { font-family: var(--font-display); font-size: 14px; font-weight: 400; font-style: italic; color: var(--gold); margin-top: 6px; line-height: 1.5; opacity: 0.9; }
.menu-section.inverted .menu-row-flavor { color: rgba(184,147,90,0.75); }
.menu-row-price { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--black); font-variant-numeric: tabular-nums; flex-shrink: 0; text-align: right; padding-top: 2px; transition: color 250ms ease; }
.menu-section.inverted .menu-row-price { color: var(--cream); }
.menu-row:hover .menu-row-price { color: var(--gold); }
.menu-row-price-alt { font-size: 13px; color: var(--ink-secondary); font-weight: 500; margin-left: 4px; }
.menu-section.inverted .menu-row-price-alt { color: var(--ink-on-dark-secondary); }

/* Photo wall */
.photo-wall-band { padding: 40px 0 56px; border-top: 1px solid rgba(10,10,10,0.06); background: #f0ece4; }
.menu-section.inverted .photo-wall-band { background: #0e0e0e; border-top-color: rgba(253,251,248,0.05); }
.photo-wall-label { font-family: var(--font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.photo-wall-grid { display: grid; gap: 3px; }
.photo-wall-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.photo-wall-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.photo-wall-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.photo-wall-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 768px) {
  .photo-wall-grid.cols-4, .photo-wall-grid.cols-5, .photo-wall-grid.cols-6 { grid-template-columns: repeat(3, 1fr) !important; }
}
.photo-wall-cell { aspect-ratio: 1; background: #e6e1d8; position: relative; overflow: hidden; cursor: pointer; transition: background 250ms ease; border: none; padding: 0; display: block; }
.photo-wall-cell:hover { background: #dbd6cc; }
.menu-section.inverted .photo-wall-cell { background: #181818; }
.menu-section.inverted .photo-wall-cell:hover { background: #222; }
.photo-wall-cell-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 200ms ease; }
.photo-wall-cell:hover .photo-wall-cell-icon { opacity: 0; }
.photo-wall-cell-icon svg { stroke: rgba(10,10,10,0.2); }
.menu-section.inverted .photo-wall-cell-icon svg { stroke: rgba(253,251,248,0.18); }
.photo-wall-cell-icon svg circle.dot { fill: rgba(10,10,10,0.2); stroke: none; }
.menu-section.inverted .photo-wall-cell-icon svg circle.dot { fill: rgba(253,251,248,0.18); }
.photo-wall-cell-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.72); opacity: 0; transition: opacity 220ms ease; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; }
.photo-wall-cell:hover .photo-wall-cell-overlay { opacity: 1; }
.photo-wall-cell-zh { font-family: var(--font-display); font-size: 14px; font-weight: 300; color: var(--cream); text-align: center; line-height: 1.25; }
.photo-wall-cell-en { font-family: var(--font-display); font-size: 10px; font-style: italic; color: var(--gold); margin-top: 4px; text-align: center; }
.photo-wall-cell-rule { margin-top: 10px; width: 16px; height: 1px; background: rgba(184,147,90,0.5); }
.photo-wall-cell-cta { font-family: var(--font-body); font-size: 7px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(253,251,248,0.4); margin-top: 8px; }

/* Menu page footer */
.menu-footer { background: var(--black); padding: 56px 0; }
.menu-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.menu-footer-brand { display: flex; align-items: center; gap: 24px; }
.menu-footer-brand img { width: 48px; filter: invert(1) brightness(0.7); }
.menu-footer-brand span { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: rgba(253,251,248,0.25); letter-spacing: 0.06em; }
.menu-footer-actions { display: flex; gap: 16px; align-items: center; }
.btn-gold-outline { display: inline-flex; align-items: center; justify-content: center; padding: 9px 22px; font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(184,147,90,0.45); color: var(--gold); background: transparent; transition: all 250ms ease; text-decoration: none; }
.btn-gold-outline:hover { background: var(--gold); color: var(--cream); border-color: var(--gold); }
.menu-footer-home-link { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253,251,248,0.3); text-decoration: none; }

/* ============================================================
   RESERVE.HTML — Reservation page styles
   ============================================================ */

/* Reserve page uses bronze gold (different from menu.html yellow gold) */
body.reserve-body { --gold: #B8935A; --gold-light: #D4AE7A; font-family: var(--font-body); background: var(--cream); color: var(--black); }
body.reserve-body ::-webkit-scrollbar-track { background: var(--cream); }
body.reserve-body ::-webkit-scrollbar-thumb { background: var(--gold); }
body.reserve-body input[type="date"], body.reserve-body select { -webkit-appearance: none; appearance: none; }
body.reserve-body input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; filter: invert(0.3); }

.reserve-container { max-width: 1200px; margin: 0 auto; padding: 0 56px; }
.reserve-form-container { max-width: 900px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 768px) {
  .reserve-container, .reserve-form-container { padding: 0 24px !important; }
}

/* Reserve hero */
.reserve-hero { background: var(--black); padding: 160px 0 96px; position: relative; overflow: hidden; }
.reserve-hero-noise-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.04; pointer-events: none; }
.reserve-hero-bottom-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(184,147,90,0.15); }
.reserve-hero-inner { position: relative; z-index: 1; }
.reserve-hero-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.reserve-hero-h1 { font-family: var(--font-display); font-size: clamp(56px, 8vw, 100px); font-weight: 300; color: var(--cream); line-height: 1.0; letter-spacing: -0.025em; margin-bottom: 36px; }
.reserve-hero-desc { max-width: 560px; }
.reserve-hero-desc p { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: rgba(253,251,248,0.6); line-height: 1.9; }
.reserve-hero-desc p + p { margin-top: 12px; }

/* Form section */
.reserve-form-section { background: var(--cream); padding: 88px 0 120px; }
.reserve-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; }
@media (max-width: 768px) {
  .reserve-form-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

.form-field-group { display: block; }
.form-field-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; }
.form-field-required { color: var(--error); margin-left: 3px; }
.form-error-msg { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--error); margin-top: 6px; letter-spacing: 0.02em; }

.form-input { width: 100%; padding: 13px 0; border: none; border-bottom: 1px solid rgba(10,10,10,0.18); background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--black); outline: none; transition: border-color 250ms ease; border-radius: 0; }
.form-input:focus { border-bottom-color: var(--gold); }
.form-input.has-error { border-bottom-color: var(--error); }
.form-input::placeholder { color: rgba(10,10,10,0.4); }

.form-textarea { width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid rgba(10,10,10,0.18); background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--black); outline: none; transition: border-color 250ms ease; border-radius: 0; resize: vertical; line-height: 1.7; }
.form-textarea:focus { border-bottom-color: var(--gold); }

.form-select-wrap { position: relative; }
.form-select { width: 100%; padding: 13px 28px 13px 0; border: none; border-bottom: 1px solid rgba(10,10,10,0.18); background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--black); outline: none; transition: border-color 250ms ease; border-radius: 0; cursor: pointer; }
.form-select:focus { border-bottom-color: var(--gold); }
.form-select.has-error { border-bottom-color: var(--error); }
.form-select-arrow { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.35; }

/* Pill radios — native radio + label with :checked styling */
.form-pill-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.form-pill-group.below-input { margin-top: 12px; }
.form-pill { cursor: pointer; }
.form-pill input { position: absolute; opacity: 0; pointer-events: none; }
.form-pill-label { display: inline-block; padding: 8px 20px; border: 1px solid rgba(10,10,10,0.18); font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--mid-gray); background: transparent; transition: all 200ms ease; letter-spacing: 0.02em; user-select: none; }
.form-pill input:checked + .form-pill-label { border-color: var(--gold); color: var(--gold); background: rgba(184,147,90,0.06); }
.form-pill input:focus-visible + .form-pill-label { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Conditional / banner */
.form-kids-conditional { display: none; }
.form-kids-conditional.visible { display: block; }
.private-events-banner { display: none; margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--gold); background: rgba(184,147,90,0.05); }
.private-events-banner.visible { display: block; }
.private-events-banner p { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--black); line-height: 1.7; margin: 0; }
.private-events-banner a { display: inline-block; margin-top: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(184,147,90,0.35); padding-bottom: 1px; }

/* Submit row */
.form-submit-row { margin-top: 52px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-submit-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 44px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: all 250ms ease; border-radius: 0; }
.form-submit-btn:hover { background: var(--gold); color: var(--cream); }
.form-submit-btn svg { fill: var(--gold); transition: fill 250ms ease; }
.form-submit-btn:hover svg { fill: var(--cream); }
.form-submit-hint { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--mid-gray); line-height: 1.7; margin: 0; }

/* Reserve textarea wrapper */
.reserve-form-note { margin-top: 40px; }

/* Sent screen */
.sent-screen { min-height: 70vh; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }
.sent-screen.visible { display: flex; }
.sent-circle { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
.sent-screen-h2 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); font-weight: 300; color: var(--black); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; }
.sent-screen-desc { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--mid-gray); line-height: 1.8; max-width: 420px; margin: 0 0 36px; }
.sent-screen-msg-card { background: var(--black); padding: 24px 28px; max-width: 360px; width: 100%; text-align: left; margin-bottom: 32px; position: relative; }
.sent-screen-msg-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.sent-screen-msg-card pre { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: rgba(253,251,248,0.8); line-height: 1.85; white-space: pre-wrap; word-break: break-word; margin: 0; }
.sent-screen-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: #0084FF; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: white; letter-spacing: 0.06em; transition: opacity 200ms ease; margin-bottom: 16px; }
.sent-screen-cta:hover { opacity: 0.88; }
.sent-screen-copied { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--gold); margin: 0 0 16px; display: none; }
.sent-screen-copied.visible { display: block; }
.sent-screen-reset { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--mid-gray); letter-spacing: 0.08em; margin-top: 8px; text-decoration: underline; text-underline-offset: 3px; }

/* Bottom bar (phone + Messenger + hours) */
.reserve-bottom-bar { background: var(--black); padding: 64px 0; }
.reserve-bottom-bar-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.reserve-bottom-bar-row { display: flex; align-items: center; gap: 32px; }
@media (max-width: 768px) {
  .reserve-bottom-bar-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .reserve-bottom-bar-divider { display: none !important; }
}
.reserve-bottom-bar-phone { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.reserve-bottom-bar-phone-icon { width: 44px; height: 44px; border: 1px solid rgba(184,147,90,0.35); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reserve-bottom-bar-phone-num { font-family: var(--font-display); font-size: 24px; font-weight: 300; color: var(--cream); letter-spacing: 0.04em; line-height: 1.1; }
.reserve-bottom-bar-phone-hint { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: rgba(253,251,248,0.35); margin-top: 4px; letter-spacing: 0.06em; }
.reserve-bottom-bar-divider { width: 1px; height: 48px; background: rgba(253,251,248,0.08); flex-shrink: 0; }
.reserve-bottom-bar-msgr { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; flex-shrink: 0; text-decoration: none; }
.reserve-bottom-bar-msgr-icon { width: 44px; height: 44px; border-radius: 50%; background: #0084FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reserve-bottom-bar-msgr-name { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--cream); letter-spacing: 0.03em; line-height: 1.1; }
.reserve-bottom-bar-msgr-handle { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: rgba(253,251,248,0.35); margin-top: 4px; letter-spacing: 0.06em; }
.reserve-bottom-bar-spacer { flex: 1; }
.reserve-bottom-bar-hours { text-align: right; }
.reserve-bottom-bar-hours-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(184,147,90,0.55); margin-bottom: 8px; }
.reserve-bottom-bar-hours-text { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: rgba(253,251,248,0.5); line-height: 1.8; }
@media (max-width: 768px) {
  .reserve-bottom-bar-hours { text-align: left; }
}

/* Reserve footer */
.reserve-footer { background: var(--black); border-top: 1px solid rgba(253,251,248,0.05); padding: 28px 0; }
.reserve-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.reserve-footer-copyright { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: rgba(253,251,248,0.15); letter-spacing: 0.05em; }
.reserve-footer-links { display: flex; gap: 24px; }
.reserve-footer-links a { font-family: var(--font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; color: rgba(253,251,248,0.25); text-decoration: none; }

/* ============================================================
   MENU PAGE — additional styles for the real menu content
   ============================================================ */

/* Indicator dots & legend (red = popular, green = vegetarian) */
.menu-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-left: 6px; flex-shrink: 0; }
.menu-dot--popular { background: #c64a3a; box-shadow: 0 0 0 1px rgba(198,74,58,0.18); }
.menu-dot--veg { background: #6f8a4a; box-shadow: 0 0 0 1px rgba(111,138,74,0.18); }
.menu-legend { display: flex; gap: 24px; flex-wrap: wrap; margin: -32px 0 40px; padding-bottom: 4px; }
.menu-legend-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; color: var(--mid-gray); }
.menu-legend-item .menu-dot { margin-left: 0; }
.menu-section.inverted .menu-legend-item { color: rgba(253,251,248,0.5); }

/* Title-line dot — make sure it sits inline */
.menu-row-titleline .menu-dot { margin-left: 4px; }
.menu-card-zh .menu-dot { width: 9px; height: 9px; }

/* Subsection heads (Bruschetta / Insalata / Pasta etc.) */
.menu-subsection { margin-bottom: 60px; }
.menu-subsection:last-child { margin-bottom: 0; }
.menu-subsection-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(10,10,10,0.07); }
.menu-section.inverted .menu-subsection-head { border-bottom-color: rgba(253,251,248,0.06); }
.menu-subsection-zh { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--black); margin: 0; letter-spacing: -0.005em; }
.menu-section.inverted .menu-subsection-zh { color: var(--cream); }
.menu-subsection-en { font-family: var(--font-display); font-size: 13px; font-style: italic; font-weight: 300; color: var(--gold); letter-spacing: 0.04em; }
.menu-subsection-note { font-family: var(--font-body); font-size: 12px; color: rgba(10,10,10,0.45); line-height: 1.7; margin: 18px 0 0; padding-left: 0; font-style: italic; }
.menu-section.inverted .menu-subsection-note { color: rgba(253,251,248,0.35); }

/* Extra meta on a row title (e.g. ABV, ml) */
.menu-row-meta { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); padding: 2px 8px; border: 1px solid rgba(184,147,90,0.35); border-radius: 999px; }
.menu-section.inverted .menu-row-meta { color: rgba(184,147,90,0.85); border-color: rgba(184,147,90,0.4); }

/* Portion label (e.g. 6 pcs / 12 pcs, M / XL, gls / btl) */
.menu-row-portion { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(10,10,10,0.4); margin-top: 4px; }
.menu-section.inverted .menu-row-portion { color: rgba(253,251,248,0.35); }

/* Special box — ★ 香蒜乳酪 / Pizza all'Aglio e Formaggio */
.menu-special-box { margin: 60px 0; padding: 36px 40px; background: linear-gradient(135deg, rgba(184,147,90,0.08), rgba(184,147,90,0.02)); border: 1px solid rgba(184,147,90,0.35); position: relative; }
.menu-section.inverted .menu-special-box { background: linear-gradient(135deg, rgba(184,147,90,0.13), rgba(184,147,90,0.04)); border-color: rgba(184,147,90,0.45); }
.menu-special-box-stars { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 13px; color: var(--gold); letter-spacing: 0.4em; }
.menu-special-box-titlerow { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.menu-special-box-zh { font-family: var(--font-display); font-size: 30px; font-weight: 300; color: var(--black); margin: 0; letter-spacing: -0.01em; }
.menu-section.inverted .menu-special-box-zh { color: var(--cream); }
.menu-special-box-price { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--gold); font-variant-numeric: tabular-nums; }
.menu-special-box-en { font-family: var(--font-display); font-size: 14px; font-style: italic; color: var(--gold); margin: 6px 0 18px; letter-spacing: 0.02em; }
.menu-special-box-desc { font-family: var(--font-body); font-size: 13px; color: var(--mid-gray); line-height: 1.8; margin: 0; }
.menu-section.inverted .menu-special-box-desc { color: rgba(253,251,248,0.55); }

/* Extra toppings tier list */
.menu-toppings { margin-top: 56px; padding-top: 44px; border-top: 1px solid rgba(10,10,10,0.07); }
.menu-section.inverted .menu-toppings { border-top-color: rgba(253,251,248,0.07); }
.menu-toppings-head { margin-bottom: 28px; display: flex; align-items: baseline; gap: 14px; }
.menu-toppings-title { font-family: var(--font-display); font-size: 26px; font-weight: 300; color: var(--black); margin: 0; letter-spacing: -0.01em; }
.menu-section.inverted .menu-toppings-title { color: var(--cream); }
.menu-toppings-en { font-family: var(--font-display); font-size: 13px; font-style: italic; font-weight: 300; color: var(--gold); margin: 0; letter-spacing: 0.04em; }
.menu-toppings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.menu-toppings-tier { padding: 20px 22px; background: rgba(184,147,90,0.04); border-left: 2px solid var(--gold); }
.menu-section.inverted .menu-toppings-tier { background: rgba(184,147,90,0.08); }
.menu-toppings-tier-price { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--gold); margin-bottom: 10px; letter-spacing: 0.02em; }
.menu-toppings-tier-zh { font-family: var(--font-body); font-size: 13px; color: var(--black); line-height: 1.7; margin: 0 0 6px; }
.menu-section.inverted .menu-toppings-tier-zh { color: rgba(253,251,248,0.85); }
.menu-toppings-tier-en { font-family: var(--font-display); font-size: 12px; font-style: italic; color: var(--mid-gray); line-height: 1.6; margin: 0; }
.menu-section.inverted .menu-toppings-tier-en { color: rgba(253,251,248,0.42); }

/* Wine cards */
.wine-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 32px; }
.wine-card { background: rgba(184,147,90,0.04); border: 1px solid rgba(10,10,10,0.08); padding: 32px 30px; transition: transform 250ms ease, border-color 250ms ease; display: flex; }
.wine-card:hover { transform: translateY(-2px); border-color: rgba(184,147,90,0.4); }
.menu-section.inverted .wine-card { background: rgba(184,147,90,0.06); border-color: rgba(253,251,248,0.08); }
.wine-card-body { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.wine-card-head { padding-bottom: 16px; border-bottom: 1px solid rgba(10,10,10,0.08); }
.menu-section.inverted .wine-card-head { border-bottom-color: rgba(253,251,248,0.08); }
.wine-card-eyebrow { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.wine-card-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--black); margin: 0; line-height: 1.25; letter-spacing: -0.005em; }
.menu-section.inverted .wine-card-name { color: var(--cream); }
.wine-card-region { font-family: var(--font-display); font-size: 12px; font-style: italic; color: var(--mid-gray); margin: 6px 0 0; letter-spacing: 0.02em; }
.menu-section.inverted .wine-card-region { color: rgba(253,251,248,0.55); }
.wine-card-price { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--gold); margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.wine-card-price span { font-size: 11px; font-style: italic; font-weight: 300; color: var(--mid-gray); margin-left: 6px; letter-spacing: 0.04em; }
.menu-section.inverted .wine-card-price span { color: rgba(253,251,248,0.42); }
.wine-card-section-label { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; opacity: 0.8; }
.wine-card .wine-card-zh { font-family: var(--font-body); font-size: 13px; color: var(--black); line-height: 1.65; margin: 0; }
.menu-section.inverted .wine-card .wine-card-zh { color: rgba(253,251,248,0.85); }
.wine-card .wine-card-en { font-family: var(--font-display); font-size: 12px; font-style: italic; color: var(--mid-gray); line-height: 1.6; margin: 4px 0 0; }
.menu-section.inverted .wine-card .wine-card-en { color: rgba(253,251,248,0.45); }
.wine-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px dashed rgba(10,10,10,0.1); }
.menu-section.inverted .wine-card-meta { border-top-color: rgba(253,251,248,0.1); }
.wine-card-meta div { display: flex; flex-direction: column; gap: 1px; }
.wine-card-meta dt { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid-gray); margin: 0; }
.menu-section.inverted .wine-card-meta dt { color: rgba(253,251,248,0.45); }
.wine-card-meta dd { font-family: var(--font-display); font-size: 13px; font-weight: 400; color: var(--black); margin: 0; letter-spacing: 0.01em; }
.menu-section.inverted .wine-card-meta dd { color: rgba(253,251,248,0.85); }
.wine-card-award { font-family: var(--font-body); font-size: 11px; font-style: italic; color: var(--gold); margin: 0; line-height: 1.6; opacity: 0.85; }

/* Wine notes (corkage etc.) */
.wine-notes { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(10,10,10,0.07); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.menu-section.inverted .wine-notes { border-top-color: rgba(253,251,248,0.07); }
.wine-notes-line { font-family: var(--font-body); font-size: 12px; color: var(--mid-gray); line-height: 1.7; margin: 0; max-width: 540px; }
.wine-notes-corkage { font-family: var(--font-body); font-size: 12px; color: var(--gold); margin: 0; letter-spacing: 0.02em; }

/* Footer fineprint */
.menu-footer-fineprint { padding: 24px 0 0; margin-top: 28px; border-top: 1px solid rgba(253,251,248,0.05); }
.menu-footer-fineprint p { font-family: var(--font-body); font-size: 11px; color: rgba(253,251,248,0.3); line-height: 1.7; margin: 0; text-align: center; letter-spacing: 0.02em; }

/* TODO_UNCLEAR marker — visible in DOM but subtle on screen */
.todo-unclear { font-family: var(--font-body); font-size: 10px; color: rgba(198,74,58,0.55); font-style: italic; display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px dashed rgba(198,74,58,0.3); border-radius: 3px; }
.menu-section.inverted .todo-unclear { color: rgba(238,148,138,0.6); border-color: rgba(238,148,138,0.35); }

/* Responsive — menu page tweaks */
@media (max-width: 1024px) {
  .menu-card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .menu-card-grid.cols-2 { grid-template-columns: 1fr; }
  .photo-wall-grid.cols-6 { grid-template-columns: repeat(4, 1fr); }
  .photo-wall-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .wine-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .menu-container { padding: 0 24px; }
  .menu-section-inner { padding: 64px 0 36px; }
  .menu-section-head { flex-direction: column; align-items: flex-start; padding-bottom: 28px; margin-bottom: 36px; }
  .menu-section-note { text-align: left; max-width: none; }
  .menu-card-grid.cols-3, .menu-card-grid.cols-2 { grid-template-columns: 1fr; }
  .photo-wall-grid.cols-6, .photo-wall-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .menu-row { flex-direction: column; gap: 8px; }
  .menu-row-price { text-align: left; }
  .menu-row-titleline { gap: 8px; }
  .menu-row-zh { font-size: 17px; }
  .menu-row-en { font-size: 12px; }
  .menu-special-box { padding: 28px 22px; }
  .menu-special-box-zh { font-size: 24px; }
  .menu-toppings-grid { grid-template-columns: 1fr; gap: 16px; }
  .menu-toppings-tier { padding: 16px 18px; }
  .wine-card { padding: 24px 22px; }
  .wine-card-name { font-size: 19px; }
  .wine-card-meta { grid-template-columns: 1fr; gap: 6px 0; }
  .wine-notes { flex-direction: column; align-items: flex-start; }
  .cat-nav-inner { padding: 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .cat-nav-inner::-webkit-scrollbar { display: none; }
  .cat-nav-item { padding: 14px 14px; flex-shrink: 0; }
  .cat-nav-item-zh { font-size: 12px; }
  .cat-nav-item-en { font-size: 9px; }
  .menu-legend { margin: -16px 0 24px; gap: 16px; }
}

/* ============================================================
   MENU PAGE v2 — compact editorial layout
   ============================================================ */

/* Compact hero (replaces full-screen menu-page-hero) */
.menu-hero-compact { background: var(--black); padding: 120px 0 56px; border-bottom: 1px solid rgba(253,251,248,0.06); position: relative; overflow: hidden; }
.menu-hero-compact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 30%, rgba(184,147,90,0.08), transparent 60%); pointer-events: none; }
.menu-hero-compact-inner { position: relative; z-index: 1; text-align: center; }
.menu-hero-compact-label { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.menu-hero-compact-h1 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 84px); font-weight: 300; line-height: 1.0; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 28px; }
.menu-hero-compact-note { font-family: var(--font-body); font-size: 13px; color: rgba(253,251,248,0.55); line-height: 1.8; margin: 0; letter-spacing: 0.02em; }
.menu-hero-compact-note .en { color: rgba(253,251,248,0.42); font-style: italic; font-size: 12px; }
@media (max-width: 768px) { .menu-hero-compact { padding: 96px 0 40px; } }

/* Featured strip (compact horizontal — single instance) */
.featured-strip { background: var(--cream); padding: 36px 0 8px; border-bottom: 1px solid rgba(10,10,10,0.06); }
.featured-strip-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.featured-strip-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.featured-strip-hint { font-family: var(--font-display); font-size: 11px; font-style: italic; color: var(--mid-gray); letter-spacing: 0.02em; }
.featured-strip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.featured-strip-item { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 250ms ease; }
.featured-strip-item:hover { transform: translateY(-3px); }
.featured-strip-img { aspect-ratio: 1; background-size: cover; background-position: center; background-color: #1a1a1a; }
.featured-strip-img--wine { display: flex; align-items: center; justify-content: center; color: rgba(184,147,90,0.6); background: linear-gradient(135deg, #1c1410, #2c1a14); }
.featured-strip-info { padding: 12px 0 4px; }
.featured-strip-zh { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--black); line-height: 1.25; }
.featured-strip-en { font-family: var(--font-display); font-size: 11px; font-style: italic; color: var(--mid-gray); margin-top: 2px; }
.featured-strip-price { font-family: var(--font-display); font-size: 13px; font-weight: 400; color: var(--gold); margin-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) { .featured-strip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .featured-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .featured-strip-zh { font-size: 13px; }
  .featured-strip { padding: 28px 0 8px; }
}

/* Compact section (replaces .menu-section) */
.menu-section-c { background: var(--cream); padding: 64px 0 56px; }
.menu-section-c.inverted { background: var(--black); }
.menu-section-c-head { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid rgba(10,10,10,0.08); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.menu-section-c.inverted .menu-section-c-head { border-bottom-color: rgba(253,251,248,0.07); }
.menu-section-c-label { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.menu-section-c-title { font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 54px); font-weight: 300; line-height: 1.0; letter-spacing: -0.02em; color: var(--black); margin: 0; }
.menu-section-c.inverted .menu-section-c-title { color: var(--cream); }
.menu-section-c-note { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--mid-gray); line-height: 1.7; max-width: 360px; text-align: right; margin: 0; }
.menu-section-c-note .en { font-style: italic; opacity: 0.75; font-size: 11px; }
.menu-section-c.inverted .menu-section-c-note { color: rgba(253,251,248,0.4); }
@media (max-width: 768px) {
  .menu-section-c { padding: 48px 0 36px; }
  .menu-section-c-head { flex-direction: column; align-items: flex-start; padding-bottom: 18px; margin-bottom: 24px; }
  .menu-section-c-note { text-align: left; max-width: none; }
}

/* Subsection h3 (Bruschetta / Insalata / etc.) */
.menu-sub-h3 { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--black); margin: 36px 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(10,10,10,0.07); display: flex; align-items: baseline; gap: 12px; letter-spacing: -0.005em; }
.menu-section-c.inverted .menu-sub-h3 { color: var(--cream); border-bottom-color: rgba(253,251,248,0.07); }
.menu-sub-h3 span { font-family: var(--font-display); font-size: 12px; font-style: italic; font-weight: 300; color: var(--gold); letter-spacing: 0.04em; }
.menu-sub-h3:first-of-type { margin-top: 0; }
.menu-sub-h3-inline { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--black); margin: 0; letter-spacing: -0.005em; display: flex; align-items: baseline; gap: 12px; }
.menu-section-c.inverted .menu-sub-h3-inline { color: var(--cream); }
.menu-sub-h3-inline span { font-family: var(--font-display); font-size: 12px; font-style: italic; font-weight: 300; color: var(--gold); letter-spacing: 0.04em; }
.menu-sub-note { font-family: var(--font-body); font-size: 11.5px; color: rgba(10,10,10,0.5); line-height: 1.7; margin: 18px 0 8px; font-style: italic; max-width: 720px; }
.menu-section-c.inverted .menu-sub-note { color: rgba(253,251,248,0.4); }
.menu-sub-note .en { opacity: 0.85; }

/* Compact 2-column menu grid */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-bottom: 28px; }
@media (max-width: 768px) { .menu-grid { grid-template-columns: 1fr; gap: 0; } }

/* Single compact row (.m-row) */
.m-row { padding: 14px 0; border-bottom: 1px dotted rgba(10,10,10,0.16); }
.menu-section-c.inverted .m-row { border-bottom-color: rgba(253,251,248,0.13); }
.m-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.m-row-name { flex: 1; min-width: 0; }
.m-row-zh { font-family: var(--font-display); font-size: 16.5px; font-weight: 400; color: var(--black); margin: 0; line-height: 1.3; letter-spacing: -0.005em; display: inline; }
.menu-section-c.inverted .m-row-zh { color: var(--cream); }
.m-row-en { font-family: var(--font-display); font-size: 12.5px; font-style: italic; font-weight: 300; color: var(--mid-gray); margin: 2px 0 0; line-height: 1.3; }
.menu-section-c.inverted .m-row-en { color: rgba(253,251,248,0.45); }
.m-row-price { font-family: var(--font-display); font-size: 15px; font-weight: 400; color: var(--gold); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; line-height: 1.3; }
.m-row-portion { display: block; font-family: var(--font-body); font-size: 9.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid-gray); margin-top: 2px; opacity: 0.75; }
.menu-section-c.inverted .m-row-portion { color: rgba(253,251,248,0.4); }
.m-row-zh-desc { font-family: var(--font-body); font-size: 12.5px; color: var(--mid-gray); line-height: 1.6; margin: 6px 0 0; }
.menu-section-c.inverted .m-row-zh-desc { color: rgba(253,251,248,0.55); }
.m-row-en-desc { font-family: var(--font-display); font-size: 11.5px; font-style: italic; color: var(--mid-gray); line-height: 1.5; margin: 1px 0 0; opacity: 0.75; }
.menu-section-c.inverted .m-row-en-desc { color: rgba(253,251,248,0.4); }
.m-row-meta { font-family: var(--font-body); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-left: 8px; padding: 1px 6px; border: 1px solid rgba(184,147,90,0.4); border-radius: 999px; }

/* Coffee block (special grouped pricing) */
.menu-coffee-block { margin-top: 36px; padding: 24px 28px; background: rgba(184,147,90,0.05); border-left: 2px solid var(--gold); }
.menu-coffee-block-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(10,10,10,0.07); }
.menu-coffee-note { font-family: var(--font-body); font-size: 11px; color: var(--gold); margin: 0; line-height: 1.5; text-align: right; }
.menu-coffee-note .en { font-style: italic; opacity: 0.75; }
.menu-coffee-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.menu-coffee-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-family: var(--font-body); font-size: 13px; color: var(--black); border-bottom: 1px dotted rgba(10,10,10,0.12); }
.menu-coffee-list li span:last-child { font-family: var(--font-display); color: var(--gold); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .menu-coffee-list { grid-template-columns: 1fr; gap: 4px 0; }
  .menu-coffee-block { padding: 18px 18px; }
  .menu-coffee-note { text-align: left; }
}

/* Wine cards (compact + collapsible details) */
.wine-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.wine-card-c { background: rgba(184,147,90,0.04); border: 1px solid rgba(10,10,10,0.08); padding: 22px 24px; transition: border-color 250ms ease; }
.wine-card-c:hover { border-color: rgba(184,147,90,0.4); }
.wine-card-c-head { padding-bottom: 14px; border-bottom: 1px solid rgba(10,10,10,0.08); margin-bottom: 4px; }
.wine-card-c-eyebrow { font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.wine-card-c-name { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--black); margin: 0; line-height: 1.3; letter-spacing: -0.005em; }
.wine-card-c-meta { font-family: var(--font-body); font-size: 11px; color: var(--mid-gray); margin: 6px 0 0; line-height: 1.5; letter-spacing: 0.01em; }
.wine-card-c-price { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--gold); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.wine-card-c-price span { font-size: 11px; font-style: italic; font-weight: 300; color: var(--mid-gray); margin-left: 4px; }

/* Wine details (collapsible) */
.wine-card-c-details { margin-top: 12px; }
.wine-card-c-details > summary { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); cursor: pointer; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; }
.wine-card-c-details > summary::-webkit-details-marker { display: none; }
.wine-card-c-details > summary::after { content: "+"; margin-left: auto; font-family: var(--font-display); font-size: 18px; font-weight: 300; color: var(--gold); transition: transform 200ms ease; line-height: 1; }
.wine-card-c-details[open] > summary::after { content: "−"; }
.wine-card-c-detail-body { padding: 12px 0 4px; border-top: 1px dashed rgba(10,10,10,0.12); margin-top: 4px; }
.wine-card-c-detail-body .zh { font-family: var(--font-body); font-size: 12.5px; color: var(--black); line-height: 1.7; margin: 0 0 6px; }
.wine-card-c-detail-body .en { font-family: var(--font-display); font-size: 11.5px; font-style: italic; color: var(--mid-gray); line-height: 1.6; margin: 0 0 12px; }
.wine-card-c-detail-body .en:last-child { margin-bottom: 0; }
.wine-card-c-detail-body strong { color: var(--gold); font-weight: 500; }

@media (max-width: 1024px) {
  .wine-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .wine-card-c { padding: 18px 18px; }
  .wine-card-c-name { font-size: 16px; }
  .wine-card-c-price { font-size: 16px; }
}

/* Inverted-section overrides for shared elements (so dark sections look right) */
.menu-section-c.inverted .menu-legend-item { color: rgba(253,251,248,0.5); }
.menu-section-c.inverted .todo-unclear { color: rgba(238,148,138,0.7); border-color: rgba(238,148,138,0.35); }

/* NEW tag badge — small text pill in wine-red */
.menu-tag-new { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px 0; font-family: var(--font-body); font-size: 8.5px; font-weight: 600; letter-spacing: 0.16em; color: #fdfbf8; background: #8e2d2d; border-radius: 999px; line-height: 1.6; text-transform: uppercase; }
.menu-section-c.inverted .menu-tag-new { background: #b03c3c; color: #fdfbf8; }

/* Wine card — Chinese sub-name (printed-menu name in Chinese) */
.wine-card-c-name-zh { font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--mid-gray); margin: 4px 0 0; line-height: 1.45; letter-spacing: 0.02em; }
.menu-section-c.inverted .wine-card-c-name-zh { color: rgba(253,251,248,0.6); }

/* Wine notes fineprint */
.wine-notes-fineprint { font-family: var(--font-body); font-size: 10.5px; color: rgba(10,10,10,0.4); margin: 0; font-style: italic; letter-spacing: 0.02em; }
.menu-section-c.inverted .wine-notes-fineprint { color: rgba(253,251,248,0.35); }

/* ============================================================
   STAGE 1 ENHANCEMENTS — site-wide additions
   (改造 1: marquee | 改造 2: hero anim | 改造 3: arch motif | 改造 4: number poster)
   ============================================================ */

/* Shared editorial italic font token (also defined inline in index.html / menu.html) */
:root { --serif-editorial: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif; }

/* ── 改造 1: Italian vocabulary marquee (字帶) ── */
.marquee {
  background: #000;
  height: 48px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  position: relative;
}
.marquee-track {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}
.marquee-content {
  font-family: var(--serif-editorial);
  font-style: italic;
  font-weight: 600;
  color: var(--yellow);
  font-size: 18px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
@media (min-width: 861px) {
  .marquee { height: 64px; }
  .marquee-content { font-size: 24px; }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
}

/* ── 改造 3A: Arch divider (拱形分隔線) ── */
.arch-divider {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 32px;
  padding: 0 40px;
}
.arch-divider .arch-line {
  flex: 1;
  height: 1px;
  background: currentColor;
}
.arch-divider .arch-bump {
  flex-shrink: 0;
  display: block;
}
.arch-divider.arch-on-dark {
  background: var(--black);
  color: rgba(255,255,255,0.4);
}
.arch-divider.arch-on-light {
  background: var(--white);
  color: rgba(0,0,0,0.3);
}
@media (max-width: 860px) {
  .arch-divider { padding: 0 24px; }
}

/* ── 改造 3B: Dish-card hover arch frame ── */
.dish-card { position: relative; }
.dish-card::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 80px;
  height: 32px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='32' viewBox='0 0 80 32' fill='none'><path d='M0 31 A 40 31 0 0 1 80 31' stroke='%23F0C030' stroke-width='1' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
@media (hover: hover) {
  .dish-card:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dish-card::before { transition: opacity 0.3s ease-out; }
}

/* ── 改造 4: Number poster (350°C / forno a legna) ── */
.number-poster {
  background: #0A0A0A;
  padding: 80px 0;
  text-align: center;
  color: var(--white);
}
.number-poster .np-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.number-poster .np-temp {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
}
.number-poster .np-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 96px;
  color: var(--white);
  line-height: 0.9;
  display: block;
  letter-spacing: 0.02em;
}
.number-poster .np-unit {
  font-family: var(--display);
  font-weight: 600;
  font-size: 96px;
  color: var(--yellow);
  line-height: 0.9;
  display: block;
  letter-spacing: 0.02em;
}
.number-poster .np-divider {
  width: 80px;
  height: 1px;
  background: rgba(255,255,255,0.6);
  margin: 24px 0;
  border: 0;
}
.number-poster .np-italic {
  font-family: var(--serif-editorial);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  margin: 0;
  letter-spacing: 0.01em;
}
.number-poster .np-zh {
  font-family: var(--serif-zh);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.18em;
  margin: 8px 0 0;
}
@media (min-width: 861px) {
  .number-poster { padding: 120px 0; }
  .number-poster .np-num,
  .number-poster .np-unit { font-size: 200px; }
  .number-poster .np-italic { font-size: 24px; }
  .number-poster .np-zh { font-size: 16px; }
}
.number-poster .np-num.fu { transform: scale(0.85); }
.number-poster .np-num.fu.vis { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .number-poster .np-num.fu { transform: none; }
  .number-poster .np-num.fu.vis { transform: none; }
}

/* Hide old menu-section h-screen hero on this page (kept in CSS for compat) */