:root{
  /* --line and --rule are the same hairline colour under two names;
     both are defined so rules shared between pages always resolve */
  --line:rgba(232,168,74,.22);
  --bg:#231D19; --bg-menu:#191411; --bg-deep:#120E0C;
  --fg:#F7F0E6; --muted:rgba(247,240,230,.62); --mute2:rgba(247,240,230,.52);
  --amber:#E8A84A; --amber-lt:#F2C06A; --amber-dim:#B98A38; --onAmber:#241B12;
  --rule:rgba(232,168,74,.16); --rule-2:rgba(247,240,230,.09); --line-hi:rgba(232,168,74,.5);
  --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);
  --navH:88px; --railH:56px;
}
*,*::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.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
button,input{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:3px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.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--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); }

/* ---------- utility bar ---------- */
 .lpill--off{ color:var(--mute2); }
.dot-s--off{ background:var(--rose); }
@media(max-width:600px){   }

/* ---------- nav ---------- */
.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); }
.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; }
}
/* two-row nav on small screens is taller — keep the rail and anchors clear */
@media(max-width:640px){
  :root{ --navH:126px; }
}

/* ---------- page head ---------- */
.mhead{ background:var(--bg); padding:clamp(48px,7vw,84px) 0 clamp(26px,3.5vw,38px); text-align:center; }
.eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--amber-dim); margin:0 0 20px; }
.mtitle{ font-family:var(--display); font-weight:600; font-size:clamp(40px,5.6vw,66px); line-height:1.02; letter-spacing:-.028em; margin:0 0 14px; font-variation-settings:"SOFT" 26,"WONK" 1; }
.mhan{ font-family:var(--han-s); font-size:clamp(15px,1.8vw,19px); letter-spacing:.42em; color:var(--amber); opacity:.85; margin:0 0 24px; text-indent:.42em; }
.mrule{ width:56px; height:1px; background:var(--line-hi); margin:0 auto 24px; }
.mnote{ font-size:16px; color:var(--muted); margin:0 auto 32px; max-width:520px; line-height:1.75; }

.tools{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center; }
.search{ position:relative; flex:1 1 300px; max-width:420px; }
.search input{
  width:100%; font-size:15.5px; padding:14px 44px 14px 44px;
  border:1px solid var(--rule); border-radius:999px;
  background:transparent; color:var(--fg); transition:all .22s; text-align:center;
}
.search input:focus{ border-color:var(--line-hi); outline:none; text-align:left; }
/* hide the browser's built-in clear control */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration,
.search input::-webkit-search-results-button{ -webkit-appearance:none; appearance:none; display:none; }
.search input::-ms-clear{ display:none; width:0; height:0; }
.search__x{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--mute2); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:19px; line-height:1; display:none; }
.search__x:hover{ color:var(--amber); }
.search.has-val .search__x{ display:block; }
.search input::placeholder{ color:var(--mute2); }
.search__ico{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--mute2); pointer-events:none; }
.search.has-val input{ text-align:left; }
.count{ font-size:12px; color:var(--mute2); font-variant-numeric:tabular-nums; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }

/* ---------- category rail ---------- */
.rail{ position:sticky; top:var(--navH); z-index:60; background:rgba(25,20,17,.97); backdrop-filter:blur(16px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.rail__wrap{ position:relative; max-width:var(--wrap); margin:0 auto; }
.rail__scroll{
  padding:0 var(--gut); display:flex; gap:0; overflow-x:auto;
  height:var(--railH); align-items:stretch;
  scroll-behavior:smooth; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none;
  user-select:none; -webkit-user-select:none;
}
.rail__scroll::-webkit-scrollbar{ display:none; }
.rail__scroll.is-drag{ cursor:grabbing; scroll-behavior:auto; }

/* edge fades signal there is more to see */
.rail__fade{ position:absolute; top:0; bottom:0; width:64px; pointer-events:none; opacity:0; transition:opacity .25s; z-index:2; }
.rail__fade--l{ left:0; background:linear-gradient(90deg, rgba(25,20,17,.99), rgba(25,20,17,0)); }
.rail__fade--r{ right:0; background:linear-gradient(270deg, rgba(25,20,17,.99), rgba(25,20,17,0)); }
.rail__fade.is-on{ opacity:1; }

/* arrows for mouse users */
.rail__arw{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--rule); background:rgba(25,20,17,.96);
  color:var(--muted); cursor:pointer; display:none; place-items:center;
  transition:all .2s; padding:0;
}
.rail__arw svg{ width:13px; height:13px; }
.rail__arw:hover{ border-color:var(--amber); color:var(--amber); }
.rail__arw.is-on{ display:grid; }
.rail__arw--l{ left:8px; }
.rail__arw--r{ right:8px; }
@media(max-width:700px){ .rail__arw{ display:none !important; } }
.rail a{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  text-decoration:none; white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:0 20px 3px; color:var(--mute2);
  position:relative; z-index:2;
  transition:color .22s;
}
/* the Chinese label shifts the tab width when its webfont finishes loading;
   size-adjust keeps the fallback close enough that nothing moves */
.rail a i{ font-style:normal; font-family:var(--han-n); font-size:12.5px;
  letter-spacing:.06em; opacity:.6; font-size-adjust:0.52; }
.rail a:hover{ color:var(--amber); }
.rail a.is-active{ color:var(--amber); }
.rail a.is-active::after{
  content:""; position:absolute; left:20px; right:20px; bottom:0;
  height:2px; background:var(--amber); border-radius:2px;
}
@media(max-width:700px){ .rail a.is-active::after{ left:16px; right:16px; } }
.rail a.is-active i{ opacity:1; }

/* ---------- sections ---------- */
.menu{ background:var(--bg-menu); padding:clamp(20px,3vw,32px) 0 clamp(70px,9vw,110px); }
.sec{ scroll-margin-top:calc(var(--navH) + var(--railH) + 6px); padding-top:clamp(44px,6vw,76px); }
.sec__bar{ display:flex; align-items:baseline; gap:16px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--rule); }
.sec__en{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,32px); line-height:1.1; letter-spacing:-.02em; margin:0; font-variation-settings:"SOFT" 26,"WONK" 1; }
.sec__zh{ font-family:var(--han-s); font-weight:500; font-size:clamp(17px,2vw,21px); letter-spacing:.14em; color:var(--amber); margin:0; }
.sec__n{ margin-left:auto; font-size:10.5px; font-weight:600; color:var(--mute2); font-variant-numeric:tabular-nums; letter-spacing:.14em; text-transform:uppercase; }

/* market-price note */
.mktnote{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 0 2px; font-size:14px; color:var(--muted); font-style:italic; }
.mktnote b{ font-style:normal; font-weight:700; font-size:10px; letter-spacing:.22em; color:var(--amber); border:1px solid var(--line-hi); padding:5px 11px; border-radius:2px; }
.mktnote i{ font-style:normal; font-family:var(--han-n); letter-spacing:.24em; color:var(--amber-dim); font-size:13px; }

/* ---------- item rows ---------- */
.items{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,5vw,72px); }
.sec{ overflow:visible; }
@media(max-width:900px){ .items{ grid-template-columns:1fr; } }

.item{
  display:grid;
  grid-template-columns:38px 72px 1fr auto;
  align-items:center; gap:0 16px;
  padding:15px 14px;
  margin:0 -14px;
  border-radius:8px;
  border-bottom:1px solid var(--rule-2);
  transition:background .22s;
}
.item:hover{ background:rgba(255,255,255,.045); }
.item--photo{ cursor:pointer; }

/* the numeral column — regulars order by number */
.item__no{
  font-family:var(--display); font-weight:600; font-size:15px;
  color:var(--amber-dim); text-align:right;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  transition:color .25s;
}
.item:hover .item__no{ color:var(--amber); }

