/* ==========================================================================
   La Grande Muraglia — design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Noto+Serif+SC:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* --- palette (light) --- */
  --ink:            #1c1310;
  --ink-soft:       #4a3b34;
  --paper:          #faf5ea;
  --paper-deep:     #f1e8d6;
  --lacquer:        #7c1f1f;
  --lacquer-deep:   #5c1414;
  --lacquer-bright: #a3282c;
  --gold:           #b9903f;
  --gold-bright:    #d6b568;
  --gold-line:      rgba(185,144,63,.45);
  --jade:           #3c5f4e;
  --surface:        #ffffff;
  --surface-veil:   rgba(255,255,255,.72);
  --shadow-soft:    0 10px 30px rgba(28,19,16,.08);
  --shadow-deep:    0 20px 60px rgba(28,19,16,.18);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --container: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:            #f3ece2;
    --ink-soft:       #cdbfae;
    --paper:          #14100d;
    --paper-deep:     #1c1611;
    --surface:        #201a15;
    --surface-veil:   rgba(28,22,17,.72);
    --lacquer:        #a3282c;
    --lacquer-deep:   #7c1f1f;
    --lacquer-bright: #c94d43;
    --gold:           #d6b568;
    --gold-bright:    #eccf8e;
    --gold-line:      rgba(214,181,104,.35);
    --shadow-soft:    0 10px 30px rgba(0,0,0,.35);
    --shadow-deep:    0 25px 70px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:            #f3ece2;
  --ink-soft:       #cdbfae;
  --paper:          #14100d;
  --paper-deep:     #1c1611;
  --surface:        #201a15;
  --surface-veil:   rgba(28,22,17,.72);
  --lacquer:        #a3282c;
  --lacquer-deep:   #7c1f1f;
  --lacquer-bright: #c94d43;
  --gold:           #d6b568;
  --gold-bright:    #eccf8e;
  --gold-line:      rgba(214,181,104,.35);
  --shadow-soft:    0 10px 30px rgba(0,0,0,.35);
  --shadow-deep:    0 25px 70px rgba(0,0,0,.55);
  color-scheme: dark;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:'Playfair Display', serif; margin:0; font-weight:600; }
.zh{ font-family:'Noto Serif SC', serif; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* --- reveal-on-scroll --- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:var(--surface-veil);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--gold-line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--container); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; letter-spacing:.01em; }
.brand .zh{ color:var(--lacquer); font-size:1.3rem; line-height:1; }
.brand small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.nav-links{ display:flex; gap:6px; align-items:center; }
.nav-links a{
  padding:9px 16px; border-radius:999px; font-size:.88rem; font-weight:500; color:var(--ink-soft);
  transition:background .25s ease, color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ background:rgba(124,31,31,.09); color:var(--lacquer); }
