:root{
  /* --line and --rule are the same hairline colour under two names;
     both are defined so rules shared between pages always resolve */
  --rule:rgba(232,168,74,.16);
  --bg:#1E1815;
  --bg-alt:#262019;          /* alternating band */
  --bg-deep:#140F0D;
  --panel:rgba(255,255,255,.04);
  --panel-hi:rgba(255,255,255,.07);
  --fg:#F7F0E6; --muted:rgba(247,240,230,.68); --mute2:rgba(247,240,230,.52);
  --amber:#E8A84A; --amber-lt:#F2C06A; --onAmber:#241B12;
  --line:rgba(232,168,74,.22); --line-hi:rgba(232,168,74,.52);
  --jade:#5FCB92; --rose:#FF8B7E;
  --display:"Fraunces",Georgia,serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,sans-serif;
  --han-s:"Noto Serif SC",serif; --han-n:"Noto Sans SC",sans-serif;
  --wrap:1240px; --gut:clamp(20px,5vw,56px); --r:18px; --navH:88px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; border-radius:4px; }
.dish:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:var(--r); }
.dish:focus-visible{ border-color:var(--line-hi); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* alternating bands */
.band{ position:relative; }
.band--alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin:0 0 14px; }
.h2{ font-family:var(--display); font-weight:600; font-size:clamp(31px,4.5vw,50px); line-height:1.09; letter-spacing:-.022em; margin:0 0 16px; font-variation-settings:"SOFT" 28,"WONK" 1; }
.lede{ font-size:17.5px; line-height:1.74; color:var(--muted); margin:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; text-align:center; font-size:12.5px; line-height:1.6; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:14px 24px; border-radius:999px; border:1.5px solid transparent; transition:all .22s cubic-bezier(.4,0,.2,1); }
.btn svg{ width:15px; height:15px; flex:0 0 auto; }
.btn--a{ background:var(--amber); color:var(--onAmber); box-shadow:0 6px 20px rgba(232,168,74,.2); }
.btn--a:hover{ background:var(--amber-lt); box-shadow:0 10px 28px rgba(232,168,74,.34); transform:translateY(-2px); }
.btn--g{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn--g:hover{ border-color:var(--line-hi); color:var(--amber); }
.btn[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
@media(prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

/* ============================================================
   1 — UTILITY BAR with modern social buttons
   ============================================================ */
@media(prefers-reduced-motion:reduce){  }
.lpill--off{ color:var(--mute2); }
.dot-s--off{ background:var(--rose); box-shadow:0 0 0 3px rgba(255,139,126,.2); }
@media(max-width:600px){   }

/* ============================================================
   1 — NAV with modern animated hover
   ============================================================ */
.nav{ position:sticky; top:0; z-index:70; background:rgba(20,15,13,.86); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); }
.nav__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); height:var(--navH); display:flex; align-items:center; gap:30px; }
.brand{ display:flex; align-items:center; gap:4px; text-decoration:none; }
.brand__mark{ width:80px; height:80px; flex:0 0 auto; display:block; }
.brand__mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand__name{ font-family:var(--display); font-weight:700; font-size:22px; }
.nlinks{ display:flex; gap:6px; margin-left:auto; }
.nlinks a{
  position:relative; color:var(--muted); text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:10px 15px; border-radius:999px;
  transition:color .25s ease, background .25s ease;
}
.nlinks a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:1.5px;
  background:var(--amber); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.nlinks a:hover{ color:var(--amber); background:rgba(232,168,74,.07); }
.nlinks a:hover::after{ transform:scaleX(1); }
.nlinks a.is-here{ color:var(--amber); }
.nlinks a.is-here::after{ transform:scaleX(1); }
@media(prefers-reduced-motion:reduce){ .nlinks a::after{ transition:none; } }
.nright{ display:flex; align-items:center; gap:11px; margin-left:auto; }
.nlinks + .nright{ margin-left:0; }
.ncta{ padding:11px 22px; font-size:11.5px; }
/* mobile: keep the tabs and the order button visible.
   Below 640px the bar becomes two rows so nothing is cramped. */
