/* ============================================================
   阿彬养生肉骨茶 — Warm Modern V3
   Direction: bright, warm, welcoming — family restaurant
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --cream:       #FAF5EC;
  --cream-2:     #F5EDDC;
  --parchment:   #EDD9B0;
  --biscuit:     #DFC08A;
  --clay-light:  #D4975A;
  --clay:        #C47A35;
  --clay-dark:   #8B4513;
  --amber:       #D4870A;
  --amber-warm:  #E89510;
  --warm-orange: #CC6010;
  --ink:         #2C1208;
  --ink-mid:     #5C3210;
  --ink-light:   #9B7040;
  --gold:        #F0A820;
  --gold-light:  #F5C85A;
  --on-dark:     rgba(250,245,236,0.95);
  --dim-dark:    rgba(250,245,236,0.55);

  --font-cn:  'Noto Serif SC', 'SimSun', serif;
  --font-en:  'Playfair Display', Georgia, serif;
  --font-ui:  'Outfit', 'Noto Sans SC', sans-serif;

  --ease-warm:   cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring: cubic-bezier(0.16,1.00,0.30,1.00);
  --ease-cinema: cubic-bezier(0.08,0.70,0.25,1.00);

  --max:   1300px;
  --pad:   clamp(1.25rem,5vw,5rem);
  --nav-h: 68px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--font-ui);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.7;
}
img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul { list-style:none; }

/* Subtle warm grain */
body::after {
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:0.016; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Reveal ─────────────────────────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.7s var(--ease-warm), transform 0.7s var(--ease-warm);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.10s; }
.reveal-d2 { transition-delay:0.20s; }
.reveal-d3 { transition-delay:0.30s; }
.reveal-d4 { transition-delay:0.40s; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.85rem 2.2rem;
  background:var(--clay); color:white;
  border-radius:6px;
  font-weight:600; font-size:0.95rem; letter-spacing:0.03em;
  transition:background 0.25s, box-shadow 0.25s, transform 0.2s;
  box-shadow:0 2px 12px rgba(196,122,53,0.25);
}
.btn-primary:hover { background:var(--clay-dark); transform:translateY(-1px); box-shadow:0 4px 18px rgba(196,122,53,0.35); }

.btn-outline {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 2rem;
  border:2px solid var(--clay); color:var(--clay);
  border-radius:6px;
  font-weight:500; font-size:0.95rem; letter-spacing:0.02em;
  transition:background 0.25s, transform 0.2s;
}
.btn-outline:hover { background:rgba(196,122,53,0.08); transform:translateY(-1px); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.8rem 2rem;
  border:2px solid rgba(250,245,236,0.45); color:var(--on-dark);
  border-radius:6px;
  font-weight:500; font-size:0.92rem; letter-spacing:0.03em;
  transition:background 0.25s, transform 0.2s;
}
.btn-ghost:hover { background:rgba(250,245,236,0.12); transform:translateY(-1px); }

/* ── Section Typography ─────────────────────────────────────── */
.eyebrow {
  display:block;
  font-family:var(--font-ui);
  font-size:0.72rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--clay); margin-bottom:0.8rem;
}
.eyebrow-light { color:var(--gold-light); }

.section-header {
  text-align:center;
  padding:0 var(--pad);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.section-header h2 {
  font-family:var(--font-cn);
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:700; color:var(--ink); line-height:1.3;
}
.section-header.on-dark h2 { color:var(--on-dark); }

/* ── Loading ────────────────────────────────────────────────── */
#loading {
  position:fixed; inset:0;
  background:var(--cream);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.5rem;
  z-index:10000;
  transition:opacity 0.85s var(--ease-warm), visibility 0.85s;
}
#loading.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.load-glow {
  position:absolute;
  width:360px; height:360px;
  background:radial-gradient(ellipse, rgba(212,135,10,0.22) 0%, transparent 70%);
  border-radius:50%;
  animation:glowPulse 2.8s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity:0.55; transform:scale(0.88); }
  50%      { opacity:1;    transform:scale(1.08); }
}