.nav-cta{
  background:var(--lacquer); color:#fff !important; padding:9px 18px !important; border-radius:999px;
  box-shadow:0 6px 16px rgba(124,31,31,.28);
}
.nav-cta:hover{ background:var(--lacquer-bright); color:#fff !important; }
.nav-toggle{ display:none; position:relative; z-index:210; background:none; border:0; width:40px; height:40px; padding:0; cursor:pointer; }
.nav-toggle .bar{
  position:absolute; left:9px; right:9px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, background .2s ease;
}
.nav-toggle .bar:nth-child(1){ top:14px; }
.nav-toggle .bar:nth-child(2){ top:20px; }
.nav-toggle .bar:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] .bar{ background:#fff; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width:860px){
  body.nav-open{ overflow:hidden; }

  .nav-links{
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:200;
    width:100%; height:100vh; height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:24px; margin:0; padding:80px 28px 32px;
    background:#181310;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
  }
  .nav-links.open{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .nav-links li{ display:flex; justify-content:center; width:100%; }
  .nav-links a{
    position:relative; z-index:1; display:inline-block;
    font-family:'Inter', sans-serif; font-size:1.05rem; font-weight:600;
    padding:8px 4px; text-align:center; color:#f3e8d8;
  }
  .nav-links a.active{ color:var(--gold-bright); }
  .nav-links a.active::after{
    content:''; display:block; width:26px; height:2px; margin:6px auto 0; background:var(--gold-bright);
  }
  .nav-links .nav-cta{
    margin-top:6px; padding:15px 34px !important; font-size:1rem;
    background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#2a1c0d !important;
    border-radius:999px; box-shadow:0 12px 26px rgba(0,0,0,.35);
  }
  .nav-toggle{ display:block; }
}

@media (max-width:860px) and (max-height:640px){
  .nav-links{ gap:16px; padding:64px 28px 20px; }
  .nav-links .nav-cta{ padding:12px 28px !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.94rem;
  border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--lacquer); color:#fff; box-shadow:0 10px 24px rgba(124,31,31,.32); }
.btn-primary:hover{ background:var(--lacquer-bright); box-shadow:0 14px 30px rgba(124,31,31,.4); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#2a1c0d; box-shadow:0 10px 24px rgba(185,144,63,.3); }
.btn-gold:hover{ filter:brightness(1.06); }
.btn-outline{ background:transparent; border-color:var(--gold-line); color:var(--ink); }
.btn-outline:hover{ background:rgba(185,144,63,.1); border-color:var(--gold); }
.btn-ghost-light{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(8px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.22); }
.btn-lg{ padding:16px 32px; font-size:1rem; }
.btn svg{ width:18px; height:18px; }

/* ==========================================================================
   Ornaments (SVG-based Chinese motifs, no images required)
   ========================================================================== */
/* single, large "auspicious cloud" (祥云) emblem — a real motif, placed once so it reads
   as a deliberate flourish instead of a tiled, illegible texture */
.cloud-emblem{
  position:absolute; width:640px; max-width:70vw; aspect-ratio:16/10; pointer-events:none;
  background-repeat:no-repeat; background-size:contain; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cpath d='M40 150c-16 0-28-12-28-28s12-28 28-28c4-20 22-34 42-34 16 0 30 8 38 22 6-4 14-6 22-6 22 0 40 18 40 40 0 2 0 4 0 6 16 2 28 16 28 32 0 18-14 32-32 32H40z M80 60c6-14 20-24 36-24 14 0 26 6 34 16 M170 70c8-8 19-13 31-13 16 0 30 9 37 22' fill='none' stroke='%23d6b568' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cloud-emblem.tr{ top:-60px; right:-80px; }
.cloud-emblem.bl{ bottom:-70px; left:-90px; transform:scaleX(-1); }

/* thin, continuous meander / key-fret border (回纹) — the classic Chinese lacquerware
   and temple-eave trim; unlike a cloud motif it stays crisp and legible at small scale */
.meander{
  height:13px; width:100%; opacity:.55; pointer-events:none;
  background-repeat:repeat-x; background-size:34px 13px; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='13' viewBox='0 0 34 13'%3E%3Cpath d='M0 12V4h6V1h5v7h6V1h5v7h6V4h6' fill='none' stroke='%23d6b568' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
}
.meander.on-dark{ opacity:.4; }
.gold-rule{ height:1px; background:linear-gradient(90deg,transparent,var(--gold-line) 20%,var(--gold-line) 80%,transparent); border:0; margin:0; }
.gold-rule-thick{ height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold-bright) 50%,var(--gold) 85%,transparent); border:0; }

.seal{
  width:56px; height:56px; border-radius:10px; background:var(--lacquer);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 6px 16px rgba(124,31,31,.35);
  transform:rotate(-2deg);
}
.seal span{ font-family:'Noto Serif SC',serif; color:var(--gold-bright); font-size:1.5rem; font-weight:700; }

.corner-frame{ position:relative; }
.corner-frame::before, .corner-frame::after,
.corner-frame .cf-tr, .corner-frame .cf-bl{
  content:''; position:absolute; width:26px; height:26px; border:2px solid var(--gold); opacity:.8;
}
.corner-frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.corner-frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.corner-frame .cf-tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.corner-frame .cf-bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 50% -10%, #932525 0%, var(--lacquer-deep) 45%, #2c0d0d 100%);
  color:#fbf1e2; padding:150px 24px 130px; text-align:center;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.3) 0, transparent 60%);
  opacity:.5;
}
.hero-frame{
  position:absolute; inset:18px; border:1px solid rgba(214,181,104,.35); border-radius:28px; pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:22px; position:relative; z-index:1;
}
.hero-eyebrow::before, .hero-eyebrow::after{ content:''; width:28px; height:1px; background:var(--gold-bright); opacity:.7; }
.hero h1{
  position:relative; z-index:1; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; letter-spacing:-.01em;
  margin-bottom:18px; text-wrap:balance;
}
.hero h1 .zh{ display:block; font-size:.5em; letter-spacing:.5em; color:var(--gold-bright); margin-bottom:14px; font-weight:500; }
.hero p.lead{
  position:relative; z-index:1; max-width:560px; margin:0 auto 40px; font-size:1.12rem; color:#f0ddc4; line-height:1.7;
}
.hero-actions{ position:relative; z-index:1; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:34px; }
.hero-status{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.22); border:1px solid rgba(214,181,104,.35); backdrop-filter:blur(10px);
  padding:10px 20px; border-radius:999px; font-size:.88rem; font-weight:500;
}
.status-dot{ width:9px; height:9px; border-radius:50%; background:#5fbf7a; box-shadow:0 0 0 4px rgba(95,191,122,.25); }
.status-dot.closed{ background:#e08b6a; box-shadow:0 0 0 4px rgba(224,139,106,.25); }
.status-dot.pulse{ animation:pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1;} 50%{ opacity:.45; } }

/* ==========================================================================
   Sections (generic)
   ========================================================================== */
section{ padding:96px 0; position:relative; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-tag{
  display:inline-flex; align-items:center; gap:10px; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lacquer); font-weight:600; margin-bottom:14px;
}
.section-tag::before,.section-tag::after{ content:''; width:22px; height:1px; background:var(--gold); }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }

.paper-section{ background:var(--paper-deep); }

/* --- story --- */
.story{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.story-copy p{ color:var(--ink-soft); margin:0 0 16px; }
.story-copy p:last-child{ margin-bottom:0; }
.story-figure{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--lacquer) 0%, var(--lacquer-deep) 60%, #2c0d0d 100%);
  box-shadow:var(--shadow-deep);
}
.story-figure .cloud-emblem{ opacity:.16; }
.story-figure .badge-years{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:var(--gold-bright);
}
.badge-years strong{ display:block; font-family:'Playfair Display',serif; font-size:3.4rem; line-height:1; }
.badge-years span{ display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin-top:8px; color:#f0ddc4; }

@media (max-width:900px){ .story{ grid-template-columns:1fr; } .story-figure{ order:-1; aspect-ratio:16/9; } }

/* --- dish highlight cards --- */
.dish-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.dish-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:34px 28px; box-shadow:var(--shadow-soft);
  border:1px solid var(--gold-line); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .dish-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-deep); }
}
.dish-card .zh-mark{ font-family:'Noto Serif SC',serif; font-size:1.6rem; color:var(--lacquer); margin-bottom:16px; display:block; }
.dish-card h3{ font-size:1.2rem; margin-bottom:8px; }
.dish-card p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 18px; }
.dish-price{ font-family:'Playfair Display',serif; font-weight:700; color:var(--gold); font-size:1.15rem; }
@media (max-width:860px){ .dish-grid{ grid-template-columns:1fr; } }