@media(max-width:900px){
  .brand__mark{ width:64px; height:64px; }
  .nlinks{ gap:2px; }
  .nlinks a{ font-size:11px; letter-spacing:.1em; padding:9px 11px; }
  .nlinks a::after{ left:11px; right:11px; }
  .ncta{ padding:10px 16px; font-size:10.5px; }
  .brand__name{ font-size:19px; }
}
@media(max-width:640px){
  .nav__in{ height:auto; padding-top:10px; padding-bottom:10px;
            flex-wrap:wrap; gap:8px 12px; row-gap:6px; }
  .brand{ flex:0 0 auto; }
  /* the tabs sit on their own row here, so the button gets the full push right */
  .nright, .nlinks + .nright{ margin-left:auto; }
  .nlinks{ order:3; flex:1 0 100%; margin-left:0; justify-content:center;
           border-top:1px solid var(--line); padding-top:6px; }
  .nlinks a{ font-size:11.5px; padding:8px 16px; }
  .nlinks a::after{ left:16px; right:16px; bottom:3px; }
}
@media(max-width:400px){
  .brand__mark{ width:54px; height:54px; }
  .brand__name{ font-size:17px; }
  .ncta{ padding:9px 13px; font-size:10px; letter-spacing:.08em; }
}

/* ============================================================
   2 — HERO
   ============================================================ */
.hero{ position:relative; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(18,13,11,.96) 0%, rgba(18,13,11,.9) 32%, rgba(18,13,11,.6) 60%, rgba(18,13,11,.78) 100%),
    radial-gradient(50vw 44vw at 10% 26%, rgba(232,168,74,.14), transparent 62%);
}
.hgrid{ max-width:var(--wrap); margin:0 auto; padding:clamp(52px,7.5vw,92px) var(--gut) clamp(66px,8vw,100px); display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(24px,4vw,48px); align-items:center; }
@media(max-width:980px){ .hgrid{ grid-template-columns:1fr; } }
.htext{ max-width:530px; }
.htitle{ font-family:var(--display); font-weight:700; font-size:clamp(40px,5.6vw,64px); line-height:1.04; letter-spacing:-.02em; margin:0 0 clamp(22px,2.6vw,32px); font-variation-settings:"SOFT" 28,"WONK" 1; text-shadow:0 2px 34px rgba(0,0,0,.55); }
.hhan{ font-family:var(--han-s); font-size:clamp(16px,1.9vw,20px); letter-spacing:.32em; color:var(--amber); margin:0 0 24px; opacity:.92; }
.hsub{ font-size:17.5px; line-height:1.72; color:var(--muted); margin:0 0 32px; }
.hsub a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.hbtns{ display:flex; gap:12px; flex-wrap:wrap; }
/* once they stack, both hero buttons share one width so their edges line up */
@media(max-width:640px){
  .hbtns{ flex-direction:column; align-items:flex-start; }
  .hbtns .btn{ width:216px; white-space:nowrap; }
}

.plates{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(18px,2.4vw,28px);
  row-gap:clamp(56px,6vw,74px);   /* clearance for the labels below each circle */
  padding-bottom:46px;             /* clearance for the last row's labels */
  align-content:center;
}
.plate{ position:relative; }
.plate__img{ border-radius:50%; overflow:hidden; aspect-ratio:1/1; box-shadow:0 22px 54px rgba(0,0,0,.6); border:2px solid rgba(247,240,230,.12); }
.plate__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.plate:hover .plate__img img{ transform:scale(1.06); }
@media(prefers-reduced-motion:reduce){ .plate:hover .plate__img img{ transform:none; } }
/* all four plates align evenly — no offset */
.plate--up,.plate--dn{ transform:none; }
@media(max-width:560px){ .plates{ row-gap:52px; } }
.plate__tag{ position:absolute; left:50%; bottom:-15px; transform:translateX(-50%); background:rgba(18,13,11,.93); backdrop-filter:blur(10px); border:1px solid var(--line-hi); border-radius:999px; padding:8px 15px; display:flex; align-items:baseline; gap:9px; white-space:nowrap; box-shadow:0 8px 22px rgba(0,0,0,.5); }
.plate__zh{ font-family:var(--han-s); font-weight:700; font-size:14.5px; letter-spacing:.03em; }
.plate__p{ font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--amber); font-variant-numeric:tabular-nums; }
@media(max-width:1100px){
  .plate__tag{ padding:7px 12px; gap:7px; }
  .plate__zh{ font-size:13px; }
  .plate__p{ font-size:12px; }
}
@media(max-width:400px){
  .plate__zh{ font-size:12px; }
  .plate__p{ font-size:11px; }
}
.phototag{ position:absolute; top:14px; right:16px; z-index:6; background:rgba(18,13,11,.85); border:1px solid var(--line-hi); color:var(--mute2); font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:6px 12px; border-radius:999px; }

/* ============================================================
   3 — LOCATION CARDS, high-end
   ============================================================ */
.locs{ padding:clamp(52px,7vw,86px) 0; }
.lgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,26px); }
@media(max-width:820px){ .lgrid{ grid-template-columns:1fr; } }