.load-logo {
  width:82px; height:82px; border-radius:50%; object-fit:cover;
  position:relative; z-index:1;
  box-shadow:0 4px 28px rgba(196,122,53,0.28);
  animation:logoFloat 3.2s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-7px); }
}

.load-name {
  position:relative; z-index:1;
  font-family:var(--font-cn); font-size:1.15rem; font-weight:700;
  color:var(--ink); letter-spacing:0.14em;
}
.load-bar {
  width:150px; height:3px;
  background:var(--parchment); border-radius:2px; overflow:hidden;
  position:relative; z-index:1;
}
.load-progress {
  height:100%;
  background:linear-gradient(90deg, var(--clay), var(--amber));
  border-radius:2px; width:0%;
  transition:width 0.12s linear;
}
.load-hint {
  position:relative; z-index:1;
  font-size:0.75rem; color:var(--ink-light); letter-spacing:0.1em;
}

/* ── Navigation ─────────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background 0.4s var(--ease-warm), box-shadow 0.4s;
}
#nav.scrolled {
  background:rgba(250,245,236,0.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 24px rgba(44,18,8,0.07);
}

.nav-inner {
  max-width:var(--max); margin:0 auto;
  height:var(--nav-h); padding:0 var(--pad);
  display:flex; align-items:center; gap:2rem;
}

.nav-logo { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.nav-logo img {
  width:40px; height:40px; border-radius:50%; object-fit:cover;
}
.nav-logo-name {
  font-family:var(--font-cn); font-size:0.92rem; font-weight:700;
  color:var(--on-dark); transition:color 0.4s;
}
#nav.scrolled .nav-logo-name { color:var(--ink); }

.nav-links { display:flex; gap:2rem; margin-left:auto; }
.nav-links a {
  font-size:0.86rem; font-weight:500; letter-spacing:0.04em;
  color:rgba(250,245,236,0.82); transition:color 0.3s;
}
.nav-links a:hover { color:var(--gold); }
#nav.scrolled .nav-links a { color:var(--ink-mid); }
#nav.scrolled .nav-links a:hover { color:var(--clay); }

.nav-cta {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.5rem 1.2rem;
  background:var(--clay); color:white;
  border-radius:4px; font-size:0.84rem; font-weight:600; flex-shrink:0;
  transition:background 0.25s;
}
.nav-cta:hover { background:var(--clay-dark); }
#nav.scrolled .nav-cta { color:white; }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  padding:4px; margin-left:auto;
}
.nav-toggle span {
  display:block; width:24px; height:2px;
  background:var(--on-dark); border-radius:2px;
  transition:background 0.4s, transform 0.3s, opacity 0.3s;
}
#nav.scrolled .nav-toggle span { background:var(--ink); }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.nav-drawer {
  /* Fixed overlay — NEVER occupies layout space */
  position:fixed;
  top:var(--nav-h); left:0; right:0; z-index:999;
  background:var(--cream); border-top:1px solid var(--parchment);
  max-height:calc(100svh - var(--nav-h));
  overflow-y:auto;
  /* Closed state */
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform 0.28s var(--ease-spring), opacity 0.24s, visibility 0s 0.28s;
}
.nav-drawer.open {
  transform:translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
  transition:transform 0.28s var(--ease-spring), opacity 0.24s, visibility 0s 0s;
}
.nav-drawer li { border-bottom:1px solid var(--parchment); }
.nav-drawer a {
  display:block; padding:1rem var(--pad);
  font-size:1rem; font-weight:500; color:var(--ink);
}
.nav-drawer .cta-link { color:var(--clay); font-weight:700; }

/* ── HERO ───────────────────────────────────────────────────── */
#hero {
  position:relative;
  height:100svh; min-height:100svh;
  overflow:hidden;
  display:flex; align-items:flex-end;
  padding-bottom:clamp(3rem,9vh,6rem);
}

.hero-bg { position:absolute; inset:0; }
.hero-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  animation:kenBurns 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenBurns {
  from { transform:scale(1.0); }
  to   { transform:scale(1.08); }
}