/* --- directions CTA card --- */
.visit-cta{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-deep); border:1px solid var(--gold-line);
}
.visit-cta-info{ background:var(--surface); padding:48px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.visit-cta-map{ min-height:340px; position:relative; }
.visit-cta-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.9); }
.status-row{ display:flex; align-items:center; gap:10px; font-weight:600; }
.status-row.open{ color:#2f7d4a; }
.status-row.closed{ color:var(--lacquer); }
.hours-mini{ color:var(--ink-soft); font-size:.92rem; line-height:1.8; }
.info-line{ display:flex; align-items:flex-start; gap:12px; color:var(--ink-soft); font-size:.95rem; }
.info-line svg{ width:19px; height:19px; flex-shrink:0; margin-top:2px; color:var(--lacquer); }
.info-line a{ color:var(--ink); font-weight:500; }
.info-line a:hover{ color:var(--lacquer); }
.visit-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
@media (max-width:860px){ .visit-cta{ grid-template-columns:1fr; } .visit-cta-map{ min-height:260px; order:-1; } }

/* --- reviews --- */
.reviews-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:760px){ .reviews-grid{ grid-template-columns:1fr; } }

/* --- featured review quotes --- */
.rating-strip{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:-18px auto 48px; font-size:.95rem; color:var(--ink-soft);
}
.rating-strip .stars{ font-size:1.15rem; }
.rating-strip strong{ color:var(--ink); font-family:'Playfair Display',serif; font-size:1.3rem; }