.loc{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.022) 100%);
  border:1px solid var(--line);
  padding:clamp(28px,3.4vw,38px);
  display:flex; flex-direction:column; gap:18px;
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.loc::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,168,74,.7),transparent);
}
.loc::after{
  content:""; position:absolute; z-index:-1; inset:-1px;
  background:radial-gradient(60% 50% at 50% 0%, rgba(232,168,74,.14), transparent 70%);
  opacity:0; transition:opacity .35s;
}
.loc:hover{ border-color:var(--line-hi); transform:translateY(-5px); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.loc:hover::after{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .loc:hover{ transform:none; } }

.ltop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.ltop > div{ flex:1; }
.lname{ font-family:var(--display); font-weight:600; font-size:clamp(25px,2.9vw,33px); line-height:1.08; margin:0 0 5px; letter-spacing:-.015em; }
.lhan{ font-family:var(--han-n); font-size:13.5px; color:var(--mute2); letter-spacing:.22em; margin:0; }
.lbadge{
  font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--line-hi);
  background:rgba(232,168,74,.1); padding:7px 13px; border-radius:999px; white-space:nowrap; flex:0 0 auto;
}

/* address as a map link */
.laddr{
  display:flex; align-items:flex-start; gap:11px; text-decoration:none;
  font-size:15.5px; line-height:1.7; color:var(--muted);
  padding:13px 15px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid transparent;
  transition:all .25s;
}
.laddr:hover{ color:var(--fg); background:rgba(232,168,74,.08); border-color:var(--line); }
.laddr svg{ width:17px; height:17px; color:var(--amber); flex:0 0 auto; margin-top:3px; }
.laddr__arrow{ margin-left:auto; opacity:.4; transition:opacity .25s, transform .25s; }
.laddr:hover .laddr__arrow{ opacity:1; transform:translate(2px,-2px); }

.lphone{ display:flex; align-items:center; gap:11px; font-size:15.5px; color:var(--muted); padding:0 15px; font-variant-numeric:tabular-nums; }
.lphone svg{ width:16px; height:16px; color:var(--amber); flex:0 0 auto; }

/* status row */
.lstat{
  display:flex; align-items:center; gap:11px; margin:0;
  padding:12px 15px; border-radius:12px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05);
  font-size:14px; font-weight:600;
}
.ldot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
/* "Open now" and "Closed now" are different widths. Without a floor the
   line reflows when the script swaps them, shifting the whole card. */
.lst{ display:inline-block; min-width:8.4ch; }
.ldot--on{ background:var(--jade); box-shadow:0 0 0 4px rgba(95,203,146,.16), 0 0 14px rgba(95,203,146,.6); }
.ldot--off{ background:var(--rose); box-shadow:0 0 0 4px rgba(255,139,126,.16), 0 0 14px rgba(255,139,126,.5); }
.lhours{ margin-left:auto; color:var(--mute2); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }

.lact{ display:flex; gap:10px; margin-top:auto; padding-top:4px; flex-wrap:wrap; justify-content:center; }
/* fixed width so both buttons match exactly — min-width is only a floor,
   so the longer label would otherwise grow past it. nowrap keeps the
   longer label on one line at every screen size. */
.lact .btn{ flex:0 0 auto; width:186px; padding-left:14px; padding-right:14px; white-space:nowrap; }
.lnote{ font-size:12px; color:var(--mute2); margin:2px 0 0; }

/* ============================================================
   DISHES
   ============================================================ */