/* Warm overlay — amber from below, NOT black-dominant */
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(44,18,8,0.92)  0%,
      rgba(44,18,8,0.52)  22%,
      rgba(160,68,8,0.22) 52%,
      rgba(160,68,8,0.06) 75%,
      transparent         100%
    ),
    radial-gradient(ellipse at 28% 80%, rgba(212,135,10,0.38) 0%, transparent 52%);
}

/* Steam */
.steam-wrap {
  position:absolute; pointer-events:none;
  bottom:28%; left:50%; transform:translateX(-50%);
  width:260px; height:170px;
}
.st {
  position:absolute; bottom:0; border-radius:60% 40% 55% 60%;
  background:rgba(255,225,175,0.42); filter:blur(13px);
  animation:steamRise var(--d) ease-out var(--dl) infinite;
}
.st1 { width:38px; height:52px; left:22%; --d:4.0s; --dl:0.0s; }
.st2 { width:27px; height:40px; left:43%; --d:4.6s; --dl:1.1s; }
.st3 { width:32px; height:46px; left:64%; --d:3.7s; --dl:2.0s; }
.st4 { width:22px; height:34px; left:12%; --d:5.1s; --dl:2.8s; }
.st5 { width:40px; height:56px; left:56%; --d:3.4s; --dl:0.5s; }

@keyframes steamRise {
  0%   { transform:translateY(0) translateX(0) scale(0.8) rotate(0deg);    opacity:0; }
  12%  { opacity:0.65; }
  72%  { opacity:0.18; }
  100% { transform:translateY(-145px) translateX(16px) scale(1.5) rotate(7deg); opacity:0; }
}

/* Hero content */
.hero-content {
  position:relative; z-index:2;
  max-width:var(--max); width:100%; margin:0 auto;
  padding:0 var(--pad);
}

.hero-pills {
  display:flex; flex-wrap:wrap; gap:0.5rem;
  margin-bottom:1.2rem;
}
.hero-pill {
  display:inline-flex; align-items:center;
  padding:0.28rem 0.85rem;
  background:rgba(212,135,10,0.22);
  border:1px solid rgba(212,135,10,0.42);
  border-radius:100px;
  font-size:0.76rem; font-weight:500;
  color:var(--gold-light); letter-spacing:0.04em;
  backdrop-filter:blur(6px);
}

.hero-title { display:flex; flex-direction:column; gap:0.15rem; margin-bottom:1rem; }
.hero-cn {
  font-family:var(--font-cn);
  font-size:clamp(2.2rem,7vw,5.2rem);
  font-weight:900; line-height:1.15; letter-spacing:0.06em;
  color:var(--on-dark);
  text-shadow:0 2px 20px rgba(44,18,8,0.5);
}
.hero-en {
  font-family:var(--font-en);
  font-size:clamp(0.95rem,2.2vw,1.65rem);
  font-style:italic; font-weight:400; letter-spacing:0.08em;
  color:var(--gold-light);
}

.hero-tagline {
  font-size:clamp(0.88rem,1.7vw,1.05rem);
  color:var(--dim-dark); max-width:430px;
  margin-bottom:2rem; line-height:1.75;
}

.hero-actions { display:flex; flex-wrap:wrap; gap:0.9rem; }

.hero-scroll {
  position:absolute; bottom:2rem; right:var(--pad); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  color:var(--dim-dark); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase;
}
.scroll-line {
  width:1px; height:48px;
  background:linear-gradient(to bottom, var(--dim-dark), transparent);
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:0.5; transform:scaleY(1); }
  50%      { opacity:1;   transform:scaleY(1.18); }
}

/* ── Stats Bar ──────────────────────────────────────────────── */
#stats { background:var(--ink); padding:1.6rem var(--pad); }
.stats-inner {
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
}
.stat-item {
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  padding:0.7rem 2.2rem; text-align:center; min-width:130px;
}
.stat-item strong {
  font-family:var(--font-en);
  font-size:clamp(1.5rem,3vw,2.3rem); font-weight:700;
  color:var(--gold); line-height:1;
}
.stat-item span {
  font-size:0.7rem; font-weight:500;
  letter-spacing:0.09em; text-transform:uppercase;
  color:rgba(250,245,236,0.45);
}
.stat-sep { width:1px; height:38px; background:rgba(250,245,236,0.1); }