.item__thumb{ width:72px; height:54px; border-radius:8px; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.025); }
.item__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.item--photo:hover .item__thumb img{ transform:scale(1.08); }
@media(prefers-reduced-motion:reduce){ .item--photo:hover .item__thumb img{ transform:none; } }
.item__glyph{ font-family:var(--han-s); font-weight:700; font-size:24px; color:rgba(232,168,74,.18); line-height:1; user-select:none; }

.item__body{ min-width:0; }
.item__en{ font-family:var(--body); font-weight:600; font-size:17px; line-height:1.35; letter-spacing:-.005em; color:var(--fg); margin:0 0 3px; }
.item__zh{ font-family:var(--han-s); font-weight:500; font-size:16px; line-height:1.4; letter-spacing:.06em; color:var(--muted); margin:0; }

.item__price{ text-align:right; font-family:var(--display); font-weight:600; font-size:17px; color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.01em; }
.item__price small{ display:block; font-family:var(--body); font-size:9.5px; font-weight:600; color:var(--mute2); letter-spacing:.14em; text-transform:uppercase; margin-top:3px; }
.item__price .mkt{ font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--amber); }

@media(max-width:520px){
  .item{ grid-template-columns:30px 60px 1fr auto; gap:0 12px; padding:14px 10px; margin:0 -10px; }
  .item__thumb{ width:60px; height:46px; border-radius:7px; }
  .item__en{ font-size:15.5px; }
  .item__zh{ font-size:14.5px; }
  .item__no{ font-size:13px; }
  .item__price{ font-size:15.5px; }
}

/* empty */
.empty{ text-align:center; padding:90px 20px; }
.empty h3{ font-family:var(--display); font-weight:600; font-size:25px; margin:0 0 10px; }
.empty p{ color:var(--mute2); margin:0 0 26px; }

/* 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(--rule); background:transparent; color:var(--muted); font-size:20px; cursor:pointer; transition:all .22s; }
.lb__x:hover{ border-color:var(--amber); color:var(--amber); }

/* to top */
.totop{ position:fixed; right:22px; bottom:22px; z-index:65; width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); background:rgba(20,15,13,.92); backdrop-filter:blur(8px); color:var(--muted); font-size:17px; cursor:pointer; opacity:0; pointer-events:none; transition:all .25s; }
.totop.is-on{ opacity:1; pointer-events:auto; }
.totop:hover{ border-color:var(--amber); 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); }
.fgrid{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
@media(max-width:800px){ .fgrid{ 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:.34em; font-size:14px; margin:0 0 18px; }
.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,.3); }
.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; }

.item{ grid-template-columns:44px 72px 1fr auto; align-items:center; }
.item__vi{ font-size:12.5px; font-style:italic; color:var(--mute2); line-height:1.4; margin:2px 0 0; }
.item__spice{ display:inline-block; margin-left:7px; color:#E0573C; font-size:12px; vertical-align:1px; }
.item__price small.card{ color:var(--mute2); font-size:9.5px; letter-spacing:.1em; }
.sec__note{ font-size:13.5px; color:var(--mute2); font-style:italic; margin:10px 0 4px; line-height:1.6; }
.fam{ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:0 22px; align-items:start; padding:20px 0; border-bottom:1px solid var(--rule-2); }
.fam__price{ font-family:var(--display); font-weight:600; font-size:27px; color:var(--amber); font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap; }
.fam__price small{ display:block; font-family:var(--body); font-size:10px; font-weight:600; color:var(--mute2); letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }
.fam__sz{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--fg); margin:0 0 8px; }
.fam__d{ font-size:14px; color:var(--muted); line-height:1.75; margin:0; }
.fam__sep{ color:var(--amber); font-weight:700; font-size:1.5em; line-height:0;
  vertical-align:-.06em; margin:0 4px; }
@media(max-width:520px){
  .item{ grid-template-columns:34px 60px 1fr auto; }
  .item__vi{ font-size:11.5px; }
  .fam{ grid-template-columns:1fr; gap:10px; }
}

/* 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; }