.dishes{ padding:clamp(62px,8vw,104px) 0; }
.shead{ max-width:660px; margin:0 0 clamp(34px,4.5vw,50px); }
.shead--c{ margin-left:auto; margin-right:auto; text-align:center; }
.dgrid{ display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.dish{ cursor:pointer; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s,border-color .3s,box-shadow .3s; }
.dish:hover{ transform:translateY(-6px); border-color:var(--line-hi); box-shadow:0 22px 48px rgba(0,0,0,.42); }
@media(prefers-reduced-motion:reduce){ .dish:hover{ transform:none; } }
.dpic{ position:relative; aspect-ratio:4/3; background:#2A221D; overflow:hidden; }
.dpic img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.dish:hover .dpic img{ transform:scale(1.05); }
@media(prefers-reduced-motion:reduce){ .dish:hover .dpic img{ transform:none; } }
.dno{ position:absolute; top:12px; left:12px; background:rgba(18,13,11,.8); backdrop-filter:blur(6px); border:1px solid var(--line-hi); color:var(--amber); font-weight:800; font-size:12.5px; padding:6px 12px; border-radius:999px; }
.dbody{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:3px; }
.den{ font-family:var(--body); font-weight:600; font-size:19px; line-height:1.3; letter-spacing:-.005em; color:var(--fg); margin:0 0 4px; }
.dzh{ font-family:var(--han-s); font-weight:500; font-size:16.5px; line-height:1.4; letter-spacing:.06em; color:var(--muted); margin:0; }
.dp{ margin:auto 0 0; padding-top:13px; font-family:var(--display); font-weight:600; font-size:20px; color:var(--amber); font-variant-numeric:tabular-nums; }
.dp--mkt{ font-family:var(--body); font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.dmore{ text-align:center; margin-top:clamp(32px,4vw,46px); }

/* FEATURE BLOCKS */
.feat{ padding:clamp(62px,8vw,104px) 0; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,66px); align-items:center; }
@media(max-width:880px){ .fgrid{ grid-template-columns:1fr; } }
.fpic{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 56px rgba(0,0,0,.45); }
.fpic img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.feat--flip .fpic{ order:-1; }
@media(max-width:880px){ .feat--flip .fpic{ order:0; } }
.mlist{ list-style:none; padding:0; margin:26px 0 0; border-top:1px solid var(--line); }
.mi{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.mzh{ font-family:var(--han-s); font-weight:500; font-size:17px; letter-spacing:.04em; white-space:nowrap; }
.men{ font-size:13px; color:var(--mute2); flex:1; line-height:1.45; }
.mp{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--amber); font-variant-numeric:tabular-nums; }
.stats{ display:flex; gap:clamp(26px,4.5vw,52px); margin-top:32px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.sn{ font-family:var(--display); font-weight:600; font-size:44px; line-height:1; margin:0 0 7px; color:var(--amber); font-variant-numeric:tabular-nums; }
.sl{ font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--mute2); margin:0; }

/* SOCIAL */
.social{ padding:clamp(58px,7.5vw,96px) 0; text-align:center; }
.snum{ font-family:var(--display); font-weight:600; font-size:clamp(46px,7vw,80px); line-height:1; margin:0 0 8px; color:var(--amber); }
.slab{ font-size:18px; color:var(--muted); margin:0 0 28px; }

/* 4 — MKT strip, now just above the footer */
.mkt{ background:linear-gradient(96deg,rgba(232,168,74,.14),rgba(196,90,40,.12)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; }
.mkt__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:15px; color:var(--muted); }
.mkt__t{ font-weight:800; font-size:11.5px; letter-spacing:.2em; color:var(--onAmber); background:var(--amber); padding:6px 13px; border-radius:999px; white-space:nowrap; }
.mkt__h{ font-family:var(--han-n); letter-spacing:.2em; color:var(--amber); }

/* FOOTER */
.foot{ background:var(--bg-deep); padding:clamp(56px,7vw,84px) 0 32px; color:var(--muted); border-top:1px solid var(--rule); }
.fgrid2{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
@media(max-width:800px){ .fgrid2{ grid-template-columns:1fr; } }
.fbrand{ font-family:var(--display); font-weight:600; font-size:25px; color:var(--fg); margin:0 0 6px; }
.fhan{ font-family:var(--han-s); color:var(--amber); letter-spacing:.3em; font-size:15px; margin:0 0 16px; }
.fh{ font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin:0 0 14px; }
.fp{ font-size:14.5px; line-height:1.85; margin:0; font-variant-numeric:tabular-nums; }
.fp a{ text-decoration:none; border-bottom:1px solid rgba(232,168,74,.4); }
.fp a:hover{ color:var(--amber); }
.fbar a{ text-decoration:none; text-transform:none; letter-spacing:.02em; }
.fbar a:hover{ color:var(--amber); }
.fbar{ margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--mute2); letter-spacing:.1em; text-transform:uppercase; }

/* --- variant: hero without the four dishes --- */
body.no-plates .plates{ display:none; }
body.no-plates .hgrid{
  grid-template-columns:1fr;
  min-height:min(64vh,600px);
  align-content:center;
  padding-top:clamp(70px,10vw,130px);
  padding-bottom:clamp(70px,10vw,130px);
}
body.no-plates .htext{ max-width:660px; }
body.no-plates .htitle{ font-size:clamp(44px,6.4vw,76px); }
body.no-plates .hsub{ font-size:19px; max-width:560px; }
body.no-plates .hero__scrim{
  background:
    linear-gradient(100deg, rgba(18,13,11,.94) 0%, rgba(18,13,11,.84) 40%, rgba(18,13,11,.55) 72%, rgba(18,13,11,.7) 100%),
    radial-gradient(50vw 44vw at 12% 30%, rgba(232,168,74,.15), transparent 62%);
}

/* toggle control */
.hero-toggle{
  position:fixed; right:16px; bottom:16px; z-index:95;
  background:rgba(18,13,11,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line-hi); color:var(--fg);
  font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.05em;
  padding:12px 18px; border-radius:999px; transition:all .22s;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.hero-toggle:hover{ background:var(--amber); color:var(--onAmber); border-color:var(--amber); }

.rise{ opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.rise.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* dish lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(12,8,7,.96); backdrop-filter:blur(12px); display:none; place-items:center; padding:clamp(16px,3vw,40px); overflow:auto; }
.lb.is-open{ display:grid; }
.lb__box{ max-width:min(1100px,92vw); width:100%; text-align:center; margin:auto; }
.lb img{ transition:opacity .18s ease; width:100%; height:auto; border-radius:14px; max-height:calc(100vh - 275px); object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb__en{ font-family:var(--display); font-weight:600; font-size:27px; line-height:1.2; margin:20px 0 5px; letter-spacing:-.015em; color:var(--fg); }
.lb__zh{ font-family:var(--han-s); font-weight:500; font-size:19px; letter-spacing:.1em; color:var(--amber); margin:0 0 4px; }
.lb__vi{ font-size:15px; font-style:italic; color:var(--muted); margin:0 0 12px; }
.lb__vi:empty{ display:none; margin:0; }
.lb__p{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--amber); margin:0; }
.lb__p small{ display:block; font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mute2); margin-top:5px; }
@media(max-width:700px){
  .lb img{ max-height:calc(100vh - 255px); }
  .lb__en{ font-size:22px; margin-top:16px; }
  .lb__zh{ font-size:17px; } .lb__vi{ font-size:13.5px; } .lb__p{ font-size:18px; }
}
.lb__x{ position:absolute; top:22px; right:24px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:20px; cursor:pointer; transition:all .22s; }
.lb__x:hover{ border-color:var(--amber); color:var(--amber); }

/* story — single column, no photo */
.story__solo{ max-width:760px; margin:0 auto; text-align:left; }
.story__solo .eyebrow{ display:block; }
.story__solo .h2{ font-size:clamp(30px,4.2vw,46px); margin-bottom:22px; }
.story__solo .lede{ font-size:17px; line-height:1.85; margin:0 0 20px; }
.story__solo .lede:last-of-type{ margin-bottom:0; }
.story__solo .stats{ justify-content:center; gap:clamp(32px,6vw,72px); margin-top:44px; padding-top:34px; }
.story__solo .stats > div{ text-align:center; }

/* social icons in the footer */
.fsoc{ display:flex; gap:9px; align-items:center; margin-top:0; }
.fsoc a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  text-decoration:none; color:var(--muted); border:1px solid var(--line, rgba(232,168,74,.22));
  transition:all .25s cubic-bezier(.4,0,.2,1); }
.fsoc a svg{ width:16px; height:16px; }
.fsoc a:hover{ color:var(--onAmber); background:var(--amber); border-color:var(--amber); transform:translateY(-2px); }
@media(prefers-reduced-motion:reduce){ .fsoc a:hover{ transform:none; } }

.fsoc__label{ font-family:var(--display); font-weight:700; font-style:italic; font-size:17px; color:var(--fg); margin:26px 0 12px; }
.fbar a{ text-transform:none; letter-spacing:.02em; }

/* stop horizontal drag on mobile: the scroll container is <html>, not <body>,
   so the clip has to be applied to both */
/* overflow-x:clip stops sideways drag WITHOUT creating a scroll container,
   so position:sticky keeps working (overflow-x:hidden would break it) */
html, body{ max-width:100%; overflow-x:clip; overscroll-behavior-x:none; }

/* VIP action — brand red from the logo, distinct from the amber call button */
.btn--vip{ background:#8E1B14; color:#F7F0E6; border-color:#8E1B14; }
.btn--vip:hover{ background:#A82A21; border-color:#A82A21; }

/* closing call-to-action */
.vfoot{ padding:clamp(56px,8vw,92px) 0; text-align:center; background:var(--bg); }
.vfoot h2{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,36px); line-height:1.15; letter-spacing:-.02em; margin:0 0 14px; }
.vfoot p{ font-size:16.5px; line-height:1.8; color:var(--muted); max-width:560px; margin:0 auto 28px; }
.vfoot__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* land below the sticky nav, not under it, when arriving at #locations */
#locations{ scroll-margin-top:calc(var(--navH, 88px) + 18px); }
@media(max-width:640px){ #locations{ scroll-margin-top:140px; } }