/* ── Dishes ─────────────────────────────────────────────────── */
#dishes {
  background:var(--cream);
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}

/* Top 3 editorial panels */
.dishes-editorial { display:flex; flex-direction:column; }

.dish-panel {
  display:grid; grid-template-columns:56% 44%;
  min-height:clamp(360px,55vh,560px);
  overflow:hidden;
}
.dish-panel.rev { grid-template-columns:44% 56%; }
.dish-panel.rev .dp-img { order:2; }
.dish-panel.rev .dp-text { order:1; }

.dp-img { overflow:hidden; position:relative; }
.dp-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 7s var(--ease-cinema);
}
.dish-panel:hover .dp-img img { transform:scale(1.06); }

.dp-badge-wrap { position:absolute; top:1.4rem; left:1.4rem; z-index:1; }
.dp-badge {
  display:inline-flex; align-items:center;
  padding:0.32rem 0.8rem;
  background:var(--clay); color:white;
  border-radius:3px; font-size:0.7rem; font-weight:700; letter-spacing:0.06em;
}

.dp-text {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,4rem);
  background:var(--cream-2);
}
.dish-panel:nth-child(even) .dp-text { background:var(--cream); }

.dp-num {
  font-family:var(--font-en); font-size:3.8rem; font-weight:700;
  color:var(--parchment); line-height:1; margin-bottom:-0.3rem; letter-spacing:-0.02em;
}
.dp-name-zh {
  font-family:var(--font-cn);
  font-size:clamp(1.3rem,3vw,2.1rem); font-weight:700;
  color:var(--ink); margin-bottom:0.3rem; line-height:1.25;
}
.dp-name-en {
  font-family:var(--font-en);
  font-size:clamp(0.82rem,1.4vw,1.05rem); font-style:italic;
  color:var(--clay); margin-bottom:1.25rem;
}
.dp-tagline {
  font-size:clamp(0.9rem,1.5vw,1.02rem);
  color:var(--ink-mid); line-height:1.75; max-width:310px;
}

/* Lower dish grid */
.dishes-secondary {
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:0.75rem;
}
.ds-card { position:relative; overflow:hidden; aspect-ratio:4/3; }
.ds-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 6s var(--ease-cinema);
}
.ds-card:hover img { transform:scale(1.06); }
.ds-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(44,18,8,0.82) 0%, rgba(44,18,8,0.2) 50%, transparent 100%);
}
.ds-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:1.4rem 1.6rem;
}
.ds-badge {
  display:inline-flex; align-items:center;
  padding:0.22rem 0.65rem;
  background:rgba(212,135,10,0.35); border:1px solid rgba(212,135,10,0.5);
  border-radius:2px; font-size:0.65rem; font-weight:700;
  color:var(--gold-light); letter-spacing:0.06em; margin-bottom:0.4rem;
}
.ds-name {
  font-family:var(--font-cn); font-size:1.05rem; font-weight:700;
  color:var(--on-dark); margin-bottom:0.2rem;
}
.ds-tagline { font-size:0.76rem; color:var(--dim-dark); line-height:1.5; }

/* ── Story ──────────────────────────────────────────────────── */
#story {
  background:var(--ink);
  padding:clamp(4rem,9vw,8rem) var(--pad);
  overflow:hidden;
}
.story-inner {
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,6rem); align-items:center;
}
.story-text h2 {
  font-family:var(--font-cn);
  font-size:clamp(1.55rem,3.5vw,2.5rem); font-weight:700;
  color:var(--on-dark); line-height:1.42; margin-bottom:1.5rem;
}
.story-text p {
  font-size:clamp(0.88rem,1.4vw,1.02rem);
  color:var(--dim-dark); line-height:1.9; margin-bottom:1rem;
}
.story-text p:last-child { margin-bottom:0; }

.story-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:0.7rem; height:420px;
}
.story-grid img {
  width:100%; height:100%; object-fit:cover; border-radius:3px;
  transition:transform 0.5s var(--ease-warm);
}
.story-grid img:hover { transform:scale(1.03); }
.story-tall { grid-row:span 2; }