.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px; }
@media (max-width:900px){ .quote-grid{ grid-template-columns:1fr; } }
.quote-card{
  background:var(--surface); border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  padding:30px 28px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:14px; position:relative;
}
.quote-mark{ font-family:'Playfair Display',serif; font-size:2.6rem; line-height:1; color:var(--gold); opacity:.55; }
.quote-card .stars{ font-size:.95rem; }
.quote-text{ color:var(--ink); font-size:.96rem; line-height:1.65; flex:1; }
.quote-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.82rem; color:var(--ink-soft); border-top:1px dashed var(--gold-line); padding-top:12px; }
.quote-meta .source{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.quote-meta .source svg{ width:14px; height:14px; }

.reviews-subhead{ text-align:center; margin:0 0 26px; color:var(--ink-soft); font-size:.92rem; }
.review-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-soft);
  border:1px solid var(--gold-line); display:flex; flex-direction:column; gap:18px;
}
.review-brand{ display:flex; align-items:center; gap:14px; }
.review-brand .logo-badge{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--paper-deep); }
.review-brand h3{ font-size:1.05rem; }
.review-brand small{ color:var(--ink-soft); font-size:.82rem; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:1.05rem; }
.review-note{ color:var(--ink-soft); font-size:.92rem; line-height:1.7; }
.review-card .btn{ align-self:flex-start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:#181310; color:#e9ded0; padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand .zh{ color:var(--gold-bright); font-size:1.6rem; }
.footer-brand p{ color:#b7a998; font-size:.9rem; margin-top:14px; max-width:280px; }
.footer-col h4{ font-family:'Inter',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:16px; font-weight:600; }
.footer-col li{ margin-bottom:10px; font-size:.92rem; color:#cabfae; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:#9c9082; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }

/* ==========================================================================
   Menu page
   ========================================================================== */
.menu-hero{ padding:120px 24px 60px; text-align:center; background:linear-gradient(180deg,var(--paper-deep),var(--paper)); }
.menu-hero .zh{ display:block; color:var(--lacquer); font-size:1.4rem; letter-spacing:.4em; margin-bottom:14px; }
.menu-hero h1{ font-size:clamp(2.2rem,5vw,3.2rem); margin-bottom:16px; }
.menu-hero p{ color:var(--ink-soft); max-width:520px; margin:0 auto; }

.menu-filters{
  position:sticky; top:64px; z-index:60; background:var(--surface-veil); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gold-line); padding:16px 0;
}
.filters-scroll{ display:flex; gap:8px; overflow-x:auto; padding:0 24px; max-width:var(--container); margin:0 auto; scrollbar-width:none; }
.filters-scroll::-webkit-scrollbar{ display:none; }
.filter-chip{
  flex-shrink:0; padding:9px 18px; border-radius:999px; border:1px solid var(--gold-line); background:var(--surface);
  font-size:.85rem; font-weight:500; cursor:pointer; color:var(--ink-soft);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .filter-chip:hover{ border-color:var(--gold); color:var(--ink); }
}
.filter-chip:active{ transform:scale(.96); }
.filter-chip.active{ background:var(--lacquer); border-color:var(--lacquer); color:#fff; }

.menu-body{ padding:70px 0 100px; }
.menu-category{ margin-bottom:56px; scroll-margin-top:150px; }
.menu-divider{ max-width:260px; margin:0 auto 56px; opacity:.7; }
.menu-category-head{ display:flex; align-items:center; gap:20px; margin-bottom:34px; }
.menu-category-head h2{ font-size:1.7rem; }
.menu-category-head .cat-zh{ font-family:'Noto Serif SC',serif; font-size:1rem; color:var(--ink-soft); }
.menu-category-head .gold-rule{ flex:1; }

.dish-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 48px; }
.dish-row{
  display:flex; align-items:baseline; gap:10px; padding:14px 0; border-bottom:1px dashed rgba(124,31,31,.18);
}
.dish-row .name{ font-weight:500; color:var(--ink); }
.dish-row .name small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.8rem; margin-top:2px; }
.dish-row .fill{ flex:1; border-bottom:1px dotted var(--gold-line); transform:translateY(-4px); min-width:12px; }
.dish-row .price{ font-family:'Playfair Display',serif; font-weight:700; color:var(--gold); white-space:nowrap; }
@media (max-width:760px){ .dish-list{ grid-template-columns:1fr; } }

.menu-note{
  margin-top:50px; display:flex; gap:16px; align-items:center; background:var(--paper-deep); border:1px solid var(--gold-line);
  border-radius:var(--radius-md); padding:20px 26px; color:var(--ink-soft); font-size:.92rem;
}
.menu-note svg{ width:24px; height:24px; color:var(--lacquer); flex-shrink:0; }

/* ==========================================================================
   Visit page
   ========================================================================== */
.page-hero{ padding:130px 24px 70px; text-align:center; background:linear-gradient(180deg,var(--paper-deep),var(--paper)); }
.page-hero .zh{ display:block; color:var(--lacquer); font-size:1.3rem; letter-spacing:.4em; margin-bottom:14px; }
.page-hero h1{ font-size:clamp(2.1rem,4.6vw,3rem); margin-bottom:14px; }
.page-hero p{ color:var(--ink-soft); max-width:520px; margin:0 auto; }

.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:11px 0; border-bottom:1px solid var(--gold-line); font-size:.95rem; }
.hours-table td:first-child{ color:var(--ink-soft); }
.hours-table td:last-child{ text-align:right; font-weight:500; }
.hours-table tr.today td{ color:var(--lacquer); font-weight:700; }
.map-embed{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-deep); border:1px solid var(--gold-line); aspect-ratio:4/3; }
.map-embed iframe{ width:100%; height:100%; border:0; }
.card-panel{ background:var(--surface); border:1px solid var(--gold-line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-soft); }
.big-directions{
  display:flex; align-items:center; gap:20px; background:linear-gradient(120deg,var(--lacquer),var(--lacquer-deep));
  color:#fff; border-radius:var(--radius-lg); padding:30px 34px; box-shadow:var(--shadow-deep); margin-bottom:36px;
}
.big-directions .icon-wrap{ width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.big-directions .icon-wrap svg{ width:28px; height:28px; }
.big-directions h3{ color:#fff; font-size:1.25rem; margin-bottom:4px; }
.big-directions p{ color:rgba(255,255,255,.8); font-size:.9rem; margin:0; }
.big-directions .btn{ margin-left:auto; flex-shrink:0; }
@media (max-width:760px){ .big-directions{ flex-wrap:wrap; } .big-directions .btn{ margin-left:0; width:100%; } .visit-grid{ grid-template-columns:1fr; } }

@media (max-width:640px){
  section{ padding:56px 0; }

  /* --- hero --- */
  .hero{ padding:110px 20px 72px; }
  .hero-eyebrow{ font-size:.66rem; letter-spacing:.16em; margin-bottom:16px; }
  .hero-eyebrow::before, .hero-eyebrow::after{ width:18px; }
  .hero h1{ font-size:clamp(1.9rem,9vw,2.4rem); margin-bottom:14px; }
  .hero h1 .zh{ letter-spacing:.32em; margin-bottom:10px; }
  .hero p.lead{ font-size:.98rem; margin-bottom:28px; }
  .hero-actions{ margin-bottom:24px; }
  .hero-actions .btn{ font-size:.9rem; padding:13px 22px; }
  .hero-status{ font-size:.78rem; padding:9px 16px; gap:8px; text-align:left; }

  /* --- generic section headers --- */
  .section-tag{ font-size:.68rem; letter-spacing:.15em; margin-bottom:10px; }
  .section-tag::before, .section-tag::after{ width:16px; }
  .section-head{ margin-bottom:36px; }
  .section-head h2{ font-size:clamp(1.5rem,7vw,1.9rem); }
  .section-head p{ font-size:.94rem; }

  /* --- story --- */
  .story-copy p{ font-size:.94rem; }
  .badge-years strong{ font-size:2.5rem; }
  .badge-years span{ font-size:.62rem; }

  /* --- dish highlight cards --- */
  .dish-card{ padding:26px 22px; }
  .dish-card .zh-mark{ font-size:1.35rem; margin-bottom:12px; }
  .dish-card h3{ font-size:1.05rem; }
  .dish-card p{ font-size:.88rem; }
  .dish-price{ font-size:1.05rem; }

  /* --- visit teaser / directions card --- */
  .visit-cta-info, .card-panel{ padding:26px; }
  .visit-cta-info{ gap:14px; }
  .info-line{ font-size:.88rem; }
  .hours-mini{ font-size:.86rem; }
  .status-row{ font-size:.94rem; }

  /* --- reviews --- */
  .rating-strip{ font-size:.86rem; gap:10px; margin-bottom:36px; }
  .rating-strip strong{ font-size:1.1rem; }
  .quote-card{ padding:24px 22px; }
  .quote-mark{ font-size:2.1rem; }
  .quote-text{ font-size:.9rem; }
  .quote-meta{ font-size:.78rem; }
  .review-card{ padding:26px; }
  .review-brand h3{ font-size:.98rem; }
  .review-brand small{ font-size:.78rem; }
  .review-note{ font-size:.88rem; }

  /* --- footer --- */
  .site-footer{ padding:48px 0 24px; }
  .footer-brand p{ font-size:.86rem; }
  .footer-col li{ font-size:.88rem; }
  .footer-bottom{ font-size:.76rem; }

  /* --- menu page --- */
  .menu-hero{ padding:104px 20px 44px; }
  .menu-hero .zh{ font-size:1.1rem; letter-spacing:.3em; margin-bottom:10px; }
  .menu-hero h1{ font-size:clamp(1.7rem,8vw,2.1rem); }
  .menu-hero p{ font-size:.92rem; }
  .menu-body{ padding:48px 0 72px; }
  .menu-category{ margin-bottom:42px; }
  .menu-category-head{ gap:14px; margin-bottom:24px; }
  .menu-category-head h2{ font-size:1.3rem; }
  .menu-category-head .cat-zh{ font-size:.85rem; }
  .dish-row{ padding:11px 0; }
  .dish-row .name{ font-size:.92rem; }
  .dish-row .name small{ font-size:.76rem; }
  .dish-row .price{ font-size:.92rem; }
  .menu-note{ font-size:.86rem; padding:16px 18px; }

  /* --- visit page --- */
  .page-hero{ padding:110px 20px 50px; }
  .page-hero .zh{ font-size:1.05rem; letter-spacing:.3em; margin-bottom:10px; }
  .page-hero h1{ font-size:clamp(1.7rem,8vw,2.1rem); }
  .page-hero p{ font-size:.92rem; }
  .big-directions{ padding:22px 22px; gap:14px; }
  .big-directions h3{ font-size:1.05rem; }
  .big-directions p{ font-size:.82rem; }
  .hours-table td{ font-size:.88rem; padding:9px 0; }
}