/* ── Branches ───────────────────────────────────────────────── */
#branches {
  background:var(--cream);
  padding:clamp(4rem,8vw,7rem) 0;
}
#branches .section-header { padding:0 var(--pad); }

.branches-panels {
  display:flex;
  height:clamp(380px,56vh,540px);
  overflow:hidden;
  margin-top:clamp(2rem,4vw,3.5rem);
}
.b-panel {
  flex:1; position:relative; overflow:hidden;
  cursor:pointer;
  transition:flex 0.68s var(--ease-spring);
}
.b-panel:hover { flex:3; }
.b-panel img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--ease-warm);
}
.b-panel:hover img { transform:scale(1.05); }
.b-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(44,18,8,0.88)   0%,
    rgba(44,18,8,0.40)  40%,
    rgba(44,18,8,0.10)  70%,
    transparent         100%
  );
}
.b-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:2rem 2rem 2.2rem;
  color:white;
}
.b-name {
  font-family:var(--font-cn);
  font-size:clamp(1rem,1.8vw,1.3rem);
  font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:0.35rem;
  line-height:1.3;
}
.b-rating-row {
  display:flex; align-items:center; gap:0.35rem;
  margin-bottom:0.6rem;
}
.b-stars {
  font-size:0.95rem; color:var(--gold);
  line-height:1;
}
.b-rating {
  font-size:0.9rem; font-weight:600;
  color:var(--gold); line-height:1;
}
.b-rating-count {
  font-size:0.72rem;
  color:rgba(250,245,236,0.5);
  line-height:1;
}
.b-rating-count::before { content:'· '; }
.b-details {
  max-height:0; overflow:hidden;
  transition:max-height 0.45s var(--ease-warm), opacity 0.35s;
  opacity:0;
}
.b-panel:hover .b-details {
  max-height:150px;
  opacity:1;
}
.b-addr {
  font-size:0.78rem;
  color:rgba(250,245,236,0.7);
  line-height:1.6;
  margin-bottom:0.2rem;
}
.b-hours {
  font-size:0.78rem;
  color:rgba(250,245,236,0.55);
  line-height:1.6;
}
.b-since {
  font-size:0.72rem;
  color:var(--gold-light);
  margin-top:0.35rem;
}
.b-map {
  display:inline-flex; align-items:center; gap:0.35rem;
  margin-top:1rem;
  padding:0.45rem 1rem;
  background:rgba(212,135,10,0.25);
  border:1px solid rgba(212,135,10,0.45);
  border-radius:5px;
  font-size:0.74rem; font-weight:500;
  color:var(--gold-light);
  opacity:0;
  transition:opacity 0.35s, background 0.25s;
}
.b-panel:hover .b-map { opacity:1; }
.b-map:hover { background:rgba(212,135,10,0.45); }

/* ── Reviews ────────────────────────────────────────────────── */
#reviews {
  background:var(--cream-2);
  padding:clamp(4rem,9vw,8rem) var(--pad);
}
.reviews-wrap { max-width:760px; margin:0 auto; text-align:center; }
.reviews-wrap h2 {
  font-family:var(--font-cn);
  font-size:clamp(1.45rem,3vw,2.1rem); font-weight:700;
  color:var(--ink); margin-bottom:2.5rem; line-height:1.35;
}
.reviews-score {
  display:flex; flex-direction:column; align-items:center; gap:0.35rem;
  padding-bottom:2.5rem; margin-bottom:2.5rem;
  border-bottom:1px solid var(--parchment);
}
.score-num {
  font-family:var(--font-en); font-size:4.2rem; font-weight:700;
  color:var(--clay); line-height:1;
}
.score-stars { font-size:1.3rem; color:var(--amber); letter-spacing:0.1em; }
.score-count { font-size:0.78rem; color:var(--ink-light); letter-spacing:0.05em; }

.review-stage {
  position:relative; min-height:155px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.25rem;
}
.rq-text {
  font-family:var(--font-cn);
  font-size:clamp(0.98rem,2vw,1.2rem); line-height:1.85;
  color:var(--ink); font-style:italic; max-width:620px;
  transition:opacity 0.45s, transform 0.45s;
  position:relative;
}
.rq-text::before {
  content:'"';
  font-family:var(--font-en); font-size:5rem;
  color:var(--parchment);
  position:absolute; top:-2.4rem; left:-0.8rem;
  line-height:1; pointer-events:none; user-select:none;
}
.rq-author { display:flex; flex-direction:column; align-items:center; gap:0.15rem; }
.rq-name { font-weight:700; font-size:0.88rem; color:var(--ink-mid); }
.rq-meta { display:flex; align-items:center; gap:0.35rem; font-size:0.73rem; color:var(--ink-light); }
.rq-stars { color:var(--amber); }
.rq-dots { display:flex; gap:0.5rem; margin-top:0.25rem; }
.rq-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--parchment); cursor:pointer;
  transition:background 0.3s, transform 0.3s;
}
.rq-dot.on { background:var(--clay); transform:scale(1.45); }

/* ── Atmosphere ─────────────────────────────────────────────── */
#atmosphere {
  background:var(--ink);
  padding:clamp(3.5rem,7vw,6rem) 0;
}
#atmosphere .section-header { padding:0 var(--pad); }

.film-wrap {
  overflow-x:auto; overflow-y:hidden;
  cursor:grab; user-select:none;
  scrollbar-width:none; -ms-overflow-style:none;
  margin-top:2.5rem;
}
.film-wrap::-webkit-scrollbar { display:none; }
.film-wrap:active { cursor:grabbing; }

.film-strip {
  display:flex; gap:0.7rem;
  padding:0 var(--pad);
  /* extra right padding so last item doesn't hug edge */
  padding-right:calc(var(--pad) + 2rem);
}
.film-frame {
  flex-shrink:0;
  width:clamp(230px,36vw,460px);
  height:clamp(165px,27vw,330px);
  border-radius:3px; overflow:hidden; position:relative;
}
.film-frame img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.55s var(--ease-warm);
}
.film-frame:hover img { transform:scale(1.05); }
.film-cap {
  position:absolute; bottom:0; left:0; right:0;
  padding:0.6rem 0.85rem;
  background:linear-gradient(transparent, rgba(44,18,8,0.72));
  font-size:0.68rem; color:var(--dim-dark); letter-spacing:0.04em;
  opacity:0; transition:opacity 0.3s;
}
.film-frame:hover .film-cap { opacity:1; }
.film-hint {
  text-align:center; margin-top:1.2rem;
  font-size:0.68rem; color:rgba(250,245,236,0.28);
  letter-spacing:0.14em; text-transform:uppercase;
}

/* ── FAQ ────────────────────────────────────────────────────── */
#faq {
  background:var(--cream);
  padding:clamp(4rem,9vw,8rem) var(--pad);
}
.faq-wrap { max-width:700px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--parchment); }
.faq-q {
  width:100%; text-align:left;
  padding:1.4rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--font-cn);
  font-size:clamp(0.92rem,1.7vw,1.03rem); font-weight:600;
  color:var(--ink); cursor:pointer; transition:color 0.25s;
}
.faq-q:hover { color:var(--clay); }
.faq-icon {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--clay);
  display:flex; align-items:center; justify-content:center;
  color:var(--clay); font-size:0.9rem; font-weight:300;
  transition:transform 0.35s, background 0.25s, color 0.25s;
}
.faq-item.open .faq-icon {
  transform:rotate(45deg);
  background:var(--clay); color:white;
}
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height 0.42s var(--ease-warm), padding 0.3s;
  font-size:0.91rem; color:var(--ink-mid); line-height:1.9;
}
.faq-a.open { max-height:280px; padding-bottom:1.4rem; }

/* ── Footer ─────────────────────────────────────────────────── */
#footer { background:var(--ink); }
.footer-cta {
  padding:clamp(4rem,10vw,8rem) var(--pad);
  text-align:center;
  background:linear-gradient(140deg, rgba(212,135,10,0.14) 0%, transparent 55%);
}
.footer-cta h2 {
  font-family:var(--font-cn);
  font-size:clamp(1.7rem,4vw,3rem); font-weight:700;
  color:var(--on-dark); line-height:1.45; margin-bottom:2rem;
}
.footer-actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.footer-base {
  border-top:1px solid rgba(250,245,236,0.07);
  padding:2rem var(--pad);
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.5rem;
}
.footer-logo { display:flex; align-items:center; gap:0.7rem; }
.footer-logo img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.footer-logo span { font-family:var(--font-cn); font-size:0.88rem; color:rgba(250,245,236,0.52); }
.footer-social { display:flex; gap:1.4rem; }
.footer-social a {
  font-size:0.78rem; color:rgba(250,245,236,0.38);
  letter-spacing:0.04em; transition:color 0.25s;
}
.footer-social a:hover { color:var(--gold); }
.footer-copy { font-size:0.72rem; color:rgba(250,245,236,0.28); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:960px) {
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  /* .nav-drawer is position:fixed — no display toggle needed */

  .story-inner { grid-template-columns:1fr; }
  .story-grid { height:260px; }

  .branches-panels { flex-direction:column; height:auto; gap:0.5rem; }
  .b-panel { height:260px; flex:none; border-radius:4px; }
  .b-panel:hover { flex:none; }
  .b-info { padding:1.6rem 1.6rem 1.8rem; }
  .b-name { font-size:1.15rem; }
  .b-details { max-height:150px; opacity:1; }
  .b-map { opacity:1; }

  .stat-sep { display:none; }
  .stat-item { padding:0.7rem 1.4rem; }

  /* ── Nav mobile polish ── */
  .nav-inner { padding-left:1rem; padding-right:1rem; }
  .nav-logo { gap:0.65rem; }
  .nav-logo img { width:42px; height:42px; }
  .nav-toggle { padding:7px 10px; margin-left:auto; }

  /* ── Hero mobile — prevent min-height overflow, compact stack ── */
  #hero { padding-bottom:clamp(1.75rem,5vh,2.75rem); }
  .hero-scroll { display:none; }
  .hero-pills { margin-bottom:0.85rem; }
  .hero-cn { font-size:clamp(1.85rem,7vw,2.7rem); }
  .hero-tagline { font-size:0.83rem; margin-bottom:1.4rem; line-height:1.65; }
  .hero-actions { gap:0.75rem; }
}

@media (max-width:700px) {
  .dish-panel, .dish-panel.rev {
    grid-template-columns:1fr;
    grid-template-rows:54vw auto;
    min-height:auto;
  }
  .dish-panel.rev .dp-img { order:0; }
  .dish-panel.rev .dp-text { order:1; }
  .dp-img { height:54vw; }
  .dp-text { padding:2rem 1.5rem; }
  .dp-num { font-size:2.5rem; }

  .dishes-secondary { grid-template-columns:1fr 1fr; }

  .story-grid { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
  .story-tall { grid-row:span 1; }

  .footer-base { flex-direction:column; align-items:flex-start; }
}

@media (max-width:480px) {
  /* ── Hero small-screen compact ── */
  .hero-pill { font-size:0.68rem; padding:0.2rem 0.65rem; }
  .hero-en { font-size:0.8rem; }
  .hero-tagline { max-width:none; }

  .hero-actions { flex-direction:column; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width:100%; justify-content:center; }

  .dishes-secondary { grid-template-columns:1fr; }
  .ds-card { aspect-ratio:16/9; }

  .film-frame { width:75vw; }

  .footer-actions { flex-direction:column; align-items:center; }
  .footer-actions .btn-primary,
  .footer-actions .btn-ghost { width:100%; max-width:320px; justify-content:center; }

  /* ── Mobile branch extra polish ── */
  .b-panel { height:240px; }
  .b-info { padding:1.4rem 1.4rem 1.6rem; }
  .b-name { font-size:1.05rem; }
  .b-addr { font-size:0.74rem; }
  .b-hours { font-size:0.74rem; }
  .b-map { padding:0.4rem 0.85rem; font-size:0.72rem; }
}